feat(approvals): add both weeks to modal, time grid and mouseover labels, buttons on employee card. Minor DRYing in various files.

quasar.config.ts

@@ -127,6 +127,8 @@ export default defineConfig((ctx) => {
     // animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
     animations: [
+      'fadeIn',
+      'fadeOut',
       'fadeInUp',
       'zoomIn',
       'zoomOut',

src/i18n/en-ca/index.ts

@@ -327,10 +327,8 @@ export default {
     consumedVacationTotalValidation: 'Consumed with vacation must be positive.',
     maxVacationPerYearValidation: 'Max Vacation Per Year must be positive.',
     resteVacationTotal: 'Rest of vacation',
-    validateToolTip: 'Validate',
+    tooltipTimeline: 'Daily breakdown',
-    unvalidateToolTip: 'Unvalidate',
+    tooltipTimesheet: 'Open timesheet',
-    lockToolTip: 'Lock the week',
-    unlockToolTip: 'Unlock the week',
   },
   shiftColumns: {
     title: 'Shifts',

src/i18n/fr-ca/index.ts

@@ -374,10 +374,8 @@ export default {
     consumedVacationTotalValidation: 'Vacances utilisées doit être positif',
     maxVacationPerYearValidation: 'Maximum vacances annuel doit être positif.',
     resteVacationTotal: 'Reste des vacances',
-    validateToolTip: 'Valider',
+    tooltipTimeline: 'Vue journalière',
-    unvalidateToolTip: 'Invalider',
+    tooltipTimesheet: 'Feuille de temps',
-    lockToolTip: 'Verrouiller la semaine',
-    unlockToolTip: 'Déverrouiller la semaine',
   },
   usersListPage: {
     tableHeader: 'Répertoire du personnel',

src/modules/employee-list/types/employee-profile-interface.ts

@@ -5,7 +5,7 @@ export interface EmployeeProfile {
     company_name: number;
     job_title: string;
     email: string;
-    phone_number: number;
+    phone_number: string;
     first_work_day: string;
     last_work_day: string;
     residence: string;

src/modules/timesheet-approval/components/shifts/shift-preview-bar.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-    import { computed } from "vue";
+    import { computed, ref } from "vue";
     import type { Shift } from "src/modules/timesheets/types/timesheet-shift-interface";
     import { date } from 'quasar';
     
-    const totalMinutes = 24 * 60;
+    const total_minutes = 24 * 60;
     const props = defineProps<{
         weekdayShifts: (Shift | null)[];
     }>();
@@ -17,29 +17,55 @@
     return props.weekdayShifts
         .filter((s): s is Shift => s !== null) // skip null shifts
         .map((s) => {
-            const start = toMinutes(s.start_time);
+            const start = toMinutes(s.start);
-            const end = toMinutes(s.end_time);
+            const end = toMinutes(s.end);
-            const start_percent = (start / totalMinutes) * 100;
+            const hover = ref<boolean>(false);
-            const width_percent = ((end - start) / totalMinutes) * 100;
+            const start_percent = (start / total_minutes) * 100;
+            const width_percent = ((end - start) / total_minutes) * 100;
             
-            return { start_percent, width_percent };
+            return { start_percent, width_percent, s, hover };
         });
     });
 </script>
 
 <template>
-    <div class="relative full-width bg-grey-4 rounded-10" style="height: 8px; margin: 7px 0;">
+    <div class="relative bg-grey-5 rounded-10 no-wrap" style="height: 4px; margin: 6px 0;">
         <div
-            v-for="(bar, i) in bars"
+            v-for="(bar, index) in bars"
-            :key="i"
+            :key="index"
-            class="absolute bg-primary"
+            class="absolute bg-primary no-wrap"
             :style="{
                 left: bar.start_percent + '%',
                 width: bar.width_percent + '%',
-            height: '14px',
+                height: '10px',
                 transform: 'translateY(-3px)',
             }"
-        ></div>
+            @mouseenter="bar.hover.value = true"
+            @mouseleave="bar.hover.value = false"
+        >
+            <!-- hoverable timestamps -->
+            <transition-group
+                appear
+                enter-active-class="animated fadeIn"
+                leave-active-class="animated fadeOut"
+            >
+                <q-badge 
+                    v-if="bar.hover.value"
+                    style="transform: translate(-110%, -40%);"
+                >
+                    {{ bar.s.start }}
+                </q-badge>
+                <q-badge 
+                    v-if="bar.hover.value" 
+                    floating style="transform: translate(100%, 5%);"
+                >
+                    {{ bar.s.end }}
+                </q-badge>
+            </transition-group>
+
+            <!-- total hours worked per day -->
+             <!-- <q-badge> {{ bar.s.end }}</q-badge> -->
+        </div>
     </div>
 </template>
 

src/modules/timesheet-approval/components/timesheet-approval-employee-details.vue

@@ -4,14 +4,18 @@
 
     const props = defineProps<{
         isLoading: boolean;
+        employeeName: string;
         employeeDetails: PayPeriodEmployeeDetails | undefined; 
     }>();
 </script>
 
 <template>
-    <q-card class="q-pa-sm bg-white shadow-5 full-width">
+    <q-card class="q-pa-md bg-white shadow-12">
         <!-- loader -->
-        <q-card-section v-if="props.isLoading">
+        <q-card-section 
+            v-if="props.isLoading"
+            class="text-center"
+        >
             <q-spinner 
                 color="primary"
                 size="5em"
@@ -22,27 +26,86 @@
             </div>
         </q-card-section>
         
+        <!-- employee name -->
+        <q-card-section class="text-h5 text-weight-bolder text-center full-width text-primary q-pt-none">
+            {{ props.employeeName }}
+        </q-card-section>
+
         <!-- employee timesheet details -->
-        <q-card-section 
+        <q-card-section v-if="!props.isLoading" class="q-pa-none">
-            v-if="!props.isLoading"
+            <div class="relative column col no-wrap bg-transparent">
-            class="column"
+                <div class="row text-center full-width text-grey-5 text-weight-bolder text-caption no-wrap">
-        >
+                    <div class="col"></div>
-            <div class="absolute-full row justify-center text-center text-primary text-weight-bolder text-caption q-py-none q-my-none q-px-xl q-mx-sm">
+                    <div class="">4</div>
-                <q-space />
+                    <div class="col"></div>
-                <div class="col">4</div>
+                    <div class="">8</div>
-                <div class="col">8</div>
+                    <div class="col"></div>
-                <div class="col">12</div>
+                    <div class="">12</div>
-                <div class="col">4</div>
+                    <div class="col"></div>
-                <div class="col">8</div>
+                    <div class="">4</div>
-                <q-space />
+                    <div class="col"></div>
+                    <div class="">8</div>
+                    <div class="col"></div>
                 </div>
                 <ShiftPreviewBar 
                     v-for="(shifts, index) in employeeDetails?.week1.shifts"
                     :key="index"
                     :weekday-shifts="shifts"
-                class="q-mt-xs"
+                    class="q-mt-xs z-top"
                 />
-            <!-- {{ employeeDetails }} -->
+            </div>
+
+            <q-separator class="q-mx-xl q-my-sm" style="height: 3px;"/>
+
+            <div class="relative column col">
+                <ShiftPreviewBar 
+                    v-for="(shifts, index) in employeeDetails?.week2.shifts"
+                    :key="index"
+                    :weekday-shifts="shifts"
+                    class="q-mt-xs z-top"
+                />
+                <div class="row text-center full-width text-grey-5 text-caption no-wrap">
+                    <div class="col"></div>
+                    <div class="">4</div>
+                    <div class="col"></div>
+                    <div class="">8</div>
+                    <div class="col"></div>
+                    <div class="">12</div>
+                    <div class="col"></div>
+                    <div class="">4</div>
+                    <div class="col"></div>
+                    <div class="">8</div>
+                    <div class="col"></div>
+                </div>
+            </div>
+            <div class="column absolute-full q-py-lg" style="z-index: 0;">
+                <div class="row col">
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                </div>
+                <div class="row col q-mt-lg">
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                    <q-separator vertical />
+                    <div class="col"></div>
+                </div>
+            </div>
         </q-card-section>
     </q-card>
 </template>

src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list-item.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
     import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
 
-    interface TableColumn {
+    type TableColumn = {
         name: string;
         label: string;
         value: unknown;
     };
 
+    type CardButton = {
+        icon: string;
+        label: string;
+        onClick: () => void;
+    };
+
     const props = defineProps<{
         cols: TableColumn[];
         row: PayPeriodOverviewEmployee;
@@ -17,15 +23,20 @@
         clickDetails: [email: string];
         'update:modelValue': [value: boolean | null];
     }>();
+
+    const card_buttons: CardButton[] = [
+        { icon: 'work_history', label: 'timeSheetValidations.tooltipTimeline', onClick: () => emit('clickDetails', props.row.email) },
+        { icon: 'open_in_new', label: 'timeSheetValidations.tooltipTimesheet', onClick: () => emit('clickDetails', props.row.email) }
+    ];
 </script>
 
 <template>
-    <div class="q-px-sm q-pb-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
+    <div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
         <q-card class="rounded-10">
             <!-- Card header with employee name and details button-->
             <q-card-section 
                 horizontal 
-                class="q-py-none q-pl-md"
+                class="q-py-none q-pl-md relative"
             >
                 <div class="text-primary text-h5 text-weight-bolder q-pt-xs overflow-hidden">
                     {{ props.row.employee_name }}
@@ -33,16 +44,27 @@
 
                 <q-space />
 
-                <!-- Button to get full timesheet details -->
+                <!-- Buttons to view detailed shifts or view employee timesheet -->
                 <q-btn
                     flat
                     unelevated
-                    rounded
+                    square
-                    class="q-py-none"
+                    dense
+                    v-for="(button, index) in card_buttons"
+                    :key="index"
+                    class="q-py-none bg-white q-my-xs"
                     color="primary"
-                    icon="open_in_full"
+                    :icon="button.icon"
-                    @click="emit('clickDetails', props.row.email)"
+                    @click="button.onClick"
-                />
+                >
+                    <q-tooltip 
+                        anchor="top middle"
+                        self="center middle" 
+                        class="bg-primary uppercase text-weight-bold"
+                    >
+                        {{$t(button.label)}}
+                    </q-tooltip>
+                </q-btn>
             </q-card-section>
 
             <q-separator 
@@ -82,7 +104,7 @@
                             <q-item 
                                 dense 
                                 class="column ellipsis " 
-                                v-for="col in props.cols.slice(2, 5)" 
+                                v-for="col in props.cols.slice(3, 6)" 
                                 :key="col.label"
                             >
                                 <q-item-label 
@@ -109,7 +131,7 @@
                         <q-item 
                             dense 
                             class="column" 
-                            v-for="col in props.cols.slice(5, )" 
+                            v-for="col in props.cols.slice(6, )" 
                             :key="col.label"
                         >
                             <q-item-label 

src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue

@@ -23,6 +23,7 @@
     const filter = ref<string | number | null>('');
     const original_approvals = ref<Record<string, boolean>>({});
     const is_showing_details = ref<boolean>(false);
+    const clicked_employee_name = ref<string>('');
 
     const columns = computed((): QTableColumn<PayPeriodOverviewEmployee>[] => [
         { 
@@ -87,9 +88,9 @@
         await timesheet_approval_api.getPayPeriodOverviewByDate(date_string);
     }
 
-    const onClickedDetails = async (email: string) => {
+    const onClickedDetails = async (email: string, name: string) => {
+        clicked_employee_name.value = name; 
         is_showing_details.value = true;
-        console.log('employee email is: ', email);
         await timesheet_approval_api.getTimesheetsByPayPeriodAndEmail(email);
     }
 
@@ -99,7 +100,6 @@
 
         const approvals = timesheet_store.pay_period_overview_employees.map(emp => [emp.email, emp.is_approved]);
         original_approvals.value = Object.fromEntries(approvals);
-        console.log(timesheet_store.pay_period_overview_employees);
     })
 </script>
 
@@ -111,7 +111,9 @@
     >   
         <TimesheetApprovalEmployeeDetails 
             :is-loading="timesheet_store.is_loading"
+            :employee-name="clicked_employee_name"
             :employee-details="timesheet_store.pay_period_employee_details"
+            style="min-width: 300px;"
         />
     </q-dialog>
     <div class="q-pa-md">
@@ -158,7 +160,7 @@
                     :cols="props.cols" 
                     :row="props.row" 
                     :initial-state="props.row.is_approved"
-                    @click-details="onClickedDetails"
+                    @click-details="email => onClickedDetails(email, props.row.employee_name)"
                 />
             </template>
 

src/modules/timesheet-approval/pages/timesheet-approval.vue

@@ -18,6 +18,13 @@
         const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
         const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
 
+        if ( dates.length === 1 ) {
+            return {
+                start_date: '—',
+                end_date: '—'
+            }
+        }
+
         return { start_date, end_date };
     });
 </script>

src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface.ts

@@ -1,7 +1,7 @@
 import type { TimesheetDetailsWeek } from "src/modules/timesheets/types/timesheet-details-interface";
 
 export interface PayPeriodEmployeeDetails {
-    is_approved: boolean;
+    // is_approved: boolean;
     week1: TimesheetDetailsWeek;
     week2: TimesheetDetailsWeek;
 };

src/modules/timesheets/types/timesheet-shift-interface.ts

@@ -1,5 +1,5 @@
 export interface Shift {
     is_approved: boolean;
-    start_time: string;
+    start: string;
-    end_time: string;
+    end: string;
 }

src/stores/timesheet-store.ts

@@ -31,6 +31,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             return true;
         } catch(error){
             console.error('Could not get current pay period: ', error );
+            current_pay_period.value = default_pay_period;
+            pay_period_overview_employees.value = [];
             //TODO: More in-depth error-handling here
         }
 
@@ -50,6 +52,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             return true;
         } catch(error){
             console.error('Could not get current pay period: ', error );
+            current_pay_period.value = default_pay_period;
+            pay_period_overview_employees.value = [];
             //TODO: More in-depth error-handling here
         }
 
@@ -87,7 +91,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
                 employee_email
             );
             pay_period_employee_details.value = response;
