From db7111da44bdb1fb1f4a68da02a83d31b00afd62 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 4 Feb 2025 15:12:59 +0100
Subject: [PATCH] add recently tracked timeentries dropdown to timetracker

---
 .../Client/ClientMultiselectDropdown.vue      |   2 +-
 .../src/TimeTracker/TimeTrackerControls.vue   | 111 +++++++++++++++++-
 .../TimeTrackerRecentlyTrackedEntry.vue       |  67 +++++++++++
 resources/js/packages/ui/src/utils/select.ts  |  75 ++++++++++++
 4 files changed, 248 insertions(+), 7 deletions(-)
 create mode 100644 resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue
 create mode 100644 resources/js/packages/ui/src/utils/select.ts

diff --git a/resources/js/Components/Common/Client/ClientMultiselectDropdown.vue b/resources/js/Components/Common/Client/ClientMultiselectDropdown.vue
index 2bad4906..c5e381c3 100644
--- a/resources/js/Components/Common/Client/ClientMultiselectDropdown.vue
+++ b/resources/js/Components/Common/Client/ClientMultiselectDropdown.vue
@@ -18,7 +18,7 @@ function getNameForItem(item: Client) {
 
 <template>
     <MultiselectDropdown
-        searchPlaceholder="Search for a Client..."
+        search-placeholder="Search for a Client..."
         :items="clients"
         :get-key-from-item="getKeyFromItem"
         :get-name-for-item="getNameForItem">
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
index 35c364a3..66e7c30b 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
@@ -13,13 +13,19 @@ import type {
     TimeEntry,
     Client,
 } from '@/packages/api/src';
-import { ref, watch } from 'vue';
-import type { Dayjs } from 'dayjs';
+import {computed, nextTick, ref, watch} from 'vue';
+import type {Dayjs} from 'dayjs';
+import {useTimeEntriesStore} from '@/utils/useTimeEntries';
+import {storeToRefs} from 'pinia';
+import {useFocus} from "@vueuse/core";
+import {autoUpdate, flip, limitShift, offset, shift, useFloating} from "@floating-ui/vue";
+import TimeTrackerRecentlyTrackedEntry from "@/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue";
+import {useSelectEvents} from "@/packages/ui/src/utils/select";
 
 const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
     required: true,
 });
-const liveTimer = defineModel<Dayjs | null>('liveTimer', { required: true });
+const liveTimer = defineModel<Dayjs | null>('liveTimer', {required: true});
 
 const currentTimeEntryDescriptionInput = ref<HTMLInputElement | null>(null);
 
@@ -50,11 +56,33 @@ function updateProject() {
     emit('updateTimeEntry');
 }
 
