Merge pull request 'fix(timesheet): adjustment to mobile UI, reduce header space, remove footer' (#40) from dev/nicolas/staging-prep into main

Reviewed-on: Targo/targo_frontend#40

src/layouts/main-layout.vue

@@ -39,6 +39,6 @@
             <router-view />
         </q-page-container>
         
-        <FooterBar />
+        <FooterBar v-if="!$q.platform.is.mobile" />
     </q-layout>
 </template>

src/modules/shared/components/page-header-template.vue

@@ -34,7 +34,7 @@
                 :key="startDate"
                 v-if="startDate.length > 0"
                 class="col row flex-center full-width q-py-none q-my-none"
-                :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
+                :class="$q.platform.is.mobile ? 'q-my-sm' : ''"
             >
                 <div class="text-accent text-weight-bold text-h6">
                     {{ $d(date.extractDate(startDate, 'YYYY-MM-DD'), date_format_options) }}

src/modules/shared/components/pay-period-navigator.vue

@@ -73,7 +73,7 @@
             color="accent"
             @click="is_showing_calendar_picker = !is_showing_calendar_picker"
             :disable="timesheet_store.is_loading || is_disabled"
-            class="q-px-xl"
+            :class="$q.platform.is.mobile ? 'q-px-md' : 'q-px-xl'"
         >
             <q-tooltip
                 anchor="top middle"

src/modules/timesheets/components/mobile/shift-list-weekly-overview-mobile.vue

@@ -2,11 +2,20 @@
     setup
     lang="ts"
 >
+    import { ref } from 'vue';
     import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
     const timesheet_store = useTimesheetStore();
     const timesheet_api = useTimesheetApi();
+
+    const show_autofill = ref(false);
+
+    const onClickApplyPreset = async (timesheet_id: number) => {
+        show_autofill.value = false;
+        await timesheet_api.applyPreset(timesheet_id);
+    }
 </script>
 
 <template>
@@ -24,31 +33,31 @@
             <div
                 class="rounded-5 relative-position q-px-sm q-pt-sm q-pb-xs full-width shadow-4"
                 style="border: 1px solid var(--q-accent);"
+                @click="show_autofill = !show_autofill"
             >
+                <!-- icon to show preset is available -->
+                <q-icon
+                    v-if="timesheet.days.every(day => day.shifts.length < 1)"
+                    name="schedule_send"
+                    size="sm"
+                    color="accent"
+                    class="absolute-top-right bg-secondary"
+                    style="transform: translate(10px, -10px);"
+                />
+
                 <!-- label for week number -->
                 <div
-                    class="self-start text-uppercase text-weight-bolder text-accent bg-secondary absolute-top-left q-px-xs"
+                    class="self-start text-uppercase text-weight-bolder text-overline text-accent bg-secondary absolute-top-left q-px-xs"
-                    style="font-size: 0.8em; top: -7px; left: 10px; line-height: 1em;"
+                    style="font-size: 1em; top: -7px; left: 10px; line-height: 1em;"
-                >{{ $t('timesheet.week') + ` ${timesheet_index + 1}` }}</div>
+                >
-
+                    {{
-                <!-- hours worked in the week -->
+                        getHoursMinutesStringFromHoursFloat(timesheet.weekly_hours.regular +
-                <div class="col-auto row">
-                    <span class="text-weight-bolder text-uppercase text-accent text-caption q-mr-sm">{{
-                        $t('timesheet.total_hours') }}</span>
-                    <span>{{
-                        (timesheet.weekly_hours.regular +
                             timesheet.weekly_hours.evening +
                             timesheet.weekly_hours.emergency +
-                            timesheet.weekly_hours.overtime).toFixed(2)
+                            timesheet.weekly_hours.overtime)
-                    }}</span>
+                    }}
                 </div>
 
-                <!-- label for current shifts preview -->
-                <div
-                    class="col-auto full-width text-center text-weight-medium text-caption text-uppercase q-mt-xs"
-                    style="font-size: 0.65em; line-height: 1.2em;"
-                > {{ $t('timesheet.current_shifts') }}</div>
-
                 <!-- preview of current number of shifts -->
                 <div
                     class="col row flex-center"
@@ -75,17 +84,22 @@
             </div>
 
             <!-- button to apply weekly schedule preset -->
-            <div class="col-auto flex-center row q-pt-xs full-width">
+            <q-slide-transition>
-                <q-btn
+                <div
-                    v-if="timesheet.days.every(day => day.shifts.length < 1)"
+                    class="col-auto flex-center row q-pt-xs full-width"
-                    push
+                    v-if="show_autofill"
-                    dense
+                >
-                    color="accent"
+                    <q-btn
-                    :label="$t('timesheet.apply_preset')"
+                        v-if="timesheet.days.every(day => day.shifts.length < 1)"
-                    class="full-width"
+                        push
-                    @click="timesheet_api.applyPreset(timesheet.timesheet_id)"
+                        dense
-                />
+                        color="accent"
-            </div>
+                        :label="$t('timesheet.apply_preset')"
+                        class="full-width"
+                        @click="onClickApplyPreset(timesheet.timesheet_id)"
+                    />
+                </div>
+            </q-slide-transition>
         </div>
     </div>
 </template>

src/modules/timesheets/components/shift-list-scrollable.vue

@@ -29,7 +29,7 @@
 
     const handleSwipe: TouchSwipeValue = (details) => {
         mobile_animation_direction.value = details.direction === 'left' ? 'fadeInRight' : 'fadeInLeft';
-        if (details.distance && details.distance.x && Math.abs(details.distance.x) > 30) {
+        if (details.distance && details.distance.x && Math.abs(details.distance.x) > 15) {
             timesheet_api.getTimesheetsBySwiping(details.direction === 'left' ? 1 : -1).catch(error => console.error(error));
         }
     };

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

@@ -115,16 +115,16 @@
             />
 
             <!-- mobile expenses button -->
-            <q-btn
+            <div v-if="($q.platform.is.mobile && ($q.screen.width < $q.screen.height))" class="col q-pl-lg">
-                v-if="($q.platform.is.mobile && ($q.screen.width < $q.screen.height))"
+                <q-btn
-                push
+                    push
-                rounded
+                    rounded
-                color="accent"
+                    color="accent"
-                icon="receipt_long"
+                    icon="receipt_long"
-                :label="$t('timesheet_approvals.table.expenses')"
+                    class="full-width"
-                class="col-auto"
+                    @click="expenses_store.open"
-                @click="expenses_store.open"
+                />
-            />
+            </div>
 
             <q-space v-if="$q.screen.width > $q.screen.height" />
 

src/stores/expense-store.ts

@@ -9,7 +9,7 @@ export const useExpensesStore = defineStore('expenses', () => {
     const timesheet_store = useTimesheetStore();
     const is_open = ref(false);
     const is_loading = ref(false);
-    const is_showing_create_form = ref(true);
+    const is_showing_create_form = ref(false);
     const mode = ref<'create' | 'update' | 'delete'>('create');
     const current_expense = ref<Expense>(new Expense(date.formatDate(new Date(), 'YYYY-MM-DD')));
     const initial_expense = ref<Expense>(new Expense(date.formatDate(new Date(), 'YYYY-MM-DD')));
@@ -17,6 +17,7 @@ export const useExpensesStore = defineStore('expenses', () => {
 
     const open = (): void => {
         is_open.value = true;
+        is_showing_create_form.value = false;
         if (timesheet_store.pay_period !== undefined) {
             current_expense.value = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
             initial_expense.value = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
@@ -26,7 +27,7 @@ export const useExpensesStore = defineStore('expenses', () => {
 
     const close = () => {
         is_open.value = false;
-        is_showing_create_form.value = true;
+        is_showing_create_form.value = false;
     };
 
     const upsertExpense = async (expense: Expense, email?: string): Promise<boolean> => {