Merge pull request 'fix(approvals): adjust scripts to handle timesheet modifications made through approvals page' (#59) from dev/nicolas/staging-prep into main

Reviewed-on: Targo/targo_frontend#59

src/i18n/en-ca/index.ts

@@ -295,7 +295,7 @@ export default {
                 add: "Add Shift",
                 edit: "Edit shift",
                 delete: "Delete shift",
-                delete_confirmation_msg: "Do you want to delete this shift completly?",
+                delete_confirmation_msg: "Delete this shift?",
             },
             types: {
                 label: "Shift`s Type",

src/i18n/fr-ca/index.ts

@@ -295,7 +295,7 @@ export default {
                 add: "Ajouter un Quart",
                 edit: "Modifier un Quart",
                 delete: "Supprimer un Quart",
-                delete_confirmation_msg: "Voulez-vous complètement supprimer ce quart?",
+                delete_confirmation_msg: "Supprimer ce quart?",
             },
             types: {
                 label: "Type de Quart",

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

@@ -22,6 +22,7 @@
         full-height
         transition-show="jump-down"
         transition-hide="jump-down"
+        backdrop-filter="blur(6px)"
         @show="is_dialog_open = true"
         @hide="is_dialog_open = false"
     >

src/modules/timesheets/components/expense-dialog-list-item.vue

@@ -199,7 +199,7 @@
                     />
 
                     <q-btn
-                        v-else
+                        v-else-if="!expense.is_approved && mode === 'normal'"
                         flat
                         dense
                         size="lg"

src/modules/timesheets/components/expense-dialog.vue

@@ -28,6 +28,7 @@
         v-model="expense_store.is_open"
         persistent
         :full-width="$q.platform.is.mobile"
+        backdrop-filter="blur(6px)"
         transition-show="jump-down"
         transition-hide="jump-down"
     >

src/modules/timesheets/components/shift-list-day-row.vue

@@ -2,12 +2,15 @@
     setup
     lang="ts"
 >
+    import { useI18n } from 'vue-i18n';
     import { onMounted, ref } from 'vue';
-    import { QSelect, QInput } from 'quasar';
+    import { QSelect, QInput, useQuasar } from 'quasar';
     import { useUiStore } from 'src/stores/ui-store';
     import { SHIFT_OPTIONS } from 'src/modules/timesheets/utils/shift.util';
     import type { Shift } from 'src/modules/timesheets/models/shift.models';
 
+    const q = useQuasar();
+    const { t } = useI18n();
     const ui_store = useUiStore();
 
     const COMMENT_LENGTH_MAX = 280;
@@ -16,6 +19,7 @@
     const shift_type_selected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));
     const select_ref = ref<QSelect | null>(null);
     const error_message = ref<string | undefined>();
+    const is_showing_delete_confirm = ref(false);
 
     const { errorMessage = undefined, isTimesheetApproved = false, holiday = false } = defineProps<{
         dense?: boolean;
@@ -24,6 +28,24 @@
         holiday?: boolean | undefined;
     }>();
 
+    const time_input_props = {
+        dense: true,
+        borderless: shift.value.is_approved && isTimesheetApproved,
+        readonly: shift.value.is_approved && isTimesheetApproved,
+        standout: q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9',
+        labelSlot: true,
+        lazyRules: true,
+        noErrorIcon: true,
+        hideBottomSpace: true,
+        error: shift.value.has_error,
+        errorMessage: errorMessage ? t(errorMessage) : (error_message.value ? t(error_message.value) : undefined),
+        labelColor: shift.value.is_approved ? 'white' : (holiday ? 'purple-5' : 'accent'),
+        class: `col rounded-5 bg-dark q-mx-xs ${shift.value.id === -2 ? 'bg-negative' : ''} ${shift.value.is_approved || isTimesheetApproved ? 'cursor-not-allowed inset-shadow' : ''}`,
+        inputClass: `text-weight-medium ${shift.value.id === -2 ? 'text-white ' : ' '} ${shift.value.is_approved ? 'text-white cursor-not-allowed q-px-sm' : ''}`,
+        style: shift.value.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : '',
+        inputStyle: "font-size: 1.2em;"
+    }
+
     const emit = defineEmits<{
         'requestDelete': [void];
         'onTimeFieldBlur': [void];
@@ -37,7 +59,7 @@
             shift.value.has_error = false;
             error_message.value = undefined;
             emit('onTimeFieldBlur');
-        } 
+        }
     }
 
     const onBlurShiftTypeSelect = () => {
@@ -48,6 +70,11 @@
         }
     };
 