+function setCurrentTimeEntry(timeEntry: TimeEntry){
+    console.log('asdasd')
+    currentTimeEntry.value.description = timeEntry.description;
+    currentTimeEntry.value.project_id = timeEntry.project_id;
+    currentTimeEntry.value.task_id = timeEntry.task_id;
+    currentTimeEntry.value.tags = timeEntry.tags;
+    currentTimeEntry.value.billable = timeEntry.billable;
+}
+
 function startTimerIfNotActive() {
-    if (!props.isActive) {
+    if(highlightedDropdownEntryId.value){
+        const timeEntry = filteredRecentlyTrackedTimeEntries.value.find((item) => item.id === highlightedDropdownEntryId.value);
+        if(timeEntry){
+            setCurrentTimeEntry(timeEntry);
+            showDropdown.value = false;
+        }
+    }
+    else {
         currentTimeEntry.value.description = tempDescription.value;
+    }
+
+    if (!props.isActive) {
         emit('startTimer');
     }
+    else {
+        emit('updateTimeEntry');
+    }
 }
 
 function setBillableDefaultForProject() {
@@ -74,6 +102,7 @@ function onToggleButtonPress(newState: boolean) {
         emit('stopTimer');
     }
 }
+
 const tempDescription = ref(currentTimeEntry.value.description);
 watch(
     () => currentTimeEntry.value.description,
@@ -81,12 +110,56 @@ watch(
         tempDescription.value = currentTimeEntry.value.description;
     }
 );
+
 function updateTimeEntryDescription() {
     if (currentTimeEntry.value.description !== tempDescription.value) {
         currentTimeEntry.value.description = tempDescription.value;
         emit('updateTimeEntry');
     }
 }
+
+const {timeEntries} = storeToRefs(useTimeEntriesStore());
+const filteredRecentlyTrackedTimeEntries = computed(() => {
+    return timeEntries.value.filter((item) => {
+        return item.description
+            ?.toLowerCase()
+            ?.includes(tempDescription.value?.toLowerCase()?.trim() || '');
+    }).slice(0, 5);;
+});
+
+const showDropdown = ref(false);
+const {focused} = useFocus(currentTimeEntryDescriptionInput)
+
+watch(focused, (focused) => {
+    nextTick(() => {
+        // make sure the click event on the dropdown does not get interrupted
+        showDropdown.value = focused
+    });
+});
+
+
+const floating = ref(null);
+const {floatingStyles} = useFloating(currentTimeEntryDescriptionInput, floating, {
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+        offset(10),
+        shift({
+            limiter: limitShift({
+                offset: 5,
+            }),
+        }),
+        flip({
+            fallbackAxisSideDirection: 'start',
+        }),
+    ],
+});
+const highlightedDropdownEntryId = ref<string | null>(null);
+
+useSelectEvents(filteredRecentlyTrackedTimeEntries,
+    highlightedDropdownEntryId,
+    (item) => item.id,
+    showDropdown)
 </script>
 
 <template>
