add client grouping and expandable project tasks to project task timetracker dropdown, fixes ST-253

resources/js/packages/ui/src/Project/ProjectDropdownItem.vue

@@ -8,11 +8,14 @@ defineProps<{
 
 <template>
     <div
-        class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-        <div
-            :style="{ backgroundColor: color }"
-            class="w-3 h-3 rounded-full"></div>
-        <span>{{ name }}</span>
+        class="flex justify-between items-center w-full text-start text-sm font-medium leading-5 text-white 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>
+        <slot name="actions"></slot>
     </div>
 </template>
 

resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ChevronRightIcon } from '@heroicons/vue/16/solid';
+import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { type Component, computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch, watchEffect } from 'vue';
 import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
 import type {
     CreateClientBody,
@@ -12,7 +12,7 @@ import type {
 } from '@/packages/api/src';
 import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
 import Badge from '@/packages/ui/src/Badge.vue';
-import { PlusIcon, PlusCircleIcon } from '@heroicons/vue/16/solid';
+import { PlusIcon, PlusCircleIcon, MinusIcon } from '@heroicons/vue/16/solid';
 import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
 
 const task = defineModel<string | null>('task', {
@@ -25,7 +25,7 @@ const project = defineModel<string | null>('project', {
 
 const searchInput = ref<HTMLInputElement | null>(null);
 const open = ref(false);
-const dropdownViewport = ref<Component | null>(null);
+const dropdownViewport = ref<HTMLElement | null>(null);
 
 const searchValue = ref('');
 
@@ -38,10 +38,11 @@ watch(open, (isOpen) => {
     }
 });
 
-type ProjectWithTasks = {
-    project: Project;
-    tasks: Task[];
-};
+type ProjectWithTasks = Project & { expanded: boolean; tasks: Task[] };
+
+type ClientWithProjectsWithTasks = Client & { projects: ProjectWithTasks[] };
+
+type ClientsWithProjectsWithTasks = ClientWithProjectsWithTasks[];
 
 const props = withDefaults(
     defineProps<{
@@ -62,42 +63,98 @@ const props = withDefaults(
     }
 );
 
+const filteredResults = ref([] as ClientsWithProjectsWithTasks);
+
+// computed filterProjects that flattens the first layer of filteredResults and combines all the projects
 const filteredProjects = computed(() => {
-    return props.projects.reduce(
-        (filtered: ProjectWithTasks[], filterProject) => {
-            const projectNameIncludesSearchTerm = filterProject.name
-                .toLowerCase()
-                .includes(searchValue.value?.toLowerCase()?.trim() || '');
+    return filteredResults.value.map((client) => client.projects).flat();
+});
 
-            // check if one of the project tasks
-            const projectTasks = props.tasks.filter((task) => {
-                return task.project_id === filterProject.id;
+function addProjectToFilterObject(
+    tempFilteredClients: ClientsWithProjectsWithTasks,
+    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 = props.clients.find(
+        (client) => client.id === project.client_id
+    );
+
+    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,
+                },
+            ],
+        });
+    } 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,
             });
-
-            const filteredTasks = projectTasks.filter((filterTask) => {
-                return (
-                    filterTask.name
-                        .toLowerCase()
-                        .includes(
-                            searchValue.value?.toLowerCase()?.trim() || ''
-                        ) &&
-                    (!filterTask.is_done || filterTask.id === task.value)
-                );
+        } 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,
+                    },
+                ],
             });
+        }
+    }
+}
 
