add frontend support for the date formatting option

This commit is contained in:
Gregor Vostrak
2025-05-08 18:00:25 +02:00
committed by Constantin Graf
parent f69bc28316
commit a076bb2fb0
6 changed files with 34 additions and 22 deletions

View File

@@ -43,7 +43,7 @@ const xAxisLabels = computed(() => {
if (props.groupedType === 'week') {
return props?.groupedData?.map((el) => formatWeek(el.key));
}
return props?.groupedData?.map((el) => formatDate(el.key ?? ''));
return props?.groupedData?.map((el) => formatDate(el.key ?? '', organization?.value?.date_format));
});
const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
const labelColor = useCssVar('--color-text-secondary', null, { observe: true });

View File

@@ -9,7 +9,8 @@ import { Calendar } from '@/Components/ui/calendar';
import { CalendarIcon } from 'lucide-vue-next';
import { formatDateLocalized } from '@/packages/ui/src/utils/time';
import { parseDate } from '@internationalized/date';
import { computed } from 'vue';
import { computed, inject, type ComputedRef } from 'vue';
import { type Organization } from '@/packages/api/src';
const model = defineModel<string | null>();
const emit = defineEmits<{
@@ -27,6 +28,8 @@ const handleBlur = () => {
const date = computed(() => {
return model.value ? parseDate(model.value) : undefined;
});
const organization = inject<ComputedRef<Organization>>('organization');
</script>
<template>
@@ -41,7 +44,7 @@ const date = computed(() => {
]"
>
<CalendarIcon class="mr-2 h-4 w-4" />
{{ model ? formatDateLocalized(model) : 'Pick a date' }}
{{ model ? formatDateLocalized(model, organization?.date_format) : 'Pick a date' }}
</Button>
</PopoverTrigger>
<PopoverContent class="w-auto p-0">