From 52381be399a361e33fb6d0fd4c34c84e0b67f351 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 23 Apr 2024 02:54:28 +0200
Subject: [PATCH] fix timezone issues and add support for timezone user setting

---
 resources/js/Components/Common/TimePicker.vue | 14 ++++----
 .../Dashboard/ActivityGraphCard.vue           |  6 ++--
 resources/js/Pages/Time.vue                   |  7 ++--
 resources/js/utils/time.ts                    | 32 +++++++++++++++++--
 resources/js/utils/useUser.ts                 |  6 +++-
 5 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/resources/js/Components/Common/TimePicker.vue b/resources/js/Components/Common/TimePicker.vue
index 49091822..081e72f1 100644
--- a/resources/js/Components/Common/TimePicker.vue
+++ b/resources/js/Components/Common/TimePicker.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import dayjs from 'dayjs';
+import { getLocalizedDayJs } from '@/utils/time';
 
 const model = defineModel<string | null>({
     default: null,
 });
 
 const hours = computed(() => {
-    return model.value ? dayjs(model.value).utc().hour() : null;
+    return model.value ? getLocalizedDayJs(model.value).hour() : null;
 });
 
 const minutes = computed(() => {
-    return model.value ? dayjs(model.value).utc().minute() : null;
+    return model.value ? getLocalizedDayJs(model.value).minute() : null;
 });
 
 function updateMinutes(event: Event) {
     const target = event.target as HTMLInputElement;
     const newValue = target.value;
     if (!isNaN(parseInt(newValue))) {
-        model.value = dayjs(model.value)
-            .utc()
+        model.value = getLocalizedDayJs(model.value)
             .set('minutes', parseInt(newValue))
+            .utc()
             .format();
     }
 }
@@ -29,9 +29,9 @@ function updateHours(event: Event) {
     const target = event.target as HTMLInputElement;
     const newValue = target.value;
     if (!isNaN(parseInt(newValue))) {
-        model.value = dayjs(model.value)
-            .utc()
+        model.value = getLocalizedDayJs(model.value)
             .set('hours', parseInt(newValue))
+            .utc()
             .format();
     }
 }
diff --git a/resources/js/Components/Dashboard/ActivityGraphCard.vue b/resources/js/Components/Dashboard/ActivityGraphCard.vue
index f3b935cd..a0c1256a 100644
--- a/resources/js/Components/Dashboard/ActivityGraphCard.vue
+++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue
@@ -13,7 +13,7 @@ import {
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import dayjs from 'dayjs';
-import { formatDate, formatTime } from '@/utils/time';
+import { formatDate, formatHumanReadableDuration } from '@/utils/time';
 
 const props = defineProps<{
     dailyHoursTracked: { duration: number; date: string }[];
@@ -76,11 +76,11 @@ const option = ref({
             borderRadius: 5,
         },
         tooltip: {
-            valueFormatter: (value: string, dataIndex: number) => {
+            valueFormatter: (value: number, dataIndex: number) => {
                 return (
                     formatDate(props.dailyHoursTracked[dataIndex].date) +
                     ': ' +
-                    formatTime(value)
+                    formatHumanReadableDuration(value)
                 );
             },
         },
diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
index 20556e82..287c8c1e 100644
--- a/resources/js/Pages/Time.vue
+++ b/resources/js/Pages/Time.vue
@@ -5,12 +5,12 @@ import { computed, onMounted, ref, watch } from 'vue';
 import MainContainer from '@/Pages/MainContainer.vue';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import { storeToRefs } from 'pinia';
-import dayjs from 'dayjs';
 import type { TimeEntry } from '@/utils/api';
 import TimeEntryRowHeading from '@/Components/Common/TimeEntry/TimeEntryRowHeading.vue';
 import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
 import { useElementVisibility } from '@vueuse/core';
 import { ClockIcon } from '@heroicons/vue/20/solid';
+import { getLocalizedDateFromTimestamp } from '@/utils/time';
 
 const timeEntriesStore = useTimeEntriesStore();
 const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
@@ -38,10 +38,9 @@ const groupedTimeEntries = computed(() => {
     const groupedEntries: Record<string, TimeEntry[]> = {};
     for (const entry of timeEntries.value) {
         const oldEntries =
-            groupedEntries[dayjs(entry.start).utc().format('YYYY-MM-DD')];
+            groupedEntries[getLocalizedDateFromTimestamp(entry.start)];
         const newEntries = [...(oldEntries ?? []), entry];
-        groupedEntries[dayjs(entry.start).utc().format('YYYY-MM-DD')] =
-            newEntries;
+        groupedEntries[getLocalizedDateFromTimestamp(entry.start)] = newEntries;
     }
     return groupedEntries;
 });
diff --git a/resources/js/utils/time.ts b/resources/js/utils/time.ts
index ced7ca60..996ea2a5 100644
--- a/resources/js/utils/time.ts
+++ b/resources/js/utils/time.ts
@@ -4,12 +4,19 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import isToday from 'dayjs/plugin/isToday';
 import isYesterday from 'dayjs/plugin/isYesterday';
 import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { getUserTimezone } from '@/utils/useUser';
 
 dayjs.extend(relativeTime);
 dayjs.extend(isToday);
 dayjs.extend(isYesterday);
 dayjs.extend(duration);
 dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export function getDayJsInstance() {
+    return dayjs;
+}
 
 export function formatHumanReadableDuration(duration: number): string {
     return dayjs.duration(duration, 's').format('HH[h] mm[min]');
@@ -21,14 +28,35 @@ export function calculateDifference(start: string, end: string | null) {
     }
     return dayjs(end).diff(dayjs(start), 'second');
 }
+
+/**
+ * Returns a formatted time.
+ * @param date - A UTC date time string.
+ */
 export function formatTime(date: string) {
-    return dayjs(date).utc().format('HH:mm');
+    return dayjs.utc(date).tz(getUserTimezone()).format('HH:mm');
 }
 
+export function getLocalizedDayJs(timestamp: string | null) {
+    return dayjs.utc(timestamp).tz(getUserTimezone());
+}
+
+export function getLocalizedDateFromTimestamp(timestamp: string) {
+    return getLocalizedDayJs(timestamp).format('YYYY-MM-DD');
+}
+
+/*
+ * Returns a formatted date.
+ * @param date - date in the format of 'YYYY-MM-DD'
+ */
 export function formatDate(date: string): string {
-    return dayjs(date).utc().format('DD.MM.YYYY');
+    return dayjs(date).format('DD.MM.YYYY');
 }
 
+/*
+ * Returns a human readable date format.
+ * @param date - date in the format of 'YYYY-MM-DD'
+ */
 export function formatHumanReadableDate(date: string) {
     if (dayjs(date).isToday()) {
         return 'Today';
diff --git a/resources/js/utils/useUser.ts b/resources/js/utils/useUser.ts
index e5c3de53..cecdac84 100644
--- a/resources/js/utils/useUser.ts
+++ b/resources/js/utils/useUser.ts
@@ -14,4 +14,8 @@ function getCurrentOrganizationId() {
     return page.props.auth.user.current_team_id;
 }
 
-export { getCurrentOrganizationId, getCurrentUserId };
+function getUserTimezone() {
+    return page.props.auth.user.timezone;
+}
+
+export { getCurrentOrganizationId, getCurrentUserId, getUserTimezone };