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

feat(timesheet): add shift overlap verification to shift entries

Browse Source 
Also refactor mobile UI/UX for timesheet: reduced header bloat, made only shifts scrollable, added left or right swipe to travel between pay periods, showing default 'no data' message when beyond 6-month-back 1-month-forward timesheet scope.
This commit is contained in:
Nicolas Drolet 2025-12-18 10:05:31 -05:00
parent db821d1d13
commit 13c339953f
15 changed files with 152 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -237,8 +237,9 @@ export default {
errors: {
INVALID_SHIFT_TIME: "In and Out shift times are reversed",
SHIFT_OVERLAP: "An overlaps occured between 2 or more shifts",
SHIFT_OVERLAP_SHORT: "Overlap",
INVALID_SHIFT: "A shift contains missing or corrupted data",
SHIFT_TIME_REQUIRED: "Valid time required",
SHIFT_TIME_REQUIRED: "Time required",
SHIFT_TYPE_REQUIRED: "Shift type required",
SHIFT_NOT_FOUND: "Shift missing or deleted",
PAY_PERIOD_NOT_FOUND: "No pay period matching given dates",

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

@ -238,6 +238,7 @@ export default {
errors: {
INVALID_SHIFT_TIME: "Les heures d'entrée et de sortie sont inversées",
SHIFT_OVERLAP: "Il y a un chevauchement entre deux ou plusieurs quarts",
SHIFT_OVERLAP_SHORT: "Chevauchement",
INVALID_SHIFT: "Un quart de travail contient des données manquantes ou corrompues",
SHIFT_TIME_REQUIRED: "Heure requise",
SHIFT_TYPE_REQUIRED: "Type requis",

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

@ -33,30 +33,13 @@
emit('date-selected', value);
};
const getNextOrPreviousPayPeriod = (direction: number) => {
const pay_period = timesheet_store.pay_period;
if (!pay_period) return;
pay_period.pay_period_no += direction;
if (pay_period.pay_period_no > 26) {
pay_period.pay_period_no = 1;
pay_period.pay_year += direction;
}
if (pay_period.pay_period_no < 1) {
pay_period.pay_period_no = 26;
pay_period.pay_year += direction;
}
};
const getNextPayPeriod = () => {
getNextOrPreviousPayPeriod(NEXT);
timesheet_store.getNextOrPreviousPayPeriod(NEXT);
emit('pressed-next-button');
}
const getPreviousPayPeriod = () => {
getNextOrPreviousPayPeriod(PREVIOUS);
timesheet_store.getNextOrPreviousPayPeriod(PREVIOUS);
emit('pressed-previous-button');
};
</script>

6
src/modules/timesheets/components/expense-dialog-header.vue
View File

@ -12,8 +12,10 @@
let expenses = 0;
let mileage = 0;
timesheet_store.timesheets.forEach(timesheet => {
expenses += timesheet.weekly_expenses.expenses ?? 0;
mileage += timesheet.weekly_expenses.mileage ?? 0;
expenses += timesheet.weekly_expenses.expenses;
expenses += timesheet.weekly_expenses.on_call;
expenses += timesheet.weekly_expenses.per_diem;
mileage += timesheet.weekly_expenses.mileage;
});
return { expenses, mileage };

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

@ -8,39 +8,33 @@
import { QSelect, QInput } from 'quasar';
import { Shift, type ShiftOption } from 'src/modules/timesheets/models/shift.models';
import { useUiStore } from 'src/stores/ui-store';
import { useShiftRules } from 'src/modules/timesheets/utils/shift.util';
import { useShiftRules, SHIFT_OPTIONS } from 'src/modules/timesheets/utils/shift.util';
let timer: NodeJS.Timeout;
const { t } = useI18n();
const ui_store = useUiStore();
const shift_rules = useShiftRules(t('timesheet.errors.SHIFT_TIME_REQUIRED'),);
const COMMENT_LENGTH_MAX = 280;
const SHIFT_OPTIONS: ShiftOption[] = [
{ label: t('timesheet.shift.types.REGULAR'), value: 'REGULAR', icon: 'wb_sunny', icon_color: 'blue-grey-3' },
{ label: t('timesheet.shift.types.EVENING'), value: 'EVENING', icon: 'bedtime', icon_color: 'indigo-8' },
{ label: t('timesheet.shift.types.EMERGENCY'), value: 'EMERGENCY', icon: 'ring_volume', icon_color: 'red-8' },
{ label: t('timesheet.shift.types.VACATION'), value: 'VACATION', icon: 'beach_access', icon_color: 'yellow-8' },
{ 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');
const start_time_ref = useTemplateRef<QInput>('start_time');
const end_time_ref = useTemplateRef<QInput>('end_time');
const { dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
const { dayShifts = [], dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
dayShifts: Shift[];
dense?: boolean;
hasShiftAfter?: boolean;
isTimesheetApproved?: boolean;
}>();
const shift_rules = useShiftRules(t('timesheet.errors.SHIFT_TIME_REQUIRED'), t('timesheet.errors.SHIFT_OVERLAP_SHORT'), dayShifts);
const emit = defineEmits<{
'saveComment': [comment: string, shift_id: number];
'requestDelete': [void];
'onTimeFieldBlur': [void];
}>();
const onBlurShiftTypeSelect = () => {
@ -194,7 +188,7 @@
class="col-auto ellipsis"
:class="!shift.is_approved ? '' : 'text-white'"
>
{{ scope.opt.label }}
{{ $t(scope.opt.label) }}
</span>
</div>
</template>
@ -235,7 +229,8 @@
:offset="[0, 10]"
class="text-uppercase text-weight-medium text-white bg-accent"
>
{{ $t('timesheet.remote_button') }}
{{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
$t('timesheet.shift.types.OFFICE') }}
</q-tooltip>
</q-toggle>
</template>
@ -256,13 +251,14 @@
lazy-rules
no-error-icon
hide-bottom-space
:rules="[shift_rules.isTimeRequired]"
:rules="[shift_rules.isTimeRequiredRule, shift_rules.isShiftOverlapRule]"
:label-color="!shift.is_approved ? 'accent' : 'white'"
class="col rounded-5 bg-dark"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
input-style="font-size: 1.2em;"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
@blur="emit('onTimeFieldBlur')"
>
<template #label>
<span
@ -286,13 +282,14 @@
lazy-rules
no-error-icon
hide-bottom-space
:rules="[shift_rules.isTimeRequired]"
:rules="[shift_rules.isTimeRequiredRule, shift_rules.isShiftOverlapRule]"
:label-color="!shift.is_approved ? 'accent' : 'white'"
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
input-style="font-size: 1.2em;"
class="col rounded-5 bg-dark"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
@blur="emit('onTimeFieldBlur')"
>
<template #label>
<span

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

@ -73,6 +73,7 @@
v-for="shift, shift_index in day.shifts"
:key="shift_index"
v-model:shift="day.shifts[shift_index]!"
:day-shifts="day.shifts"
:is-timesheet-approved="approved"
:dense="dense"
:has-shift-after="shift_index < day.shifts.length - 1"

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

@ -20,7 +20,8 @@
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
const animation_style = computed(() => ui_store.is_mobile_mode ? 'fadeInLeft' : 'fadeInDown');
const mobile_animation_direction = ref('fadeInLeft');
const animation_style = computed(() => ui_store.is_mobile_mode ? mobile_animation_direction.value : 'fadeInDown');
const timesheet_page = ref<QScrollArea | null>(null);
const scroll_y = computed(() => timesheet_page.value?.getScrollPosition().top ?? 0)
@ -45,23 +46,52 @@
if (day.shifts.length < 1) return false;
return day.shifts.every(shift => shift.is_approved === true);
}
const handleSwipe = async (direction: 'left' | 'up' | 'down' | 'right' | undefined, distance: {x?: number, y?: number}) => {
mobile_animation_direction.value = direction === 'left' ? 'fadeInRight' : 'fadeInLeft';
if (distance.x && Math.abs(distance.x) > 10 ) {
await timesheet_api.getTimesheetsBySwiping( direction === 'left' ? 1 : -1 )
}
}
</script>
<template>
<div class="col column fit">
<div class="col column fit relative-position" v-touch-swipe="value => handleSwipe(value.direction, value.distance ?? {x: 0, y: 0})">
<q-scroll-area
ref="timesheet_page"
:horizontal-offset="[0, 3]"
class="col hide-scrollbar q-mt-sm"
class="absolute-full hide-scrollbar q-mt-sm"
:thumb-style="{ opacity: '0' }"
:bar-style="{ opacity: '0' }"
style="min-height: 50vh;"
>
<div :class="$q.platform.is.mobile ? 'column' : 'row'">
<!-- Show if no timesheets found (further than one month from present) -->
<div
v-if="timesheet_store.timesheets.length < 1"
class="col-auto column flex-center fit q-py-lg"
style="min-height: 20vh;"
>
<span class="text-uppercase text-weight-bolder text-center">{{ $t('shared.error.no_data_found')
}}</span>
<q-icon
name="las la-calendar"
color="accent"
size="10em"
class="absolute"
style="opacity: 0.2;"
/>
</div>
<!-- Else show timesheets if found -->
<div
v-else
class="col fit"
:class="$q.platform.is.mobile ? 'column' : 'row'"
>
<div
v-for="timesheet, timesheet_index in timesheet_store.timesheets"
v-for="timesheet, timesheet_index of timesheet_store.timesheets"
:key="timesheet.timesheet_id"
class="col"
class="col fit"
>
<transition
appear
@ -114,7 +144,7 @@
<span> {{ $d(extractDate(day.date, 'YYYY-MM-DD'), {
weekday: 'long', day: 'numeric', month:
'long'
}) }}</span>
}) }}</span>
</q-card-section>
<q-card-section
@ -220,28 +250,29 @@
</transition-group>
</div>
</div>
<q-page-sticky
position="bottom-right"
:offset="[0, -35]"
class="z-top"
>
<transition
appear
enter-active-class="animated zoomIn"
leave-active-class="animated zoomOut"
>
<q-btn
v-if="scroll_y > 400"
fab
icon="las la-chevron-up"
color="white"
text-color="accent"
class="shadow-12"
@click="timesheet_page!.setScrollPosition('vertical', 0, 300)"
/>
</transition>
</q-page-sticky>
</q-scroll-area>
</div>
<q-page-sticky
position="bottom-right"
:offset="[15, 15]"
class="z-top"
>
<transition
appear
enter-active-class="animated zoomIn"
leave-active-class="animated zoomOut"
>
<q-btn
v-if="scroll_y > 400"
fab
icon="las la-chevron-up"
color="white"
text-color="accent"
class="shadow-12"
@click="timesheet_page!.setScrollPosition('vertical', 0, 300)"
/>
</transition>
</q-page-sticky>
</template>

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

@ -92,7 +92,7 @@
<TimesheetErrorWidget class="col-auto"/>
<ShiftList :mode="mode" />
<ShiftList />
<q-btn
v-if="mode === 'approval' || $q.platform.is.mobile && $q.screen.width < $q.screen.height"

4
src/modules/timesheets/composables/use-expense-api.ts
View File

@ -1,7 +1,8 @@
/* eslint-disable */
import { useExpensesStore } from "src/stores/expense-store";
import { useTimesheetStore } from "src/stores/timesheet-store";
import type { Expense } from "src/modules/timesheets/models/expense.models";
import { Expense } from "src/modules/timesheets/models/expense.models";
import { date } from "quasar";
export const useExpensesApi = () => {
const expenses_store = useExpensesStore();
@ -10,6 +11,7 @@ export const useExpensesApi = () => {
const upsertExpense = async (expense: Expense): Promise<void> => {
const success = await expenses_store.upsertExpense(expense);
if (success) {
expenses_store.current_expense = new Expense(date.formatDate( new Date(), 'YYYY-MM-DD'));
timesheet_store.getTimesheetsByOptionalEmployeeEmail();
}
};

11
src/modules/timesheets/composables/use-timesheet-api.ts
View File

@ -51,9 +51,20 @@ export const useTimesheetApi = () => {
}
}
const getTimesheetsBySwiping = async( direction: number ) => {
timesheet_store.is_loading = true;
timesheet_store.getNextOrPreviousPayPeriod(direction);
await timesheet_store.getPayPeriodByDateOrYearAndNumber();
await timesheet_store.getTimesheetsByOptionalEmployeeEmail();
timesheet_store.is_loading = false;
}
return {
getTimesheetsByDate,
getTimesheetsByCurrentPayPeriod,
getTimesheetsBySwiping,
applyPreset,
};
};

10
src/modules/timesheets/services/timesheet-service.ts
View File

@ -20,13 +20,13 @@ export const timesheetService = {
return response.data.data;
},
getTimesheetsByPayPeriodAndOptionalEmail: async (year: number, period_number: number, employee_email?: string): Promise<TimesheetResponse> => {
getTimesheetsByPayPeriodAndOptionalEmail: async (year: number, period_number: number, employee_email?: string): Promise<BackendResponse<TimesheetResponse>> => {
if (employee_email !== undefined) {
const response = await api.get<{ success: boolean, data: TimesheetResponse, error?: string }>(`timesheets/${year}/${period_number}?employee_email=${employee_email}`);
return response.data.data;
const response = await api.get<BackendResponse<TimesheetResponse>>(`timesheets/${year}/${period_number}?employee_email=${employee_email}`);
return response.data;
} else {
const response = await api.get<{ success: boolean, data: TimesheetResponse, error?: string }>(`timesheets/${year}/${period_number}`);
return response.data.data;
const response = await api.get<BackendResponse<TimesheetResponse>>(`timesheets/${year}/${period_number}`);
return response.data;
}
},

4
src/modules/timesheets/utils/expense.util.ts
View File

@ -3,7 +3,7 @@ import type { ExpenseType } from "src/modules/timesheets/models/expense.models";
export const getExpenseIcon = (type: ExpenseType) => {
switch (type) {
case 'MILEAGE': return 'time_to_leave';
case 'EXPENSES': return 'receipt_long';
case 'EXPENSES': return 'las la-coins';
case 'PER_DIEM': return 'hotel';
case 'ON_CALL': return 'phone_android';
default: return 'help_outline';
@ -15,7 +15,7 @@ export const useExpenseRules = (t: (_key: string) => string) => {
const typeRequired = (val: unknown) => (!!val) || t('timesheet.expense.errors.type_required');
const amountRequired = (val: unknown) => (isPresent(val)) || t('timesheet.expense.errors.amount_required_for_type');
const mileageRequired = (val: unknown) => (isPresent(val)) || t('timesheet.expense.errors.mileage_required_for_type');
const commentRequired = (val: unknown) => (typeof val === 'string' ? val.trim().length > 0 : false) || t('timesheet.expense.errors.comment_required');
const commentRequired = (val: unknown) => (typeof val === 'string' ? val.trim().length > 0 : false) || t('timesheet.expense.hints.comment_required');
return {
typeRequired,

19
src/modules/timesheets/utils/shift.util.ts
View File

@ -1,6 +1,6 @@
import { date, patterns, type ValidationRule } from "quasar";
import type { SchedulePresetShift } from "src/modules/employee-list/models/schedule-presets.models";
import type { Shift } from "src/modules/timesheets/models/shift.models";
import type { Shift, ShiftOption } from "src/modules/timesheets/models/shift.models";
export const isShiftOverlap = (shifts: Shift[] | SchedulePresetShift[]): boolean => {
if (shifts.length < 2) return false;
@ -26,10 +26,21 @@ export const isShiftOverlap = (shifts: Shift[] | SchedulePresetShift[]): boolean
return false;
};
export const useShiftRules = (time_required_error: string) => {
const isTimeRequired: ValidationRule<string> = (time_string: string) => (!!time_string && patterns.testPattern.time(time_string)) || time_required_error;
export const useShiftRules = (time_required_error: string, overlap_error_string: string, day_shifts: Shift[]) => {
const isTimeRequiredRule: ValidationRule<string> = (time_string: string) => (!!time_string && patterns.testPattern.time(time_string)) || time_required_error;
const isShiftOverlapRule: ValidationRule<string> = (_time_string: string) => !isShiftOverlap(day_shifts) || overlap_error_string;
return {
isTimeRequired,
isTimeRequiredRule,
isShiftOverlapRule
};
};
export const SHIFT_OPTIONS: ShiftOption[] = [
{ label: 'timesheet.shift.types.REGULAR', value: 'REGULAR', icon: 'wb_sunny', icon_color: 'accent' },
{ label: 'timesheet.shift.types.EVENING', value: 'EVENING', icon: 'bedtime', icon_color: 'orange-5' },
{ label: 'timesheet.shift.types.EMERGENCY', value: 'EMERGENCY', icon: 'ring_volume', icon_color: 'red-5' },
{ label: 'timesheet.shift.types.VACATION', value: 'VACATION', icon: 'beach_access', icon_color: 'deep-orange-5' },
{ label: 'timesheet.shift.types.HOLIDAY', value: 'HOLIDAY', icon: 'event', icon_color: 'purple-5' },
{ label: 'timesheet.shift.types.SICK', value: 'SICK', icon: 'medication_liquid', icon_color: 'light-blue-6' },
];

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

@ -18,8 +18,8 @@ export const useExpensesStore = defineStore('expenses', () => {
const open = (): void => {
is_open.value = true;
if (timesheet_store.pay_period !== undefined) {
current_expense.value = new Expense(timesheet_store.pay_period.period_start);
initial_expense.value = new Expense(timesheet_store.pay_period.period_start);
current_expense.value = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
initial_expense.value = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
}
mode.value = 'create';
}
@ -35,8 +35,8 @@ export const useExpensesStore = defineStore('expenses', () => {
const data = await ExpenseService.createExpense(expense);
return data.success;
}
const data = await ExpenseService.updateExpense(expense);
return data.success;
const data = await ExpenseService.updateExpense(expense);
return data.success;
} catch (err) {
// setErrorFrom(err);
console.error(err);

31
src/stores/timesheet-store.ts
View File

@ -25,6 +25,22 @@ export const useTimesheetStore = defineStore('timesheet', () => {
const is_approval_grid_mode = ref<boolean>(true);
const pay_period_report = ref();
const getNextOrPreviousPayPeriod = (direction: number) => {
if (!pay_period.value) return;
pay_period.value.pay_period_no += direction;
if (pay_period.value.pay_period_no > 26) {
pay_period.value.pay_period_no = 1;
pay_period.value.pay_year += direction;
}
if (pay_period.value.pay_period_no < 1) {
pay_period.value.pay_period_no = 26;
pay_period.value.pay_year += direction;
}
};
const getPayPeriodByDateOrYearAndNumber = async (date?: string): Promise<boolean> => {
try {
if (date !== undefined) {
@ -79,10 +95,16 @@ export const useTimesheetStore = defineStore('timesheet', () => {
} else {
response = await timesheetService.getTimesheetsByPayPeriodAndOptionalEmail(pay_period.value.pay_year, pay_period.value.pay_period_no);
}
selected_employee_name.value = response.employee_fullname;
timesheets.value = response.timesheets;
initial_timesheets.value = unwrapAndClone(timesheets.value);
if (response.success && response.data) {
selected_employee_name.value = response.data.employee_fullname;
timesheets.value = response.data.timesheets;
initial_timesheets.value = unwrapAndClone(timesheets.value);
} else {
selected_employee_name.value = '';
timesheets.value = [];
initial_timesheets.value = [];
}
is_loading.value = false;
} catch (error) {
console.error('There was an error retrieving timesheet details for this employee: ', error);
@ -121,6 +143,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
timesheets,
all_current_shifts,
initial_timesheets,
getNextOrPreviousPayPeriod,
getPayPeriodByDateOrYearAndNumber,
getTimesheetOverviews,
getTimesheetsByOptionalEmployeeEmail,