feat(approvals): add SSE to timesheet-approval to notify of timesheet changes

src/i18n/en-ca/index.ts

@@ -373,6 +373,7 @@ export default {
             delete: "has deleted",
             expense: "an expense",
             shift: "a shift",
+            preset: "many shifts",
         },
         print_report: {
             title: "Download options",

src/i18n/fr-ca/index.ts

@@ -373,6 +373,7 @@ export default {
             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",

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

@@ -20,6 +20,6 @@ export const timesheetApprovalService = {
     },
 
     subscribeToPayPeriodObservable: (): EventSource => {
-        return new EventSource('pay-periods/subscribe')
+        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
-        class="column bg-secondary items-center"
-    >
+    <q-page 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[]>([]);
@@ -183,13 +187,29 @@ export const useTimesheetStore = defineStore('timesheet', () => {
 
     const subscribeToPayPeriodObservable = () => {
         if (pay_period_observer.value === undefined) {
+            console.log('subscribing to observable');
             pay_period_observer.value = timesheetApprovalService.subscribeToPayPeriodObservable();
-            pay_period_observer.value.onmessage = () => {
+            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,
@@ -214,5 +234,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         openReportDialog,
         closeReportDialog,
         subscribeToPayPeriodObservable,
+        unsubscribeToPayPeriodObservable,
     };
 });