improve time estimate input, responsive time entry create modal fixes,

fixes #460, #800

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

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { TextInput } from '@/packages/ui/src';
-
-const model = defineModel<number | null>({
-    default: null,
-});
-
-const emit = defineEmits<{
-    submit: [];
-}>();
-
-const temporaryCustomTimerEntry = ref<string>('');
-
-function updateDuration() {
-    const hours = parseInt(temporaryCustomTimerEntry.value);
-    if (!isNaN(hours)) {
-        model.value = hours * 60 * 60;
-    }
-    temporaryCustomTimerEntry.value = '';
-}
-
-const currentTime = computed({
-    get() {
-        if (temporaryCustomTimerEntry.value !== '') {
-            return temporaryCustomTimerEntry.value;
-        }
-        if (model.value === null) {
-            return '';
-        }
-        return Math.round(model.value / 60 / 60).toString();
-    },
-    // setter
-    set(newValue) {
-        if (newValue) {
-            temporaryCustomTimerEntry.value = newValue;
-        } else {
-            temporaryCustomTimerEntry.value = '';
-        }
-    },
-});
-
-function selectInput(event: Event) {
-    const target = event.target as HTMLInputElement;
-    target.select();
-}
-
-function updateAndSubmit() {
-    updateDuration();
-    emit('submit');
-}
-</script>
-
-<template>
-    <div class="relative">
-        <TextInput
-            v-model="currentTime"
-            class="w-full overflow-hidden pr-14"
-            placeholder="0"
-            @focus="selectInput"
-            @blur="updateDuration"
-            @keydown.enter="updateAndSubmit">
-        </TextInput>
-        <div class="absolute top-0 right-0 h-full flex items-center px-4 font-medium">
-            <span> hours </span>
-        </div>
-    </div>
-</template>
-
-<style scoped></style>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { onMounted, ref, watch, inject } from 'vue';
+import { formatHumanReadableDuration, parseTimeInput } from '@/packages/ui/src/utils/time';
+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,
+});
+
+const emit = defineEmits<{
+    submit: [];
+}>();
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
+function updateDuration() {
+    const input = temporaryInput.value.trim();
+
+    if (input === '') {
+        model.value = null;
+        return;
+    }
+
+    // Use parseTimeInput with 'hours' as default unit for estimated time
+    const seconds = parseTimeInput(input, '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"
+        placeholder="e.g. 2h 30m or 1.5"
+        @focus="selectInput"
+        @blur="updateDuration"
+        @keydown.enter="updateAndSubmit" />
+</template>
+
+<style scoped></style>