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

feat(timesheet): add conditional UI appearance that will change if day is holiday.

Browse Source
This commit is contained in:
Nicolas Drolet 2026-01-12 15:37:42 -05:00
parent d59dd9b041
commit 8b0e40dc2a
4 changed files with 43 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,10 +17,11 @@
const select_ref = ref<QSelect | null>(null);
const error_message = ref('');
const { errorMessage = undefined, isTimesheetApproved = false } = defineProps<{
const { errorMessage = undefined, isTimesheetApproved = false, holiday = false } = defineProps<{
dense?: boolean;
isTimesheetApproved?: boolean;
errorMessage?: string | undefined;
holiday?: boolean | undefined;
}>();
const emit = defineEmits<{
@ -89,7 +90,7 @@
class="col rounded-5 q-mx-xs bg-dark"
:class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
:style="shift.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : ''"
popup-content-style="border: 2px solid var(--q-accent)"
@blur="onBlurShiftTypeSelect"
@update:model-value="option => shift.type = option.value"
@ -102,7 +103,7 @@
>
<q-icon
:name="scope.opt.icon"
:color="scope.opt.icon_color"
:color="shift.is_approved ? 'white' : scope.opt.icon_color"
size="sm"
class="col-auto"
:class="shift.is_approved ? 'q-mx-xs' : 'q-mr-xs'"
@ -143,7 +144,7 @@
dense
keep-color
size="3em"
color="accent"
:color="holiday? 'purple-5' : 'accent'"
icon="las la-building"
checked-icon="las la-laptop"
>
@ -191,12 +192,12 @@
hide-bottom-space
:error="shift.has_error"
:error-message="errorMessage || error_message !== '' ? $t(errorMessage ?? error_message) : ''"
:label-color="!shift.is_approved ? 'accent' : 'white'"
:label-color="!shift.is_approved ? (holiday? 'purple-5' : 'accent') : 'white'"
class="col rounded-5 bg-dark q-mx-xs"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (!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;' : ''"
:style="shift.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : ''"
@blur="onTimeFieldBlur(shift.start_time)"
>
<template #label>
@ -222,12 +223,12 @@
hide-bottom-space
:error="shift.has_error"
:error-message="errorMessage || error_message !== '' ? $t(errorMessage ?? error_message) : ''"
:label-color="!shift.is_approved ? 'accent' : 'white'"
:label-color="!shift.is_approved ? (holiday? 'purple-5' : '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 q-mx-xs"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
:style="shift.is_approved ? (holiday ? 'background-color: #7b1fa2 !important' : 'background-color: #0a7d32 !important;') : ''"
@blur="onTimeFieldBlur(shift.end_time)"
>
<template #label>
@ -249,9 +250,9 @@
v-if="!ui_store.is_mobile_mode"
push
dense
:color="shift.is_approved ? 'white' : 'accent'"
:color="shift.is_approved ? 'white' : (holiday? 'purple-5' : 'accent')"
:icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
:text-color="shift.is_approved ? 'accent' : 'white'"
:text-color="shift.is_approved ? (holiday? 'purple-5' : 'accent') : 'white'"
class="col"
:class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
>

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

@ -18,12 +18,13 @@
const timesheet_store = useTimesheetStore();
const shift_error_message = ref<string | undefined>();
const { day, dense = false, approved = false } = defineProps<{
const { day, dense = false, approved = false, holiday = false } = defineProps<{
timesheetId: number;
weekDayIndex: number;
day: TimesheetDay;
dense?: boolean;
approved?: boolean;
holiday?: boolean;
}>();
const preset_mouseover = ref(false);
@ -102,6 +103,7 @@
<ShiftListDayRow
v-else
v-model:shift="day.shifts[shift_index]!"
:holiday="holiday"
:is-timesheet-approved="approved"
:error-message="shift_error_message"
@request-delete="deleteCurrentShift(shift)"

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

@ -15,6 +15,7 @@
const CURRENT_DATE_STRING = new Date().toISOString().slice(0, 10);
const HOLIDAYS: string[] = ['2026-01-01', '2025-11-26']
const { extractDate } = date;
const q = useQuasar();
@ -105,9 +106,18 @@
v-for="day, day_index in timesheet.days"
:key="day.date"
:ref="getMobileDayRef(day.date)"
class="col-auto row q-pa-sm full-width"
class="col-auto row q-pa-sm full-width relative-position"
:style="`animation-delay: ${day_index / 15}s;`"
>
<!-- optional label indicating which holiday if today is a holiday -->
<span
v-if="HOLIDAYS.includes(day.date)"
class="absolute-top-left text-uppercase text-weight-bolder text-purple-5"
style="transform: translate(25px, -7px);"
>
New Year's of the nouvelle annee
</span>
<!-- mobile version in portrait mode -->
<div
v-if="$q.platform.is.mobile && ($q.screen.width < $q.screen.height)"
@ -173,10 +183,11 @@
<div
v-else
class="col row full-width rounded-10 ellipsis shadow-10"
:style="HOLIDAYS.includes(day.date) ? 'border: 2px solid #ab47bc' : ''"
>
<div
class="col row"
:class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : 'bg-dark'"
:class="(getDayApproval(day) || timesheet.is_approved) ? (HOLIDAYS.includes(day.date) ? 'bg-purple-5' : 'bg-accent') : 'bg-dark'"
>
<!-- Date block -->
<ShiftListDateWidget
@ -189,6 +200,7 @@
:timesheet-id="timesheet.timesheet_id"
:week-day-index="day_index"
:day="day"
:holiday="HOLIDAYS.includes(day.date)"
:approved="getDayApproval(day) || timesheet.is_approved"
class="col"
@delete-unsaved-shift="deleteUnsavedShift(timesheet_index, day_index)"
@ -203,7 +215,7 @@
color="white"
size="xl"
class="full-height"
:class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent' : ''"
:class="(getDayApproval(day) || timesheet.is_approved) ? (HOLIDAYS.includes(day.date) ? 'bg-purple-5' : 'bg-accent') : ''"
/>
<q-btn
@ -212,7 +224,7 @@
square
icon="more_time"
size="lg"
color="accent"
:color="HOLIDAYS.includes(day.date) ? 'purple-5' : 'accent'"
text-color="white"
class="full-height"
:class="$q.platform.is.mobile ? 'q-px-xs' : ''"

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

@ -36,3 +36,16 @@ export const SHIFT_OPTIONS: ShiftOption[] = [
{ label: 'timesheet.shift.types.BANKING', value: 'BANKING', icon: 'savings', icon_color: 'pink-3' },
{ label: 'timesheet.shift.types.WITHDRAW_BANKED', value: 'WITHDRAW_BANKED', icon: 'attach_money', icon_color: 'yellow-4' },
];
export const HOLIDAY_NAMES: string[] = [
"Jour de l’An",
"Vendredi saint",
"Lundi de Pâques",
"Journée nationale des patriotes",
"Saint-Jean-Baptiste / Fête nationale du Québec",
"Fête du Canada",
"Fête du travail",
"Journée nationale de la vérité et de la réconciliation",
"Action de grâce",
"Noël",
]