-            if (
-                (projectNameIncludesSearchTerm || filteredTasks.length > 0) &&
-                (!filterProject.is_archived ||
-                    project.value === filterProject.id)
-            ) {
-                filtered.push({ project: filterProject, tasks: filteredTasks });
-            }
+watchEffect(() => {
+    const tempFilteredClients: ClientsWithProjectsWithTasks = [];
 
-            return filtered;
-        },
-        [
-            {
-                project: {
+    if (searchValue.value.length === 0) {
+        tempFilteredClients.push({
+            id: 'no_project_no_client',
+            name: 'No Client',
+            color: 'var(--theme-color-icon-default)',
+            created_at: '',
+            updated_at: '',
+            value: '',
+            is_archived: false,
+            projects: [
+                {
                     id: '',
                     name: 'No Project',
                     color: 'var(--theme-color-icon-default)',
@@ -106,11 +163,86 @@ const filteredProjects = computed(() => {
                     billable_rate: null,
                     is_archived: false,
                     is_billable: false,
+                    expanded: false,
+                    tasks: [],
                 },
-                tasks: [],
-            },
-        ]
-    );
+            ],
+        });
+    }
+
+    for (const filterProject of props.projects) {
+        const projectNameIncludesSearchTerm = filterProject.name
+            .toLowerCase()
+            .includes(searchValue.value?.toLowerCase()?.trim() || '');
+
+        const clientNameIncludesSearchTerm = props.clients
+            .find((client) => client.id === filterProject.client_id)
+            ?.name.toLowerCase()
+            .includes(searchValue.value?.toLowerCase()?.trim() || '');
+
+        // check if one of the project tasks
+        const projectTasks = props.tasks.filter((task) => {
+            return task.project_id === filterProject.id;
+        });
+
+        const filteredTasks = projectTasks.filter((filterTask) => {
+            return (
+                filterTask.name
+                    .toLowerCase()
+                    .includes(searchValue.value?.toLowerCase()?.trim() || '') &&
+                (!filterTask.is_done || filterTask.id === task.value)
+            );
+        });
+
+        if (
+            (projectNameIncludesSearchTerm || clientNameIncludesSearchTerm) &&
+            (!filterProject.is_archived || project.value === filterProject.id)
+        ) {
+            // search term matches project name
+            addProjectToFilterObject(
+                tempFilteredClients,
+                filterProject,
+                filteredTasks,
+                false
+            );
+        } else if (filteredTasks.length > 0 && !filterProject.is_archived) {
+            // search term matches task name
+            addProjectToFilterObject(
+                tempFilteredClients,
+                filterProject,
+                filteredTasks,
+                true
+            );
+        }
+    }
+
+    // sort tempFilteredClients by client name
+    tempFilteredClients.sort((a, b) => {
+        // Make sure No Project entry is always on top
+        if (a.id === 'no_project_no_client') {
+            return -1;
+        }
+        if (b.id === 'no_project_no_client') {
+            return 1;
+        }
+        // Make sure that No client group is above all regular clients
+        if (a.id === 'no_client') {
+            return -1;
+        }
+        if (b.id === 'no_client') {
+            return 1;
+        }
+
+        if (a.name < b.name) {
+            return -1;
+        }
+        if (a.name > b.name) {
+            return 1;
+        }
+        return 0;
+    });
+
+    filteredResults.value = tempFilteredClients;
 });
 
 async function addClientIfNoneExists() {
@@ -123,7 +255,7 @@ function isProjectSelected(project: Project) {
 
 function initializeHighlightedItem() {
     if (filteredProjects.value.length > 0) {
-        highlightedItemId.value = filteredProjects.value[0].project.id;
+        highlightedItemId.value = filteredProjects.value[0].id;
     }
 }
 
@@ -133,15 +265,15 @@ watch(filteredProjects, () => {
 
 function setProjectAndClientBasedOnHighlightedItem() {
     const highlightedProject = filteredProjects.value.find(
-        (project) => project.project.id === highlightedItemId.value
+        (project) => project.id === highlightedItemId.value
     );
-    if (highlightedProject) {
-        selectProject(highlightedProject.project.id);
-    }
     const highlightedTask = filteredProjects.value
         .map((project) => project.tasks)
         .flat()
         .find((task) => task.id === highlightedItemId.value);
+    if (highlightedProject) {
+        selectProject(highlightedProject.id);
+    }
     if (highlightedTask) {
         selectTask(highlightedTask.id);
     }
@@ -160,9 +292,9 @@ function updateSearchValue(event: Event) {
 const emit = defineEmits(['update:modelValue', 'changed']);
 
 function moveHighlightUp() {
+    mouseEnterHighlightActivated.value = false;
     const currentHighlightedIndex = filteredProjects.value.findIndex(
-        (projectWithTasks) =>
-            projectWithTasks.project.id === highlightedItemId.value
+        (projectWithTasks) => projectWithTasks.id === highlightedItemId.value
     );
     // check if it is a project id
     if (currentHighlightedIndex === -1) {
@@ -182,7 +314,7 @@ function moveHighlightUp() {
             }
             if (taskIndex === 0) {
                 // highlight the project if it was the first task before
-                highlightedItemId.value = currentProjectWithTasks.project.id;
+                highlightedItemId.value = currentProjectWithTasks.id;
                 return;
             }
             highlightedItemId.value =
@@ -190,37 +322,38 @@ function moveHighlightUp() {
         }
     }
     if (currentHighlightedIndex === 0) {
-        // highlight the last project or the last project of the last project
+        // selected project is the first project in the list
+        // highlight the last project or the last task of the last project
         const lastProject =
             filteredProjects.value[filteredProjects.value.length - 1];
-        if (lastProject.tasks.length > 0) {
+        if (lastProject.tasks.length > 0 && lastProject.expanded) {
             // highlight last task of last project
             highlightedItemId.value =
                 lastProject.tasks[lastProject.tasks.length - 1].id;
         } else {
             highlightedItemId.value =
-                filteredProjects.value[
-                    filteredProjects.value.length - 1
-                ].project.id;
+                filteredProjects.value[filteredProjects.value.length - 1].id;
         }
     } else {
+        // selected item is a project that is not the first project in the list
         const previousProject =
             filteredProjects.value[currentHighlightedIndex - 1];
-        if (previousProject.tasks.length > 0) {
+        if (previousProject.tasks.length > 0 && previousProject.expanded) {
             // highlight last task of previous project
             highlightedItemId.value =
                 previousProject.tasks[previousProject.tasks.length - 1].id;
         } else {
             highlightedItemId.value =
-                filteredProjects.value[currentHighlightedIndex - 1].project.id;
+                filteredProjects.value[currentHighlightedIndex - 1].id;
         }
     }
 }
 
 function moveHighlightDown() {
+    mouseEnterHighlightActivated.value = false;
+
     const currentHighlightedIndex = filteredProjects.value.findIndex(
-        (projectWithTasks) =>
-            projectWithTasks.project.id === highlightedItemId.value
+        (projectWithTasks) => projectWithTasks.id === highlightedItemId.value
     );
     // check if it is a project id
     if (currentHighlightedIndex === -1) {
@@ -245,11 +378,10 @@ function moveHighlightDown() {
                 );
                 if (projectIndex === filteredProjects.value.length - 1) {
                     // highlight the first project if it was the last project
-                    highlightedItemId.value =
-                        filteredProjects.value[0].project.id;
+                    highlightedItemId.value = filteredProjects.value[0].id;
                 } else {
                     highlightedItemId.value =
-                        filteredProjects.value[projectIndex + 1].project.id;
+                        filteredProjects.value[projectIndex + 1].id;
                 }
                 return;
             }
@@ -258,30 +390,79 @@ function moveHighlightDown() {
         }
     }
     if (currentHighlightedIndex === filteredProjects.value.length - 1) {
+        // selected project is the last project in the list
         // highlight the first project or the last project of the last project
         const lastProject =
             filteredProjects.value[filteredProjects.value.length - 1];
-        if (lastProject.tasks.length > 0) {
+        if (lastProject.tasks.length > 0 && lastProject.expanded) {
             // highlight last task of last project
             highlightedItemId.value = lastProject.tasks[0].id;
         } else {
-            highlightedItemId.value = filteredProjects.value[0].project.id;
+            highlightedItemId.value = filteredProjects.value[0].id;
         }
     } else {
+        // selected item is a project that is not the last project in the list
         const currentProjectWithTasks =
             filteredProjects.value[currentHighlightedIndex];
-        if (currentProjectWithTasks.tasks.length > 0) {
+        if (
+            currentProjectWithTasks.tasks.length > 0 &&
+            currentProjectWithTasks.expanded
+        ) {
             // highlight last task of previous project
             highlightedItemId.value = currentProjectWithTasks.tasks[0].id;
         } else {
             highlightedItemId.value =
-                filteredProjects.value[currentHighlightedIndex + 1].project.id;
+                filteredProjects.value[currentHighlightedIndex + 1].id;
         }
     }
 }
 
 const highlightedItemId = ref<string | null>(null);
 
+watch(highlightedItemId, () => {
+    const highlightedItem = dropdownViewport.value?.querySelector(
+        `[data-project-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',
+            });
+        }
+    }
+});
+
+function expandProject() {
+    const currentHighlightedIndex = filteredProjects.value.findIndex(
+        (projectWithTasks) => projectWithTasks.id === highlightedItemId.value
+    );
+    if (currentHighlightedIndex === -1) {
+        return;
+    }
+    const currentProject = filteredProjects.value[currentHighlightedIndex];
+    currentProject.expanded = true;
+}
+
+function collapseProject() {
+    const currentHighlightedIndex = filteredProjects.value.findIndex(
+        (projectWithTasks) => projectWithTasks.id === highlightedItemId.value
+    );
+    if (currentHighlightedIndex === -1) {
+        return;
+    }
+    const currentProject = filteredProjects.value[currentHighlightedIndex];
+    currentProject.expanded = false;
+}
+
 const currentProject = computed(() => {
     return props.projects.find(
         (iteratingProject) => iteratingProject.id === project.value
@@ -302,11 +483,22 @@ const selectedProjectColor = computed(() => {
     return currentProject.value?.color || 'var(--theme-color-icon-default)';
 });
 
+// This state prevents the selection to jump to random items when the mouse cursor is
+// over an item and some Item in the Dropdown is selected by keyboard navigation to scroll into view
+const mouseEnterHighlightActivated = ref(true);
+
+function setHighlightItemId(newId: string) {
+    if (mouseEnterHighlightActivated.value) {
+        highlightedItemId.value = newId;
+    }
+}
+
 function selectTask(taskId: string) {
     task.value = taskId;
     project.value =
         props.tasks.find((task) => task.id === taskId)?.project_id || null;
     open.value = false;
+    searchValue.value = '';
     emit('changed', project.value, task.value);
 }
 
@@ -314,6 +506,7 @@ function selectProject(projectId: string) {
     project.value = projectId;
     task.value = null;
     open.value = false;
+    searchValue.value = '';
     emit('changed', project.value, task.value);
 }
 
@@ -339,7 +532,7 @@ const showCreateProject = ref(false);
                 :border="showBadgeBorder"
                 tag="button"
                 :name="selectedProjectName"
-                class="focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0 hover:bg-card-background-separator">
+                class="focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0">
                 <div class="flex items-center lg:space-x-1 min-w-0">
                     <span class="whitespace-nowrap text-xs lg:text-sm">
                         {{ selectedProjectName }}
@@ -364,48 +557,108 @@ const showCreateProject = ref(false);
                 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..." />
             <div
                 ref="dropdownViewport"
-                class="min-w-[300px] max-h-[250px] overflow-y-scroll relative">
-                <template
-                    v-for="projectWithTasks in filteredProjects"
-                    :key="projectWithTasks.project.id">
+                @mousemove="mouseEnterHighlightActivated = true"
+                class="min-w-[350px] max-h-[350px] overflow-y-scroll relative">
+                <template v-for="client in filteredResults" :key="client.id">
                     <div
-                        role="option"
-                        :value="projectWithTasks.project.id"
-                        @click="selectProject(projectWithTasks.project.id)"
-                        class="border-t border-card-background-separator"
-                        :class="{
-                            'bg-card-background-active':
-                                projectWithTasks.project.id ===
-                                highlightedItemId,
-                        }"
-                        data-testid="client_dropdown_entries"
-                        :data-project-id="projectWithTasks.project.id">
-                        <ProjectDropdownItem
-                            :selected="
-                                isProjectSelected(projectWithTasks.project)
-                            "
-                            :name="projectWithTasks.project.name"
-                            :color="
-                                projectWithTasks.project.color
-                            "></ProjectDropdownItem>
-                    </div>
-                    <div
-                        v-for="task in projectWithTasks.tasks"
-                        :key="task.id"
-                        @click="selectTask(task.id)"
-                        :class="{
-                            'bg-card-background-active':
-                                task.id === highlightedItemId,
-                        }"
-                        class="flex items-center space-x-3 w-full px-3 py-1.5 text-start text-xs font-semibold leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                        <div class="w-3 h-3 rounded-full"></div>
-                        <span>{{ task.name }}</span>
+                        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">
+                        <div
+                            role="option"
+                            class="px-1 py-0.5 cursor-default"
+                            :value="projectWithTasks.id"
+                            @click="selectProject(projectWithTasks.id)"
+                            :data-project-id="projectWithTasks.id">
+                            <div
+                                class="rounded-lg"
+                                :class="{
+                                    'bg-card-background-active':
+                                        projectWithTasks.id ===
+                                        highlightedItemId,
+                                }">
+                                <ProjectDropdownItem
+                                    class="hover:!bg-transparent"
+                                    :selected="
+                                        isProjectSelected(projectWithTasks)
+                                    "
+                                    @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();
+                                                }
+                                            "
+                                            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,
+                                            }">
+                                            <span
+                                                >{{
+                                                    projectWithTasks.tasks
+                                                        .length
+                                                }}
+                                                Tasks</span
+                                            >
+                                            <ChevronDownIcon
+                                                :class="{
+                                                    'transform rotate-180':
+                                                        projectWithTasks.expanded,
+                                                }"
+                                                class="w-4"></ChevronDownIcon>
+                                        </button>
+                                    </template>
+                                </ProjectDropdownItem>
+                            </div>
+                        </div>
+                        <div
+                            v-if="projectWithTasks.expanded"
+                            class="bg-quaternary">
+                            <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">
+                                <MinusIcon
+                                    class="w-3 h-3 text-text-quaternary"></MinusIcon>
+                                <span>{{ task.name }}</span>
+                            </div>
+                        </div>
+                    </template>
                 </template>
             </div>
             <div class="hover:bg-card-background-active rounded-b-lg">