mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-08 00:02:15 +01:00
add virtualizer to ProjectTaskDropdown component to handle bigger
project lists
This commit is contained in:
Gregor Vostrak
@@ -57,6 +57,7 @@
|
||||
"@floating-ui/vue": "^1.1.4",
|
||||
"@heroicons/vue": "^2.1.5",
|
||||
"@vitejs/plugin-vue": "^5.1.2 || ^6.0.0",
|
||||
"@tanstack/vue-virtual": "^3.13.24",
|
||||
"@vueuse/core": "^12.5.0 || ^14.0.0",
|
||||
"@vueuse/integrations": "^12.5.0 || ^14.0.0",
|
||||
"focus-trap": "^7.0.0 || ^8.0.0",
|
||||
|
||||
@@ -9,9 +9,9 @@ defineProps<{
|
||||
<template>
|
||||
<div
|
||||
class="flex justify-between items-center w-full text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
|
||||
<div class="flex space-x-3 items-center px-3 py-1.5">
|
||||
<div :style="{ backgroundColor: color }" class="w-3 h-3 rounded-full"></div>
|
||||
<span>{{ name }}</span>
|
||||
<div class="flex space-x-3 items-center px-3 py-1.5 min-w-0">
|
||||
<div :style="{ backgroundColor: color }" class="w-3 h-3 rounded-full shrink-0"></div>
|
||||
<span class="truncate">{{ name }}</span>
|
||||
</div>
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
|
||||
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { useVirtualizer } from '@tanstack/vue-virtual';
|
||||
import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
|
||||
import type {
|
||||
CreateClientBody,
|
||||
@@ -85,72 +86,123 @@ const filteredProjects = computed<ProjectWithTasks[]>(() => {
|
||||
return filteredResults.value.map((client) => client.projects).flat();
|
||||
});
|
||||
|
||||
type FlatRow =
|
||||
| { kind: 'client'; key: string; name: string }
|
||||
| { kind: 'project'; key: string; project: ProjectWithTasks }
|
||||
| { kind: 'task'; key: string; task: Task };
|
||||
|
||||
// Flatten the grouped client → project → task tree into a single ordered list so it can be
|
||||
// virtualized: only the rows currently inside the viewport are mounted, which keeps the
|
||||
// dropdown responsive even with thousands of projects/tasks.
|
||||
const flatRows = computed<FlatRow[]>(() => {
|
||||
const rows: FlatRow[] = [];
|
||||
for (const client of filteredResults.value) {
|
||||
// The "No Project" group renders its project inline without a client header.
|
||||
if (client.id !== 'no_project_no_client') {
|
||||
rows.push({ kind: 'client', key: 'client-' + client.id, name: client.name });
|
||||
}
|
||||
for (const projectWithTasks of client.projects) {
|
||||
rows.push({
|
||||
kind: 'project',
|
||||
key: 'project-' + projectWithTasks.id,
|
||||
project: projectWithTasks,
|
||||
});
|
||||
if (projectWithTasks.expanded) {
|
||||
for (const taskItem of projectWithTasks.tasks) {
|
||||
rows.push({ kind: 'task', key: 'task-' + taskItem.id, task: taskItem });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return rows;
|
||||
});
|
||||
|
||||
const rowVirtualizer = useVirtualizer(
|
||||
computed(() => ({
|
||||
count: flatRows.value.length,
|
||||
getScrollElement: () => dropdownViewport.value,
|
||||
estimateSize: (index: number) => {
|
||||
const row = flatRows.value[index];
|
||||
if (row?.kind === 'client') return 28;
|
||||
if (row?.kind === 'task') return 32;
|
||||
return 38;
|
||||
},
|
||||
getItemKey: (index: number) => flatRows.value[index]?.key ?? index,
|
||||
overscan: 12,
|
||||
}))
|
||||
);
|
||||
|
||||
const totalSize = computed(() => rowVirtualizer.value.getTotalSize());
|
||||
|
||||
const visibleRows = computed(() =>
|
||||
rowVirtualizer.value.getVirtualItems().map((virtualRow) => ({
|
||||
virtualRow,
|
||||
row: flatRows.value[virtualRow.index]!,
|
||||
}))
|
||||
);
|
||||
|
||||
function measureRow(el: unknown): void {
|
||||
if (el instanceof HTMLElement) {
|
||||
rowVirtualizer.value.measureElement(el);
|
||||
}
|
||||
}
|
||||
|
||||
// Lookup maps so filtering is O(projects + tasks + clients) instead of
|
||||
// O(projects × (tasks + clients)). They are rebuilt only when the underlying task/client
|
||||
// props change, not on every keystroke.
|
||||
const tasksByProject = computed(() => {
|
||||
const map = new Map<string, Task[]>();
|
||||
for (const taskItem of props.tasks) {
|
||||
const list = map.get(taskItem.project_id);
|
||||
if (list) {
|
||||
list.push(taskItem);
|
||||
} else {
|
||||
map.set(taskItem.project_id, [taskItem]);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
const clientsById = computed(() => {
|
||||
const map = new Map<string, Client>();
|
||||
for (const clientItem of props.clients) {
|
||||
map.set(clientItem.id, clientItem);
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
function addProjectToFilterObject(
|
||||
tempFilteredClients: ClientsWithProjectsWithTasks,
|
||||
groupIndexByKey: Map<string, number>,
|
||||
project: Project,
|
||||
filteredTasks: Task[],
|
||||
expanded = false
|
||||
) {
|
||||
// check if client already exists in filter array
|
||||
const projectClientIndex = tempFilteredClients.findIndex(
|
||||
(client) => client.id === project.client_id
|
||||
);
|
||||
const client = project.client_id ? clientsById.value.get(project.client_id) : undefined;
|
||||
const groupKey = client ? client.id : 'no_client';
|
||||
const newProject: ProjectWithTasks = { ...project, expanded, tasks: filteredTasks };
|
||||
|
||||
const client = props.clients.find((client) => client.id === project.client_id);
|
||||
// O(1) group lookup instead of scanning the accumulating array for every project.
|
||||
const existingIndex = groupIndexByKey.get(groupKey);
|
||||
if (existingIndex !== undefined) {
|
||||
tempFilteredClients[existingIndex]!.projects.push(newProject);
|
||||
return;
|
||||
}
|
||||
|
||||
if (projectClientIndex !== -1) {
|
||||
// client already exists in filter array
|
||||
tempFilteredClients[projectClientIndex]!.projects.push({
|
||||
...project,
|
||||
expanded: expanded,
|
||||
tasks: filteredTasks,
|
||||
});
|
||||
} else if (client) {
|
||||
// project has client but is not already in filter array
|
||||
// client is not yet in filter array
|
||||
tempFilteredClients.push({
|
||||
...client,
|
||||
projects: [
|
||||
{
|
||||
...project,
|
||||
expanded: expanded,
|
||||
tasks: filteredTasks,
|
||||
},
|
||||
],
|
||||
});
|
||||
groupIndexByKey.set(groupKey, tempFilteredClients.length);
|
||||
if (client) {
|
||||
tempFilteredClients.push({ ...client, projects: [newProject] });
|
||||
} else {
|
||||
// project has no client
|
||||
const customNoClientId = 'no_client';
|
||||
const noClientIndex = tempFilteredClients.findIndex(
|
||||
(client) => client.id === customNoClientId
|
||||
);
|
||||
|
||||
if (noClientIndex !== -1) {
|
||||
// no client group already exists in filter array
|
||||
tempFilteredClients[noClientIndex]!.projects.push({
|
||||
...project,
|
||||
expanded: expanded,
|
||||
tasks: filteredTasks,
|
||||
});
|
||||
} else {
|
||||
// no client group is not yet in filter array
|
||||
tempFilteredClients.push({
|
||||
id: customNoClientId,
|
||||
name: 'No Client',
|
||||
color: 'var(--theme-color-icon-default)',
|
||||
created_at: '',
|
||||
updated_at: '',
|
||||
value: '',
|
||||
is_archived: false,
|
||||
projects: [
|
||||
{
|
||||
...project,
|
||||
expanded: expanded,
|
||||
tasks: filteredTasks,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
tempFilteredClients.push({
|
||||
id: 'no_client',
|
||||
name: 'No Client',
|
||||
color: 'var(--theme-color-icon-default)',
|
||||
created_at: '',
|
||||
updated_at: '',
|
||||
value: '',
|
||||
is_archived: false,
|
||||
projects: [newProject],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -186,26 +238,22 @@ function updateFilteredResults() {
|
||||
});
|
||||
}
|
||||
|
||||
const searchTerm = searchValue.value?.toLowerCase()?.trim() || '';
|
||||
const groupIndexByKey = new Map<string, number>();
|
||||
|
||||
for (const filterProject of props.projects) {
|
||||
const projectNameIncludesSearchTerm = filterProject.name
|
||||
.toLowerCase()
|
||||
.includes(searchValue.value?.toLowerCase()?.trim() || '');
|
||||
const projectNameIncludesSearchTerm = filterProject.name.toLowerCase().includes(searchTerm);
|
||||
|
||||
const clientNameIncludesSearchTerm = props.clients
|
||||
.find((client) => client.id === filterProject.client_id)
|
||||
?.name.toLowerCase()
|
||||
.includes(searchValue.value?.toLowerCase()?.trim() || '');
|
||||
const clientName = filterProject.client_id
|
||||
? clientsById.value.get(filterProject.client_id)?.name
|
||||
: undefined;
|
||||
const clientNameIncludesSearchTerm = clientName?.toLowerCase().includes(searchTerm);
|
||||
|
||||
// check if one of the project tasks
|
||||
const projectTasks = props.tasks.filter((task) => {
|
||||
return task.project_id === filterProject.id;
|
||||
});
|
||||
const projectTasks = tasksByProject.value.get(filterProject.id) ?? [];
|
||||
|
||||
const filteredTasks = projectTasks.filter((filterTask) => {
|
||||
return (
|
||||
filterTask.name
|
||||
.toLowerCase()
|
||||
.includes(searchValue.value?.toLowerCase()?.trim() || '') &&
|
||||
filterTask.name.toLowerCase().includes(searchTerm) &&
|
||||
(!filterTask.is_done || filterTask.id === task.value)
|
||||
);
|
||||
});
|
||||
@@ -215,10 +263,22 @@ function updateFilteredResults() {
|
||||
(!filterProject.is_archived || project.value === filterProject.id)
|
||||
) {
|
||||
// search term matches project name
|
||||
addProjectToFilterObject(tempFilteredClients, filterProject, filteredTasks, false);
|
||||
addProjectToFilterObject(
|
||||
tempFilteredClients,
|
||||
groupIndexByKey,
|
||||
filterProject,
|
||||
filteredTasks,
|
||||
false
|
||||
);
|
||||
} else if (filteredTasks.length > 0 && !filterProject.is_archived) {
|
||||
// search term matches task name
|
||||
addProjectToFilterObject(tempFilteredClients, filterProject, filteredTasks, true);
|
||||
addProjectToFilterObject(
|
||||
tempFilteredClients,
|
||||
groupIndexByKey,
|
||||
filterProject,
|
||||
filteredTasks,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -410,24 +470,18 @@ function moveHighlightDown() {
|
||||
const highlightedItemId = ref<string | null>(null);
|
||||
|
||||
watch(highlightedItemId, () => {
|
||||
const highlightedItem = dropdownViewport.value?.querySelector(
|
||||
`[data-project-id="${highlightedItemId.value}"]`
|
||||
if (highlightedItemId.value === null) {
|
||||
return;
|
||||
}
|
||||
// The highlighted row may be virtualized out of the DOM, so scroll by index
|
||||
// through the virtualizer instead of querying for the element.
|
||||
const index = flatRows.value.findIndex(
|
||||
(row) =>
|
||||
(row.kind === 'project' && row.project.id === highlightedItemId.value) ||
|
||||
(row.kind === 'task' && row.task.id === highlightedItemId.value)
|
||||
);
|
||||
if (highlightedItem) {
|
||||
highlightedItem.scrollIntoView({
|
||||
block: 'nearest',
|
||||
inline: 'nearest',
|
||||
});
|
||||
} else {
|
||||
const highlightedTask = dropdownViewport.value?.querySelector(
|
||||
`[data-task-id="${highlightedItemId.value}"]`
|
||||
);
|
||||
if (highlightedTask) {
|
||||
highlightedTask.scrollIntoView({
|
||||
block: 'nearest',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}
|
||||
if (index !== -1) {
|
||||
rowVirtualizer.value.scrollToIndex(index, { align: 'auto' });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -558,62 +612,65 @@ const showCreateProject = ref(false);
|
||||
@keydown.left.prevent="collapseProject" />
|
||||
<div
|
||||
ref="dropdownViewport"
|
||||
class="min-w-[350px] max-h-[350px] overflow-y-scroll relative"
|
||||
class="w-[400px] max-w-[calc(100vw-2rem)] max-h-[350px] overflow-y-scroll relative"
|
||||
@mousemove="mouseEnterHighlightActivated = true">
|
||||
<template v-for="client in filteredResults" :key="client.id">
|
||||
<div :style="{ height: `${totalSize}px`, width: '100%', position: 'relative' }">
|
||||
<div
|
||||
v-if="client.id !== 'no_project_no_client'"
|
||||
class="w-full pb-1 pt-2 px-2 text-text-tertiary text-xs font-semibold flex space-x-1 items-center">
|
||||
<span>
|
||||
{{ client.name }}
|
||||
</span>
|
||||
</div>
|
||||
<template
|
||||
v-for="projectWithTasks in client.projects"
|
||||
:key="projectWithTasks.id">
|
||||
v-for="{ virtualRow, row } in visibleRows"
|
||||
:key="row.key"
|
||||
:ref="measureRow"
|
||||
:data-index="virtualRow.index"
|
||||
class="absolute left-0 top-0 w-full"
|
||||
:style="{ transform: `translateY(${virtualRow.start}px)` }">
|
||||
<div
|
||||
v-if="row.kind === 'client'"
|
||||
class="w-full pb-1 pt-2 px-2 text-text-tertiary text-xs font-semibold flex space-x-1 items-center">
|
||||
<span class="truncate">{{ row.name }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="row.kind === 'project'"
|
||||
role="option"
|
||||
class="px-1 py-0.5 cursor-default"
|
||||
:value="projectWithTasks.id"
|
||||
:data-project-id="projectWithTasks.id"
|
||||
@click="selectProject(projectWithTasks.id)">
|
||||
:value="row.project.id"
|
||||
:data-project-id="row.project.id"
|
||||
@click="selectProject(row.project.id)">
|
||||
<div
|
||||
class="rounded-lg"
|
||||
:class="{
|
||||
'bg-card-background-active':
|
||||
projectWithTasks.id === highlightedItemId,
|
||||
row.project.id === highlightedItemId,
|
||||
}">
|
||||
<ProjectDropdownItem
|
||||
class="hover:!bg-transparent"
|
||||
:selected="isProjectSelected(projectWithTasks)"
|
||||
:name="projectWithTasks.name"
|
||||
:color="projectWithTasks.color"
|
||||
@mouseenter="setHighlightItemId(projectWithTasks.id)">
|
||||
:selected="isProjectSelected(row.project)"
|
||||
:name="row.project.name"
|
||||
:color="row.project.color"
|
||||
@mouseenter="setHighlightItemId(row.project.id)">
|
||||
<template #actions>
|
||||
<button
|
||||
v-if="projectWithTasks.tasks.length > 0"
|
||||
v-if="row.project.tasks.length > 0"
|
||||
tabindex="-1"
|
||||
class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs"
|
||||
class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs shrink-0"
|
||||
:class="{
|
||||
'bg-white/5 text-text-secondary':
|
||||
projectWithTasks.expanded,
|
||||
row.project.expanded,
|
||||
'hover:bg-white/5 hover:text-text-secondary text-text-tertiary':
|
||||
!projectWithTasks.expanded,
|
||||
!row.project.expanded,
|
||||
}"
|
||||
@click.prevent.stop="
|
||||
() => {
|
||||
projectWithTasks.expanded =
|
||||
!projectWithTasks.expanded;
|
||||
row.project.expanded =
|
||||
!row.project.expanded;
|
||||
searchInput?.focus();
|
||||
}
|
||||
">
|
||||
<span
|
||||
>{{ projectWithTasks.tasks.length }} Tasks</span
|
||||
<span class="whitespace-nowrap"
|
||||
>{{ row.project.tasks.length }} Tasks</span
|
||||
>
|
||||
<ChevronDownIcon
|
||||
:class="{
|
||||
'transform rotate-180':
|
||||
projectWithTasks.expanded,
|
||||
row.project.expanded,
|
||||
}"
|
||||
class="w-4"></ChevronDownIcon>
|
||||
</button>
|
||||
@@ -621,23 +678,23 @@ const showCreateProject = ref(false);
|
||||
</ProjectDropdownItem>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="projectWithTasks.expanded" class="bg-quaternary">
|
||||
<div
|
||||
v-for="task in projectWithTasks.tasks"
|
||||
:key="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-text-primary 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>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="row.kind === 'task'"
|
||||
:data-task-id="row.task.id"
|
||||
class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-text-primary focus:outline-none transition duration-150 ease-in-out"
|
||||
:class="
|
||||
row.task.id === highlightedItemId
|
||||
? 'bg-card-background-active'
|
||||
: 'bg-quaternary'
|
||||
"
|
||||
@click="selectTask(row.task.id)"
|
||||
@mouseenter="setHighlightItemId(row.task.id)">
|
||||
<MinusIcon
|
||||
class="w-3 h-3 text-text-quaternary shrink-0"></MinusIcon>
|
||||
<span class="min-w-0 truncate">{{ row.task.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="canCreateProject" class="hover:bg-card-background-active rounded-b-lg">
|
||||
<button
|
||||
|
||||
@@ -18,3 +18,13 @@ window.getTimezoneSetting = vi.fn(() => 'UTC');
|
||||
window.getWeekStartSetting = vi.fn(() => 'monday');
|
||||
window.getNumberFormat = vi.fn(() => 'point');
|
||||
window.getIntervalFormat = vi.fn(() => 'hours-minutes');
|
||||
|
||||
// happy-dom has no layout engine, so every element reports offsetWidth/offsetHeight of 0.
|
||||
// TanStack Virtual (used by the project/task dropdown) measures via those properties, so
|
||||
// without a size it renders zero rows. Give elements a usable box so virtualized components
|
||||
// render their rows in component tests.
|
||||
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, get: () => 400 });
|
||||
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
|
||||
configurable: true,
|
||||
get: () => 350,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user