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

refactor(approvals): optimize approval page UI/UX for mobile

Browse Source
This commit is contained in:
Nic D 2026-02-04 10:55:23 -05:00
parent db6ec4bc90
commit 7833ddd083
8 changed files with 264 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/modules/timesheet-approval/components/details-dialog.vue
View File

@ -23,6 +23,9 @@
t('timesheet_approvals.table.unverified')
);
const approveButtonIcon = computed(() => isApproved.value ? 'lock' : 'lock_open');
const hasExpenses = computed(() => timesheet_store.timesheets.some(timesheet =>
Object.values(timesheet.weekly_expenses).some(hours => hours > 0))
);
const onClickApproveAll = async () => {
const employeeEmail = timesheet_store.current_pay_period_overview?.email;
@ -69,7 +72,10 @@
class="q-px-xl"
@click="onClickApproveAll"
>
<transition enter-active-class="animated swing" mode="out-in">
<transition
enter-active-class="animated swing"
mode="out-in"
>
<q-icon
:key="isApproved ? '1' : '2'"
:name="approveButtonIcon"
@ -82,13 +88,16 @@
<!-- employee pay period details using chart -->
<div
v-if="is_dialog_open && !$q.platform.is.mobile"
v-if="is_dialog_open"
class="col-auto q-px-md no-wrap"
:class="$q.platform.is.mobile ? 'column' : 'row'"
>
<DetailsDialogChartHoursWorked class="col" />
<DetailsDialogChartShiftTypes class="col" />
<DetailsDialogChartExpenses class="col" />
<DetailsDialogChartExpenses
v-if="hasExpenses"
class="col"
/>
</div>
<div class="col-auto">
@ -96,7 +105,7 @@
</div>
<!-- list of shifts -->
<div class="col-auto column no-wrap">
<div class="col-auto">
<TimesheetWrapper
mode="approval"
:employee-email="timesheet_store.current_pay_period_overview?.email"

81
src/modules/timesheet-approval/components/mobile/overview-list-top-mobile.vue Normal file
View File

@ -0,0 +1,81 @@
<script
setup
lang="ts"
>
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import { useQuasar } from 'quasar';
import { computed, ref } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useTimesheetApprovalApi } from '../../composables/use-timesheet-approval-api';
import type {
OverviewColumns,
PayPeriodOverviewFilters
} from 'src/modules/timesheet-approval/models/timesheet-overview.models';
const overviewFilters = defineModel<PayPeriodOverviewFilters>('filters', { required: true });
const visibleColumns = defineModel<OverviewColumns[]>('visibleColumns', { required: true });
const q = useQuasar();
const timesheetStore = useTimesheetStore();
const timesheetApprovalApi = useTimesheetApprovalApi();
const isShowingFilters = ref(false);
const filterButtonBgColor = computed(() => q.dark.isActive ? 'dark' : 'primary')
</script>
<template>
<div class="column full-width">
<div class="col-auto column no-wrap flex-center full-width">
<div class="col-auto row justify-between items-center full-width">
<PayPeriodNavigator
class="col-auto"
@date-selected="timesheetApprovalApi.getTimesheetOverviews"
@pressed-next-button="timesheetApprovalApi.getTimesheetOverviews"
@pressed-previous-button="timesheetApprovalApi.getTimesheetOverviews"
/>
<q-btn
push
rounded
color="accent"
icon="download"
class="col-auto q-px-xl"
@click="timesheetStore.is_report_dialog_open = true"
/>
</div>
<div class="col-auto q-py-sm full-width">
<QTableFilters
v-model:search="overviewFilters.name_search_string"
class="col-auto"
/>
</div>
<q-btn
icon="filter_alt"
:color="filterButtonBgColor"
:label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
class="col-auto full-width"
style="border-radius: 5px 5px 0 0;"
@click="isShowingFilters = !isShowingFilters"
/>
</div>
<div class="col-auto full-width">
<q-slide-transition>
<OverviewListFilters
v-if="isShowingFilters"
v-model:filters="overviewFilters"
v-model:visible-columns="visibleColumns"
:class="`bg-${filterButtonBgColor}`"
/>
</q-slide-transition>
</div>
</div>
</template>

6
src/modules/timesheet-approval/components/overview-list-filters.vue
View File

@ -18,14 +18,14 @@
</script>
<template>
<div class="column bg-primary text-uppercase q-px-sm text-white no-wrap">
<div class="col row no-wrap">
<div class="column text-uppercase text-white">
<div class="col row">
<q-checkbox
v-model="filters.is_showing_inactive"
keep-color
color="accent"
:label="$t('timesheet_approvals.table.filter_active')"
class="col-auto"
class="col-auto q-px-sm"
:class="filters.is_showing_inactive ? 'text-accent text-weight-bolder' : 'text-white text-weight-medium'"
/>

