feat(timesheet): add toggle for work from home for shifts. UI/UX refactor for comment and delete buttons

src/i18n/en-ca/index.ts

@@ -201,7 +201,8 @@ export default {
                 REGULAR: "Regular",
                 SICK: "Sick Leave",
                 VACATION: "Vacation",
-                REMOTE: "Remote work",
+                REMOTE: "Remote",
+                OFFICE: "Office",
             },
             fields: {
                 start: "Start (HH:mm)",

src/i18n/fr-ca/index.ts

@@ -203,6 +203,7 @@ export default {
                 SICK: "Maladie",
                 VACATION: "Vacance",
                 REMOTE: "Télétravail",
+                OFFICE: "Bureau",
             },
             fields: {
                 start: "Début (HH:mm)",

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

@@ -13,6 +13,10 @@
 
     const expense_store = useExpensesStore();
 
+    const { isApproved = false} = defineProps<{
+        isApproved?: boolean;
+    }>();
+
     const onClickExpenseCreate = () => {
         expense_store.mode = 'create';
         expense_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
@@ -50,6 +54,7 @@
                 />
 
                 <q-expansion-item
+                    v-if="!isApproved"
                     v-model="expense_store.is_showing_create_form"
                     hide-expand-icon
                     dense

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

@@ -25,7 +25,7 @@
         { label: t('timesheet.shift.types.HOLIDAY'), value: 'HOLIDAY', icon: 'forest', icon_color: 'green-8' },
         { label: t('timesheet.shift.types.SICK'), value: 'SICK', icon: 'medication_liquid', icon_color: 'light-blue-6' },
     ];
-    
+
     const shift = defineModel<Shift>('shift', { required: true });
     const shift_type_selected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));
     const select_ref = useTemplateRef<QSelect>('select');
@@ -98,7 +98,7 @@
 
         <div :class="ui_store.is_mobile_mode ? 'column' : 'row'">
             <div
-                class="row items-start text-uppercase rounded-5"
+                class="row items-center text-uppercase rounded-5"
                 :class="ui_store.is_mobile_mode ? 'col q-mb-xs q-px-xs' : 'col-4'"
             >
                 <!-- mobile comment button -->
@@ -168,7 +168,7 @@
                     menu-anchor="bottom middle"
                     menu-self="top middle"
                     :options="SHIFT_OPTIONS"
-                    class="col rounded-5 q-mx-xs bg-dark q-pt-xs"
+                    class="col rounded-5 q-mx-xs bg-dark"
                     :class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
                     popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
                     :style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
@@ -178,23 +178,67 @@
                 >
                     <template #selected-item="scope">
                         <div
-                            class="row flex-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
+                            class="row items-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
-                            :class="ui_store.is_mobile_mode ? 'items-center full-height' : 'flex-center'"
+                            :class="ui_store.is_mobile_mode ? 'full-height' : ''"
                             :tabindex="scope.tabindex"
                         >
                             <q-icon
                                 :name="scope.opt.icon"
                                 :color="scope.opt.icon_color"
                                 size="sm"
-                                class="col-auto q-mx-xs"
+                                class="col-auto"
+                                :class="shift.is_approved ? 'q-mx-xs': 'q-mr-xs'"
                             />
                             <span
-                                style="line-height: 0.9em;"
+                                style="line-height: 1.2em;"
                                 class="col-auto ellipsis"
                                 :class="!shift.is_approved ? '' : 'text-white'"
-                            >{{ scope.opt.label }}</span>
+                            >
+                                {{ scope.opt.label }}
+                            </span>
                         </div>
                     </template>
