fix(timesheet): fix issue on mobile version where shifts cannot be deleted

src/modules/timesheets/components/mobile/shift-list-day-mobile.vue

@@ -10,11 +10,13 @@
     import { useUiStore } from 'src/stores/ui-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { Shift } from 'src/modules/timesheets/models/shift.models';
+    import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
     import type { TimesheetDay } from 'src/modules/timesheets/models/timesheet.models';
-    // import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
+import { isShiftOverlap } from 'src/modules/timesheets/utils/shift.util';
 
     const { locale } = useI18n();
     const uiStore = useUiStore();
+    const shiftApi = useShiftApi();
     const timesheetStore = useTimesheetStore();
 
     const day = defineModel<TimesheetDay>({ required: true });
@@ -44,6 +46,22 @@
         else if (locale.value === 'en-CA')
             return holiday.nameEn;
     };
+
+    const onTimeFieldBlur = () => {
+        const is_error = isShiftOverlap(day.value.shifts);
+        day.value.shifts.map(shift => shift.has_error = is_error);
+    }
+
+    const deleteCurrentShift = async (shiftId: number, index: number) => {
+        if (shiftId <= 0)
+            day.value.shifts.splice(index, 1);
+        else
+            await shiftApi.deleteShiftById(shiftId);
+
+        if (day.value.shifts.length < 2) {
+            onTimeFieldBlur();
+        }
+    };
 </script>
 
 <template>
@@ -93,13 +111,14 @@
                     class="q-pa-none transparent"
                 >
                     <div
-                        v-for="_shift, shiftIndex in day.shifts"
+                        v-for="shift, shiftIndex in day.shifts"
                         :key="shiftIndex"
                     >
                         <ShiftListDayRowMobile
                             v-model:shift="day.shifts[shiftIndex]!"
                             :current-shifts="day.shifts"
                             :has-shift-after="shiftIndex < day.shifts.length - 1"
+                            @request-delete="deleteCurrentShift(shift.id, shiftIndex)"
                         />
                     </div>
                 </div>