adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 00:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove the measure row logic and rely on static values only for the

Browse Source 
virtualizer and remove duplicated focus trap to avoid infinite loop in
project task dropdown
This commit is contained in:
Gregor Vostrak
2026-06-30 14:24:28 +02:00
parent bc5af14a75
commit 61a0a7db5a
1 changed files with 7 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,7 +30,6 @@ const project = defineModel<string | null>('project', {
const searchInput = ref<HTMLInputElement | null>(null); const searchInput = ref<HTMLInputElement | null>(null);
const open = ref(false); const open = ref(false);
const dropdownViewport = ref<HTMLElement | null>(null); const dropdownViewport = ref<HTMLElement | null>(null);
import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component';
const searchValue = ref(''); const searchValue = ref('');
@@ -117,15 +116,17 @@ const flatRows = computed<FlatRow[]>(() => {
return rows; return rows;
}); });
const ROW_HEIGHT = { client: 28, project: 36, task: 32 } as const;
const rowVirtualizer = useVirtualizer( const rowVirtualizer = useVirtualizer(
computed(() => ({ computed(() => ({
count: flatRows.value.length, count: flatRows.value.length,
getScrollElement: () => dropdownViewport.value, getScrollElement: () => dropdownViewport.value,
estimateSize: (index: number) => { estimateSize: (index: number) => {
const row = flatRows.value[index]; const row = flatRows.value[index];
if (row?.kind === 'client') return 28; if (row?.kind === 'client') return ROW_HEIGHT.client;
if (row?.kind === 'task') return 32; if (row?.kind === 'task') return ROW_HEIGHT.task;
return 38; return ROW_HEIGHT.project;
}, },
getItemKey: (index: number) => flatRows.value[index]?.key ?? index, getItemKey: (index: number) => flatRows.value[index]?.key ?? index,
overscan: 12, overscan: 12,
@@ -141,12 +142,6 @@ const visibleRows = computed(() =>
})) }))
); );
function measureRow(el: unknown): void {
if (el instanceof HTMLElement) {
rowVirtualizer.value.measureElement(el);
}
}
// Lookup maps so filtering is O(projects + tasks + clients) instead of // Lookup maps so filtering is O(projects + tasks + clients) instead of
// O(projects × (tasks + clients)). They are rebuilt only when the underlying task/client // O(projects × (tasks + clients)). They are rebuilt only when the underlying task/client
// props change, not on every keystroke. // props change, not on every keystroke.
@@ -599,7 +594,7 @@ const showCreateProject = ref(false);
</slot> </slot>
</template> </template>
<template #content> <template #content>
<UseFocusTrap v-if="open" :options="{ immediate: true, allowOutsideClick: true }"> <div v-if="open">
<input <input
ref="searchInput" ref="searchInput"
:value="searchValue" :value="searchValue"
@@ -621,8 +616,6 @@ const showCreateProject = ref(false);
<div <div
v-for="{ virtualRow, row } in visibleRows" v-for="{ virtualRow, row } in visibleRows"
:key="row.key" :key="row.key"
:ref="measureRow"
:data-index="virtualRow.index"
class="absolute left-0 top-0 w-full" class="absolute left-0 top-0 w-full"
:style="{ transform: `translateY(${virtualRow.start}px)` }"> :style="{ transform: `translateY(${virtualRow.start}px)` }">
<div <div
@@ -711,7 +704,7 @@ const showCreateProject = ref(false);
<span>Create new Project</span> <span>Create new Project</span>
</button> </button>
</div> </div>
</UseFocusTrap> </div>
</template> </template>
</Dropdown> </Dropdown>
<ProjectCreateModal <ProjectCreateModal