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

feat(employees-list): add paid time off fields to employee details, DRY details dialog code

Browse Source
This commit is contained in:
Nicolas Drolet 2026-01-09 11:40:21 -05:00
parent 35db8418a6
commit 6ec05a00b8
6 changed files with 197 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,6 +70,7 @@ export default {
supervisor: "Supervisor",
company: "Company",
is_supervisor: "is a supervisor",
expected_daily_hours: "Expected Daily Hours",
active: "active",
inactive: "inactive",
},
@ -81,7 +82,11 @@ export default {
access_label: "access",
details_label: "details",
schedule_label: "schedule",
can_be_entered_later: "OPTIONAL: can be entered later",
enter_delete_input: "type 'DELETE' to remove",
banked_hours: "available banked hours",
sick_hours: "available PTO hours",
vacation_hours: "available vacation hours",
schedule_presets: {
preset_list_placeholder: "Select a schedule",
preset_name_placeholder: "schedule preset name",

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

@ -70,6 +70,7 @@ export default {
supervisor: "superviseur",
company: "Compagnie",
is_supervisor: "est un superviseur",
expected_daily_hours: "Heures quotidiennes attendues",
active: "actif",
inactive: "inactif",
},
@ -81,7 +82,11 @@ export default {
access_label: "accès",
details_label: "détails",
schedule_label: "horaire",
can_be_entered_later: "FACULTATIF: peut être entré plus tard",
enter_delete_input: "tappez 'SUPPRIMER' pour confirmer",
banked_hours: "heures en banque disponibles",
sick_hours: "heures d'absence payées disponibles",
vacation_hours: "heures de vacances disponibles",
schedule_presets: {
preset_list_placeholder: "Sélectionner un horaire",
preset_name_placeholder: "nom de l'horaire",

56
src/modules/employee-list/components/add-modify-dialog-form-input.vue Normal file
View File

@ -0,0 +1,56 @@
<script
setup
lang="ts"
>
const model = defineModel<string | number | null | undefined>({ required: true });
const is_date_picker_open = defineModel<boolean>('isDatePickerOpen', {default: false});
defineProps<{
label?: string | undefined;
requiresDatePicker?: boolean | undefined;
}>();
</script>
<template>
<q-input
v-model="model"
dense
outlined
color="accent"
stack-label
label-slot
class="col q-px-sm q-py-xs"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ label }}
</span>
</template>
<template #append v-if="requiresDatePicker">
<q-btn
flat
dense
size="lg"
icon="calendar_month"
color="accent"
@click="is_date_picker_open = true"
>
<q-dialog
v-model="is_date_picker_open"
backdrop-filter="none"
>
<q-date
v-model="model"
mask="YYYY-MM-DD"
color="accent"
@update:model-value="is_date_picker_open = false"
/>
</q-dialog>
</q-btn>
</template>
</q-input>
</template>

37
src/modules/employee-list/components/add-modify-dialog-form-select.vue Normal file
View File

@ -0,0 +1,37 @@
<script
setup
lang="ts"
>
const model = defineModel<string>({ required: true });
defineProps<{
label?: string | undefined;
}>();
</script>
<template>
<q-select
v-model="model"
dense
outlined
color="accent"
stack-label
label-slot
options-selected-class="text-white text-bold bg-accent"
class="col q-px-sm q-py-xs"
popup-content-class="text-uppercase text-weight-medium rounded-5"
popup-content-style="border: 2px solid var(--q-accent)"
menu-anchor="bottom middle"
menu-self="top middle"
:menu-offset="[0, 5]"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ label }}
</span>
</template>
</q-select>
</template>

281
src/modules/employee-list/components/add-modify-dialog-form.vue
View File

