From 5bfd9e7dcec34c1697eacc4970fa63dbc5633287 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 3 Jun 2024 15:24:39 +0200
Subject: [PATCH] add time picker to timetracker, fixes ST-180

---
 .../TimeEntry/TimeEntryRangeSelector.vue      |  53 ++-----
 resources/js/Components/Common/TimePicker.vue |  10 +-
 .../Components/Common/TimeRangeSelector.vue   |  58 +++++++
 .../TimeTracker/TimeTrackerRangeSelector.vue  | 148 ++++++++++++++++++
 resources/js/Components/TimeTracker.vue       | 106 +------------
 5 files changed, 227 insertions(+), 148 deletions(-)
 create mode 100644 resources/js/Components/Common/TimeRangeSelector.vue
 create mode 100644 resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue

diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
index 2d6595fa..75977a56 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
@@ -1,35 +1,15 @@
 <script setup lang="ts">
 import Dropdown from '@/Components/Dropdown.vue';
-import { defineProps, ref, watch } from 'vue';
+import { defineProps, ref } from 'vue';
 import { formatStartEnd } from '@/utils/time';
-import TimePicker from '@/Components/Common/TimePicker.vue';
-import { useFocusWithin } from '@vueuse/core';
+import TimeRangeSelector from '@/Components/Common/TimeRangeSelector.vue';
 
