fix focus & click behaviour of time range selector and task project dropdown modal

This commit is contained in:
Gregor Vostrak
2024-06-24 14:31:24 +02:00
parent fc0a0615cb
commit eefa7c8ca8
5 changed files with 17 additions and 4 deletions

View File

@@ -33,6 +33,7 @@ const open = ref(false);
@changed=" @changed="
(newStart, newEnd) => emit('changed', newStart, newEnd) (newStart, newEnd) => emit('changed', newStart, newEnd)
" "
focus
:start="start" :start="start"
:end="end"> :end="end">
</TimeRangeSelector> </TimeRangeSelector>

View File

@@ -9,6 +9,7 @@ import dayjs from 'dayjs';
const props = defineProps<{ const props = defineProps<{
start: string; start: string;
end: string | null; end: string | null;
focus?: boolean;
}>(); }>();
// The timestamps for the changed event are UTC // The timestamps for the changed event are UTC
@@ -56,7 +57,7 @@ watch(focused, (newValue, oldValue) => {
<div class="space-y-1"> <div class="space-y-1">
<TimePicker <TimePicker
data-testid="time_entry_range_start" data-testid="time_entry_range_start"
focus :focus
@changed="updateTimeEntry" @changed="updateTimeEntry"
v-model="tempStart"></TimePicker> v-model="tempStart"></TimePicker>
<DatePicker <DatePicker

View File

@@ -314,7 +314,7 @@ const showCreateProject = ref(false);
<span>Add new project</span> <span>Add new project</span>
</Badge> </Badge>
</div> </div>
<Dropdown v-else v-model="open" :closeOnContentClick="true" align="bottom"> <Dropdown v-else v-model="open" :closeOnContentClick="false" align="bottom">
<template #trigger> <template #trigger>
<ProjectBadge <ProjectBadge
ref="projectDropdownTrigger" ref="projectDropdownTrigger"
@@ -340,6 +340,7 @@ const showCreateProject = ref(false);
:value="searchValue" :value="searchValue"
@input="updateSearchValue" @input="updateSearchValue"
@keydown.enter="addClientIfNoneExists" @keydown.enter="addClientIfNoneExists"
@click.prevent="searchInput?.focus()"
data-testid="client_dropdown_search" data-testid="client_dropdown_search"
@keydown.up.prevent="moveHighlightUp" @keydown.up.prevent="moveHighlightUp"
@keydown.down.prevent="moveHighlightDown" @keydown.down.prevent="moveHighlightDown"

View File

@@ -119,6 +119,13 @@ async function updateTimeRange(newStart: string) {
} }
} }
} }
const startTime = computed(() => {
if (currentTimeEntry.value.start && currentTimeEntry.value.start !== '') {
return currentTimeEntry.value.start;
}
return dayjs().utc().format();
});
</script> </script>
<template> <template>
@@ -142,7 +149,7 @@ async function updateTimeRange(newStart: string) {
<template #content> <template #content>
<TimeRangeSelector <TimeRangeSelector
@changed="updateTimeRange" @changed="updateTimeRange"
:start="currentTimeEntry.start" :start="startTime"
:end="null"> :end="null">
</TimeRangeSelector> </TimeRangeSelector>
</template> </template>

View File

@@ -152,7 +152,10 @@ function switchToTimeEntryOrganization() {
"></BillableToggleButton> "></BillableToggleButton>
</div> </div>
<div class="border-l border-card-border"> <div class="border-l border-card-border">
<TimeTrackerRangeSelector></TimeTrackerRangeSelector> <TimeTrackerRangeSelector
@keydown.enter="
startTimerIfNotActive
"></TimeTrackerRangeSelector>
</div> </div>
</div> </div>
</div> </div>