add timesheets page

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>