add timesheets page

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

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed, inject, ref, type ComputedRef } from 'vue';
+import { formatHumanReadableDuration, parseTimeInput } from '@/packages/ui/src/utils/time';
+import TextInput from '@/packages/ui/src/Input/TextInput.vue';
+import type { Organization } from '@/packages/api/src';
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
+const organizationSettings = computed(() => ({
+    intervalFormat: organization?.value?.interval_format ?? 'hours-minutes',
+    numberFormat: organization?.value?.number_format ?? 'point',
+}));
+
+const props = withDefaults(
+    defineProps<{
+        modelValue?: number | null;
+        placeholder?: string;
+        disabled?: boolean;
+        inputClass?: string;
+        size?: 'sm' | 'base';
+        defaultUnit?: 'auto' | 'hours' | 'minutes';
+    }>(),
+    {
+        modelValue: null,
+        placeholder: '-',
+        disabled: false,
+        inputClass: '',
+        size: 'base',
+        defaultUnit: 'auto',
+    }
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: number | null];
+    commit: [value: number | null];
+    submit: [];
+}>();
+
+const temporaryValue = ref('');
+const isEditing = ref(false);
+const hasPendingEdit = ref(false);
+const skipNextCommit = ref(false);
+
+function formatModelValue(value: number | null | undefined): string {
+    if (!value || value === 0) {
+        return '';
+    }
+
+    return formatHumanReadableDuration(
+        value,
+        organizationSettings.value.intervalFormat,
+        organizationSettings.value.numberFormat
+    );
+}
+
+const displayValue = computed({
+    get() {
+        if (isEditing.value) {
+            return temporaryValue.value;
+        }
+        return formatModelValue(props.modelValue);
+    },
+    set(newValue: string) {
+        temporaryValue.value = newValue;
+        hasPendingEdit.value = true;
+    },
+});
+
+function selectInput(event: Event) {
+    isEditing.value = true;
+    hasPendingEdit.value = false;
+    skipNextCommit.value = false;
+    temporaryValue.value = formatModelValue(props.modelValue);
+    const target = event.target as HTMLInputElement;
+    target.select();
+}
+
+function resetEditingState() {
+    temporaryValue.value = '';
+    isEditing.value = false;
+    hasPendingEdit.value = false;
+}
+
+function commitValue() {
+    if (skipNextCommit.value) {
+        skipNextCommit.value = false;
+        return;
+    }
+
+    const input = temporaryValue.value.trim();
+    const shouldCommit = hasPendingEdit.value;
+    resetEditingState();
+
+    if (!shouldCommit) {
+        return;
+    }
+
+    // Blank or literal "0" → null. Consumers decide what null means
+    // (clear estimate, delete cell, etc.) by reading their own emit.
+    if (input === '' || input === '0') {
+        emit('update:modelValue', null);
+        emit('commit', null);
+        return;
+    }
+
+    const defaultUnit =
+        props.defaultUnit === 'auto'
+            ? organizationSettings.value.intervalFormat === 'decimal'
+                ? 'hours'
+                : 'minutes'
+            : props.defaultUnit;
+    const seconds = parseTimeInput(input, organizationSettings.value.numberFormat, defaultUnit);
+
+    if (seconds !== null && seconds >= 0) {
+        emit('update:modelValue', seconds);
+        emit('commit', seconds);
+    }
+}
+
+function cancelEdit(event: Event) {
+    skipNextCommit.value = true;
+    resetEditingState();
+    (event.target as HTMLInputElement).blur();
+}
+
+function commitAndSubmit() {
+    commitValue();
+    emit('submit');
+}
+</script>
+
+<template>
+    <TextInput
+        v-model="displayValue"
+        data-testid="duration_seconds_input"
+        name="Duration"
+        :size="size"
+        :disabled="disabled"
+        :placeholder="isEditing ? '0' : placeholder"
+        :class="inputClass"
+        @focus="selectInput"
+        @blur="commitValue"
+        @keydown.enter.prevent="commitAndSubmit"
+        @keydown.escape="cancelEdit" />
+</template>

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

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, inject } from 'vue';
-import { formatHumanReadableDuration, parseTimeInput } from '@/packages/ui/src/utils/time';
+import DurationSecondsInput from '@/packages/ui/src/Input/DurationSecondsInput.vue';
 import { twMerge } from 'tailwind-merge';
-import { TextInput } from '@/packages/ui/src';
-import type { Organization } from '@/packages/api/src';
-import { type ComputedRef } from 'vue';
-
-const temporaryInput = ref<string>('');
 
 const model = defineModel<number | null>({
     default: null,
@@ -16,64 +10,16 @@ const emit = defineEmits<{
     submit: [];
 }>();
 
-const organization = inject<ComputedRef<Organization>>('organization');
-
-function updateDuration() {
-    const input = temporaryInput.value.trim();
-
-    if (input === '') {
-        model.value = null;
-        return;
-    }
-
-    const seconds = parseTimeInput(input, organization?.value?.number_format, 'hours');
-    if (seconds !== null && seconds > 0) {
-        model.value = seconds;
-    }
-
-    updateInputDisplay();
-}
-
 const props = defineProps<{
     class?: string;
 }>();
-
-watch(model, updateInputDisplay);
-onMounted(() => updateInputDisplay());
-
-function updateInputDisplay() {
-    if (model.value !== null && model.value > 0) {
-        temporaryInput.value = formatHumanReadableDuration(
-            model.value,
-            organization?.value?.interval_format,
-            organization?.value?.number_format
-        );
-    } else {
-        temporaryInput.value = '';
-    }
-}
-
-function selectInput(event: Event) {
-    const target = event.target as HTMLInputElement;
-    target.select();
-}
-
-function updateAndSubmit() {
-    updateDuration();
-    emit('submit');
-}
 </script>
 
 <template>
-    <TextInput
-        ref="inputField"
-        v-model="temporaryInput"
-        :class="twMerge('text-text-secondary', props.class)"
-        type="text"
+    <DurationSecondsInput
+        v-model="model"
+        :input-class="twMerge('placeholder:text-text-tertiary', props.class)"
         placeholder="e.g. 2h 30m or 1.5"
-        @focus="selectInput"
-        @blur="updateDuration"
-        @keydown.enter="updateAndSubmit" />
+        default-unit="hours"
+        @submit="emit('submit')" />
 </template>
-
-<style scoped></style>

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

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { twMerge } from 'tailwind-merge';
 
-const props = defineProps<{
-    name?: string;
-    class?: string;
-}>();
+const props = withDefaults(
+    defineProps<{
+        name?: string;
+        class?: string;
+        size?: 'sm' | 'base';
+    }>(),
+    { size: 'base' }
+);
 
 const input = ref<HTMLInputElement | null>(null);
 
@@ -17,6 +21,10 @@ onMounted(() => {
 
 defineExpose({ focus: () => input.value?.focus() });
 const model = defineModel();
+
+const sizeClasses = computed(() =>
+    props.size === 'sm' ? 'h-7 px-2 py-0.5 text-xs' : 'h-9 px-3 py-1 text-base sm:text-sm'
+);
 </script>
 
 <template>
@@ -25,7 +33,8 @@ const model = defineModel();
         v-model="model"
         :class="
             twMerge(
-                'h-9 px-3 py-1 text-base sm:text-sm border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
+                'border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
+                sizeClasses,
                 props.class
             )
         "