Merge pull request 'dev/nicolas/staging-prep' (#55) from dev/nicolas/staging-prep into main

Reviewed-on: Targo/targo_frontend#55

src/i18n/en-ca/index.ts

@@ -367,6 +367,14 @@ export default {
             hours_worked_title: "hours worked",
             expenses_title: "expenses accrued",
         },
+        event: {
+            update: "has updated",
+            create: "has created",
+            delete: "has deleted",
+            expense: "an expense",
+            shift: "a shift",
+            preset: "many shifts",
+        },
         print_report: {
             title: "Download options",
             description: "Choose what to include in the report",

src/i18n/fr-ca/index.ts

@@ -367,6 +367,14 @@ export default {
             hours_worked_title: "heures travaillées",
             expenses_title: "dépenses encourues"
         },
+        event: {
+            update: "a mis à jour",
+            create: "a créé",
+            delete: "a supprimé",
+            expense: "une dépense",
+            shift: " un quart de travail",
+            preset: "plusieurs quarts de travail",
+        },
         print_report: {
             title: "options de téléchargement",
             description: "Choisissez ce qui sera inclu dans le rapport",

src/modules/timesheet-approval/models/pay-period-event.models.ts

@@ -0,0 +1,5 @@
+export interface PayPeriodEvent {
+    employee_email: string;
+    event_type: 'shift' | 'expense' | 'preset';
+    action: 'create' | 'update' | 'delete';
+}

src/modules/timesheet-approval/services/timesheet-approval-service.ts

@@ -18,4 +18,8 @@ export const timesheetApprovalService = {
         const response = await api.patch<BackendResponse<{shifts: number, expenses: number}>>('pay-periods/pay-period-approval', { email, timesheet_ids, is_approved});
         return response.data;
     },
+
+    subscribeToPayPeriodObservable: (): EventSource => {
+        return new EventSource('http://localhost:3000/pay-periods/subscribe');
+    },
 };

src/pages/timesheet-approval-page.vue

@@ -9,7 +9,7 @@
     import OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';
 
     import { date } from 'quasar';
-    import { computed, onMounted, ref } from 'vue';
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
 
@@ -28,7 +28,12 @@
 
     onMounted(async () => {
         await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
+        timesheet_store.subscribeToPayPeriodObservable();
     });
+
+    onUnmounted(() => {
+        timesheet_store.unsubscribeToPayPeriodObservable();
+    })
 </script>
 
 <template>

src/pages/timesheet-page.vue

@@ -7,18 +7,19 @@
 
     import { useAuthStore } from 'src/stores/auth-store';
 
-    const { user } = useAuthStore();
+    const auth_store = useAuthStore();
 </script>
 
 <template>
-    <q-page
+    <q-page class="column bg-secondary items-center">
-        class="column bg-secondary items-center"
-    >
         <div
             class="col column fit"
             :style="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? '' : 'width: 90vw'"
         >
-            <TimesheetWrapper :employee-email="user?.email ?? ''" class="col"/>
+            <TimesheetWrapper
+                :employee-email="auth_store.user?.email ?? ''"
+                class="col"
+            />
         </div>
     </q-page>
 </template>

src/stores/timesheet-store.ts

@@ -6,11 +6,15 @@ import { timesheetService } from 'src/modules/timesheets/services/timesheet-serv
 import type { PayPeriodOverviewResponse, TimesheetApprovalOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
 import type { PayPeriod } from 'src/modules/shared/models/pay-period.models';
 import type { Timesheet } from 'src/modules/timesheets/models/timesheet.models';
+import type { PayPeriodEvent } from 'src/modules/timesheet-approval/models/pay-period-event.models';
 import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
 import { type FederalHoliday, TARGO_HOLIDAY_NAMES_FR } from 'src/modules/timesheets/models/federal-holidays.models';
+import { Notify } from 'quasar';
+import { useI18n } from 'vue-i18n';
 
 
 export const useTimesheetStore = defineStore('timesheet', () => {
+    const { t } = useI18n();
     const is_loading = ref<boolean>(false);
     const pay_period = ref<PayPeriod>();
     const timesheets = ref<Timesheet[]>([]);
@@ -26,10 +30,11 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const has_timesheet_preset = ref(false);
     const current_pay_period_overview = ref<TimesheetApprovalOverview>();
     const pay_period_report = ref();
+    const pay_period_observer = ref<EventSource | undefined>();
 
     const federal_holidays = ref<FederalHoliday[]>([]);
 
-    const getCurrentFederalHolidays = async(): Promise<boolean> => {
+    const getCurrentFederalHolidays = async (): Promise<boolean> => {
         const all_federal_holidays = await timesheetService.getAllFederalHolidays();
         const all_federal_holidays_2025 = await timesheetService.getAllFederalHolidays(2025);
         if (!all_federal_holidays || !all_federal_holidays_2025) return false;
@@ -180,6 +185,31 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         is_report_dialog_open.value = false;
     };
 
+    const subscribeToPayPeriodObservable = () => {
+        if (pay_period_observer.value === undefined) {
+            console.log('subscribing to observable');
+            pay_period_observer.value = timesheetApprovalService.subscribeToPayPeriodObservable();
+            console.log('subscription success: ', pay_period_observer.value);
+            pay_period_observer.value.onmessage = (event: MessageEvent<string>) => {
+                console.log('event received: ');
+                const pay_period_event: PayPeriodEvent = JSON.parse(event.data);
+                const overview = pay_period_overviews.value.find(overview => overview.email === pay_period_event.employee_email);
+                const employee_name = overview?.employee_first_name + ' ' + overview?.employee_last_name;
+
+                Notify.create({
+                    message: `${employee_name} ${t('timesheet_approvals.event.' + pay_period_event.action)} ${t('timesheet_approvals.event.' + pay_period_event.event_type)}`
+                })
+            }
+        }
+    }
+
+    const unsubscribeToPayPeriodObservable = () => {
+        if (pay_period_observer.value) {
+            pay_period_observer.value.close();
+            pay_period_observer.value = undefined;
+        }
+    }
+
     return {
         is_loading,
         is_report_dialog_open,
@@ -203,5 +233,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         getPayPeriodReport,
         openReportDialog,
         closeReportDialog,
+        subscribeToPayPeriodObservable,
+        unsubscribeToPayPeriodObservable,
     };
 });