-const props = defineProps<{
+defineProps<{
     start: string;
     end: string | null;
 }>();
 
 const emit = defineEmits(['changed']);
-const tempStart = ref(props.start);
-const tempEnd = ref(props.end || null);
-
-watch(props, () => {
-    tempStart.value = props.start;
-    tempEnd.value = props.end;
-});
-function updateTimeEntry() {
-    emit('changed', tempStart.value, tempEnd.value);
-}
-
-const dropdownContent = ref();
-const { focused } = useFocusWithin(dropdownContent);
-
-watch(focused, (newValue, oldValue) => {
-    if (oldValue === true && newValue === false) {
-        updateTimeEntry();
-    }
-});
 
 const open = ref(false);
 </script>
@@ -49,26 +29,13 @@ const open = ref(false);
                 </button>
             </template>
             <template #content>
-                <div
-                    ref="dropdownContent"
-                    class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-1">
-                    <div>
-                        <div class="font-bold text-white text-sm pb-1">
-                            Start
-                        </div>
-                        <TimePicker
-                            data-testid="time_entry_range_start"
-                            @updated="updateTimeEntry"
-                            v-model="tempStart"></TimePicker>
-                    </div>
-                    <div>
-                        <div class="font-bold text-white text-sm pb-1">End</div>
-                        <TimePicker
-                            data-testid="time_entry_range_end"
-                            @updated="updateTimeEntry"
-                            v-model="tempEnd"></TimePicker>
-                    </div>
-                </div>
+                <TimeRangeSelector
+                    @changed="
+                        (newStart, newEnd) => emit('changed', newStart, newEnd)
+                    "
+                    :start="start"
+                    :end="end">
+                </TimeRangeSelector>
             </template>
         </Dropdown>
     </div>
diff --git a/resources/js/Components/Common/TimePicker.vue b/resources/js/Components/Common/TimePicker.vue
index c1784e43..8181de42 100644
--- a/resources/js/Components/Common/TimePicker.vue
+++ b/resources/js/Components/Common/TimePicker.vue
@@ -17,11 +17,11 @@ const props = withDefaults(
 );
 
 const hours = computed(() => {
-    return model.value ? getLocalizedDayJs(model.value).hour() : null;
+    return model.value ? getLocalizedDayJs(model.value).format('HH') : null;
 });
 
 const minutes = computed(() => {
-    return model.value ? getLocalizedDayJs(model.value).minute() : null;
+    return model.value ? getLocalizedDayJs(model.value).format('mm') : null;
 });
 
 function updateMinutes(event: Event) {
@@ -45,6 +45,8 @@ function updateHours(event: Event) {
             .format();
     }
 }
+
+const emit = defineEmits(['changed']);
 </script>
 
 <template>
@@ -59,6 +61,8 @@ function updateHours(event: Event) {
             <input
                 :value="hours"
                 @input="updateHours"
+                @keydown.enter="emit('changed')"
+                @focus="($event.target as HTMLInputElement).select()"
                 data-testid="time_picker_hour"
                 type="text"
                 :class="
@@ -70,7 +74,9 @@ function updateHours(event: Event) {
             <span>:</span>
             <input
                 :value="minutes"
+                @keydown.enter="emit('changed')"
                 @input="updateMinutes"
+                @focus="($event.target as HTMLInputElement).select()"
                 data-testid="time_picker_minute"
                 type="text"
                 :class="
diff --git a/resources/js/Components/Common/TimeRangeSelector.vue b/resources/js/Components/Common/TimeRangeSelector.vue
new file mode 100644
index 00000000..85a0fe5a
--- /dev/null
+++ b/resources/js/Components/Common/TimeRangeSelector.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { defineProps, ref, watch } from 'vue';
+import TimePicker from '@/Components/Common/TimePicker.vue';
+import { useFocusWithin } from '@vueuse/core';
+
+const props = defineProps<{
+    start: string;
+    end: string | null;
+}>();
+
+const emit = defineEmits(['changed']);
+const tempStart = ref(props.start);
+const tempEnd = ref(props.end || null);
+
+watch(props, () => {
+    tempStart.value = props.start;
+    tempEnd.value = props.end;
+});
+function updateTimeEntry() {
+    if (tempStart.value !== props.start || tempEnd.value !== props.end) {
+        emit('changed', tempStart.value, tempEnd.value);
+    }
+}
+
+const dropdownContent = ref();
+const { focused } = useFocusWithin(dropdownContent);
+
+watch(focused, (newValue, oldValue) => {
+    if (oldValue === true && newValue === false) {
+        updateTimeEntry();
+    }
+});
+</script>
+
+<template>
+    <div
+        ref="dropdownContent"
+        class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-1">
+        <div>
+            <div class="font-bold text-white text-sm pb-1">Start</div>
+            <TimePicker
+                data-testid="time_entry_range_start"
+                @changed="updateTimeEntry"
+                v-model="tempStart"></TimePicker>
+        </div>
+        <div>
+            <div class="font-bold text-white text-sm pb-1">End</div>
+            <TimePicker
+                v-if="tempEnd !== null"
+                data-testid="time_entry_range_end"
+                @changed="updateTimeEntry"
+                v-model="tempEnd"></TimePicker>
+            <div class="text-muted" v-else>-- : --</div>
+        </div>
+    </div>
+</template>
+
+<style></style>
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue
new file mode 100644
index 00000000..d340b524
--- /dev/null
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+import { computed, ref } from 'vue';
+import TimeRangeSelector from '@/Components/Common/TimeRangeSelector.vue';
+import dayjs from 'dayjs';
+import parse from 'parse-duration';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
+import { storeToRefs } from 'pinia';
+import { getDayJsInstance } from '@/utils/time';
+const currentTimeEntryStore = useCurrentTimeEntryStore();
+const { startLiveTimer, stopLiveTimer, updateTimer } = currentTimeEntryStore;
+const { currentTimeEntry, now } = storeToRefs(currentTimeEntryStore);
+
+defineEmits(['changed']);
+
+const open = ref(false);
+
+function pauseLiveTimerUpdate(event: FocusEvent) {
+    (event.target as HTMLInputElement).select();
+    stopLiveTimer();
+}
+
+function onTimeEntryEnterPress() {
+    updateTimerAndStartLiveTimerUpdate();
+    const activeElement = document.activeElement as HTMLElement;
+    activeElement?.blur();
+}
+
+const currentTime = computed({
+    get() {
+        if (temporaryCustomTimerEntry.value !== '') {
+            return temporaryCustomTimerEntry.value;
+        }
+        if (now.value && currentTimeEntry.value.start) {
+            const startTime = dayjs(currentTimeEntry.value.start);
+            const diff = now.value.diff(startTime);
+            return dayjs(diff).utc().format('HH:mm:ss');
+        }
+        return null;
+    },
+    // setter
+    set(newValue) {
+        if (newValue) {
+            temporaryCustomTimerEntry.value = newValue;
+        } else {
+            temporaryCustomTimerEntry.value = '';
+        }
+    },
+});
+
+function updateTimerAndStartLiveTimerUpdate() {
+    const time = parse(temporaryCustomTimerEntry.value, 's');
+
+    if (isNumeric(temporaryCustomTimerEntry.value)) {
+        const newStartDate = dayjs().subtract(
+            parseInt(temporaryCustomTimerEntry.value),
+            'm'
+        );
+        currentTimeEntry.value.start = newStartDate.utc().format();
+        if (currentTimeEntry.value.id !== '') {
+            currentTimeEntryStore.updateTimer();
+        } else {
+            currentTimeEntryStore.startTimer();
+        }
+    } else if (isHHMM(temporaryCustomTimerEntry.value)) {
+        const results = parseHHMM(temporaryCustomTimerEntry.value);
+        if (results) {
+            const newStartDate = dayjs()
+                .subtract(parseInt(results[1]), 'h')
+                .subtract(parseInt(results[2]), 'm');
+            currentTimeEntry.value.start = newStartDate.utc().format();
+            if (currentTimeEntry.value.id !== '') {
+                currentTimeEntryStore.updateTimer();
+            } else {
+                currentTimeEntryStore.startTimer();
+            }
+        }
+    }
+    // try to parse natural language like "1h 30m"
+    else if (time && time > 1) {
+        const newStartDate = dayjs().subtract(time, 's');
+        currentTimeEntry.value.start = newStartDate.utc().format();
+        if (currentTimeEntry.value.id !== '') {
+            currentTimeEntryStore.updateTimer();
+        } else {
+            currentTimeEntryStore.startTimer();
+        }
+    }
+    // fallback to minutes if just a number is given
+    now.value = dayjs().utc();
+    temporaryCustomTimerEntry.value = '';
+    startLiveTimer();
+}
+
+function isNumeric(value: string) {
+    return /^-?\d+$/.test(value);
+}
+
+const HHMMtimeRegex = /^([0-9]{1,2}):([0-5]?[0-9])$/;
+
+function isHHMM(value: string): boolean {
+    return HHMMtimeRegex.test(value);
+}
+
+function parseHHMM(value: string): string[] | null {
+    return value.match(HHMMtimeRegex);
+}
+const temporaryCustomTimerEntry = ref<string>('');
+
+async function updateTimeRange(newStart: string) {
+    if (getDayJsInstance()(newStart).isBefore(getDayJsInstance()())) {
+        // prohibit updates in the future
+        currentTimeEntry.value.start = newStart;
+        await updateTimer();
+    }
+}
+</script>
+
+<template>
+    <div class="relative">
+        <Dropdown
+            v-model="open"
+            @submit="open = false"
+            align="bottom"
+            :close-on-content-click="false">
+            <template #trigger>
+                <input
+                    placeholder="00:00:00"
+                    @focus="pauseLiveTimerUpdate"
+                    data-testid="time_entry_time"
+                    @blur="updateTimerAndStartLiveTimerUpdate"
+                    @keydown.enter="onTimeEntryEnterPress"
+                    v-model="currentTime"
+                    class="w-[110px] sm:w-[130px] h-full text-white py-2.5 rounded-r-lg text-center px-4 text-sm sm:text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition"
+                    type="text" />
+            </template>
+            <template #content>
+                <TimeRangeSelector
+                    @changed="updateTimeRange"
+                    :start="currentTimeEntry.start"
+                    :end="null">
+                </TimeRangeSelector>
+            </template>
+        </Dropdown>
+    </div>
+</template>
+
+<style></style>
diff --git a/resources/js/Components/TimeTracker.vue b/resources/js/Components/TimeTracker.vue
index 43e5807e..759ae6ef 100644
--- a/resources/js/Components/TimeTracker.vue
+++ b/resources/js/Components/TimeTracker.vue
@@ -5,19 +5,19 @@ import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 import { usePage } from '@inertiajs/vue3';
 import { type User } from '@/types/models';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import duration from 'dayjs/plugin/duration';
 
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { storeToRefs } from 'pinia';
-import parse from 'parse-duration';
 import TimeTrackerTagDropdown from '@/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { switchOrganization } from '@/utils/useOrganization';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
+import TimeTrackerRangeSelector from '@/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue';
 
 const page = usePage<{
     auth: {
@@ -41,30 +41,6 @@ watch(isActive, () => {
     }
 });
 
-const temporaryCustomTimerEntry = ref<string>('');
-
-const currentTime = computed({
-    get() {
-        if (temporaryCustomTimerEntry.value !== '') {
-            return temporaryCustomTimerEntry.value;
-        }
-        if (now.value && currentTimeEntry.value.start) {
-            const startTime = dayjs(currentTimeEntry.value.start);
-            const diff = now.value.diff(startTime);
-            return dayjs(diff).utc().format('HH:mm:ss');
-        }
-        return null;
-    },
-    // setter
-    set(newValue) {
-        if (newValue) {
-            temporaryCustomTimerEntry.value = newValue;
-        } else {
-            temporaryCustomTimerEntry.value = '';
-        }
-    },
-});
-
 onMounted(async () => {
     if (page.props.auth.user.current_team_id) {
         await currentTimeEntryStore.fetchCurrentTimeEntry();
@@ -78,80 +54,12 @@ function updateTimeEntry() {
     }
 }
 
-function pauseLiveTimerUpdate() {
-    stopLiveTimer();
-}
-
-function updateTimerAndStartLiveTimerUpdate() {
-    const time = parse(temporaryCustomTimerEntry.value, 's');
-
-    if (isNumeric(temporaryCustomTimerEntry.value)) {
-        const newStartDate = dayjs().subtract(
-            parseInt(temporaryCustomTimerEntry.value),
-            'm'
-        );
-        currentTimeEntry.value.start = newStartDate.utc().format();
-        if (currentTimeEntry.value.id !== '') {
-            currentTimeEntryStore.updateTimer();
-        } else {
-            currentTimeEntryStore.startTimer();
-        }
-    } else if (isHHMM(temporaryCustomTimerEntry.value)) {
-        const results = parseHHMM(temporaryCustomTimerEntry.value);
-        if (results) {
-            const newStartDate = dayjs()
-                .subtract(parseInt(results[1]), 'h')
-                .subtract(parseInt(results[2]), 'm');
-            currentTimeEntry.value.start = newStartDate.utc().format();
-            if (currentTimeEntry.value.id !== '') {
-                currentTimeEntryStore.updateTimer();
-            } else {
-                currentTimeEntryStore.startTimer();
-            }
-        }
-    }
-    // try to parse natural language like "1h 30m"
-    else if (time && time > 1) {
-        const newStartDate = dayjs().subtract(time, 's');
-        currentTimeEntry.value.start = newStartDate.utc().format();
-        if (currentTimeEntry.value.id !== '') {
-            currentTimeEntryStore.updateTimer();
-        } else {
-            currentTimeEntryStore.startTimer();
-        }
-    }
-    // fallback to minutes if just a number is given
-    now.value = dayjs().utc();
-    temporaryCustomTimerEntry.value = '';
-    startLiveTimer();
-}
-
-function isNumeric(value: string) {
-    return /^-?\d+$/.test(value);
-}
-
-const HHMMtimeRegex = /^([0-9]{1,2}):([0-5]?[0-9])$/;
-
-function isHHMM(value: string): boolean {
-    return HHMMtimeRegex.test(value);
-}
-
-function parseHHMM(value: string): string[] | null {
-    return value.match(HHMMtimeRegex);
-}
-
 function startTimerIfNotActive() {
     if (!isActive.value) {
         onToggleButtonPress(true);
     }
 }
 
-function onTimeEntryEnterPress() {
-    updateTimerAndStartLiveTimerUpdate();
-    const activeElement = document.activeElement as HTMLElement;
-    activeElement?.blur();
-}
-
 const isRunningInDifferentOrganization = computed(() => {
     return (
         currentTimeEntry.value.organization_id &&
@@ -219,15 +127,7 @@ function switchToTimeEntryOrganization() {
                             "></BillableToggleButton>
                     </div>
                     <div class="border-l border-card-border">
-                        <input
-                            placeholder="00:00:00"
-                            @focus="pauseLiveTimerUpdate"
-                            data-testid="time_entry_time"
-                            @blur="updateTimerAndStartLiveTimerUpdate"
-                            @keydown.enter="onTimeEntryEnterPress"
-                            v-model="currentTime"
-                            class="w-[110px] sm:w-[130px] h-full text-white py-2.5 rounded-r-lg text-center px-4 text-sm sm:text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition"
-                            type="text" />
+                        <TimeTrackerRangeSelector></TimeTrackerRangeSelector>
                     </div>
                 </div>
             </div>