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

refactor(approvals): more work on filters, table list view tweaks to columns, plug in list view functionalities

Browse Source
This commit is contained in:
Nicolas Drolet 2025-12-29 10:17:18 -05:00
parent f66934cc4f
commit 9fab8ae1ca
7 changed files with 247 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/i18n/en-ca/index.ts
View File

@ -285,6 +285,8 @@ export default {
verified: "approved",
unverified: "pending",
inactive: "inactive",
filter_active: "show only active employees",
filter_team: "",
},
tooltip: {
button_detailed_view: "detailed view",

2
src/i18n/fr-ca/index.ts
View File

@ -286,6 +286,8 @@ export default {
verified: "approuvé",
unverified: "à vérifier",
inactive: "inactif",
filter_active: "",
filter_team: "",
},
tooltip: {
button_detailed_view: "vue détaillée",

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

@ -3,6 +3,7 @@
lang="ts"
>
import type { TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
import { getHoursMinutesStringFromHoursFloat, getMinutes } from 'src/utils/date-and-time-utils';
const modelApproval = defineModel<boolean>();
@ -15,18 +16,6 @@
'clickDetails': [overview: TimesheetApprovalOverview];
'clickApprovalAll' : [is_approved: boolean];
}>();
const getMinutes = (hours: number) => {
const minutes_percent = hours - Math.floor(hours);
const minutes = Math.round(minutes_percent * 60);
return minutes > 1 ? minutes.toString() : '0';
}
const getHoursMinutesString = (hours: number): string => {
const flat_hours = Math.floor(hours);
const minutes = Math.round((hours - flat_hours) * 60);
return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
}
</script>
<template>
@ -95,7 +84,7 @@
<span
class="text-weight-bolder text-h3 q-py-none"
:class="row.regular_hours > 80 || !row.is_active ? 'text-negative' : ''"
> {{ getHoursMinutesString(row.regular_hours) }} </span>
> {{ getHoursMinutesStringFromHoursFloat(row.regular_hours) }} </span>
<q-separator class="q-mr-sm" />
</div>
@ -116,7 +105,7 @@
<span
class="text-weight-bolder q-pa-none q-mb-xs"
style="font-size: 1.2em; line-height: 1em;"
> {{ getHoursMinutesString(hour_type) }} </span>
> {{ getHoursMinutesStringFromHoursFloat(hour_type) }} </span>
</div>
</div>
</div>

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

@ -13,23 +13,28 @@
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { overview_column_names, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
import { overview_column_names, OverviewColumns, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
const auth_store = useAuthStore();
const timesheet_store = useTimesheetStore();
const timesheet_approval_api = useTimesheetApprovalApi();
const visible_columns = ref<string[]>([
overview_column_names.REGULAR,
overview_column_names.EVENING,
overview_column_names.EMERGENCY,
overview_column_names.SICK,
overview_column_names.VACATION,
overview_column_names.HOLIDAY,
overview_column_names.OVERTIME,
overview_column_names.IS_APPROVED,
const TIME_COLUMNS: OverviewColumns[] = ['REGULAR', 'EVENING', 'EMERGENCY', 'OVERTIME', 'HOLIDAY', 'VACATION'];
const VISIBLE_COLUMNS = ref<OverviewColumns[]>([
'employee_first_name',
'REGULAR',
'EVENING',
'EMERGENCY',
'OVERTIME',
'HOLIDAY',
'VACATION',
'expenses',
'mileage',
'is_approved',
]);
const is_showing_filters = ref(false);
const search_string = ref('');
@ -77,15 +82,10 @@
<template>
<div class="q-px-md full-height">
<LoadingOverlay v-model="timesheet_store.is_loading" />
<transition
appear
enter-active-class="animated fadeInUp"
leave-active-class="animated fadeOutDown"
mode="out-in"
>
<q-table
:key="timesheet_store.is_approval_grid_mode ? 'grid' : 'list'"
:visible-columns="visible_columns"
:visible-columns="VISIBLE_COLUMNS"
:rows="overview_rows"
:columns="pay_period_overview_columns"
row-key="email"
@ -100,17 +100,18 @@
card-container-class="justify-center"
class="bg-transparent"
:class="timesheet_store.is_approval_grid_mode ? '' : 'sticky-header-table no-shadow'"
table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15"
table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15 hide-scrollbar"
:no-data-label="$t('shared.error.no_data_found')"
:no-results-label="$t('shared.error.no_search_results')"
:loading-label="$t('shared.label.loading')"
:style="$q.platform.is.mobile ? '' : 'max-height: 70vh;'"
>
<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') + (timesheet_store.is_approval_grid_mode ? '' : ' q-mb-md')"
:class="$q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md'"
>
<PayPeriodNavigator
@date-selected="timesheet_approval_api.getTimesheetOverviews"
@ -233,18 +234,26 @@
:color="props.value ? 'white' : 'grey-5'"
class="rounded-5 "
:class="props.value ? 'bg-accent' : ''"
@click.stop="props.row.is_approved = !props.row.is_approved"
@click.stop="onClickApproveAll(props.row.email, props.row.is_approved)"
/>
</transition>
<div v-else-if="props.col.name === 'employee_name'">
<div v-else-if="props.col.name === 'employee_first_name'">
<span class="text-h5 text-uppercase text-accent q-mr-xs">
{{ props.value.split(' ')[0] }}
{{ props.value }}
</span>
<span class="text-uppercase text-weight-light">
{{ props.row.employee_last_name }}
</span>
<span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1]
}}</span>
</div>
<span v-else>{{ props.value }}</span>
<span
v-else
:class="props.col.name === overview_column_names.REGULAR && props.row.overtime > 0 ? 'text-negative text-weight-bolder' : 'text-weight-regular'"
>
{{ TIME_COLUMNS.includes(props.col.name) ?
getHoursMinutesStringFromHoursFloat(props.value) : props.value }}
</span>
</div>
</transition>
</q-td>
@ -276,7 +285,6 @@
</div>
</template>
</q-table>
</transition>
</div>
</template>

18
src/modules/timesheet-approval/models/timesheet-overview.models.ts
View File

@ -63,8 +63,11 @@ export interface PayPeriodOverviewFilters {
name_search_string: string;
}
export type OverviewColumns = 'employee_first_name' | 'employee_last_name' | 'email' | 'REGULAR' | 'EVENING' | 'EMERGENCY' | 'SICK' | 'HOLIDAY' | 'VACATION' | 'OVERTIME' | 'expenses' | 'mileage' | 'is_approved' | 'is_active'
export const overview_column_names = {
EMPLOYEE_NAME: 'employee_name',
FIRST_NAME: 'employee_first_name',
LAST_NAME: 'employee_last_name',
EMAIL: 'email',
REGULAR: 'REGULAR',
EVENING: 'EVENING',
@ -81,18 +84,25 @@ export const overview_column_names = {
export const pay_period_overview_columns: QTableColumn[] = [
{
name: overview_column_names.EMPLOYEE_NAME,
name: overview_column_names.FIRST_NAME,
label: 'timesheet_approvals.table.full_name',
align: 'left',
field: 'employee_name',
field: overview_column_names.FIRST_NAME,
sortable: true,
required: true,
},
{
name: overview_column_names.LAST_NAME,
label: 'timesheet_approvals.table.full_name',
align: 'left',
field: 'employee_last_name',
sortable: true,
},
{
name: overview_column_names.EMAIL,
label: 'timesheet_approvals.table.email',
align: 'left',
field: 'email',
field: overview_column_names.EMAIL,
sortable: true,
},
{

9
src/pages/dashboard-page.vue
View File

@ -70,14 +70,11 @@
</q-carousel>
</div>
<div class="column col flex-center q-pt-md q-pl-md">
<div class="col"></div>
<div class="col-auto row justify-end full-width within-iframe">
<div class="column col items-center q-pl-md">
<div class="col-auto row justify-end full-width within-iframe" style="height: 50vh;">
<iframe
title="Environment Canada Weather"
height="100%"
width="100%"
height="400px"
src="https://weather.gc.ca/wxlink/wxlink.html?coords=45.159%2C-73.676&lang=e"
allowtransparency="true"
style="border: 0;"

12
src/utils/date-and-time-utils.ts
View File

@ -13,3 +13,15 @@ export const getCurrentPayPeriod = (today = new Date()): number => {
return current_period;
}
export const getMinutes = (hours: number) => {
const minutes_percent = hours - Math.floor(hours);
const minutes = Math.round(minutes_percent * 60);
return minutes > 1 ? minutes.toString() : '0';
}
export const getHoursMinutesStringFromHoursFloat = (hours: number): string => {
const flat_hours = Math.floor(hours);
const minutes = Math.round((hours - flat_hours) * 60);
return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
}