tristan
cc868a1e82
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #17 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
733 lines
29 KiB
Vue
733 lines
29 KiB
Vue
<template>
|
|
<div class="flex-col">
|
|
<div class="shrink-0">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-4xl font-bold text-primary-500">Employés</h1>
|
|
<div class="flex items-center gap-3">
|
|
<MalioButton
|
|
label="Export"
|
|
variant="secondary"
|
|
icon-name="mdi:download"
|
|
icon-position="left"
|
|
@click="openExportDrawer"
|
|
/>
|
|
<MalioButton
|
|
label="Ajouter un employé"
|
|
icon-name="mdi:plus"
|
|
icon-position="left"
|
|
@click="openCreate"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-7">
|
|
<div class="w-80">
|
|
<MalioInputText
|
|
v-model="employeeFilter"
|
|
label="Recherche d'un employé"
|
|
icon-name="mdi:magnify"
|
|
/>
|
|
</div>
|
|
<div v-if="sites.length > 0" class="relative z-50 w-80">
|
|
<MalioSelectCheckbox
|
|
v-model="selectedSiteIds"
|
|
:options="siteOptions"
|
|
groupClass="w-80"
|
|
label="Sites"
|
|
display-select-all
|
|
/>
|
|
</div>
|
|
|
|
<MalioSelect
|
|
v-model="contractStatusFilter"
|
|
label="Statut contrat"
|
|
:options="contractStatusOptions"
|
|
group-class="w-40"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!isLoading && filteredEmployees.length === 0"
|
|
class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
|
|
>
|
|
Aucun employé pour le moment.
|
|
</div>
|
|
|
|
<div v-else class="grid gap-8 [grid-template-columns:repeat(auto-fill,minmax(260px,1fr))]">
|
|
<NuxtLink
|
|
v-for="employee in filteredEmployees"
|
|
:key="employee.id"
|
|
:to="`/employees/${employee.id}`"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="group relative min-h-[328px] overflow-hidden rounded-lg bg-tertiary-500 p-4 transition-all duration-200 hover:shadow-md"
|
|
>
|
|
<div class="flex flex-col items-center gap-7 transition-opacity duration-200 group-hover:opacity-0">
|
|
<div class="rounded-full bg-primary-500 h-[175px] w-[175px] flex justify-center items-center text-white font-bold text-5xl">{{ employee.initials}}</div>
|
|
<div class="text-center text-[20px]">
|
|
<p class="text-primary-500 font-bold">{{ employee.firstName }} {{ employee.lastName }}</p>
|
|
<p>Nom du poste occupé</p>
|
|
<p>{{ employee.site?.name ?? '-' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute inset-0 flex items-center justify-center bg-primary-500 p-4 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
|
|
<div class="w-full rounded-md bg-white/15 p-4 text-sm">
|
|
<p class="text-base font-semibold">{{ employee.lastName }} {{ employee.firstName }}</p>
|
|
<p><strong>Type:</strong> {{ employee.currentInterimAgencyName ? `${contractNatureLabel(employee.currentContractNature)} (${employee.currentInterimAgencyName})` : contractNatureLabel(employee.currentContractNature) }}</p>
|
|
<p><strong>Temps de travail:</strong> {{ employee.contract?.name ?? '-' }}</p>
|
|
<p><strong>Site:</strong> {{ employee.site?.name ?? '-' }}</p>
|
|
<p><strong>Date d'entrée :</strong> {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
|
|
<form class="space-y-4" @submit.prevent="handleSubmit">
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="first-name">
|
|
Prénom <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="first-name"
|
|
v-model="form.firstName"
|
|
type="text"
|
|
:class="firstNameFieldClass"
|
|
/>
|
|
<p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
|
|
Le prénom est obligatoire.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="last-name">
|
|
Nom <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="last-name"
|
|
v-model="form.lastName"
|
|
type="text"
|
|
:class="lastNameFieldClass"
|
|
/>
|
|
<p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
|
|
Le nom est obligatoire.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="site">
|
|
Site <span class="text-red-600">*</span>
|
|
</label>
|
|
<select
|
|
id="site"
|
|
v-model="form.siteId"
|
|
:class="siteFieldClass"
|
|
>
|
|
<option value="">Aucun site</option>
|
|
<option v-for="site in sites" :key="site.id" :value="site.id">
|
|
{{ site.name }}
|
|
</option>
|
|
</select>
|
|
<p v-if="showSiteError" class="mt-1 text-sm text-red-600">
|
|
Le site est obligatoire.
|
|
</p>
|
|
</div>
|
|
<template v-if="!editingEmployee">
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="contract-nature">
|
|
Type de contrat <span class="text-red-600">*</span>
|
|
</label>
|
|
<select
|
|
id="contract-nature"
|
|
v-model="form.contractNature"
|
|
:class="contractNatureFieldClass"
|
|
>
|
|
<option value="CDI">CDI</option>
|
|
<option value="CDD">CDD</option>
|
|
<option value="INTERIM">Intérim</option>
|
|
</select>
|
|
<p v-if="showContractNatureError" class="mt-1 text-sm text-red-600">
|
|
Le type de contrat est obligatoire.
|
|
</p>
|
|
</div>
|
|
<div v-if="form.contractNature === 'INTERIM'">
|
|
<label class="text-md font-semibold text-neutral-700" for="interim-agency">
|
|
Agence d'intérim
|
|
</label>
|
|
<select
|
|
id="interim-agency"
|
|
v-model="form.interimAgencyId"
|
|
class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
|
|
>
|
|
<option value="">Aucune</option>
|
|
<option v-for="agency in interimAgencies" :key="agency.id" :value="agency.id">
|
|
{{ agency.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="contract">
|
|
Temps de travail <span class="text-red-600">*</span>
|
|
</label>
|
|
<select
|
|
id="contract"
|
|
v-model="form.contractId"
|
|
:class="contractFieldClass"
|
|
>
|
|
<option value="">Sélectionner un contrat</option>
|
|
<option v-for="contract in contracts" :key="contract.id" :value="contract.id">
|
|
{{ contract.name }}
|
|
</option>
|
|
</select>
|
|
<p v-if="showContractError" class="mt-1 text-sm text-red-600">
|
|
Le temps de travail est obligatoire.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="contract-start-date">
|
|
Début contrat <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="contract-start-date"
|
|
v-model="form.contractStartDate"
|
|
type="date"
|
|
:class="contractStartDateFieldClass"
|
|
/>
|
|
<p v-if="showContractStartDateError" class="mt-1 text-sm text-red-600">
|
|
La date de début est obligatoire.
|
|
</p>
|
|
</div>
|
|
<div v-if="showsContractEndDateComputed">
|
|
<label class="text-md font-semibold text-neutral-700" for="contract-end-date">
|
|
Fin contrat
|
|
<span v-if="requiresContractEndDateComputed" class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="contract-end-date"
|
|
v-model="form.contractEndDate"
|
|
type="date"
|
|
:class="contractEndDateFieldClass"
|
|
/>
|
|
<p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
|
|
La date de fin est obligatoire pour un CDD ou un Intérim.
|
|
</p>
|
|
</div>
|
|
<div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">
|
|
<label class="inline-flex items-center gap-2 text-md font-semibold text-neutral-700" for="is-driver">
|
|
<input
|
|
id="is-driver"
|
|
v-model="form.isDriver"
|
|
type="checkbox"
|
|
class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
|
|
/>
|
|
Chauffeur
|
|
</label>
|
|
</div>
|
|
<WorkDaysHoursInput
|
|
v-if="requiresSchedule"
|
|
v-model="form.workDaysHours"
|
|
:contract-weekly-hours="selectedContract?.weeklyHours ?? null"
|
|
/>
|
|
</template>
|
|
<div class="flex justify-end gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
|
|
@click="isDrawerOpen = false"
|
|
>
|
|
Annuler
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
|
|
:class="submitButtonClass"
|
|
>
|
|
Enregistrer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</AppDrawer>
|
|
|
|
<MalioDrawer v-model="isExportDrawerOpen" title="Export">
|
|
<div class="space-y-4">
|
|
<MalioSelect
|
|
:model-value="exportChoice === '' ? null : exportChoice"
|
|
:options="exportTypeOptions"
|
|
label="Type d'export"
|
|
empty-option-label="Choisir un export"
|
|
group-class="mt-2"
|
|
min-width=""
|
|
@update:model-value="onExportChoiceChange"
|
|
/>
|
|
|
|
<div v-if="exportChoice === 'salary-recap'">
|
|
<label class="text-md font-semibold text-neutral-700" for="export-salary-month">
|
|
Mois <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="export-salary-month"
|
|
v-model="exportSalaryMonth"
|
|
type="month"
|
|
class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
|
|
/>
|
|
</div>
|
|
|
|
<template v-else-if="exportChoice === 'yearly-hours'">
|
|
<MalioSelect
|
|
:model-value="exportYear"
|
|
:options="exportYearOptions"
|
|
label="Année *"
|
|
min-width=""
|
|
@update:model-value="(v) => { if (v !== null) exportYear = Number(v) }"
|
|
/>
|
|
<MalioSelect
|
|
:model-value="exportMonth === '' ? null : exportMonth"
|
|
:options="exportMonthOptions"
|
|
label="Mois *"
|
|
empty-option-label="Choisir un mois"
|
|
min-width=""
|
|
@update:model-value="(v) => { exportMonth = v === null ? '' : Number(v) }"
|
|
/>
|
|
</template>
|
|
|
|
<div class="flex justify-center pt-2">
|
|
<MalioButton
|
|
label="Valider"
|
|
button-class="w-[200px]"
|
|
:disabled="!isExportValid"
|
|
@click="handleExportValidate"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</MalioDrawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type {Contract} from '~/services/dto/contract'
|
|
import WorkDaysHoursInput from '~/components/employees/WorkDaysHoursInput.vue'
|
|
import { requiresWorkDaysHours } from '~/utils/contract'
|
|
import type {Employee} from '~/services/dto/employee'
|
|
import type {Site} from '~/services/dto/site'
|
|
import {listContracts} from '~/services/contracts'
|
|
import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
|
|
import {listSites} from '~/services/sites'
|
|
import {listInterimAgencies, type InterimAgency} from '~/services/interim-agencies'
|
|
import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
|
|
import {usePdfPrinter} from '~/composables/usePdfPrinter'
|
|
|
|
useHead({
|
|
title: 'Employés'
|
|
})
|
|
|
|
const isDrawerOpen = ref(false)
|
|
const isSubmitting = ref(false)
|
|
const isLoading = ref(false)
|
|
const isExportDrawerOpen = ref(false)
|
|
const exportChoice = ref<'leave-recap' | 'salary-recap' | 'yearly-hours' | ''>('')
|
|
const exportYear = ref<number>(new Date().getFullYear())
|
|
const exportMonth = ref<number | ''>(new Date().getMonth() + 1)
|
|
const exportSalaryMonth = ref<string>(`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`)
|
|
|
|
const exportTypeOptions = [
|
|
{ label: 'Récap. congés', value: 'leave-recap' },
|
|
{ label: 'Récap. salaire', value: 'salary-recap' },
|
|
{ label: 'Heures annuelles', value: 'yearly-hours' }
|
|
]
|
|
const exportYearOptions = computed(() => {
|
|
const current = new Date().getFullYear()
|
|
return Array.from({ length: 6 }, (_, i) => ({ label: String(current - i), value: current - i }))
|
|
})
|
|
const exportMonthOptions = [
|
|
{ label: 'Janvier', value: 1 },
|
|
{ label: 'Février', value: 2 },
|
|
{ label: 'Mars', value: 3 },
|
|
{ label: 'Avril', value: 4 },
|
|
{ label: 'Mai', value: 5 },
|
|
{ label: 'Juin', value: 6 },
|
|
{ label: 'Juillet', value: 7 },
|
|
{ label: 'Août', value: 8 },
|
|
{ label: 'Septembre', value: 9 },
|
|
{ label: 'Octobre', value: 10 },
|
|
{ label: 'Novembre', value: 11 },
|
|
{ label: 'Décembre', value: 12 }
|
|
]
|
|
|
|
const isExportValid = computed(() => {
|
|
if (!exportChoice.value) return false
|
|
if (exportChoice.value === 'salary-recap') {
|
|
return exportSalaryMonth.value.trim() !== ''
|
|
}
|
|
if (exportChoice.value === 'yearly-hours') {
|
|
return exportYear.value > 0 && exportMonth.value !== ''
|
|
}
|
|
return true
|
|
})
|
|
|
|
const onExportChoiceChange = (value: string | number | null) => {
|
|
exportChoice.value = (value === null ? '' : String(value)) as 'leave-recap' | 'salary-recap' | 'yearly-hours' | ''
|
|
}
|
|
const { printPdf } = usePdfPrinter()
|
|
const sitesInitialized = ref(false)
|
|
const editingEmployee = ref<Employee | null>(null)
|
|
const drawerTitle = computed(() =>
|
|
editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
|
|
)
|
|
|
|
const employees = ref<Employee[]>([])
|
|
const sites = ref<Site[]>([])
|
|
const contracts = ref<Contract[]>([])
|
|
const interimAgencies = ref<InterimAgency[]>([])
|
|
const employeeFilter = ref('')
|
|
const contractStatusFilter = ref<'active' | 'inactive' | 'all'>('active')
|
|
const contractStatusOptions = [
|
|
{ label: 'Avec contrat', value: 'active' },
|
|
{ label: 'Sans contrat', value: 'inactive' },
|
|
{ label: 'Tous', value: 'all' }
|
|
]
|
|
const selectedSiteIds = ref<number[]>([])
|
|
const siteOptions = computed(() => sites.value.map((site) => ({ label: site.name, value: site.id })))
|
|
|
|
const filteredEmployees = computed<Employee[]>(() => {
|
|
if (selectedSiteIds.value.length === 0) return []
|
|
|
|
const filter = employeeFilter.value.trim().toLowerCase()
|
|
return employees.value.filter((employee) => {
|
|
const siteId = employee.site?.id
|
|
if (!siteId || !selectedSiteIds.value.includes(siteId)) return false
|
|
|
|
if (contractStatusFilter.value === 'active' && !employee.hasActiveContract) return false
|
|
if (contractStatusFilter.value === 'inactive' && employee.hasActiveContract) return false
|
|
|
|
if (!filter) return true
|
|
const firstName = employee.firstName?.toLowerCase() ?? ''
|
|
const lastName = employee.lastName?.toLowerCase() ?? ''
|
|
return firstName.includes(filter) || lastName.includes(filter)
|
|
})
|
|
})
|
|
|
|
const form = reactive({
|
|
firstName: '',
|
|
lastName: '',
|
|
siteId: '' as number | '',
|
|
contractId: '' as number | '',
|
|
contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
|
|
contractStartDate: '',
|
|
contractEndDate: '',
|
|
isDriver: false,
|
|
workDaysHours: null as Record<number, number> | null,
|
|
interimAgencyId: '' as number | ''
|
|
})
|
|
|
|
const validationTouched = reactive({
|
|
firstName: false,
|
|
lastName: false,
|
|
siteId: false,
|
|
contractId: false,
|
|
contractNature: false,
|
|
contractStartDate: false,
|
|
contractEndDate: false
|
|
})
|
|
|
|
const isFirstNameValid = computed(() => form.firstName.trim() !== '')
|
|
const isLastNameValid = computed(() => form.lastName.trim() !== '')
|
|
const isSiteValid = computed(() => form.siteId !== '')
|
|
const isContractValid = computed(() => form.contractId !== '')
|
|
const isContractNatureValid = computed(() => isContractNature(form.contractNature))
|
|
const selectedContract = computed<Contract | null>(() =>
|
|
contracts.value.find((c) => c.id === Number(form.contractId)) ?? null
|
|
)
|
|
const requiresSchedule = computed(() =>
|
|
!editingEmployee.value && requiresWorkDaysHours(selectedContract.value, form.contractNature)
|
|
)
|
|
const scheduleTotalMinutes = computed(() => {
|
|
const raw = form.workDaysHours ?? {}
|
|
return Object.values(raw).reduce((s, n) => s + (Number(n) || 0), 0)
|
|
})
|
|
const isScheduleValid = computed(() => {
|
|
if (!requiresSchedule.value) return true
|
|
const expected = (selectedContract.value?.weeklyHours ?? 0) * 60
|
|
return expected > 0 && scheduleTotalMinutes.value === expected
|
|
})
|
|
const isContractStartDateValid = computed(() => form.contractStartDate !== '')
|
|
const showsContractEndDateComputed = computed(() => showsContractEndDate(form.contractNature))
|
|
const requiresContractEndDateComputed = computed(() => requiresContractEndDate(form.contractNature))
|
|
const isContractEndDateValid = computed(() => {
|
|
if (!requiresContractEndDateComputed.value) return true
|
|
return form.contractEndDate !== ''
|
|
})
|
|
const isFormValid = computed(
|
|
() =>
|
|
isFirstNameValid.value &&
|
|
isLastNameValid.value &&
|
|
isSiteValid.value &&
|
|
(editingEmployee.value
|
|
? true
|
|
: (isContractValid.value &&
|
|
isContractNatureValid.value &&
|
|
isContractStartDateValid.value &&
|
|
isContractEndDateValid.value &&
|
|
isScheduleValid.value))
|
|
)
|
|
|
|
const showFirstNameError = computed(
|
|
() => validationTouched.firstName && !isFirstNameValid.value
|
|
)
|
|
const showLastNameError = computed(
|
|
() => validationTouched.lastName && !isLastNameValid.value
|
|
)
|
|
const showSiteError = computed(
|
|
() => validationTouched.siteId && !isSiteValid.value
|
|
)
|
|
const showContractError = computed(
|
|
() => validationTouched.contractId && !isContractValid.value
|
|
)
|
|
const showContractNatureError = computed(
|
|
() => !editingEmployee.value && validationTouched.contractNature && !isContractNatureValid.value
|
|
)
|
|
const showContractStartDateError = computed(
|
|
() => !editingEmployee.value && validationTouched.contractStartDate && !isContractStartDateValid.value
|
|
)
|
|
const showContractEndDateError = computed(
|
|
() => !editingEmployee.value && validationTouched.contractEndDate && !isContractEndDateValid.value
|
|
)
|
|
|
|
const baseInputClass =
|
|
'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
|
|
const firstNameFieldClass = computed(() => {
|
|
if (showFirstNameError.value) {
|
|
return `${baseInputClass} border-red-500`
|
|
}
|
|
return `${baseInputClass} border-neutral-300`
|
|
})
|
|
const lastNameFieldClass = computed(() => {
|
|
if (showLastNameError.value) {
|
|
return `${baseInputClass} border-red-500`
|
|
}
|
|
return `${baseInputClass} border-neutral-300`
|
|
})
|
|
const siteFieldClass = computed(() => {
|
|
const baseSelectClass =
|
|
'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
|
|
if (showSiteError.value) {
|
|
return `${baseSelectClass} border-red-500`
|
|
}
|
|
return `${baseSelectClass} border-neutral-300`
|
|
})
|
|
const contractFieldClass = computed(() => {
|
|
const baseClass =
|
|
'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
|
|
if (showContractError.value) {
|
|
return `${baseClass} border-red-500`
|
|
}
|
|
return `${baseClass} border-neutral-300`
|
|
})
|
|
const contractNatureFieldClass = computed(() => {
|
|
const baseClass =
|
|
'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
|
|
if (showContractNatureError.value) {
|
|
return `${baseClass} border-red-500`
|
|
}
|
|
return `${baseClass} border-neutral-300`
|
|
})
|
|
const contractStartDateFieldClass = computed(() => {
|
|
if (showContractStartDateError.value) {
|
|
return `${baseInputClass} border-red-500`
|
|
}
|
|
return `${baseInputClass} border-neutral-300`
|
|
})
|
|
const contractEndDateFieldClass = computed(() => {
|
|
if (showContractEndDateError.value) {
|
|
return `${baseInputClass} border-red-500`
|
|
}
|
|
return `${baseInputClass} border-neutral-300`
|
|
})
|
|
|
|
const submitButtonClass = computed(() => {
|
|
if (isSubmitting.value || !isFormValid.value) {
|
|
return 'opacity-50 cursor-not-allowed'
|
|
}
|
|
return ''
|
|
})
|
|
|
|
const loadEmployees = async () => {
|
|
isLoading.value = true
|
|
try {
|
|
employees.value = await listEmployees()
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const loadSites = async () => {
|
|
sites.value = await listSites()
|
|
}
|
|
|
|
const loadContracts = async () => {
|
|
contracts.value = await listContracts()
|
|
}
|
|
|
|
const loadInterimAgencies = async () => {
|
|
interimAgencies.value = await listInterimAgencies()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await Promise.all([loadEmployees(), loadSites(), loadContracts(), loadInterimAgencies()])
|
|
if (form.contractStartDate === '') {
|
|
form.contractStartDate = new Date().toISOString().slice(0, 10)
|
|
}
|
|
})
|
|
|
|
watch(sites, (nextSites) => {
|
|
const currentSiteIds = nextSites.map((site) => site.id)
|
|
|
|
if (!sitesInitialized.value) {
|
|
if (currentSiteIds.length === 0) return
|
|
selectedSiteIds.value = currentSiteIds
|
|
sitesInitialized.value = true
|
|
return
|
|
}
|
|
|
|
selectedSiteIds.value = selectedSiteIds.value.filter((siteId) => currentSiteIds.includes(siteId))
|
|
}, {immediate: true})
|
|
|
|
const handleSubmit = async () => {
|
|
if (isSubmitting.value) return
|
|
validationTouched.firstName = true
|
|
validationTouched.lastName = true
|
|
validationTouched.siteId = true
|
|
if (!editingEmployee.value) {
|
|
validationTouched.contractId = true
|
|
validationTouched.contractNature = true
|
|
validationTouched.contractStartDate = true
|
|
validationTouched.contractEndDate = true
|
|
}
|
|
if (!isFormValid.value) return
|
|
|
|
isSubmitting.value = true
|
|
try {
|
|
if (editingEmployee.value) {
|
|
await updateEmployee(editingEmployee.value.id, {
|
|
firstName: form.firstName,
|
|
lastName: form.lastName,
|
|
siteId: form.siteId === '' ? null : Number(form.siteId),
|
|
contractId: editingEmployee.value.contract?.id ?? Number(form.contractId)
|
|
})
|
|
} else {
|
|
await createEmployee({
|
|
firstName: form.firstName,
|
|
lastName: form.lastName,
|
|
siteId: form.siteId === '' ? null : Number(form.siteId),
|
|
contractId: Number(form.contractId),
|
|
contractNature: form.contractNature,
|
|
contractStartDate: form.contractStartDate,
|
|
contractEndDate: form.contractEndDate || null,
|
|
isDriverInput: form.isDriver,
|
|
workDaysHoursInput: requiresSchedule.value ? form.workDaysHours : null,
|
|
interimAgencyId: form.contractNature === 'INTERIM' && form.interimAgencyId !== '' ? Number(form.interimAgencyId) : null
|
|
})
|
|
}
|
|
|
|
form.firstName = ''
|
|
form.lastName = ''
|
|
form.siteId = ''
|
|
form.contractId = ''
|
|
form.contractNature = 'CDI'
|
|
form.contractStartDate = new Date().toISOString().slice(0, 10)
|
|
form.contractEndDate = ''
|
|
form.isDriver = false
|
|
form.workDaysHours = null
|
|
form.interimAgencyId = ''
|
|
editingEmployee.value = null
|
|
isDrawerOpen.value = false
|
|
await loadEmployees()
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
watch(isDrawerOpen, (isOpen) => {
|
|
if (!isOpen) {
|
|
validationTouched.firstName = false
|
|
validationTouched.lastName = false
|
|
validationTouched.siteId = false
|
|
validationTouched.contractId = false
|
|
validationTouched.contractNature = false
|
|
validationTouched.contractStartDate = false
|
|
validationTouched.contractEndDate = false
|
|
}
|
|
})
|
|
|
|
watch(showsContractEndDateComputed, (shows) => {
|
|
if (!shows) {
|
|
form.contractEndDate = ''
|
|
}
|
|
})
|
|
|
|
watch(() => form.contractNature, (nature) => {
|
|
if (nature !== 'INTERIM') {
|
|
form.interimAgencyId = ''
|
|
}
|
|
})
|
|
|
|
watch(requiresSchedule, (required) => {
|
|
if (!required) {
|
|
form.workDaysHours = null
|
|
}
|
|
})
|
|
|
|
const openEdit = (employee: Employee) => {
|
|
editingEmployee.value = employee
|
|
form.firstName = employee.firstName
|
|
form.lastName = employee.lastName
|
|
form.siteId = employee.site?.id ?? ''
|
|
isDrawerOpen.value = true
|
|
}
|
|
|
|
const openCreate = () => {
|
|
editingEmployee.value = null
|
|
form.firstName = ''
|
|
form.lastName = ''
|
|
form.siteId = ''
|
|
form.contractId = ''
|
|
form.contractNature = 'CDI'
|
|
form.contractStartDate = new Date().toISOString().slice(0, 10)
|
|
form.contractEndDate = ''
|
|
form.isDriver = false
|
|
form.workDaysHours = null
|
|
form.interimAgencyId = ''
|
|
isDrawerOpen.value = true
|
|
}
|
|
|
|
const openExportDrawer = () => {
|
|
exportChoice.value = ''
|
|
const now = new Date()
|
|
exportYear.value = now.getFullYear()
|
|
exportMonth.value = now.getMonth() + 1
|
|
exportSalaryMonth.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
|
|
isExportDrawerOpen.value = true
|
|
}
|
|
|
|
const handleExportValidate = async () => {
|
|
if (!isExportValid.value) return
|
|
const choice = exportChoice.value
|
|
isExportDrawerOpen.value = false
|
|
if (choice === 'leave-recap') {
|
|
await printPdf('/leave-recap/print')
|
|
} else if (choice === 'salary-recap') {
|
|
await printPdf(`/salary-recap/print?month=${exportSalaryMonth.value}`)
|
|
} else if (choice === 'yearly-hours') {
|
|
await printPdf(`/yearly-hours/print-all?year=${exportYear.value}&month=${exportMonth.value}`)
|
|
}
|
|
}
|
|
|
|
|
|
const confirmDelete = async (employee: Employee) => {
|
|
const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
|
|
if (!ok) return
|
|
|
|
await deleteEmployee(employee.id)
|
|
await loadEmployees()
|
|
}
|
|
</script>
|