102
src/modules/timesheet-approval/components/overview-list-top.vue Normal file
View File

@ -0,0 +1,102 @@
<script
setup
lang="ts"
>
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
import { useUiStore } from 'src/stores/ui-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import type { OverviewColumns, PayPeriodOverviewFilters } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { ref } from 'vue';
const overviewFilters = defineModel<PayPeriodOverviewFilters>('filters', { required: true });
const visibleColumns = defineModel<OverviewColumns[]>('visibleColumns', { required: true });
const uiStore = useUiStore();
const timesheetStore = useTimesheetStore();
const timesheetApprovalApi = useTimesheetApprovalApi();
const isShowingFilters = ref(false);
</script>
<template>
<div class="column full-width">
<div class="col-auto row items-start full-width q-px-lg q-mt-md">
<div class="col row">
<PayPeriodNavigator
@date-selected="timesheetApprovalApi.getTimesheetOverviews"
@pressed-next-button="timesheetApprovalApi.getTimesheetOverviews"
@pressed-previous-button="timesheetApprovalApi.getTimesheetOverviews"
style="height: 40px;"
/>
<q-space />
<div
class="col-auto row no-wrap items-start"
:class="$q.platform.is.mobile ? 'q-mb-md' : ''"
>
<q-btn-toggle
v-model="uiStore.user_preferences.is_timesheet_approval_grid"
push
rounded
color="white"
text-color="accent"
toggle-color="accent"
class="col-auto"
:class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
:options="[
{ icon: 'grid_view', value: true },
{ icon: 'view_list', value: false },
]"
style="height: 40px;"
/>
<q-btn
push
rounded
icon="download"
color="accent"
:label="$q.screen.lt.md ? '' : $t('shared.label.download')"
class="col-auto q-mr-sm"
style="height: 40px;"
@click="timesheetStore.is_report_dialog_open = true"
/>
<QTableFilters
v-model:search="overviewFilters.name_search_string"
class="col-auto q-mb-sm"
/>
</div>
<q-btn
flat
icon="filter_alt"
color="white"
:label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
class="col-auto q-ml-sm self-stretch bg-primary"
style="border-radius: 5px 5px 0 0;"
@click="isShowingFilters = !isShowingFilters"
/>
</div>
</div>
<q-slide-transition>
<OverviewListFilters
v-if="isShowingFilters"
v-model:filters="overviewFilters"
v-model:visible-columns="visibleColumns"
class="q-mx-lg col-auto bg-primary"
/>
</q-slide-transition>
<q-separator
color="primary"
size="5px"
class="q-mx-lg q-my-none q-pa-none"
/>
</div>
</template>

119
src/modules/timesheet-approval/components/overview-list.vue
View File