-
         } catch (error) {
             console.error('There was an error retrieving timesheet details for this employee: ', error);
             pay_period_employee_details.value = MOCK_DATA_TIMESHEET_DETAILS;
@@ -115,11 +118,11 @@ const MOCK_DATA_TIMESHEET_DETAILS = {
         is_approved: true,
         shifts: {
             sun: [],
-            mon: [ { is_approved: true, start_time: '08:00', end_time: '12:00' }, { is_approved: true, start_time: '13:00', end_time: '17:00' } ],
+            mon: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
-            tue: [ { is_approved: true, start_time: '08:00', end_time: '11:45' }, { is_approved: true, start_time: '12:45', end_time: '17:00' } ],
+            tue: [ { is_approved: true, start: '08:00', end: '11:45' }, { is_approved: true, start: '12:45', end: '17:00' } ],
-            wed: [ { is_approved: true, start_time: '08:00', end_time: '12:00' }, { is_approved: true, start_time: '13:00', end_time: '17:00' } ],
+            wed: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
-            thu: [ { is_approved: false, start_time: '13:00', end_time: '17:00' } ],
+            thu: [ { is_approved: false, start: '13:00', end: '17:00' } ],
-            fri: [ { is_approved: true, start_time: '08:00', end_time: '12:00' }, { is_approved: true, start_time: '13:00', end_time: '17:00' } ],
+            fri: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
             sat: []
         },
         expenses: {