feat(timesheet): add delete confirmation for shift. Add blur filter to dialogs

src/i18n/en-ca/index.ts

@@ -295,7 +295,7 @@ export default {
                 add: "Add Shift",
                 edit: "Edit shift",
                 delete: "Delete shift",
-                delete_confirmation_msg: "Do you want to delete this shift completly?",
+                delete_confirmation_msg: "Delete this shift?",
             },
             types: {
                 label: "Shift`s Type",

src/i18n/fr-ca/index.ts

@@ -295,7 +295,7 @@ export default {
                 add: "Ajouter un Quart",
                 edit: "Modifier un Quart",
                 delete: "Supprimer un Quart",
-                delete_confirmation_msg: "Voulez-vous complètement supprimer ce quart?",
+                delete_confirmation_msg: "Supprimer ce quart?",
             },
             types: {
                 label: "Type de Quart",

src/modules/timesheet-approval/components/details-dialog.vue

@@ -22,6 +22,7 @@
         full-height
         transition-show="jump-down"
         transition-hide="jump-down"
+        backdrop-filter="blur(6px)"
         @show="is_dialog_open = true"
         @hide="is_dialog_open = false"
     >

src/modules/timesheets/components/expense-dialog.vue

@@ -28,6 +28,7 @@
         v-model="expense_store.is_open"
         persistent
         :full-width="$q.platform.is.mobile"
+        backdrop-filter="blur(6px)"
         transition-show="jump-down"
         transition-hide="jump-down"
     >

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

@@ -19,6 +19,7 @@
     const shift_type_selected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));
     const select_ref = ref<QSelect | null>(null);
     const error_message = ref<string | undefined>();
+    const is_showing_delete_confirm = ref(false);
 
     const { errorMessage = undefined, isTimesheetApproved = false, holiday = false } = defineProps<{
         dense?: boolean;
@@ -69,6 +70,11 @@
         }
     };
 
+    const onConfirmDelete = () => {
+        is_showing_delete_confirm.value = false;
+        emit('requestDelete');
+    }
+
     const getCommentCounterColor = (comment_length: number) => {
         if (comment_length < 200) return 'primary';
         if (comment_length < 250) return 'warning';
@@ -87,6 +93,37 @@
 
 <template>
     <div :class="ui_store.is_mobile_mode ? 'column' : 'row'">
+        <!-- delete shift confirmation dialog -->
+        <q-dialog
+            v-model="is_showing_delete_confirm"
+            backdrop-filter="blur(6px)"
+        >
+            <div
+                class="column flex-center q-pa-md bg-secondary shadow-24 rounded-10"
+                style="border: 2px solid var(--q-accent);"
+            >
+                <span class="col-auto text-h6 text-bold text-uppercase">{{
+                    $t('timesheet.shift.actions.delete_confirmation_msg') }}</span>
+                <div class="row justify-right full-width">
+                    <q-btn
+                        flat
+                        color="negative"
+                        :label="$t('shared.misc.no')"
+                        class="col"
+                        @click="is_showing_delete_confirm = false"
+                    />
+
+                    <q-btn
+                        flat
+                        color="accent"
+                        :label="$t('shared.misc.yes')"
+                        class="col"
+                        @click="onConfirmDelete"
+                    />
+                </div>
+            </div>
+        </q-dialog>
+
         <div
             class="row items-center text-uppercase rounded-5"
             :class="ui_store.is_mobile_mode ? 'col q-mb-xs q-px-xs' : 'col-4'"
@@ -310,7 +347,7 @@
                     class="col"
                     size="1.2em"
                     :class="shift.is_approved ? 'invisible' : ''"
-                    @click="$emit('requestDelete')"
+                    @click="is_showing_delete_confirm = true"
                 >
                 </q-btn>
             </div>