adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-10-07 21:33:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

move project reset button into mass update modal and fix

Browse Source 
TimeTrackerProjectTaskDropdown trigger focus
This commit is contained in:
Gregor Vostrak
2026-09-16 17:51:10 +02:00
parent 3ade20887b
commit b4911ebddd
2 changed files with 81 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
resources/js/packages/ui/src/TimeEntry/TimeEntryMassUpdateModal.vue
View File

@@ -16,6 +16,7 @@ import {
} from '@/packages/api/src'; } from '@/packages/api/src';
import { Checkbox } from '@/packages/ui/src'; import { Checkbox } from '@/packages/ui/src';
import { TagIcon, ExclamationTriangleIcon } from '@heroicons/vue/20/solid'; import { TagIcon, ExclamationTriangleIcon } from '@heroicons/vue/20/solid';
import { XMarkIcon } from '@heroicons/vue/16/solid';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
import { Button } from '@/packages/ui/src/Buttons'; import { Button } from '@/packages/ui/src/Buttons';
import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue'; import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
@@ -60,6 +61,13 @@ const projectId = ref<string | null>(null);
const billable = ref<boolean | undefined>(undefined); const billable = ref<boolean | undefined>(undefined);
const selectedTags = ref<string[]>([]); const selectedTags = ref<string[]>([]);
// Clearing the project puts both fields back to "leave unchanged", the same state the form
// returns to after a successful submit.
function resetProject() {
projectId.value = null;
taskId.value = undefined;
}
const timeEntryBillable = computed({ const timeEntryBillable = computed({
get: () => { get: () => {
if (billable.value === undefined) { if (billable.value === undefined) {
@@ -182,42 +190,59 @@ const showBreakWarning = computed(
</Field> </Field>
<Field> <Field>
<FieldLabel for="project">Project</FieldLabel> <FieldLabel for="project">Project</FieldLabel>
<TimeTrackerProjectTaskDropdown <div class="flex items-center gap-1 min-w-0">
v-model:project="projectId" <!-- the dropdown declares its own `class` prop, which goes to the
v-model:task="taskId" trigger button, so the growing has to happen on a wrapper -->
variant="input" <div class="flex-1 min-w-0">
align="start" <TimeTrackerProjectTaskDropdown
size="default" v-model:project="projectId"
:clients v-model:task="taskId"
:create-project variant="input"
:create-client align="start"
:currency="currency" size="default"
:organization-billable-rate="organizationBillableRate" :clients
:can-create-project :create-project
empty-placeholder="Select project..." :create-client
allow-reset :currency="currency"
:enable-estimated-time :organization-billable-rate="organizationBillableRate"
:projects="projects" :can-create-project
:tasks="tasks"></TimeTrackerProjectTaskDropdown> empty-placeholder="Select project..."
:enable-estimated-time
:projects="projects"
:tasks="tasks"></TimeTrackerProjectTaskDropdown>
</div>
<button
v-if="projectId !== null"
type="button"
data-testid="project_reset_button"
class="p-1 rounded hover:bg-quaternary text-text-tertiary hover:text-text-primary"
@click="resetProject">
<XMarkIcon class="w-4 h-4" />
</button>
</div>
</Field> </Field>
<Field> <Field>
<FieldLabel>Tag</FieldLabel> <FieldLabel>Tag</FieldLabel>
<div class="flex space-x-5"> <div class="flex items-center space-x-5">
<TagDropdown <!-- the dropdown root is `min-w-0`, so as a flex item it would shrink
v-model="selectedTags" below its trigger and let the button overflow into the checkbox -->
:create-tag <div class="shrink-0">
:tags="tags" <TagDropdown
:show-no-tag-option="false"> v-model="selectedTags"
<template #trigger> :create-tag
<Button variant="input" :disabled="removeAllTags"> :tags="tags"
<TagIcon class="h-4 text-icon-default" /> :show-no-tag-option="false">
<span v-if="selectedTags.length > 0"> <template #trigger>
Set {{ selectedTags.length }} tags <Button variant="input" :disabled="removeAllTags">
</span> <TagIcon class="h-4 text-icon-default" />
<span v-else>Select Tags...</span> <span v-if="selectedTags.length > 0">
</Button> Set {{ selectedTags.length }} tags
</template> </span>
</TagDropdown> <span v-else>Select Tags...</span>
</Button>
</template>
</TagDropdown>
</div>
<Field orientation="horizontal"> <Field orientation="horizontal">
<Checkbox id="no_tags" v-model:checked="removeAllTags"></Checkbox> <Checkbox id="no_tags" v-model:checked="removeAllTags"></Checkbox>
<FieldLabel for="no_tags">Remove all tags</FieldLabel> <FieldLabel for="no_tags">Remove all tags</FieldLabel>

66
resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
View File

@@ -12,7 +12,7 @@ import type {
Client, Client,
} from '@/packages/api/src'; } from '@/packages/api/src';
import { PlusCircleIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/16/solid'; import { PlusCircleIcon, MinusIcon } from '@heroicons/vue/16/solid';
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue'; import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
import { Button } from '@/packages/ui/src/Buttons'; import { Button } from '@/packages/ui/src/Buttons';
@@ -58,7 +58,6 @@ const props = withDefaults(
createClient: (client: CreateClientBody) => Promise<Client | undefined>; createClient: (client: CreateClientBody) => Promise<Client | undefined>;
currency: string; currency: string;
emptyPlaceholder?: string; emptyPlaceholder?: string;
allowReset?: boolean;
noProjectValue?: string | null; noProjectValue?: string | null;
enableEstimatedTime: boolean; enableEstimatedTime: boolean;
organizationBillableRate: number | null; organizationBillableRate: number | null;
@@ -70,7 +69,6 @@ const props = withDefaults(
}>(), }>(),
{ {
emptyPlaceholder: 'No Project', emptyPlaceholder: 'No Project',
allowReset: false,
noProjectValue: NO_PROJECT_ID, noProjectValue: NO_PROJECT_ID,
variant: 'ghost', variant: 'ghost',
align: 'center', align: 'center',
@@ -558,12 +556,6 @@ function selectProject(projectId: string) {
emit('changed', project.value, task.value); emit('changed', project.value, task.value);
} }
function resetProject() {
project.value = null;
task.value = null;
emit('changed', project.value, task.value);
}
const showCreateProject = ref(false); const showCreateProject = ref(false);
</script> </script>
@@ -571,40 +563,28 @@ const showCreateProject = ref(false);
<Dropdown v-model="open" :close-on-content-click="false" :align="props.align"> <Dropdown v-model="open" :close-on-content-click="false" :align="props.align">
<template #trigger> <template #trigger>
<slot name="trigger"> <slot name="trigger">
<div class="flex items-center gap-1"> <Button
<Button :variant="props.variant"
:variant="props.variant" :size="props.size"
:size="props.size" :class="twMerge('w-full justify-start overflow-hidden', props.class)">
:class="twMerge('w-full justify-start overflow-hidden', props.class)"> <div
<div class="w-2.5 h-2.5 rounded-full shrink-0"
class="w-2.5 h-2.5 rounded-full shrink-0" :style="{ backgroundColor: selectedProjectColor }"></div>
:style="{ backgroundColor: selectedProjectColor }"></div> <span class="truncate shrink-[1] text-text-primary">{{
<span class="truncate shrink-[1] text-text-primary">{{ selectedProjectName
selectedProjectName }}</span>
}}</span> <template v-if="currentTask">
<template v-if="currentTask"> <ChevronRightIcon class="!size-3 text-text-primary shrink-0 -mx-1" />
<ChevronRightIcon class="!size-3 text-text-primary shrink-0 -mx-1" /> <span class="truncate shrink-[100]">{{ currentTask.name }}</span>
<span class="truncate shrink-[100]">{{ currentTask.name }}</span> </template>
</template> <template v-if="selectedClientName">
<template v-if="selectedClientName"> <span class="dark:text-text-tertiary text-text-quaternary shrink-0">•</span>
<span class="dark:text-text-tertiary text-text-quaternary shrink-0" <span
>•</span class="truncate shrink-[200] dark:text-text-tertiary text-text-quaternary"
> >{{ selectedClientName }}</span
<span >
class="truncate shrink-[200] dark:text-text-tertiary text-text-quaternary" </template>
>{{ selectedClientName }}</span </Button>
>
</template>
</Button>
<button
v-if="allowReset && project !== null"
type="button"
data-testid="project_reset_button"
class="p-1 rounded hover:bg-quaternary text-text-tertiary hover:text-text-primary"
@click.stop="resetProject">
<XMarkIcon class="w-4 h-4" />
</button>
</div>
</slot> </slot>
</template> </template>
<template #content> <template #content>