improve manual time entry modal, improve time picker, add human duration input

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -54,7 +54,7 @@ const emit = defineEmits(['changed']);
             @keydown.enter="updateDate"
             :class="
                 twMerge(
-                    'bg-input-background border text-white border-input-border rounded-md',
+                    'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:ring-0 rounded-md',
                     props.class
                 )
             "
@@ -68,6 +68,7 @@ const emit = defineEmits(['changed']);
 <style scoped>
 input::-webkit-calendar-picker-indicator {
     filter: invert(1);
+
     opacity: 0.2;
 }
 </style>

resources/js/packages/ui/src/Input/DurationHumanInput.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import parse from 'parse-duration';
+import { computed, ref } from 'vue';
+import {
+    formatHumanReadableDuration,
+    getDayJsInstance,
+} from '@/packages/ui/src/utils/time';
+import dayjs from 'dayjs';
+import { twMerge } from 'tailwind-merge';
+const temporaryCustomTimerEntry = ref<string>('');
+
+const start = defineModel('start', {
+    default: '',
+});
+
+const end = defineModel('end', {
+    default: '',
+});
+
+function isHHMM(value: string): boolean {
+    return HHMMtimeRegex.test(value);
+}
+
+function parseHHMM(value: string): string[] | null {
+    return value.match(HHMMtimeRegex);
+}
+
+function updateDuration() {
+    const time = parse(temporaryCustomTimerEntry.value, 's');
+
+    if (isNumeric(temporaryCustomTimerEntry.value)) {
+        const newStartDate = getDayJsInstance()(end.value).subtract(
+            parseInt(temporaryCustomTimerEntry.value),
+            'm'
+        );
+        start.value = newStartDate.utc().format();
+    } else if (isHHMM(temporaryCustomTimerEntry.value)) {
+        const results = parseHHMM(temporaryCustomTimerEntry.value);
+        if (results) {
+            const newStartDate = getDayJsInstance()(end.value)
+                .subtract(parseInt(results[1]), 'h')
+                .subtract(parseInt(results[2]), 'm');
+            start.value = newStartDate.utc().format();
+        }
+    }
+    // try to parse natural language like "1h 30m"
+    else if (time && time > 1) {
+        const newStartDate = getDayJsInstance()(end.value).subtract(time, 's');
+        start.value = newStartDate.utc().format();
+    }
+    // fallback to minutes if just a number is given
+    temporaryCustomTimerEntry.value = '';
+}
+
+function isNumeric(value: string) {
+    return /^-?\d+$/.test(value);
+}
+
+const props = defineProps<{
+    class?: string;
+}>();
+
+const HHMMtimeRegex = /^([0-9]{1,2}):([0-5]?[0-9])$/;
+
+const currentTime = computed({
+    get() {
+        if (temporaryCustomTimerEntry.value !== '') {
+            return temporaryCustomTimerEntry.value;
+        }
+        if (start.value && end.value) {
+            const startTime = dayjs(start.value);
+            const diff = getDayJsInstance()(end.value).diff(
+                startTime,
+                'seconds'
+            );
+            return formatHumanReadableDuration(diff);
+        }
+        return null;
+    },
+    // setter
+    set(newValue) {
+        if (newValue) {
+            temporaryCustomTimerEntry.value = newValue;
+        } else {
+            temporaryCustomTimerEntry.value = '';
+        }
+    },
+});
+</script>
+
+<template>
+    <input
+        placeholder="00:00:00"
+        ref="inputField"
+        @blur="updateDuration"
+        @keydown.enter="updateDuration"
+        v-model="currentTime"
+        :class="twMerge('text-text-secondary', props.class)"
+        type="text" />
+</template>
+
+<style scoped></style>

resources/js/packages/ui/src/Input/SelectDropdown.vue

