feat(timesheet): i18n for timesheet page

src/i18n/en-ca/index.ts

@@ -249,7 +249,31 @@ export default {
     timeSheets: 'Time sheet',
     timeSheetValidations: 'Time sheet',
   },
-  timeSheet: {
+  timesheet: {
+    //employee's timesheet page
+    days: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
+    nav_button: {
+      calendar_date_picker:'Calendar',
+      current_week:'This week',
+      next_week:'Next week',
+      previous_week:'Previous week',
+    },
+    save_button:'Save',
+    shift_types: 'Shift`s Type',
+    shiftTypes: {
+      EMERGENCY: 'Emergency',
+      EVENING: 'Evening',
+      HOLIDAY: 'Holiday',
+      REGULAR: 'Regular',
+      SICK: 'Sick Leave',
+      VACATION: 'Vacation',
+      WORK_FROM_HOME: 'Work from home',
+    },
+    fields: {
+      start:'Start',
+      end:'End',
+    },
+    //rest
     timeSheetTab_1: 'Shifts',
     timeSheetTab_2: 'Expenses',
     templateButton: 'Apply Templates',

src/i18n/fr-ca/index.ts

@@ -299,7 +299,31 @@ export default {
     noResultsLabel: 'Le filtre n’a révélé aucun résultat',
     noDataLabel: 'Je n’ai rien trouvé pour toi',
   },
-  timeSheet: {
+  timesheet: {
+    //employee's timesheet page
+    days: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
+    nav_button: {
+      calendar_date_picker:'Calendrier',
+      current_week:'Semaine actuelle',
+      next_week:'Prochaine semaine',
+      previous_week:'Semaine précédente',
+    },
+    save_button:'Enregistrer',
+    shift_types: 'Type de quart',
+    shiftTypes: {
+      EMERGENCY: 'Urgence',
+      EVENING: 'Soir',
+      HOLIDAY: 'Férier',
+      SICK: 'Absence',
+      REGULAR: 'Régulier',
+      VACATION: 'Vacance',
+      WORK_FROM_HOME: 'Télétravail',
+    },
+    fields: {
+      start:'Entrée',
+      end:'Sortie',
+    },
+    //rest
     timeSheetTab_1: 'Quarts de travail',
     timeSheetTab_2: 'Dépenses',
     templateButton: 'Appliquer le modèle',

src/modules/timesheets/components/timesheet/timesheet-navigation.vue

@@ -27,7 +27,7 @@
 </script>
 
 <template>
-    <div class="row q-mb-lg q-mt-lg col-12" >
+    <div class="row q-mb-lg q-mt-lg" >
         <q-btn 
             push rounded 
             icon="keyboard_arrow_left"  
@@ -40,7 +40,7 @@
                 anchor="top middle" 
                 self="center middle" 
                 class="bg-primary text-uppercase text-weight-bold"
-            > Semaine précédante
+            > {{ $t( 'timesheet.nav_button.previous_week' )}}
             </q-tooltip>
         </q-btn>
         <q-btn
@@ -55,7 +55,7 @@
                 anchor="top middle"
                 self="center middle"
                 class="bg-primary text-uppercase text-weight-bold"
-            >Cette Semaine
+            >{{ $t('timesheet.nav_button.current_week') }}
             </q-tooltip>
         </q-btn>
         <q-btn 
@@ -70,7 +70,7 @@
                 anchor="top middle"
                 self="center middle"
                 class="bg-primary text-uppercase text-weight-bold"
-            > calendrier
+            >{{ $t('timesheet.nav_button.calendar_date_picker') }}
             </q-tooltip>
         </q-btn>
         <q-btn 
@@ -85,7 +85,7 @@
                 anchor="top middle"
                 self="center middle"
                 class="bg-primary text-uppercase text-weight-bold"
-            > Semaine suivante
+            > {{ $t('timesheet.nav_button.next_week') }}
             </q-tooltip>
         </q-btn>
     </div>

src/modules/timesheets/components/timesheet/timesheet-shift-form.vue

@@ -9,6 +9,7 @@ import TimesheetNavigation from './timesheet-navigation.vue';
 import type { CreateShiftPayload } from '../../types/timesheet-shift-interface';
 import { useTimesheetApi } from '../../composables/use-timesheet-api';
 import { date as qdate } from 'quasar';
+import { useI18n } from 'vue-i18n';
 
 type ShiftRow = { 
     type: string;
@@ -18,6 +19,8 @@ type ShiftRow = {
     is_approved: boolean;
 }
 
+const { t, tm } = useI18n();
+
 const emit = defineEmits<{
     (e: 'save', payload: CreateShiftPayload[]): void;
 }>();
@@ -25,10 +28,15 @@ const emit = defineEmits<{
 const timesheet_store = useTimesheetStore();
 const timesheet_api = useTimesheetApi();
 
-const shift_type = ref<string[]> (['Régulier','Télétravail', 'Soir', 'Urgence', 'Férier', 'Vacance', 'Maladie']);
+const SHIFT_KEY = ['REGULAR','WORK_FROM_HOME', 'EVENING', 'EMERGENCY', 'HOLIDAY', 'VACATION', 'SICK'] as const;
-const days = ['Dimanche', 'Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'];
+const days = computed(()=> (tm('timesheet.days') as string[]) ?? []);
-const empty_row = { type: '', start_time: '', end_time: '', comment: '', is_approved: false };
 
+const shift_options = computed(()=> SHIFT_KEY.map(key => ({ value: key, label: t(`timeSheet.shiftType.${key}`)})));
+
+const shift_type = computed(() => SHIFT_KEY.map(key => (`timesheet.shiftTypes.${key}`)));
+
+
+const empty_row = { type: '', start_time: '', end_time: '', comment: '', is_approved: false };
 //Week dates
 const week_dates = computed(() => {
     const start_date = timesheet_store.current_timesheet.start_day;
@@ -49,7 +57,7 @@ const week_dates = computed(() => {
 
 //filling timesheet with shifts
 const rows = ref<ShiftRow[]>(
-    days.map((_,index) => {
+    days.value.map((_,index) => {
         const date_ISO = week_dates.value[index];
         const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === date_ISO);
         return shift ? {
@@ -124,7 +132,7 @@ watch(
     () => [timesheet_store.current_timesheet.start_day, timesheet_store.current_timesheet.shifts],
     () => {
         const dates = week_dates.value;
-        rows.value = days.map((_, idx)=> {
+        rows.value = days.value.map((_, idx)=> {
             const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === dates[idx]);
             return shift
                 ? { type: shift.bank_type || '', start_time: shift.start_time || '', end_time: shift.end_time || '', comment: shift.description || '', is_approved: shift.is_approved} 
@@ -144,13 +152,15 @@ watch(
             transition-hide="fade"
             persistent
         >
+        <!-- comment popup -->
             <TimesheetShiftComment
                 :comment-string="selected_row?.comment ?? ''"
                 @click-save="setComment"
                 @click-close="show_comment = false"
             />
         </q-dialog>
-        <q-form autofocus class="q-ml-xl">
+        <q-form autofocus>
+            <!-- navigation buttons -->
             <TimesheetNavigation 
                 :is-disabled="timesheet_store.is_loading"
                 :is-previous-limit="is_calendar_limit"
@@ -160,13 +170,15 @@ watch(
                 @pressed-next-button="timesheet_api.next_week()"
             />
             <div v-for="row, index in rows" :key="index" class="row q-gutter-sm q-mb-sm">
+                <!--Week days-->
                 <span class="text-weight-bold text-primary col-1">{{ days[index] }}</span>
+                <!-- type selection -->
                 <q-select
                     v-model="row.type"
                     :options="shift_type"
                     :readonly="row.is_approved" 
-                    class="col-2"
+                    class="col-1"
-                    label="Type de Quart"
+                    :label="$t('timesheet.shift_types')"
                     dense
                     filled
                     color="primary"
@@ -175,11 +187,12 @@ watch(
                     map-options    
                     hide-dropdown-icon                    
                 />
+                <!-- start time input -->
                 <q-input 
                     v-model="row.start_time"
                     :readonly="row.is_approved" 
-                    class="col-2"
+                    class="col-auto"
-                    label="Entrée"
+                    :label="$t('timesheet.fields.start')"
                     dense
                     filled
                     color="primary"
@@ -187,38 +200,39 @@ watch(
                     step="300"
                     standout="bg-primary text-white"
                 />
+                <!-- end time input -->
                 <q-input 
                     v-model="row.end_time"
                     :readonly="row.is_approved" 
-                    class="col-2"
+                    class="col-auto"
-                    label="Sortie"
+                    :label="$t('timesheet.fields.end')"
                     dense
                     filled
-                    clearable
                     color="primary"
                     type="time"
                     step="300"
                     standout="bg-primary text-white"
                 />
+                <!-- comment icon -->
                 <q-btn 
                     :icon="row.comment.length > 0 ? 'announcement':'chat_bubble_outline'" 
                     :color="row.comment.length > 0 ? 'primary' : 'grey-8'"
                     :disable="row.is_approved"
                     flat
-                    class="col-1"
+                    class="col-auto"
                     @click="onClickComment(index)"
                 />
+                <!-- reset entries icon -->
                 <q-btn
                     icon="cleaning_services"
                     flat
                     dense
-                    class="q-pa-none q-ma-none justify-right"
+                    class="q-pa-none q-ma-none justify-right col-1"
                     :color="row.type.length || row.start_time.length || row.end_time.length || row.comment.length > 0 ? 'primary' : 'accent'"
                     @click="clearRow(index)"
                 />
             </div>
-        </q-form>
+            <!-- save button -->
-        <q-card-actions align="right">
             <q-btn
                 color="primary"
                 icon="save_alt"
@@ -231,9 +245,9 @@ watch(
                     anchor="top middle"
                     self="center middle"
                     class="bg-primary text-uppercase text-weight-bold"
-                >Sauvegarder
+                >{{ $t('timesheet.save_button') }}
                 </q-tooltip>
             </q-btn>
-        </q-card-actions>
+        </q-form>
     </q-card>
 </template>

src/modules/timesheets/pages/timesheet-temp-page.vue

@@ -55,7 +55,7 @@ import type { CreateShiftPayload } from '../types/timesheet-shift-interface';
                 {{ timesheet_label.start_date }}
             </div>
             <div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
-                {{ $t('timeSheet.dateRangesTo') }}
+                {{ $t('timesheet.dateRangesTo') }}
             </div>
             <div class="text-primary text-h6 text-uppercase">
                 {{ timesheet_label.end_date }}