fix: colleague timeclock showing "global" timeclock

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Oct 13, 2024 · 7340334 · 7340334
1 parent d2bc797
commit 7340334
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 16 deletions.
diff --git a/app/components/jobs/timeclock/TimeclockList.vue b/app/components/jobs/timeclock/TimeclockList.vue
@@ -18,9 +18,13 @@ const props = withDefaults(
     defineProps<{
         userId?: number;
         showStats?: boolean;
+        historicSubDays?: number;
+        forceHistoricView?: boolean;
     }>(),
     {
         showStats: true,
+        historicSubDays: 7,
+        forceHistoricView: undefined,
     },
 );
 
@@ -51,17 +55,20 @@ function setFromProps(): void {
         return;
     }
 
-    query.users?.push({
-        userId: props.userId,
-        firstname: '',
-        lastname: '',
-        dateofbirth: '',
-        job: '',
-        jobGrade: 0,
-    });
+    query.users = [
+        {
+            userId: props.userId,
+            firstname: '',
+            lastname: '',
+            dateofbirth: '',
+            job: '',
+            jobGrade: 0,
+        },
+    ];
 }
 
 watch(props, setFromProps);
+setFromProps();
 
 const futureDay = computed(() => addDays(query.from, 1));
 const previousDay = computed(() => subDays(query.from, 1));
@@ -81,9 +88,17 @@ const {
     () => listTimeclockEntries(),
 );
 
-const perDayView = computed(() => !canAccessAll.value || !(query.users !== undefined && query.users.length > 0));
+const perDayView = computed(() => {
+    if (props.forceHistoricView !== undefined) {
+        return !props.forceHistoricView;
+    }
+
+    return !canAccessAll.value || !(query.users !== undefined && query.users.length > 0);
+});
 
 async function listTimeclockEntries(): Promise<ListTimeclockResponse> {
+    console.log('query', perDayView.value, query.users, query.from, query.to);
+
     try {
         const req: ListTimeclockRequest = {
             pagination: {
@@ -155,14 +170,16 @@ function dayBackwards(): void {
 }
 
 // Update date to something reasonable when per day view is actived
-watch(perDayView, () => {
-    if (canAccessAll && !perDayView.value) {
+function setPerDayView(): void {
+    if (canAccessAll.value && !perDayView.value) {
         const from = query.from;
-        const to = subDays(query.to ?? new Date(), 7);
+        const to = subDays(query.to ?? new Date(), props.historicSubDays);
         query.from = to;
         query.to = from;
     }
-});
+}
+watch(perDayView, setPerDayView);
+setPerDayView();
 
 const columns = computed(() =>
     [

diff --git a/app/components/partials/DatePickerPopover.client.vue b/app/components/partials/DatePickerPopover.client.vue
@@ -38,7 +38,7 @@ const open = ref(false);
         <UButton
             v-bind="button"
             variant="outline"
-            color="gray"
+            color="black"
             block
             icon="i-mdi-calendar-month"
             :label="modelValue ? format(modelValue, dateFormat) : dateFormat"
@@ -75,7 +75,7 @@ const open = ref(false);
         <UButton
             v-bind="button"
             variant="outline"
-            color="gray"
+            color="black"
             block
             icon="i-mdi-calendar-month"
             :label="modelValue ? format(modelValue, dateFormat) : dateFormat"

diff --git a/app/pages/jobs/colleagues/[id]/timeclock.vue b/app/pages/jobs/colleagues/[id]/timeclock.vue
@@ -24,6 +24,11 @@ const route = useRoute('jobs-colleagues-id-timeclock');
 
 <template>
     <div class="flex flex-1 flex-col">
-        <TimeclockList :user-id="parseInt(route.params.id as string)" :show-stats="false" />
+        <TimeclockList
+            :user-id="parseInt(route.params.id as string)"
+            :show-stats="false"
+            force-historic-view
+            :historic-sub-days="14"
+        />
     </div>
 </template>