louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(timesheet): adjustment to mobile UI, reduce header space, remove footer

Browse Source
This commit is contained in:
Nicolas Drolet 2026-01-07 10:32:19 -05:00
parent 76da80cccc
commit 1a707bf05b
7 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/main-layout.vue
View File

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

2
src/modules/shared/components/page-header-template.vue
View File

@ -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) }}

2
src/modules/shared/components/pay-period-navigator.vue
View File

@ -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"

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

@ -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"
style="font-size: 0.8em; top: -7px; left: 10px; line-height: 1em;"
>{{ $t('timesheet.week') + ` ${timesheet_index + 1}` }}</div>
<!-- hours worked in the week -->
<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 +
class="self-start text-uppercase text-weight-bolder text-overline text-accent bg-secondary absolute-top-left q-px-xs"
style="font-size: 1em; top: -7px; left: 10px; line-height: 1em;"
>
{{
getHoursMinutesStringFromHoursFloat(timesheet.weekly_hours.regular +
timesheet.weekly_hours.evening +
timesheet.weekly_hours.emergency +
timesheet.weekly_hours.overtime).toFixed(2)
}}</span>
timesheet.weekly_hours.overtime)
}}
</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-btn
v-if="timesheet.days.every(day => day.shifts.length < 1)"
push
dense
color="accent"
:label="$t('timesheet.apply_preset')"
class="full-width"
@click="timesheet_api.applyPreset(timesheet.timesheet_id)"
/>
</div>
<q-slide-transition>
<div
class="col-auto flex-center row q-pt-xs full-width"
v-if="show_autofill"
>
<q-btn
v-if="timesheet.days.every(day => day.shifts.length < 1)"
push
dense
color="accent"
:label="$t('timesheet.apply_preset')"
class="full-width"
@click="onClickApplyPreset(timesheet.timesheet_id)"
/>
</div>
</q-slide-transition>
</div>
</div>
</template>

2
src/modules/timesheets/components/shift-list-scrollable.vue
View File

@ -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));
}
};

20
src/modules/timesheets/components/timesheet-wrapper.vue
View File

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

5
src/stores/expense-store.ts
View File

@ -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> => {