From a076bb2fb034424241d85a96f26b79fc3956cd5e Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 8 May 2025 18:00:25 +0200
Subject: [PATCH] add frontend support for the date formatting option

---
 .../Common/Reporting/ReportingChart.vue       |  2 +-
 .../ui/calendar/CalendarDateInput.vue         |  7 +++--
 .../packages/ui/src/Input/DateRangePicker.vue | 10 ++++---
 .../src/TimeEntry/TimeEntryRangeSelector.vue  |  9 ++++---
 .../ui/src/TimeEntry/TimeEntryRowHeading.vue  |  2 +-
 resources/js/packages/ui/src/utils/time.ts    | 26 +++++++++++--------
 6 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/resources/js/Components/Common/Reporting/ReportingChart.vue b/resources/js/Components/Common/Reporting/ReportingChart.vue
index da96ec37..4a815fda 100644
--- a/resources/js/Components/Common/Reporting/ReportingChart.vue
+++ b/resources/js/Components/Common/Reporting/ReportingChart.vue
@@ -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 });
diff --git a/resources/js/Components/ui/calendar/CalendarDateInput.vue b/resources/js/Components/ui/calendar/CalendarDateInput.vue
index a8415756..42011362 100644
--- a/resources/js/Components/ui/calendar/CalendarDateInput.vue
+++ b/resources/js/Components/ui/calendar/CalendarDateInput.vue
@@ -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">
diff --git a/resources/js/packages/ui/src/Input/DateRangePicker.vue b/resources/js/packages/ui/src/Input/DateRangePicker.vue
index ef357887..17f6c1d9 100644
--- a/resources/js/packages/ui/src/Input/DateRangePicker.vue
+++ b/resources/js/packages/ui/src/Input/DateRangePicker.vue
@@ -7,8 +7,8 @@ import {
     getDayJsInstance,
     getLocalizedDayJs,
 } from '@/packages/ui/src/utils/time';
-import { ref } from 'vue';
-
+import { ref, inject, type ComputedRef } from 'vue';
+import { type Organization } from '@/packages/api/src';
 const start = defineModel('start', { default: '' });
 const end = defineModel('end', { default: '' });
 
@@ -95,6 +95,8 @@ function setLastYear() {
     emit('submit');
     open.value = false;
 }
+
+const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>
@@ -108,9 +110,9 @@ function setLastYear() {
                 class="px-2 py-1 bg-input-background border border-input-border font-medium rounded-lg flex items-center space-x-2">
                 <CalendarIcon class="w-5"></CalendarIcon>
                 <div class="text-text-primary">
-                    {{ formatDateLocalized(start) }}
+                    {{ formatDateLocalized(start, organization?.date_format) }}
                     <span class="px-1.5 text-text-secondary">-</span>
-                    {{ formatDateLocalized(end) }}
+                    {{ formatDateLocalized(end, organization?.date_format) }}
                 </div>
             </button>
         </template>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
index 4086937d..26ff99e6 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { defineProps, ref } from 'vue';
+import { defineProps, ref, inject, type ComputedRef } from 'vue';
 import {
     formatDateLocalized,
     formatStartEnd,
 } from '@/packages/ui/src/utils/time';
 import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
 import { twMerge } from 'tailwind-merge';
-
+import { type Organization } from '@/packages/api/src';
 defineProps<{
     start: string;
     end: string | null;
@@ -20,6 +20,9 @@ const emit = defineEmits<{
 
 const open = ref(false);
 const triggerElement = ref<HTMLButtonElement | null>(null);
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
 </script>
 
 <template>
@@ -44,7 +47,7 @@ const triggerElement = ref<HTMLButtonElement | null>(null);
                     ">
                     {{ formatStartEnd(start, end) }}
                     <span v-if="showDate" class="text-text-tertiary font-medium"
-                        >{{ formatDateLocalized(start) }}
+                        >{{ formatDateLocalized(start, organization?.date_format) }}
                     </span>
                 </button>
             </template>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
index 0e8061fe..81811337 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
@@ -58,7 +58,7 @@ function selectUnselectAll(value: boolean) {
                         {{ formatWeekday(date) }}
                     </span>
                     <span class="font-semibold text-text-secondary">
-                        {{ formatDate(date) }}
+                        {{ formatDate(date, organization?.date_format) }}
                     </span>
                 </div>
                 <div class="text-text-secondary pr-[90px] lg:pr-[92px]">
diff --git a/resources/js/packages/ui/src/utils/time.ts b/resources/js/packages/ui/src/utils/time.ts
index d29248f1..9556f927 100644
--- a/resources/js/packages/ui/src/utils/time.ts
+++ b/resources/js/packages/ui/src/utils/time.ts
@@ -13,13 +13,7 @@ import updateLocale from 'dayjs/plugin/updateLocale';
 import { computed } from 'vue';
 import { formatNumber } from './number';
 
-export type CurrencyFormat =
-    | 'iso-code-before-with-space'
-    | 'iso-code-after-with-space'
-    | 'symbol-before'
-    | 'symbol-after'
-    | 'symbol-before-with-space'
-    | 'symbol-after-with-space';
+
 export type DateFormat =
     | 'point-separated-d-m-yyyy'
     | 'slash-separated-mm-dd-yyyy'
@@ -27,6 +21,16 @@ export type DateFormat =
     | 'hyphen-separated-dd-mm-yyyy'
     | 'hyphen-separated-mm-dd-yyyy'
     | 'hyphen-separated-yyyy-mm-dd';
+
+const dateFormatMap: Record<DateFormat, string> = {
+    'point-separated-d-m-yyyy': 'D.M.YYYY',
+    'slash-separated-mm-dd-yyyy': 'MM/DD/YYYY',
+    'slash-separated-dd-mm-yyyy': 'DD/MM/YYYY',
+    'hyphen-separated-dd-mm-yyyy': 'DD-MM-YYYY',
+    'hyphen-separated-mm-dd-yyyy': 'MM-DD-YYYY',
+    'hyphen-separated-yyyy-mm-dd': 'YYYY-MM-DD'
+};
+
 export type TimeFormat = '12-hours' | '24-hours';
 export type IntervalFormat =
     | 'decimal'
@@ -123,21 +127,21 @@ export function getLocalizedDateFromTimestamp(timestamp: string) {
  * Returns a formatted date.
  * @param date - date in the format of 'YYYY-MM-DD'
  */
-export function formatDate(date: string): string {
+export function formatDate(date: string, format: DateFormat = 'point-separated-d-m-yyyy'): string {
     if (date?.includes('+')) {
         console.warn(
             'Date contains timezone information, use formatDateLocalized instead'
         );
     }
-    return getDayJsInstance()(date).format('DD.MM.YYYY');
+    return getDayJsInstance()(date).format(dateFormatMap[format]);
 }
 
 /*
  * Returns a formatted date.
  * @param date - date in the format of 'YYYY-MM-DD'
  */
-export function formatDateLocalized(date: string): string {
-    return getLocalizedDayJs(date).format('DD.MM.YYYY');
+export function formatDateLocalized(date: string, format: DateFormat = 'point-separated-d-m-yyyy'): string {
+    return getLocalizedDayJs(date).format(dateFormatMap[format]);
 }
 
 export function formatDateTimeLocalized(date: string): string {