@ -2,6 +2,9 @@
setup
lang="ts"
>
import AddModifyDialogFormInput from 'src/modules/employee-list/components/add-modify-dialog-form-input.vue';
import AddModifyDialogFormSelect from 'src/modules/employee-list/components/add-modify-dialog-form-select.vue';
import { ref, computed } from 'vue';
import { useEmployeeStore } from 'src/stores/employee-store';
@ -20,7 +23,7 @@
return supervisors.map(supervisor => supervisor.first_name + ' ' + supervisor.last_name);
})
const setLastWorkDay = (date: string | number | null) => {
const setLastWorkDay = (date: string | number | null | undefined) => {
if (typeof date === 'string' && date.length > 0) {
employee_store.employee.last_work_day = date;
}
@ -54,260 +57,124 @@
class="q-ma-xs"
:class="$q.screen.lt.sm ? 'column' : 'row'"
>
<q-input
<AddModifyDialogFormInput
v-model="employee_store.employee.first_name"
color="accent"
stack-label
label-slot
class="col q-mx-md"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.personal.first_name') }}
</span>
</template>
</q-input>
:label="$t('profile.personal.first_name')"
/>
<q-input
<AddModifyDialogFormInput
v-model="employee_store.employee.last_name"
color="accent"
stack-label
label-slot
class="col q-mx-md"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.personal.last_name') }}
</span>
</template>
</q-input>
:label="$t('profile.personal.last_name')"
/>
</div>
<div
class="q-ma-xs"
:class="$q.screen.lt.sm ? 'column' : 'row'"
>
<q-input
<AddModifyDialogFormInput
v-model="employee_store.employee.email"
color="accent"
stack-label
label-slot
class="col q-mx-md"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.employee.email') }}
</span>
</template>
</q-input>
:label="$t('profile.employee.email')"
/>
<q-input
<AddModifyDialogFormInput
v-model="employee_store.employee.phone_number"
color="accent"
stack-label
label-slot
mask="(###) ### - ####"
class="col q-mx-md"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.personal.phone_number') }}
</span>
</template>
</q-input>
:label="$t('profile.personal.phone_number')"
/>
</div>
<div
class="q-ma-xs"
:class="$q.screen.lt.sm ? 'column' : 'row'"
>
<q-input
<AddModifyDialogFormInput
v-model="employee_store.employee.job_title"
color="accent"
stack-label
label-slot
class="col q-mx-md"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.employee.job_title') }}
</span>
</template>
</q-input>
:label="$t('profile.employee.job_title')"
/>
<q-select
<AddModifyDialogFormSelect
v-model="employee_store.employee.company_name"
color="accent"
:options="company_options"
stack-label
emit-value
label-slot
class="col q-mx-md"
popup-content-class="text-uppercase text-weight-medium rounded-20"
popup-content-style="border: 2px solid var(--q-accent)"
menu-anchor="bottom middle"
menu-self="top middle"
:menu-offset="[0, 10]"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.employee.company') }}
</span>
</template>
</q-select>
:label="$t('profile.employee.company')"
/>
</div>
<div
class="q-ma-xs"
:class="$q.screen.lt.sm ? 'column' : 'row'"
>
<q-select
<AddModifyDialogFormSelect
v-model="employee_store.employee.supervisor_full_name"
color="accent"
stack-label
label-slot
:options="supervisor_options"
options-selected-class="text-white text-bold bg-accent"
class="col q-mx-md"
popup-content-class="text-uppercase text-weight-medium rounded-20"
popup-content-style="border: 2px solid var(--q-accent)"
menu-anchor="bottom middle"
menu-self="top middle"
:menu-offset="[0, 10]"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.employee.supervisor') }}
</span>
</template>
</q-select>
:label="$t('profile.employee.supervisor')"
/>
<q-input
v-if="employee_store.management_mode === 'modify_employee'"
<AddModifyDialogFormInput
v-model="employee_store.employee.external_payroll_id"
color="accent"
stack-label
label-slot
class="col q-mx-md"
:label="$t('profile.employee.bankroll_id')"
:placeholder="$t('employee_management.can_be_entered_later')"
/>
</div>
<div
class="q-ma-xs"
:class="$q.screen.lt.sm ? 'column' : 'row'"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
<AddModifyDialogFormInput
v-model="employee_store.employee.daily_expected_hours"
:label="$t('employee_list.table.expected_daily_hours')"
type="number"
/>
<AddModifyDialogFormInput
v-if="employee_store.employee.paid_time_off"
v-model="employee_store.employee.paid_time_off.banked_hours"
:label="$t('employee_management.banked_hours')"
type="number"
/>
<div v-else class="col q-px-sm"></div>
</div>
<div
class="q-ma-xs"
:class="$q.screen.lt.sm ? 'column' : 'row'"
>
{{ $t('profile.employee.bankroll_id') }}
</span>
</template>
</q-input>
<AddModifyDialogFormInput
v-if="employee_store.employee.paid_time_off"
v-model="employee_store.employee.paid_time_off.sick_hours"
:label="$t('employee_management.sick_hours')"
type="number"
/>
<AddModifyDialogFormInput
v-if="employee_store.employee.paid_time_off"
v-model="employee_store.employee.paid_time_off.vacation_hours"
:label="$t('employee_management.vacation_hours')"
type="number"
/>
</div>
<div
class="q-ma-xs"
:class="$q.screen.lt.md ? 'column' : 'row'"
>
<q-input
<AddModifyDialogFormInput
v-model="employee_store.employee.first_work_day"
color="accent"
stack-label
label-slot
v-model:is-date-picker-open="is_first_day_picker_open"
reqires-date-picker
:label="$t('profile.employee.hired_date')"
mask="####-##-##"
class="col q-mx-md"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.employee.hired_date') }}
</span>
</template>
<template #append>
<q-btn
flat
dense
size="lg"
icon="calendar_month"
color="accent"
@click="is_first_day_picker_open = true"
>
<q-dialog
v-model="is_first_day_picker_open"
backdrop-filter="none"
>
<q-date
v-model="employee_store.employee.first_work_day"
mask="YYYY-MM-DD"
color="accent"
@update:model-value="is_first_day_picker_open = false"
/>
</q-dialog>
</q-btn>
</template>
</q-input>
<q-input
<AddModifyDialogFormInput
v-model="last_work_day"
color="accent"
stack-label
label-slot
v-model:is-date-picker-open="is_last_day_picker_open"
reqires-date-picker
:label="$t('profile.employee.fired_date')"
mask="####-##-##"
class="col q-mx-md"
@update:model-value="setLastWorkDay"
>
<template #label>
<span
class="text-weight-bolder text-uppercase"
style="font-size: 0.85em;"
>
{{ $t('profile.employee.fired_date') }}
</span>
</template>
<template #append>
<q-btn
flat
dense
size="lg"
icon="calendar_month"
color="accent"
@click="is_last_day_picker_open = true"
>
<q-dialog
v-model="is_last_day_picker_open"
backdrop-filter="none"
>
<q-date
v-model="employee_store.employee.last_work_day"
mask="YYYY-MM-DD"
color="accent"
@update:model-value="is_last_day_picker_open = false"
/>
</q-dialog>
</q-btn>
</template>
</q-input>
</div>
</q-form>
</div>

18
src/modules/employee-list/models/employee-profile.models.ts
View File

@ -4,6 +4,13 @@ import type { UserModuleAccess } from "src/modules/shared/models/user.models";
export type ModuleAccessPreset = 'admin' | 'supervisor' | 'employee' | 'none';
export type CompanyNames = 'Targo' | 'Solucom';
export interface PaidTimeOff {
sick_hours: number;
vacation_hours: number;
banked_hours: number;
last_updated: string;
}
export class EmployeeProfile {
first_name: string;
last_name: string;
@ -14,7 +21,9 @@ export class EmployeeProfile {
phone_number: string;
first_work_day: string;
last_work_day?: string | null;
external_payroll_id: number;
external_payroll_id?: number;
daily_expected_hours?: number;
paid_time_off?: PaidTimeOff;
residence: string;
birth_date: string;
is_supervisor: boolean;
@ -34,7 +43,6 @@ export class EmployeeProfile {
this.residence = '';
this.birth_date = '';
this.is_supervisor = false;
this.external_payroll_id = 999;
this.user_module_access = ['dashboard',];
}
}
@ -92,6 +100,12 @@ export const employee_list_columns: QTableColumn<EmployeeProfile>[] = [
label: 'employee_list.table.role',
field: 'job_title',
align: 'left',
},
{
name: 'expected_daily_hours',
label: 'employee_list.table.expected_daily_hours',
field: 'daily_expected_hours',
align: 'left',
},
{
name: 'last_work_day',