@ -5,10 +5,10 @@
/* eslint-disable */
import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
import OverviewListTop from 'src/modules/timesheet-approval/components/overview-list-top.vue';
import OverviewListTopMobile from 'src/modules/timesheet-approval/components/mobile/overview-list-top-mobile.vue';
import { useQuasar } from 'quasar';
import { computed, ref } from 'vue';
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
@ -17,14 +17,10 @@
import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
import { useUiStore } from 'src/stores/ui-store';
// ========== constants ========================================
const WARNING_COLUMNS: OverviewColumns[] = ['EVENING', 'HOLIDAY', 'VACATION', 'SICK']
const NEGATIVE_COLUMNS: OverviewColumns[] = ['OVERTIME', 'EMERGENCY']
const ui_store = useUiStore();
const auth_store = useAuthStore();
const timesheet_store = useTimesheetStore();
const timesheet_approval_api = useTimesheetApprovalApi();
const TIME_COLUMNS: OverviewColumns[] = ['REGULAR', 'EVENING', 'EMERGENCY', 'OVERTIME', 'HOLIDAY', 'VACATION', 'SICK'];
const VISIBLE_COLUMNS = ref<OverviewColumns[]>([
'employee_first_name',
@ -42,13 +38,18 @@
'is_approved',
]);
// ========== state ========================================
const { maxHeight } = defineProps<{
maxHeight: number;
}>();
const is_showing_filters = ref(false);
const q = useQuasar();
const uiStore = useUiStore();
const auth_store = useAuthStore();
const timesheet_store = useTimesheetStore();
const timesheet_approval_api = useTimesheetApprovalApi();
const overview_rows = computed(() => timesheet_store.pay_period_overviews.filter(overview => overview));
const overview_filters = ref<PayPeriodOverviewFilters>({
is_showing_inactive: false,
is_showing_team_only: true,
@ -56,6 +57,18 @@
name_search_string: '',
});
// ========== computed ========================================
const isGridMode = computed(() => q.platform.is.mobile ? true :
uiStore.user_preferences.is_timesheet_approval_grid
);
const overview_rows = computed(() =>
timesheet_store.pay_period_overviews.filter(overview => overview)
);
// ========== methods ========================================
const onClickedDetails = async (row: TimesheetApprovalOverview) => {
timesheet_store.current_pay_period_overview = row;
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
@ -112,13 +125,13 @@
:columns="pay_period_overview_columns"
:table-colspan="pay_period_overview_columns.length"
:visible-columns="VISIBLE_COLUMNS"
:grid="ui_store.user_preferences.is_timesheet_approval_grid"
:grid="isGridMode"
:pagination="{ sortBy: 'is_active' }"
:filter="overview_filters"
:filter-method="filterEmployeeRows"
:rows-per-page-options="[0]"
class="bg-transparent"
:class="ui_store.user_preferences.is_timesheet_approval_grid ? '' : 'sticky-header-table sticky-first-column-table sticky-last-column-table no-shadow q-pb-sm'"
:class="uiStore.user_preferences.is_timesheet_approval_grid ? '' : 'sticky-header-table sticky-first-column-table sticky-last-column-table no-shadow q-pb-sm'"
card-container-class="justify-center"
table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15"
:no-data-label="$t('shared.error.no_data_found')"
@ -130,85 +143,17 @@
@row-click="(_evt, row: TimesheetApprovalOverview) => onClickedDetails(row)"
>
<template #top>
<div class="column full-width">
<div
class="col-auto row items-start full-width q-px-lg"
:class="$q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md'"
>
<PayPeriodNavigator
@date-selected="timesheet_approval_api.getTimesheetOverviews"
@pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
@pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
:class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
style="height: 40px;"
/>
<q-space />
<div
class="col-auto row no-wrap items-start"
:class="$q.platform.is.mobile ? 'q-mb-md' : ''"
>
<q-btn-toggle
v-model="ui_store.user_preferences.is_timesheet_approval_grid"
push
rounded
color="white"
text-color="accent"
toggle-color="accent"
class="col-auto"
:class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
:options="[
{ icon: 'grid_view', value: true },
{ icon: 'view_list', value: false },
]"
style="height: 40px;"
/>
<q-btn
push
rounded
icon="download"
color="accent"
:label="$q.screen.lt.md ? '' : $t('shared.label.download')"
class="col-auto q-mr-sm"
style="height: 40px;"
@click="timesheet_store.is_report_dialog_open = true"
/>
<QTableFilters
v-model:search="overview_filters.name_search_string"
class="col-auto q-mb-sm"
/>
<q-btn
flat
icon="filter_alt"
color="white"
:label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
class="col q-ml-sm self-stretch bg-primary"
style="border-radius: 5px 5px 0 0;"
@click="is_showing_filters = !is_showing_filters"
/>
</div>
</div>
<q-slide-transition>
<OverviewListFilters
v-if="is_showing_filters"
<OverviewListTopMobile
v-if="$q.platform.is.mobile"
v-model:filters="overview_filters"
v-model:visible-columns="VISIBLE_COLUMNS"
class="q-mx-lg col-auto"
/>
</q-slide-transition>
<q-separator
color="primary"
size="5px"
class="q-mx-lg q-my-none q-pa-none"
<OverviewListTop
v-else
v-model:filters="overview_filters"
v-model:visible-columns="VISIBLE_COLUMNS"
/>
</div>
</template>
<template #header="props">

6
src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
View File

@ -3,7 +3,7 @@
lang="ts"
>
/* eslint-disable */
import { date } from 'quasar';
import { date, useQuasar } from 'quasar';
import { computed, ref } from 'vue';
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
@ -16,6 +16,7 @@
const expense = defineModel<Expense>({ required: true })
const q = useQuasar();
const expenses_store = useExpensesStore();
const expenses_api = useExpensesApi();
@ -25,6 +26,7 @@
// =========== computed ==================================
const approved_class = computed(() => expense.value.is_approved ? ' bg-accent text-white' : '')
const primaryColor = computed(() => q.dark.isActive ? 'blue-grey-3' : 'primary')
// =========== methods ===================================
@ -120,7 +122,7 @@
flat
dense
icon="las la-trash"
color="primary"
:color="primaryColor"
size="lg"
class="col-auto bg-dark q-px-xs"
style="border-radius: 0 2px 2px 0;"

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