@@ -95,7 +168,7 @@ function updateTimeEntryDescription() {
         data-testid="dashboard_timer">
         <div
             class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
-            <div class="flex flex-1 items-center pr-6">
+            <div class="flex flex-1 items-center pr-6 relative">
                 <input
                     ref="currentTimeEntryDescriptionInput"
                     v-model="tempDescription"
@@ -104,7 +177,33 @@ function updateTimeEntryDescription() {
                     class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-white font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
                     type="text"
                     @keydown.enter="startTimerIfNotActive"
-                    @blur="updateTimeEntryDescription" />
+                    @keydown.esc="showDropdown = false"
+                    @blur="updateTimeEntryDescription"/>
+                <div
+                    v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
+                    ref="floating"
+                    class="z-50 w-full max-w-2xl"
+                    :style="floatingStyles">
+                    <div
+                        class="rounded-lg ring-1 w-full fixed min-w-xl top-0 left-0 ring-black ring-opacity-5 border border-card-border overflow-none shadow-dropdown bg-card-background">
+                        <div
+                            class="text-text-tertiary text-xs font-semibold border-b border-border-tertiary px-2 py-1.5">
+                            Recently Tracked Time Entries
+                        </div>
+                        <div class="text-text-secondary py-1 px-1.5">
+                            <TimeTrackerRecentlyTrackedEntry
+                                v-for="timeEntry in filteredRecentlyTrackedTimeEntries"
+                                :key="timeEntry.id"
+                                :time-entry="timeEntry"
+                                :highlighted="highlightedDropdownEntryId === timeEntry.id"
+                                :projects="projects"
+                                :tasks="tasks"
+                                @mousedown="setCurrentTimeEntry(timeEntry)"
+                                @mouseenter="highlightedDropdownEntryId = timeEntry.id"
+                            ></TimeTrackerRecentlyTrackedEntry>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="flex items-center justify-between pl-2 shrink min-w-0">
                 <div
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue
new file mode 100644
index 00000000..1608a76e
--- /dev/null
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+import {ProjectBadge} from "@/packages/ui/src";
+import type {TimeEntry} from "@/packages/api/src";
+import {twMerge} from "tailwind-merge";
+import {ChevronRightIcon} from "@heroicons/vue/16/solid";
+import {computed} from "vue";
+import type {Project, Task} from "@/packages/api/src";
+
+const props = defineProps<{
+    timeEntry: TimeEntry,
+    highlighted: boolean,
+    projects?: Project[]
+    tasks?: Task[]
+}>()
+const project = computed(() => {
+    return props.projects?.find(
+        (iteratingProject) => iteratingProject.id === props.timeEntry.project_id
+    );
+});
+const task = computed(() => {
+    return props.tasks?.find(
+        (iteratingTask) => iteratingTask.id === props.timeEntry.task_id
+    );
+});
+</script>
+
+<template>
+    <button
+        tabindex="-1"
+        :data-select-id="timeEntry.id"
+        :class="twMerge('px-2 py-1.5 flex justify-between items-center space-x-2 w-full rounded', props.highlighted && 'bg-card-background-active')">
+        <span class="text-sm font-medium">
+            {{
+                timeEntry.description !== ''
+                    ? timeEntry.description
+                    : 'No Description'
+            }}
+        </span>
+        <ProjectBadge
+            ref="projectDropdownTrigger"
+            :color="project?.color"
+            :name="project?.name"
+            class="">
+            <div v-if="project" class="flex items-center lg:space-x-1 min-w-0">
+                    <span class="whitespace-nowrap text-xs ">
+                        {{ project?.name }}
+                    </span>
+                <ChevronRightIcon
+                    v-if="task"
+                    class="w-4 lg:w-5 text-muted shrink-0"></ChevronRightIcon>
+                <div
+                    v-if="task"
+                    class="min-w-0 shrink text-xs truncate">
+                    {{ task.name }}
+                </div>
+            </div>
+            <div v-else>
+                No Project
+            </div>
+        </ProjectBadge>
+    </button>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/packages/ui/src/utils/select.ts b/resources/js/packages/ui/src/utils/select.ts
new file mode 100644
index 00000000..aaa3b020
--- /dev/null
+++ b/resources/js/packages/ui/src/utils/select.ts
@@ -0,0 +1,75 @@
+import {computed, type Ref, watch} from "vue";
+import {onKeyStroke} from "@vueuse/core";
+
+export function useSelectEvents<Type>(filteredItems: Ref<Array<Type>>,
+                                      highlightedItemId: Ref<string | null>,
+                                      getKeyFromItem: (item: Type) => string,
+                                      open: Ref<boolean>) {
+
+    function moveHighlightUp() {
+        if (highlightedItem.value) {
+            const currentHightlightedIndex = filteredItems.value.indexOf(
+                highlightedItem.value
+            );
+            if (currentHightlightedIndex === 0) {
+                highlightedItemId.value = getKeyFromItem(
+                    filteredItems.value[filteredItems.value.length - 1]
+                );
+            } else {
+                highlightedItemId.value = getKeyFromItem(
+                    filteredItems.value[currentHightlightedIndex - 1]
+                );
+            }
+        }
+        else {
+            highlightedItemId.value = getKeyFromItem(filteredItems.value[filteredItems.value.length - 1]);
+        }
+    }
+
+    function moveHighlightDown() {
+        if (highlightedItem.value) {
+            const currentHightlightedIndex = filteredItems.value.indexOf(
+                highlightedItem.value
+            );
+            if (currentHightlightedIndex === filteredItems.value.length - 1) {
+                highlightedItemId.value = getKeyFromItem(
+                    filteredItems.value[0]
+                );
+            } else {
+                highlightedItemId.value = getKeyFromItem(
+                    filteredItems.value[currentHightlightedIndex + 1]
+                );
+            }
+        }
+        else{
+            highlightedItemId.value = getKeyFromItem(filteredItems.value[0]);
+        }
+    }
+
+    const highlightedItem = computed(() => {
+        return filteredItems.value.find(
+            (item) => getKeyFromItem(item) === highlightedItemId.value
+        );
+    });
+
+    onKeyStroke('ArrowDown', (e) => {
+        if (open.value === true) {
+            moveHighlightDown();
+            e.preventDefault();
+        }
+    });
+
+    onKeyStroke('ArrowUp', (e) => {
+        if (open.value === true) {
+            moveHighlightUp();
+            e.preventDefault();
+        }
+    });
+
+    watch(open, (newOpen) => {
+        if (newOpen === false) {
+            highlightedItemId.value = null;
+        }
+    });
+}
+