add support for interval / duration format in frontend views

This commit is contained in:
Gregor Vostrak
2025-05-07 19:39:23 +02:00
parent e374d8b3de
commit 8b950d99d6
24 changed files with 1219 additions and 843 deletions

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import parse from 'parse-duration';
import { onMounted, ref, watch } from 'vue';
import { onMounted, ref, watch, inject } from 'vue';
import {
formatHumanReadableDuration,
getDayJsInstance,
@@ -8,6 +8,9 @@ import {
import dayjs from 'dayjs';
import { twMerge } from 'tailwind-merge';
import { TextInput } from '@/packages/ui/src';
import type { Organization } from '@/packages/api/src';
import { type ComputedRef } from 'vue';
const temporaryCustomTimerEntry = ref<string>('');
const start = defineModel('start', {
@@ -18,6 +21,8 @@ const end = defineModel('end', {
default: '',
});
const organization = inject<ComputedRef<Organization>>('organization');
function isHHMM(value: string): boolean {
return HHMMtimeRegex.test(value);
}
@@ -70,7 +75,11 @@ function updateTimeEntryInputValue() {
if (start.value && end.value) {
const startTime = dayjs(start.value);
const diff = getDayJsInstance()(end.value).diff(startTime, 'seconds');
temporaryCustomTimerEntry.value = formatHumanReadableDuration(diff);
temporaryCustomTimerEntry.value = formatHumanReadableDuration(
diff,
organization?.value?.interval_format,
organization?.value?.number_format
);
}
}
</script>