add time picker to timetracker, fixes ST-180

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>