feat(timesheet_approval): begin integration of connection to approval SSE stream

src/i18n/en-ca/index.ts

@@ -367,6 +367,13 @@ 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",
+        },
         print_report: {
             title: "Download options",
             description: "Choose what to include in the report",

src/i18n/fr-ca/index.ts

@@ -367,6 +367,13 @@ 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",
+        },
         print_report: {
             title: "options de téléchargement",
             description: "Choisissez ce qui sera inclu dans le rapport",

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('pay-periods/subscribe')
+    },
 };

src/stores/timesheet-store.ts

@@ -26,6 +26,7 @@ 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[]>([]);
 
@@ -180,6 +181,15 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         is_report_dialog_open.value = false;
     };
 
+    const subscribeToPayPeriodObservable = () => {
+        if (pay_period_observer.value === undefined) {
+            pay_period_observer.value = timesheetApprovalService.subscribeToPayPeriodObservable();
+            pay_period_observer.value.onmessage = () => {
+                
+            }
+        }
+    }
+
     return {
         is_loading,
         is_report_dialog_open,
@@ -203,5 +213,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         getPayPeriodReport,
         openReportDialog,
         closeReportDialog,
+        subscribeToPayPeriodObservable,
     };
 });