@ -14,27 +14,34 @@
import type { TimesheetDay } from 'src/modules/timesheets/models/timesheet.models';
import { useI18n } from 'vue-i18n';
// ========== constants ========================================
const CURRENT_DATE_STRING = new Date().toISOString().slice(0, 10);
// ========== state ========================================
const emit = defineEmits<{
'onCurrentDayComponentFound': [component: HTMLElement | undefined];
}>();
const q = useQuasar();
const { extractDate } = date;
const { locale } = useI18n();
const q = useQuasar();
const ui_store = useUiStore();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
const timesheet_store = useTimesheetStore();
const mobile_animation_direction = ref('fadeInLeft');
const currentDayComponent = ref<HTMLElement[] | null>(null);
const currentDayComponentWatcher = ref(currentDayComponent);
const employeeEmail = inject<string>('employeeEmail');
// ========== computed ========================================
const animation_style = computed(() => ui_store.is_mobile_mode ? mobile_animation_direction.value : 'fadeInDown');
// ========== methods ========================================
const addNewShift = (day_shifts: Shift[], date: string, timesheet_id: number) => {
ui_store.focus_next_component = true;
const new_shift = new Shift;
@ -89,12 +96,12 @@
<template>
<div
class="fit"
:class="$q.platform.is.mobile ? 'column' : 'row'"
:class="$q.platform.is.mobile ? 'column no-wrap q-pb-lg' : 'row'"
>
<div
v-for="timesheet, timesheet_index of timesheet_store.timesheets"
:key="timesheet.timesheet_id"
class="col column fit items-center"
:class="$q.platform.is.mobile ? 'col-auto column no-wrap' : 'col column fit items-center'"
>
<transition
appear
@ -141,13 +148,12 @@
<!-- mobile version in portrait mode -->
<div
v-if="$q.platform.is.mobile && ($q.screen.width < $q.screen.height)"
class="col column full-width q-px-md q-py-sm"
class="col-auto full-width q-px-md q-py-sm"
>
<q-card
class="shadow-12"
:class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent rounded-10' : 'bg-dark mobile-rounded-10'"
>
<q-card-section
class="text-weight-bolder text-uppercase text-h6 q-py-sm text-center relative-position"
:class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent text-white' : 'bg-primary text-white'"

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

@ -77,7 +77,7 @@
</script>
<template>
<div class="column items-center full-height relative-position no-wrap">
<div class="column items-center full-height" :class="mode === 'normal' ? 'relative-position' : ' no-wrap'">
<LoadingOverlay v-model="timesheet_store.is_loading" />
<!-- label for approval mode to delimit that this is the timesheet -->
@ -104,7 +104,7 @@
/>
</div>
<q-space />
<q-space v-if="!$q.platform.is.mobile" />
<!-- employee weekly overview -->
<div
@ -120,12 +120,12 @@
<!-- top menu -->
<div
v-if="mode === 'normal'"
class="col-auto row items-center full-width"
:class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'justify-between q-px-md' : 'q-pb-sm q-px-xl'"
>
<!-- navigation btn -->
<PayPeriodNavigator
v-if="mode === 'normal'"
class="col-auto"
@date-selected="timesheet_api.getTimesheetsByDate"
@pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
@ -134,7 +134,7 @@
<!-- mobile expenses button -->
<div
v-if="($q.platform.is.mobile && ($q.screen.width < $q.screen.height))"
v-if="$q.screen.width < $q.screen.height && mode === 'normal'"
class="col q-pl-lg"
>
<q-btn
@ -190,7 +190,8 @@
<!-- full shift list for timesheet approval details dialog -->
<div
v-else
class="col-auto column full-width"
class="col-auto column"
:class="$q.platform.is.mobile ? 'fit no-wrap' : 'full-width'"
:style="$q.platform.is.mobile && $q.screen.width < $q.screen.height ? 'margin-bottom: 40px' : ''"
>
<!-- Show if no timesheets found (further than one month from present) -->
@ -211,7 +212,10 @@
</div>
<!-- Else show timesheets if found -->
<ShiftList class="col" />
<ShiftList
v-else
class="col-auto"
/>
</div>
<q-btn
@ -222,8 +226,8 @@
color="accent"
icon="upload"
:label="$t('shared.label.save')"
class="col-auto absolute-bottom shadow-up-10"
style="height: 50px;"
class="absolute-bottom shadow-up-10"
style="height: 40px;"
@click="onClickSaveTimesheets"
/>