mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-15 11:42:15 +01:00
update dependencies, update eslint config, update optional ts props types
This commit is contained in:
Gregor Vostrak
@@ -97,55 +97,55 @@ function updateTimeEntryDescription() {
|
||||
class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
|
||||
<div class="flex flex-1 items-center pr-6">
|
||||
<input
|
||||
placeholder="What are you working on?"
|
||||
data-testid="time_entry_description"
|
||||
ref="currentTimeEntryDescriptionInput"
|
||||
v-model="tempDescription"
|
||||
@keydown.enter="startTimerIfNotActive"
|
||||
@blur="updateTimeEntryDescription"
|
||||
placeholder="What are you working on?"
|
||||
data-testid="time_entry_description"
|
||||
class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-white font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
|
||||
type="text" />
|
||||
type="text"
|
||||
@keydown.enter="startTimerIfNotActive"
|
||||
@blur="updateTimeEntryDescription" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between pl-2 shrink min-w-0">
|
||||
<div
|
||||
class="flex items-center w-[130px] @2xl:w-auto shrink min-w-0">
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
:createClient
|
||||
:canCreateProject
|
||||
:clients
|
||||
:createProject
|
||||
:currency="currency"
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
@changed="updateProject"
|
||||
:enableEstimatedTime="enableEstimatedTime"
|
||||
v-model:project="currentTimeEntry.project_id"
|
||||
v-model:task="
|
||||
currentTimeEntry.task_id
|
||||
"></TimeTrackerProjectTaskDropdown>
|
||||
"
|
||||
:create-client
|
||||
:can-create-project
|
||||
:clients
|
||||
:create-project
|
||||
:currency="currency"
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:enable-estimated-time="enableEstimatedTime"
|
||||
@changed="updateProject"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
<div class="flex items-center @2xl:space-x-2 px-2 @2xl:px-4">
|
||||
<TimeTrackerTagDropdown
|
||||
@changed="$emit('updateTimeEntry')"
|
||||
:createTag
|
||||
:tags="tags"
|
||||
v-model="
|
||||
currentTimeEntry.tags
|
||||
"></TimeTrackerTagDropdown>
|
||||
"
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
@changed="$emit('updateTimeEntry')"></TimeTrackerTagDropdown>
|
||||
<BillableToggleButton
|
||||
@changed="$emit('updateTimeEntry')"
|
||||
v-model="
|
||||
currentTimeEntry.billable
|
||||
"></BillableToggleButton>
|
||||
"
|
||||
@changed="$emit('updateTimeEntry')"></BillableToggleButton>
|
||||
</div>
|
||||
<div class="border-l border-card-border">
|
||||
<TimeTrackerRangeSelector
|
||||
@startLiveTimer="emit('startLiveTimer')"
|
||||
@stopLiveTimer="emit('stopLiveTimer')"
|
||||
@updateTimer="emit('updateTimeEntry')"
|
||||
@startTimer="emit('startTimer')"
|
||||
v-model:currentTimeEntry="currentTimeEntry"
|
||||
v-model:liveTimer="liveTimer"
|
||||
v-model:current-time-entry="currentTimeEntry"
|
||||
v-model:live-timer="liveTimer"
|
||||
@start-live-timer="emit('startLiveTimer')"
|
||||
@stop-live-timer="emit('stopLiveTimer')"
|
||||
@update-timer="emit('updateTimeEntry')"
|
||||
@start-timer="emit('startTimer')"
|
||||
@keydown.enter="
|
||||
startTimerIfNotActive
|
||||
"></TimeTrackerRangeSelector>
|
||||
@@ -156,8 +156,8 @@ function updateTimeEntryDescription() {
|
||||
class="pl-4 @2xl:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0">
|
||||
<TimeTrackerStartStop
|
||||
:active="isActive"
|
||||
@changed="onToggleButtonPress"
|
||||
size="large"></TimeTrackerStartStop>
|
||||
size="large"
|
||||
@changed="onToggleButtonPress"></TimeTrackerStartStop>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -53,8 +53,8 @@ type ClientsWithProjectsWithTasks = ClientWithProjectsWithTasks[];
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
showBadgeBorder: boolean;
|
||||
size: 'base' | 'large' | 'xlarge';
|
||||
showBadgeBorder?: boolean;
|
||||
size?: 'base' | 'large' | 'xlarge';
|
||||
projects: Project[];
|
||||
tasks: Task[];
|
||||
clients: Client[];
|
||||
@@ -63,8 +63,8 @@ const props = withDefaults(
|
||||
) => Promise<Project | undefined>;
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
currency: string;
|
||||
emptyPlaceholder: string;
|
||||
allowReset: boolean;
|
||||
emptyPlaceholder?: string;
|
||||
allowReset?: boolean;
|
||||
enableEstimatedTime: boolean;
|
||||
canCreateProject: boolean;
|
||||
class?: string;
|
||||
@@ -539,15 +539,15 @@ const showCreateProject = ref(false);
|
||||
<template>
|
||||
<div v-if="projects.length === 0 && canCreateProject">
|
||||
<Badge
|
||||
@click="showCreateProject = true"
|
||||
size="large"
|
||||
tag="button"
|
||||
class="cursor-pointer hover:bg-tertiary">
|
||||
class="cursor-pointer hover:bg-tertiary"
|
||||
@click="showCreateProject = true">
|
||||
<PlusIcon class="-ml-1 w-5"></PlusIcon>
|
||||
<span>Add new project</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<Dropdown v-else v-model="open" :closeOnContentClick="false" align="bottom">
|
||||
<Dropdown v-else v-model="open" :close-on-content-click="false" align="bottom">
|
||||
<template #trigger>
|
||||
<ProjectBadge
|
||||
ref="projectDropdownTrigger"
|
||||
@@ -570,18 +570,18 @@ const showCreateProject = ref(false);
|
||||
v-if="currentTask"
|
||||
class="w-4 lg:w-5 text-muted shrink-0"></ChevronRightIcon>
|
||||
<div
|
||||
class="min-w-0 shrink text-xs lg:text-sm truncate"
|
||||
v-if="currentTask">
|
||||
v-if="currentTask"
|
||||
class="min-w-0 shrink text-xs lg:text-sm truncate">
|
||||
{{ currentTask.name }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="project !== null && allowReset"
|
||||
class="absolute right-0 top-0 h-full flex items-center pr-3 text-text-quaternary hover:text-text-secondary"
|
||||
@click.stop="
|
||||
project = null;
|
||||
task = null;
|
||||
"
|
||||
class="absolute right-0 top-0 h-full flex items-center pr-3 text-text-quaternary hover:text-text-secondary">
|
||||
">
|
||||
<XMarkIcon class="w-5"></XMarkIcon>
|
||||
</button>
|
||||
</ProjectBadge>
|
||||
@@ -591,21 +591,21 @@ const showCreateProject = ref(false);
|
||||
v-if="open"
|
||||
:options="{ immediate: true, allowOutsideClick: true }">
|
||||
<input
|
||||
ref="searchInput"
|
||||
:value="searchValue"
|
||||
data-testid="client_dropdown_search"
|
||||
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
|
||||
placeholder="Search for a project or task..."
|
||||
@input="updateSearchValue"
|
||||
@keydown.enter.prevent="addClientIfNoneExists"
|
||||
data-testid="client_dropdown_search"
|
||||
@keydown.up.prevent="moveHighlightUp"
|
||||
@keydown.down.prevent="moveHighlightDown"
|
||||
@keydown.right.prevent="expandProject"
|
||||
@keydown.left.prevent="collapseProject"
|
||||
ref="searchInput"
|
||||
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
|
||||
placeholder="Search for a project or task..." />
|
||||
@keydown.left.prevent="collapseProject" />
|
||||
<div
|
||||
ref="dropdownViewport"
|
||||
@mousemove="mouseEnterHighlightActivated = true"
|
||||
class="min-w-[350px] max-h-[350px] overflow-y-scroll relative">
|
||||
class="min-w-[350px] max-h-[350px] overflow-y-scroll relative"
|
||||
@mousemove="mouseEnterHighlightActivated = true">
|
||||
<template
|
||||
v-for="client in filteredResults"
|
||||
:key="client.id">
|
||||
@@ -623,8 +623,8 @@ const showCreateProject = ref(false);
|
||||
role="option"
|
||||
class="px-1 py-0.5 cursor-default"
|
||||
:value="projectWithTasks.id"
|
||||
@click="selectProject(projectWithTasks.id)"
|
||||
:data-project-id="projectWithTasks.id">
|
||||
:data-project-id="projectWithTasks.id"
|
||||
@click="selectProject(projectWithTasks.id)">
|
||||
<div
|
||||
class="rounded-lg"
|
||||
:class="{
|
||||
@@ -637,34 +637,34 @@ const showCreateProject = ref(false);
|
||||
:selected="
|
||||
isProjectSelected(projectWithTasks)
|
||||
"
|
||||
:name="projectWithTasks.name"
|
||||
:color="projectWithTasks.color"
|
||||
@mouseenter="
|
||||
setHighlightItemId(
|
||||
projectWithTasks.id
|
||||
)
|
||||
"
|
||||
:name="projectWithTasks.name"
|
||||
:color="projectWithTasks.color">
|
||||
">
|
||||
<template #actions>
|
||||
<button
|
||||
tabindex="-1"
|
||||
v-if="
|
||||
projectWithTasks.tasks
|
||||
.length > 0
|
||||
"
|
||||
@click.prevent.stop="
|
||||
() => {
|
||||
projectWithTasks.expanded =
|
||||
!projectWithTasks.expanded;
|
||||
searchInput?.focus();
|
||||
}
|
||||
"
|
||||
tabindex="-1"
|
||||
class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs"
|
||||
:class="{
|
||||
'bg-white/5 text-text-secondary':
|
||||
projectWithTasks.expanded,
|
||||
'hover:bg-white/5 hover:text-text-secondary text-text-tertiary':
|
||||
!projectWithTasks.expanded,
|
||||
}">
|
||||
}"
|
||||
@click.prevent.stop="
|
||||
() => {
|
||||
projectWithTasks.expanded =
|
||||
!projectWithTasks.expanded;
|
||||
searchInput?.focus();
|
||||
}
|
||||
">
|
||||
<span
|
||||
>{{
|
||||
projectWithTasks.tasks
|
||||
@@ -689,14 +689,14 @@ const showCreateProject = ref(false);
|
||||
<div
|
||||
v-for="task in projectWithTasks.tasks"
|
||||
:key="task.id"
|
||||
@click="selectTask(task.id)"
|
||||
@mouseenter="setHighlightItemId(task.id)"
|
||||
:data-task-id="task.id"
|
||||
:class="{
|
||||
'bg-card-background-active':
|
||||
task.id === highlightedItemId,
|
||||
}"
|
||||
class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
|
||||
class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
|
||||
@click="selectTask(task.id)"
|
||||
@mouseenter="setHighlightItemId(task.id)">
|
||||
<MinusIcon
|
||||
class="w-3 h-3 text-text-quaternary"></MinusIcon>
|
||||
<span>{{ task.name }}</span>
|
||||
@@ -709,11 +709,11 @@ const showCreateProject = ref(false);
|
||||
v-if="canCreateProject"
|
||||
class="hover:bg-card-background-active rounded-b-lg">
|
||||
<button
|
||||
class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator"
|
||||
@click="
|
||||
open = false;
|
||||
showCreateProject = true;
|
||||
"
|
||||
class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator">
|
||||
">
|
||||
<PlusCircleIcon
|
||||
class="w-5 flex-shrink-0 text-icon-default"></PlusCircleIcon>
|
||||
<span>Create new Project</span>
|
||||
@@ -723,12 +723,12 @@ const showCreateProject = ref(false);
|
||||
</template>
|
||||
</Dropdown>
|
||||
<ProjectCreateModal
|
||||
:createClient
|
||||
:enableEstimatedTime="enableEstimatedTime"
|
||||
v-model:show="showCreateProject"
|
||||
:create-client
|
||||
:enable-estimated-time="enableEstimatedTime"
|
||||
:currency="currency"
|
||||
:clients="clients"
|
||||
:createProject
|
||||
v-model:show="showCreateProject"></ProjectCreateModal>
|
||||
:create-project></ProjectCreateModal>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -170,31 +170,31 @@ function closeAndFocusInput() {
|
||||
<div class="relative">
|
||||
<Dropdown
|
||||
v-model="open"
|
||||
@submit="open = false"
|
||||
align="bottom"
|
||||
:close-on-content-click="false">
|
||||
:close-on-content-click="false"
|
||||
@submit="open = false">
|
||||
<template #trigger>
|
||||
<input
|
||||
ref="inputField"
|
||||
v-model="currentTime"
|
||||
placeholder="00:00:00"
|
||||
data-testid="time_entry_time"
|
||||
class="w-[110px] lg:w-[130px] h-full text-white py-2.5 rounded-lg border-border-secondary border text-center px-4 text-base lg:text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition"
|
||||
type="text"
|
||||
@focus="pauseLiveTimerUpdate"
|
||||
@focusin="openModalOnTab"
|
||||
@keydown.exact.tab="focusNextElement"
|
||||
@keydown.exact.shift.tab="open = false"
|
||||
ref="inputField"
|
||||
data-testid="time_entry_time"
|
||||
@blur="updateTimerAndStartLiveTimerUpdate"
|
||||
@keydown.enter="onTimeEntryEnterPress"
|
||||
v-model="currentTime"
|
||||
class="w-[110px] lg:w-[130px] h-full text-white py-2.5 rounded-lg border-border-secondary border text-center px-4 text-base lg:text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition"
|
||||
type="text" />
|
||||
@keydown.enter="onTimeEntryEnterPress" />
|
||||
</template>
|
||||
<template #content>
|
||||
<div ref="timeRangeSelector">
|
||||
<TimeRangeSelector
|
||||
@changed="updateTimeRange"
|
||||
@close="closeAndFocusInput"
|
||||
:start="startTime"
|
||||
:end="null">
|
||||
:end="null"
|
||||
@changed="updateTimeRange"
|
||||
@close="closeAndFocusInput">
|
||||
</TimeRangeSelector>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -9,7 +9,7 @@ const emit = defineEmits<{
|
||||
changed: [];
|
||||
}>();
|
||||
|
||||
const model = defineModel({
|
||||
const model = defineModel<string[]>({
|
||||
default: [],
|
||||
});
|
||||
const iconColorClasses = computed(() => {
|
||||
@@ -27,10 +27,10 @@ defineProps<{
|
||||
|
||||
<template>
|
||||
<TagDropdown
|
||||
:createTag
|
||||
@changed="emit('changed')"
|
||||
v-model="model"
|
||||
:tags="tags">
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
@changed="emit('changed')">
|
||||
<template #trigger>
|
||||
<button
|
||||
data-testid="tag_dropdown"
|
||||
|
||||
Reference in New Issue
Block a user