fix(timesheet): minor fixes to UI and time regex

src/i18n/fr-ca/index.ts

@@ -323,7 +323,7 @@ export default {
     shift_types: {
       EMERGENCY: 'Urgence',
       EVENING: 'Soir',
-      HOLIDAY: 'Férier',
+      HOLIDAY: 'Férié',
       OVERTIME: 'Supplémentaire',
       SICK: 'Absence',
       REGULAR: 'Régulier',

src/modules/timesheets/components/timesheet/timesheet-details-shifts-row.vue

@@ -37,11 +37,13 @@ import { computed } from 'vue';
     const get_text_color = (type: string): string => {
         switch(type) {
             case 'REGULAR': return 'grey-8';
-            case '':        return 'transparent';
+            case '':        return 'grey-5';
             default:        return 'white';
         }
     }
-const on_click_edit    = () => emit('request-edit', { shift: props.shift });
+const on_click_edit    = (type: string) => {
+    if(type !== '') { emit('request-edit', { shift: props.shift })};
+}
 const on_click_delete  = () => emit('request-delete', { shift: props.shift });
 
 </script>
@@ -49,9 +51,10 @@ const on_click_delete  = () => emit('request-delete', { shift: props.shift });
 <template>
     <q-card-section 
         horizontal
-        class="q-pa-none text-uppercase text-center items-center cursor-pointer rounded-10"
+        class="q-pa-none text-uppercase text-center items-center rounded-10"
+        :class="props.shift.type === '' ? '': 'cursor-pointer'"
         style="line-height: 1;"
-        @click.stop="on_click_edit"
+        @click.stop="on_click_edit(props.shift.type)"
     >
         <!-- punch-in timestamps -->
         <q-card-section class="q-pa-none col">

src/modules/timesheets/composables/use-shift-api.ts

@@ -29,7 +29,7 @@ export interface UpsertShiftsResponse {
     day:    DayShift[];
 }
 
-export const TIME_FORMAT_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)$/;
+export const TIME_FORMAT_PATTERN = /^\d{2}:\d{2}$/;
 export const DATE_FORMAT_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
 export const COMMENT_MAX_LENGTH = 512 as const;
 

src/modules/timesheets/pages/timesheet-details-overview.vue

@@ -2,8 +2,8 @@
 import { useTimesheetStore } from 'src/stores/timesheet-store';
 import { useAuthStore } from 'src/stores/auth-store';
 import { useTimesheetApi } from '../composables/use-timesheet-api';
-import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { computed, onMounted, ref } from 'vue';
 import { date } from 'quasar';
 import TimesheetNavigation from '../components/timesheet/timesheet-navigation.vue';
 import ShiftsLegend from '../components/shift/shifts-legend.vue';
@@ -58,11 +58,6 @@ onMounted( async () => {
     await loadByDate(date.formatDate(new Date(), 'YYYY-MM-DD' ));
 });
 
-const reload_current_period = async () => {
-    await timesheet_store.getPayPeriodByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
-    await timesheet_store.getTimesheetsByPayPeriodAndEmail(auth_store.user.email);
-};
-
 type FormMode = 'create' | 'edit' | 'delete';
 
 const is_dialog_open = ref<boolean>(false);
@@ -158,6 +153,7 @@ const submit_dialog = async () => {
         await upsert_shifts_by_date(email, date_iso, body);
         await timesheet_store.getTimesheetsByPayPeriodAndEmail(email);
 
+        close_dialog();
         is_dialog_open.value = false;
     } catch (e:any) {
         const status = e?.status_code ?? e?.response?.status ?? 500;
@@ -175,7 +171,10 @@ const submit_dialog = async () => {
     }
 };
 
-const close_dialog = () => { is_dialog_open.value = false; };
+const close_dialog = () => { 
+    error_banner.value = null;
+    is_dialog_open.value = false;
+ };
 
 const on_request_add    =       ({ date        }: { date: string }) => open_create_dialog(date);
 const on_request_edit   =       ({ date, shift }: { date: string; shift: any }) => open_edit_dialog(date, shift);
@@ -262,10 +261,20 @@ const on_request_delete = async ({ date, shift }: { date: string; shift: any })
                         <div class="col">
                             <q-input 
                                 v-model="start_time" 
-                                :label="$t('timesheet.fields.start')" filled dense inputmode="numeric" mask="##:##" />
+                                :label="$t('timesheet.fields.start')"
+                                filled dense
+                                inputmode="numeric"
+                                mask="##:##"
+                            />
                         </div>
                         <div class="col">
-                            <q-input v-model="end_time" :label="$t('timesheet.fields.end')" filled dense inputmode="numeric" mask="##:##" />
+                            <q-input 
+                                v-model="end_time"
+                                :label="$t('timesheet.fields.end')"
+                                filled dense 
+                                inputmode="numeric" 
+                                mask="##:##" 
+                            />
                         </div>
                     </div>
                     <div class="row items-center">
@@ -276,15 +285,22 @@ const on_request_delete = async ({ date, shift }: { date: string; shift: any })
                             :label="$t('timesheet.shift_types_label')"
                             class="col"
                             color="primary"
-                            filled
+                            filled dense
-                            dense
                             hide-dropdown-icon
                             emit-value
                             map-options
                         />
-                        <q-toggle v-model="is_remote" :label="$t('timesheet.shift_types.REMOTE')" class="col-auto" />
+                        <q-toggle 
+                            v-model="is_remote" 
+                            :label="$t('timesheet.shift_types.REMOTE')" 
+                            class="col-auto" />
                     </div>
-                    <q-input v-model="comment" type="textarea" autogrow filled dense :label="$t('timesheet.fields.header_comment')" :counter="true" :maxlength="512" />
+                    <q-input 
+                        v-model="comment"
+                        type="textarea" 
+                        autogrow filled dense 
+                        :label="$t('timesheet.fields.header_comment')" 
+                        :counter="true" :maxlength="512" />
                 </div>
 
                 <div v-else class="q-pa-md">
@@ -306,16 +322,24 @@ const on_request_delete = async ({ date, shift }: { date: string; shift: any })
                 <q-separator spaced />
 
                 <div class="row justify-end q-gutter-sm">
-                    <q-btn flat color="grey-8" :label="$t('timesheet.cancel_button')" @click="close_dialog" />
+                    <q-btn 
+                    flat 
+                    color="grey-8" 
+                    :label="$t('timesheet.cancel_button')" 
+                    @click="close_dialog" />
                     <q-btn
                         v-if="form_mode === 'delete'"
-                        outline color="negative" icon="cancel" :label="$t('timesheet.delete_button')"
+                        outline color="negative" 
+                        icon="cancel" 
+                        :label="$t('timesheet.delete_button')"
                         :loading="is_submitting"
                         @click="submit_dialog"
                     />
                     <q-btn
                         v-else
-                        color="primary" icon="save_alt" :label="$t('timesheet.save_button')"
+                        color="primary" 
+                        icon="save_alt" 
+                        :label="$t('timesheet.save_button')"
                         :loading="is_submitting"
                         @click="submit_dialog"
                     />