From 0a945eff9606d1fb1e43f82a5e7c9b59c8e892b8 Mon Sep 17 00:00:00 2001
From: Alexander Trost <galexrt@googlemail.com>
Date: Wed, 10 Apr 2024 21:47:04 +0200
Subject: [PATCH] fix: timeclock list date issues

Signed-off-by: Alexander Trost <galexrt@googlemail.com>
---
 gen/go/proto/services/jobs/timeclock.go       |   4 +-
 src/components/citizens/CitizensList.vue      |   2 +-
 .../jobs/colleagues/ColleaguesList.vue        |   2 +-
 .../jobs/timeclock/TimeclockList.vue          | 106 ++++++------------
 4 files changed, 39 insertions(+), 75 deletions(-)

diff --git a/gen/go/proto/services/jobs/timeclock.go b/gen/go/proto/services/jobs/timeclock.go
index a29f43aa7..1e2818423 100644
--- a/gen/go/proto/services/jobs/timeclock.go
+++ b/gen/go/proto/services/jobs/timeclock.go
@@ -63,12 +63,12 @@ func (s *Server) ListTimeclock(ctx context.Context, req *ListTimeclockRequest) (
 	}
 
 	if req.From != nil {
-		condition = condition.AND(tTimeClock.Date.LT_EQ(
+		condition = condition.AND(tTimeClock.Date.GT_EQ(
 			jet.DateT(timeutils.TruncateToDay(req.From.AsTime())),
 		))
 	}
 	if req.To != nil {
-		condition = condition.AND(tTimeClock.Date.GT_EQ(
+		condition = condition.AND(tTimeClock.Date.LT_EQ(
 			jet.DateT(timeutils.TruncateToNight(req.To.AsTime())),
 		))
 	}
diff --git a/src/components/citizens/CitizensList.vue b/src/components/citizens/CitizensList.vue
index 85d78d528..677633733 100644
--- a/src/components/citizens/CitizensList.vue
+++ b/src/components/citizens/CitizensList.vue
@@ -274,7 +274,7 @@ defineShortcuts({
             :empty-state="{ icon: 'i-mdi-accounts', label: $t('common.not_found', [$t('common.citizen', 2)]) }"
         >
             <template #name-data="{ row: citizen }">
-                <div class="inline-flex items-center gap-1">
+                <div class="inline-flex items-center gap-1 text-gray-900 dark:text-white">
                     <ProfilePictureImg
                         :url="citizen.props?.mugShot?.url"
                         :name="`${citizen.firstname} ${citizen.lastname}`"
diff --git a/src/components/jobs/colleagues/ColleaguesList.vue b/src/components/jobs/colleagues/ColleaguesList.vue
index 67b592203..f195ffb8a 100644
--- a/src/components/jobs/colleagues/ColleaguesList.vue
+++ b/src/components/jobs/colleagues/ColleaguesList.vue
@@ -169,7 +169,7 @@ defineShortcuts({
                     :empty-state="{ icon: 'i-mdi-account', label: $t('common.not_found', [$t('common.colleague', 2)]) }"
                 >
                     <template #name-data="{ row: colleague }">
-                        <div class="inline-flex items-center">
+                        <div class="inline-flex items-center text-gray-900 dark:text-white">
                             <ProfilePictureImg
                                 :url="colleague.props?.mugShot?.url"
                                 :name="`${colleague.firstname} ${colleague.lastname}`"
diff --git a/src/components/jobs/timeclock/TimeclockList.vue b/src/components/jobs/timeclock/TimeclockList.vue
index bd8e9cc8d..c2b8d71d8 100644
--- a/src/components/jobs/timeclock/TimeclockList.vue
+++ b/src/components/jobs/timeclock/TimeclockList.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { format } from 'date-fns';
+import { format, addDays, subDays } from 'date-fns';
 import { z } from 'zod';
 import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
 import * as googleProtobufTimestamp from '~~/gen/ts/google/protobuf/timestamp';
@@ -25,27 +25,26 @@ const canAccessAll = attr('JobsTimeclockService.ListTimeclock', 'Access', 'All')
 
 const now = new Date();
 const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-const currentDay = ref(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
-
-const futureDay = ref(new Date(currentDay.value.getFullYear(), currentDay.value.getMonth(), currentDay.value.getDate() + 1));
-const previousDay = ref(new Date(currentDay.value.getFullYear(), currentDay.value.getMonth(), currentDay.value.getDate() - 1));
 
 const schema = z.object({
     users: z.custom<Colleague>().array().max(5).optional(),
-    from: z.date().optional(),
+    from: z.date(),
     to: z.date().optional(),
     perDay: z.boolean(),
 });
 
 type Schema = z.output<typeof schema>;
 
-const query = ref<Schema>({
+const query = reactive<Schema>({
     users: [],
-    from: currentDay.value,
-    to: canAccessAll ? previousDay.value : undefined,
-    perDay: canAccessAll,
+    from: new Date(),
+    to: subDays(now, 1),
+    perDay: true,
 });
 
+const futureDay = computed(() => addDays(query.from, 1));
+const previousDay = computed(() => subDays(query.from, 1));
+
 const usersLoading = ref(false);
 
 const page = ref(1);
@@ -57,29 +56,33 @@ const {
     refresh,
     error,
 } = useLazyAsyncData(
-    `jobs-timeclock-${query.value.from}-${query.value.to}-${query.value.perDay}-${query.value.users?.map((u) => u.userId)}-${page.value}`,
+    `jobs-timeclock-${query.from}-${query.to}-${query.perDay}-${query.users?.map((u) => u.userId)}-${page.value}`,
     () => listTimeclockEntries(),
 );
 
+const perDayView = computed(() => !canAccessAll || !(query.users !== undefined && query.users.length > 0));
+
 async function listTimeclockEntries(): Promise<ListTimeclockResponse> {
     try {
         const req: ListTimeclockRequest = {
             pagination: {
                 offset: offset.value,
             },
-            userIds: query.value.users?.map((u) => u.userId) ?? [],
+            userIds: query.users?.map((u) => u.userId) ?? [],
         };
-        if (query.value.perDay !== undefined) {
-            req.perDay = query.value.perDay;
-        }
-        if (query.value.from) {
-            req.from = {
-                timestamp: googleProtobufTimestamp.Timestamp.fromDate(query.value.from),
+
+        req.from = {
+            timestamp: googleProtobufTimestamp.Timestamp.fromDate(query.from),
+        };
+
+        req.perDay = perDayView.value;
+        if (req.perDay) {
+            req.to = {
+                timestamp: googleProtobufTimestamp.Timestamp.fromDate(subDays(query.from, 1)),
             };
-        }
-        if (query.value.to) {
+        } else if (query.to) {
             req.to = {
-                timestamp: googleProtobufTimestamp.Timestamp.fromDate(query.value.to),
+                timestamp: googleProtobufTimestamp.Timestamp.fromDate(query.to),
             };
         }
 
@@ -118,53 +121,16 @@ const grouped = computed(() => {
 });
 
 watch(offset, async () => refresh());
-watchDebounced(
-    query.value,
-    async () => {
-        if (canAccessAll) {
-            if (query.value.users !== undefined && query.value.users.length > 0) {
-                if (query.value.perDay) {
-                    query.value.perDay = false;
-                    query.value.to = undefined;
-                }
-            } else {
-                query.value.perDay = true;
-            }
-        } else {
-            query.value.perDay = false;
-        }
-
-        return refresh();
-    },
-    { debounce: 200, maxWait: 1250 },
-);
+watchDebounced(query, async () => refresh(), { debounce: 200, maxWait: 1250 });
 
 function dayForward(): void {
-    currentDay.value.setDate(currentDay.value.getDate() + 1);
-    currentDay.value = new Date(currentDay.value);
-
-    updateDates();
+    query.from = addDays(query.from, 1);
+    query.to = addDays(query.to ?? new Date(), 1);
 }
 
 function dayBackwards(): void {
-    currentDay.value.setDate(currentDay.value.getDate() - 1);
-    currentDay.value = new Date(currentDay.value);
-
-    updateDates();
-}
-
-function updateDates(): void {
-    futureDay.value.setTime(
-        new Date(currentDay.value.getFullYear(), currentDay.value.getMonth(), currentDay.value.getDate() + 1).getTime(),
-    );
-    futureDay.value = new Date(futureDay.value);
-    previousDay.value.setTime(
-        new Date(currentDay.value.getFullYear(), currentDay.value.getMonth(), currentDay.value.getDate() - 1).getTime(),
-    );
-    previousDay.value = new Date(previousDay.value);
-
-    query.value.from = currentDay.value;
-    query.value.to = previousDay.value;
+    query.from = subDays(query.from, 1);
+    query.to = subDays(query.to ?? new Date(), 1);
 }
 
 function charsGetDisplayValue(chars: UserShort[]): string {
@@ -173,7 +139,7 @@ function charsGetDisplayValue(chars: UserShort[]): string {
 
 const columns = computed(() =>
     [
-        !query.value.perDay
+        !perDayView.value
             ? {
                   key: 'date',
                   label: t('common.date'),
@@ -243,9 +209,7 @@ const input = ref<{ input: HTMLInputElement }>();
 
                                 <UFormGroup
                                     name="from"
-                                    :label="
-                                        query.perDay ? $t('common.date') : `${$t('common.time_range')} ${$t('common.from')}`
-                                    "
+                                    :label="perDayView ? $t('common.date') : `${$t('common.time_range')} ${$t('common.from')}`"
                                     class="flex-1"
                                 >
                                     <UPopover :popper="{ placement: 'bottom-start' }">
@@ -264,7 +228,7 @@ const input = ref<{ input: HTMLInputElement }>();
                                 </UFormGroup>
 
                                 <UFormGroup
-                                    v-if="!query.perDay"
+                                    v-if="!perDayView"
                                     name="to"
                                     :label="`${$t('common.time_range')} ${$t('common.to')}`"
                                     class="flex-1"
@@ -286,7 +250,7 @@ const input = ref<{ input: HTMLInputElement }>();
                             </div>
                         </div>
 
-                        <div v-if="query.perDay" class="flex flex-row gap-2">
+                        <div v-if="perDayView" class="flex flex-row gap-2">
                             <UButton
                                 block
                                 class="flex-1"
@@ -303,9 +267,9 @@ const input = ref<{ input: HTMLInputElement }>();
                                 class="flex flex-initial cursor-pointer flex-col place-content-end items-center"
                             >
                                 <span>
-                                    {{ $d(currentDay, 'date') }}
+                                    {{ $d(query.from, 'date') }}
                                 </span>
-                                <span>{{ $t('common.calendar_week') }}: {{ getWeekNumber(currentDay) }}</span>
+                                <span>{{ $t('common.calendar_week') }}: {{ getWeekNumber(query.from) }}</span>
                             </UButton>
 
                             <UButton class="flex-1" block trailing-icon="i-mdi-chevron-right" @click="dayBackwards()">