+    const onConfirmDelete = () => {
+        is_showing_delete_confirm.value = false;
+        emit('requestDelete');
+    }
+
     const getCommentCounterColor = (comment_length: number) => {
         if (comment_length < 200) return 'primary';
         if (comment_length < 250) return 'warning';
@@ -66,6 +93,37 @@
 
 <template>
     <div :class="ui_store.is_mobile_mode ? 'column' : 'row'">
+        <!-- delete shift confirmation dialog -->
+        <q-dialog
+            v-model="is_showing_delete_confirm"
+            backdrop-filter="blur(6px)"
+        >
+            <div
+                class="column flex-center q-pa-md bg-secondary shadow-24 rounded-10"
+                style="border: 2px solid var(--q-accent);"
+            >
+                <span class="col-auto text-h6 text-bold text-uppercase">{{
+                    $t('timesheet.shift.actions.delete_confirmation_msg') }}</span>
+                <div class="row justify-right full-width">
+                    <q-btn
+                        flat
+                        color="negative"
+                        :label="$t('shared.misc.no')"
+                        class="col"
+                        @click="is_showing_delete_confirm = false"
+                    />
+
+                    <q-btn
+                        flat
+                        color="accent"
+                        :label="$t('shared.misc.yes')"
+                        class="col"
+                        @click="onConfirmDelete"
+                    />
+                </div>
+            </div>
+        </q-dialog>
+
         <div
             class="row items-center text-uppercase rounded-5"
             :class="ui_store.is_mobile_mode ? 'col q-mb-xs q-px-xs' : 'col-4'"
@@ -141,7 +199,7 @@
                         dense
                         keep-color
                         size="3em"
-                        :color="holiday? 'purple-5' : 'accent'"
+                        :color="holiday ? 'purple-5' : 'accent'"
                         icon="las la-building"
                         checked-icon="las la-laptop"
                     >
@@ -158,13 +216,14 @@
                 </template>
 
                 <template #option="scope">
-                    <q-item clickable v-bind="scope.itemProps">
+                    <q-item
+                        clickable
+                        v-bind="scope.itemProps"
+                    >
                         <q-item-section avatar>
-                            <q-icon 
+                            <q-icon :name="scope.opt.icon" />
-                                :name="scope.opt.icon"
-                            />
                         </q-item-section>
-                        
+
                         <q-item-section class="text-left">
                             {{ $t(scope.label) }}
                         </q-item-section>
@@ -178,23 +237,8 @@
             <q-input
                 ref="start_time"
                 v-model="shift.start_time"
-                dense
+                v-bind="time_input_props"
-                :borderless="(shift.is_approved && isTimesheetApproved)"
-                :readonly="(shift.is_approved && isTimesheetApproved)"
                 type="time"
-                :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
-                label-slot
-                lazy-rules
-                no-error-icon
-                hide-bottom-space
-                :error="shift.has_error"
-                :error-message="errorMessage ? $t(errorMessage) : (error_message ? $t(error_message) : undefined)"
-                :label-color="!shift.is_approved ? (holiday? 'purple-5' : 'accent') : 'white'"
-                class="col rounded-5 bg-dark q-mx-xs"
-                :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
-                :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
-                input-style="font-size: 1.2em;"
-                :style="shift.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : ''"
                 @blur="onTimeFieldBlur(shift.start_time)"
             >
                 <template #label>
@@ -210,22 +254,8 @@
             <q-input
                 ref="end_time"
                 v-model="shift.end_time"
-                :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
+                v-bind="time_input_props"
-                dense
-                :borderless="(shift.is_approved && isTimesheetApproved)"
-                :readonly="(shift.is_approved && isTimesheetApproved)"
                 type="time"
-                label-slot
-                no-error-icon
-                hide-bottom-space
-                :error="shift.has_error"
-                :error-message="errorMessage ? $t(errorMessage) : (error_message ? $t(error_message) : undefined)"
-                :label-color="!shift.is_approved ? (holiday? 'purple-5' : 'accent') : 'white'"
-                :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
-                input-style="font-size: 1.2em;"
-                class="col rounded-5 bg-dark q-mx-xs"
-                :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
-                :style="shift.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : ''"
                 @blur="onTimeFieldBlur(shift.end_time)"
             >
                 <template #label>
@@ -247,9 +277,9 @@
                     v-if="!ui_store.is_mobile_mode"
                     push
                     dense
-                    :color="shift.is_approved ? 'white' : (holiday? 'purple-5' : 'accent')"
+                    :color="shift.is_approved ? 'white' : (shift.comment ? 'accent' : (holiday ? 'purple-5' : 'blue-grey-5'))"
                     :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
-                    :text-color="shift.is_approved ? (holiday? 'purple-5' : 'accent') : 'white'"
+                    :text-color="shift.is_approved ? (holiday ? 'purple-5' : 'accent') : 'white'"
                     class="col"
                     :class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
                 >
@@ -257,8 +287,9 @@
                         v-if="shift.comment"
                         floating
                         rounded
-                        color="negative"
+                        color="info"
-                    />
+                        class="text-blue-9 text-weight-bolder"
+                    >!!</q-badge>
 
                     <q-popup-edit
                         v-model="shift.comment"
@@ -317,7 +348,7 @@
                     class="col"
                     size="1.2em"
                     :class="shift.is_approved ? 'invisible' : ''"
-                    @click="$emit('requestDelete')"
+                    @click="is_showing_delete_confirm = true"
                 >
                 </q-btn>
             </div>

src/modules/timesheets/components/shift-list-day.vue

@@ -18,13 +18,14 @@
     const timesheet_store = useTimesheetStore();
     const shift_error_message = ref<string | undefined>();
 
-    const { day, dense = false, approved = false, holiday = false } = defineProps<{
+    const { day, dense = false, approved = false, holiday = false, employeeEmail } = defineProps<{
         timesheetId: number;
         weekDayIndex: number;
         day: TimesheetDay;
         dense?: boolean;
         approved?: boolean;
         holiday?: boolean;
+        employeeEmail?: string;
     }>();
 
     const preset_mouseover = ref(false);
@@ -38,7 +39,7 @@
             shift.id = 0;
             emit('deleteUnsavedShift');
         } else {
-            await shift_api.deleteShiftById(shift.id);
+            await shift_api.deleteShiftById(shift.id, employeeEmail);
         }
 
         if (day.shifts.length < 2 && shift_error_message.value !== undefined) {

src/modules/timesheets/composables/use-shift-api.ts

@@ -7,9 +7,9 @@ export const useShiftApi = () => {
     const shift_store = useShiftStore();
     const auth_store = useAuthStore();
 
-    const deleteShiftById = async (shift_id: number) => {
+    const deleteShiftById = async (shift_id: number, employee_email?: string) => {
         timesheet_store.is_loading = true;
-        const success = await shift_store.deleteShiftById(shift_id);
+        const success = await shift_store.deleteShiftById(shift_id, employee_email);
 
         if (success) {
             await timesheet_store.getTimesheetsByOptionalEmployeeEmail(auth_store.user?.email ?? '');

src/modules/timesheets/services/shift-service.ts

@@ -3,17 +3,32 @@ import type { BackendResponse } from "src/modules/shared/models/backend-response
 import type { Shift } from "src/modules/timesheets/models/shift.models";
 
 export const ShiftService = {
-    deleteShiftById: async (shift_id: number) => {
+    deleteShiftById: async (shift_id: number, employee_email?: string) => {
+        if (employee_email) {
+            const response = await api.delete(`/shift/${shift_id}/${employee_email}`);
+            return response.data;
+        }
+        
         const response = await api.delete(`/shift/${shift_id}`);
         return response.data;
     },
 
-    createNewShifts: async (new_shifts: Shift[]):Promise<BackendResponse<Shift>> => {
+    createNewShifts: async (new_shifts: Shift[], employee_email?: string):Promise<BackendResponse<Shift>> => {
+        if (employee_email) {
+            const response = await api.post(`/shift/create/${employee_email}`);
+            return response.data;
+        }
+        
         const response = await api.post(`/shift/create`, new_shifts);
         return response.data;
     },
 
-    updateShifts: async (existing_shifts: Shift[]):Promise<BackendResponse<Shift>> => {
+    updateShifts: async (existing_shifts: Shift[], employee_email?: string):Promise<BackendResponse<Shift>> => {
+        if (employee_email) {
+            const response = await api.patch(`/shift/update/${employee_email}`);
+            return response.data;
+        }
+
         const response = await api.patch(`/shift/update`, existing_shifts);
         return response.data;
     }

src/pages/timesheet-approval-page.vue

@@ -34,6 +34,12 @@
     onUnmounted(() => {
         timesheet_store.unsubscribeToPayPeriodObservable();
     })
+
+    const details_dialog_props = {
+        'is-loading': timesheet_store.is_loading,
+        'employee-overview': timesheet_store.current_pay_period_overview,
+        timesheets: timesheet_store.timesheets,
+    }
 </script>
 
 <template>
@@ -41,11 +47,7 @@
         class="bg-secondary"
         :style-fn="tableStyleFunction"
     >
-        <DetailsDialog
+        <DetailsDialog v-bind="details_dialog_props" />
-            :is-loading="timesheet_store.is_loading"
-            :employee-overview="timesheet_store.current_pay_period_overview"
-            :timesheets="timesheet_store.timesheets"
-        />
 
         <OverviewReport />
 

src/stores/shift-store.ts

@@ -9,9 +9,9 @@ export const useShiftStore = defineStore('shift_store', () => {
     const timesheet_store = useTimesheetStore();
     const shift_errors = ref<string[]>([]);
 
-    const deleteShiftById = async (shift_id: number): Promise<boolean> => {
+    const deleteShiftById = async (shift_id: number, employee_email?: string | undefined): Promise<boolean> => {
         try {
-            await ShiftService.deleteShiftById(shift_id);
+            await ShiftService.deleteShiftById(shift_id, employee_email);
             return true;
         } catch (error) {
             console.error('DEV ERROR || error while deleting shift: ', error);
@@ -19,7 +19,7 @@ export const useShiftStore = defineStore('shift_store', () => {
         }
     };
 
-    const createNewShifts = async (): Promise<boolean> => {
+    const createNewShifts = async (employee_email?: string | undefined): Promise<boolean> => {
         if (timesheet_store.timesheets === undefined) return false;
 
         try {
@@ -27,7 +27,7 @@ export const useShiftStore = defineStore('shift_store', () => {
             const new_shifts = days.flatMap(day => day.shifts).filter(shift => shift.id < 0);
 
             if (new_shifts?.length > 0) {
-                const response = await ShiftService.createNewShifts(new_shifts);
+                const response = await ShiftService.createNewShifts(new_shifts, employee_email);
                 if (response.success) {
                     return true;
                 }
@@ -40,14 +40,14 @@ export const useShiftStore = defineStore('shift_store', () => {
         }
     };
 
-    const updateShifts = async (): Promise<boolean> => {
+    const updateShifts = async (employee_email?: string | undefined): Promise<boolean> => {
         if (timesheet_store.timesheets === undefined) return false;
 
         try {
             const existing_shifts = timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.shifts).filter(shift => shift.id > 0);
 
             if (existing_shifts?.length > 0) {
-                const response = await ShiftService.updateShifts(existing_shifts);
+                const response = await ShiftService.updateShifts(existing_shifts, employee_email);
 
                 if (response.success) {
                     return true;