From 75ca572040218fca3c1c815b51335e89060c08f4 Mon Sep 17 00:00:00 2001 From: Nicolas Drolet Date: Wed, 19 Nov 2025 13:58:50 -0500 Subject: [PATCH 1/3] refactor(approvals): Reconnect Services to backend logic and routes, adjust UI/UX, fix list mode --- src/i18n/en-ca/index.ts | 1 + src/i18n/fr-ca/index.ts | 1 + .../auth/pages/auth-login-popup-success.vue | 6 +- .../shared/components/loading-overlay.vue | 21 ++ .../components/pay-period-navigator.vue | 4 +- .../shared/components/q-table-filters.vue | 13 +- .../components/overview-list-item.vue | 244 ++++++++++-------- .../components/overview-list.vue | 203 +++++++-------- .../composables/use-timesheet-approval-api.ts | 56 ++-- .../services/timesheet-approval-service.ts | 4 +- .../components/shift-list-day-row.vue | 47 ++-- .../components/timesheet-wrapper.vue | 16 +- .../composables/use-timesheet-api.ts | 2 +- src/pages/timesheet-approval-page.vue | 60 ++++- src/stores/timesheet-store.ts | 31 ++- 15 files changed, 379 insertions(+), 330 deletions(-) create mode 100644 src/modules/shared/components/loading-overlay.vue diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts index 10b8813..17831c0 100644 --- a/src/i18n/en-ca/index.ts +++ b/src/i18n/en-ca/index.ts @@ -206,6 +206,7 @@ export default { table: { full_name: "full name", email: "email address", + is_approved: "approval", expenses: "expenses", mileage: "mileage", verified: "approved", diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts index e4ff6d1..1fcc2bb 100644 --- a/src/i18n/fr-ca/index.ts +++ b/src/i18n/fr-ca/index.ts @@ -207,6 +207,7 @@ export default { table: { full_name: "nom complet", email: "courriel", + is_approved: "approuvé", expenses: "dépenses", mileage: "kilométrage", verified: "approuvé", diff --git a/src/modules/auth/pages/auth-login-popup-success.vue b/src/modules/auth/pages/auth-login-popup-success.vue index 2913eab..bc01d6d 100644 --- a/src/modules/auth/pages/auth-login-popup-success.vue +++ b/src/modules/auth/pages/auth-login-popup-success.vue @@ -18,11 +18,11 @@ - + - + - Login Successful! + Login Successful! diff --git a/src/modules/shared/components/loading-overlay.vue b/src/modules/shared/components/loading-overlay.vue new file mode 100644 index 0000000..f3bd6d7 --- /dev/null +++ b/src/modules/shared/components/loading-overlay.vue @@ -0,0 +1,21 @@ + + + \ No newline at end of file diff --git a/src/modules/shared/components/pay-period-navigator.vue b/src/modules/shared/components/pay-period-navigator.vue index daacdfb..c83acd3 100644 --- a/src/modules/shared/components/pay-period-navigator.vue +++ b/src/modules/shared/components/pay-period-navigator.vue @@ -88,7 +88,7 @@ rounded icon="calendar_month" color="accent" - @click="is_showing_calendar_picker = true" + @click="is_showing_calendar_picker = !is_showing_calendar_picker" :disable="timesheet_store.is_loading || is_disabled" class="q-px-xl" > @@ -102,6 +102,8 @@ - const search_model = defineModel({ default: null, required: true }); + const search_model = defineModel('search', { default: null, required: true }); -
+
@@ -228,20 +229,21 @@ v-model="shift.end_time" :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'" dense - :borderless="(shift.is_approved || isTimesheetApproved)" - :readonly="(shift.is_approved || isTimesheetApproved)" + :borderless="(shift.is_approved && isTimesheetApproved)" + :readonly="(shift.is_approved && isTimesheetApproved)" type="time" label-slot - :label-color="(shift.is_approved || isTimesheetApproved) ? 'white' : 'accent'" - :input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed text-white' : '')" + :label-color="!shift.is_approved ? '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" - :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-ml-xs ' : 'q-mx-xs ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : '')" + :class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))" :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''" > @@ -325,7 +327,14 @@ class="col" :class="shift.is_approved ? 'invisible' : ''" @click="$emit('requestDelete')" - /> + > + +
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue index 6e83613..fb07a95 100644 --- a/src/modules/timesheets/components/timesheet-wrapper.vue +++ b/src/modules/timesheets/components/timesheet-wrapper.vue @@ -6,6 +6,7 @@ import ExpenseDialog from 'src/modules/timesheets/components/expense-dialog.vue'; import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue'; import TimesheetErrorWidget from 'src/modules/timesheets/components/timesheet-error-widget.vue'; + import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue'; import { useTimesheetStore } from 'src/stores/timesheet-store'; import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api'; import { useExpensesStore } from 'src/stores/expense-store'; @@ -29,18 +30,7 @@