+
+                    <template #after>
+                        <q-icon
+                            v-if="shift.is_approved"
+                            :name="shift.is_remote ? 'las la-laptop' : 'las la-building'"
+                            size="1.2em"
+                            color="white"
+                            class="q-mr-sm"
+                        >
+                            <q-tooltip
+                                anchor="top middle"
+                                self="bottom middle"
+                                :offset="[0, 10]"
+                                class="text-uppercase text-weight-bold text-white bg-primary"
+                            >
+                                {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
+                                    $t('timesheet.shift.types.OFFICE') }}
+                            </q-tooltip>
+                        </q-icon>
+
+                        <q-toggle
+                            v-else
+                            v-model="shift.is_remote"
+                            :disable="shift.is_approved"
+                            dense
+                            keep-color
+                            size="3em"
+                            color="accent"
+                            icon="las la-building"
+                            checked-icon="las la-laptop"
+                        >
+                            <q-tooltip
+                                anchor="top middle"
+                                self="bottom middle"
+                                :offset="[0, 10]"
+                                class="text-uppercase text-weight-medium text-white bg-accent"
+                            >
+                                {{ $t('timesheet.remote_button') }}
+                            </q-tooltip>
+                        </q-toggle>
+                    </template>
                 </q-select>
             </div>
 
@@ -260,26 +304,24 @@
                 </q-input>
 
                 <!-- comment and delete buttons -->
-                <div :class="ui_store.is_mobile_mode ? 'col-12 row' : 'col-auto self-start'">
+                <div class="row full-height" :class="ui_store.is_mobile_mode ? 'col-12' : 'col-auto flex-center'">
-                    <q-icon
-                        v-if="shift.type && dense"
-                        :name="shift.comment ? 'comment' : ''"
-                        color="primary"
-                        :size="dense ? 'xs' : 'sm'"
-                        class="col"
-                    />
-
                     <!-- desktop comment button -->
                     <q-btn
-                        v-else-if="!ui_store.is_mobile_mode"
+                        v-if="!ui_store.is_mobile_mode"
                         push
                         dense
-                        :color="shift.is_approved ? 'accent' : 'dark'"
+                        :color="shift.is_approved ? 'white' : 'accent'"
                         :icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
-                        :text-color="shift.is_approved ? '' : (shift.comment ? 'accent' : 'grey-5')"
+                        :text-color="shift.is_approved ? 'accent' : 'white'"
                         class="col"
                         :class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
-                    >
+                    >   
+                        <q-badge 
+                            v-if="shift.comment"
+                            floating
+                            rounded
+                            color="negative"
+                        />
                         <q-popup-edit
                             v-model="shift.comment"
                             :title="$t('timesheet.shift.fields.header_comment')"
@@ -327,14 +369,15 @@
                     </q-btn>
 
                     <q-btn
-                        v-if="!ui_store.is_mobile_mode"
+                        v-if="!ui_store.is_mobile_mode && !shift.is_approved"
                         flat
                         dense
                         :disable="shift.is_approved"
                         tabindex="-1"
-                        icon="cancel"
+                        icon="las la-trash"
                         text-color="negative"
                         class="col"
+                        size="1.2em"
                         :class="shift.is_approved ? 'invisible' : ''"
                         @click="$emit('requestDelete')"
                     >

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

@@ -22,6 +22,8 @@
     const shift_api = useShiftApi();
     const has_shift_errors = computed(() => timesheet_store.all_current_shifts.filter(shift => shift.has_error === true).length > 0);
 
+    const is_timesheets_approved = computed(() => timesheet_store.timesheets.every(timesheet => timesheet.is_approved))
+
     const { mode = 'normal' } = defineProps<{
         mode?: 'approval' | 'normal';
     }>();
@@ -65,7 +67,7 @@
 
                 <!-- save timesheet changes button -->
                 <q-btn
-                    v-if="mode === 'normal'"
+                    v-if="mode === 'normal' && !is_timesheets_approved"
                     push
                     rounded
                     :disable="timesheet_store.is_loading || has_shift_errors"
@@ -109,6 +111,6 @@
                 />
             </q-card-actions>
         </q-card>
-        <ExpenseDialog />
+        <ExpenseDialog :is-approved="is_timesheets_approved"/>
     </div>
 </template>