@@ -1,28 +1,33 @@
 <script setup lang="ts" generic="T">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { type Component, computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import SelectDropdownItem from '@/packages/ui/src/Input/SelectDropdownItem.vue';
 import { onKeyStroke } from '@vueuse/core';
 import { type Placement } from '@floating-ui/vue';
+import { twMerge } from 'tailwind-merge';
 
 const model = defineModel<string | null>({
     default: null,
 });
 
+const open = defineModel('open', {
+    default: false,
+});
+
 const props = withDefaults(
     defineProps<{
         items: T[];
         getKeyFromItem: (item: T) => string | null;
         getNameForItem: (item: T) => string;
         align?: Placement;
+        class?: string;
     }>(),
     {
         align: 'bottom-start',
     }
 );
 
-const open = ref(false);
-const dropdownViewport = ref<Component | null>(null);
+const dropdownViewport = ref<HTMLDivElement | null>(null);
 
 const searchValue = ref('');
 
@@ -84,7 +89,7 @@ function moveHighlightDown() {
     }
 }
 
-const highlightedItemId = ref<string | null>(null);
+const highlightedItemId = ref<string | null>(model.value);
 const highlightedItem = computed(() => {
     return props.items.find(
         (item) => props.getKeyFromItem(item) === highlightedItemId.value
@@ -114,9 +119,21 @@ onKeyStroke('Enter', (e) => {
 
 watch(open, () => {
     if (open.value === true) {
-        highlightedItemId.value = model.value;
+        nextTick(() => {
+            scrollCurrentItemInView();
+        });
     }
 });
+
+function scrollCurrentItemInView() {
+    const highlightedDomElement = dropdownViewport.value?.querySelector(
+        `[data-select-id="${model.value}"]`
+    ) as HTMLElement;
+    dropdownViewport.value?.scrollTo({
+        top: highlightedDomElement?.offsetTop ?? 0,
+        behavior: 'instant',
+    });
+}
 </script>
 
 <template>
@@ -125,11 +142,16 @@ watch(open, () => {
             <slot name="trigger"> </slot>
         </template>
         <template #content>
-            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
+            <div
+                ref="dropdownViewport"
+                :class="
+                    twMerge('w-60 max-h-60 overflow-y-scroll', props.class)
+                ">
                 <div
                     v-for="item in filteredItems"
                     :key="props.getKeyFromItem(item) ?? 'none'"
                     role="option"
+                    :data-select-id="props.getKeyFromItem(item)"
                     :value="props.getKeyFromItem(item)"
                     :class="{
                         'bg-card-background-active':

resources/js/packages/ui/src/Input/TimePicker.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import {
     getDayJsInstance,
     getLocalizedDayJs,
 } from '@/packages/ui/src/utils/time';
-import { twMerge } from 'tailwind-merge';
 import { useFocus } from '@vueuse/core';
+import { SelectDropdown, TextInput } from '@/packages/ui/src';
 
 // This has to be a localized timestamp, not UTC
 const model = defineModel<string | null>({
@@ -23,98 +23,104 @@ const props = withDefaults(
     }
 );
 
-const hours = ref(
-    model.value ? getLocalizedDayJs(model.value).format('HH') : null
-);
-const minutes = ref(
-    model.value ? getLocalizedDayJs(model.value).format('mm') : null
-);
-watch(
-    () => model.value,
-    () => {
-        hours.value = model.value
-            ? getLocalizedDayJs(model.value).format('HH')
-            : null;
-        minutes.value = model.value
-            ? getLocalizedDayJs(model.value).format('mm')
-            : null;
-    }
-);
-
-function updateMinutes(event: Event) {
+function updateTime(event: Event) {
     const target = event.target as HTMLInputElement;
-    const newValue = target.value;
-    if (!isNaN(parseInt(newValue))) {
-        model.value = getDayJsInstance()(model.value)
-            .set('minutes', Math.min(parseInt(newValue), 59))
-            .format();
+    const newValue = target.value.trim();
+    if (newValue.split(':').length === 2) {
+        const [hours, minutes] = newValue.split(':');
+        if (!isNaN(parseInt(hours)) && !isNaN(parseInt(minutes))) {
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
+        }
     }
-    minutes.value = model.value
-        ? getLocalizedDayJs(model.value).format('mm')
-        : null;
+    inputValue.value = getLocalizedDayJs(model.value).format('HH:mm');
 }
 
-function updateHours(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const newValue = target.value;
-    if (newValue.endsWith(':')) {
-        minutesInput.value?.focus();
-    } else if (!isNaN(parseInt(newValue))) {
-        model.value = getLocalizedDayJs(model.value)
-            .set('hours', Math.min(parseInt(newValue), 23))
-            .format();
-    }
-    hours.value = model.value
-        ? getLocalizedDayJs(model.value).format('HH')
-        : null;
-}
+watch(model, (value) => {
+    inputValue.value = value ? getLocalizedDayJs(value).format('HH:mm') : null;
+});
 
-const hoursInput = ref<HTMLInputElement | null>(null);
-const minutesInput = ref<HTMLInputElement | null>(null);
+const timeInput = ref<HTMLInputElement | null>(null);
 const emit = defineEmits(['changed']);
 
-useFocus(hoursInput, { initialValue: props.focus });
+useFocus(timeInput, { initialValue: props.focus });
+
+const getStartOptions = computed(() => {
+    // options for the entire day in 15 minute intervals
+    const options = [];
+    for (let hour = 0; hour < 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 15) {
+            const timestamp = getLocalizedDayJs(model.value)
+                .set('hour', hour)
+                .set('minute', minute)
+                .format();
+            const name = getLocalizedDayJs(model.value)
+                .set('hour', hour)
+                .set('minute', minute)
+                .format('HH:mm');
+            options.push({ timestamp, name });
+        }
+    }
+    return options;
+});
+const inputValue = ref(
+    model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null
+);
+const open = ref(false);
+const closestValue = computed({
+    get() {
+        const target = getDayJsInstance()(model.value);
+        let closestDiff: number | null = null;
+        let closest = target;
+        for (const option of getStartOptions.value) {
+            const diff = Math.abs(
+                getDayJsInstance()(option.timestamp).diff(target)
+            );
+            if (closestDiff === null || diff < closestDiff) {
+                closestDiff = diff;
+                closest = getDayJsInstance()(option.timestamp);
+            }
+        }
+        return closest.format();
+    },
+    set(value: string) {
+        model.value = value;
+        emit('changed', model.value);
+    },
+});
 </script>
 
 <template>
-    <div class="flex items-center justify-center text-white">
-        <div
-            :class="
-                twMerge(
-                    'border bg-input-background rounded-md border-input-border overflow-hidden',
-                    props.size === 'large' ? 'py-1.5 px-2' : ''
-                )
-            ">
-            <input
-                v-model="hours"
-                ref="hoursInput"
-                @input="updateHours"
-                @keydown.enter="emit('changed')"
-                @focus="($event.target as HTMLInputElement).select()"
-                data-testid="time_picker_hour"
-                type="text"
-                :class="
-                    twMerge(
-                        'border-none bg-transparent px-1 py-0.5 w-[30px] text-center focus:ring-0 focus:bg-card-background-active',
-                        props.size === 'large' ? 'text-base' : 'text-sm'
-                    )
-                " />
-            <span>:</span>
-            <input
-                v-model="minutes"
-                ref="minutesInput"
-                @keydown.enter="emit('changed')"
-                @input="updateMinutes"
-                @focus="($event.target as HTMLInputElement).select()"
-                data-testid="time_picker_minute"
-                type="text"
-                :class="
-                    twMerge(
-                        'border-none bg-transparent px-1 py-1 w-[30px] text-center focus:ring-0 focus:bg-card-background-active',
-                        props.size === 'large' ? 'text-base' : 'text-sm'
-                    )
-                " />
-        </div>
+    <div class="flex min-w-0 items-center justify-center text-white">
+        <SelectDropdown
+            class="min-w-0 w-28"
+            v-model="closestValue"
+            v-model:open="open"
+            :get-key-from-item="(item) => item.timestamp"
+            :get-name-for-item="(item) => item.name"
+            :items="getStartOptions">
+            <template #trigger>
+                <TextInput
+                    v-model="inputValue"
+                    ref="timeInput"
+                    class="w-28 text-center"
+                    @blur="updateTime"
+                    @keydown.enter="
+                        updateTime($event);
+                        open = false;
+                    "
+                    @focus="($event.target as HTMLInputElement).select()"
+                    @mouseup="($event.target as HTMLInputElement).select()"
+                    @click="($event.target as HTMLInputElement).select()"
+                    @pointerup="($event.target as HTMLInputElement).select()"
+                    @focusin="open = true"
+                    data-testid="time_picker_hour"
+                    type="text" />
+            </template>
+        </SelectDropdown>
     </div>
 </template>