fix : wip

frontend/pages/employees.vue

@@ -19,10 +19,11 @@
     </div>
 
     <div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[120px_1fr_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+      <div class="grid grid-cols-[120px_1fr_1fr_220px_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
         <span class="text-left">Prénom</span>
         <span class="text-left">Nom</span>
         <span class="text-left">Site</span>
+        <span class="text-left">Contrat</span>
         <span class="text-right">Actions</span>
       </div>
       <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
@@ -32,11 +33,12 @@
         <div
           v-for="employee in employees"
           :key="employee.id"
-          class="grid grid-cols-[120px_1fr_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-[120px_1fr_1fr_220px_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
         >
           <span>{{ employee.firstName }}</span>
           <span>{{ employee.lastName }}</span>
           <span>{{ employee.site?.name ?? '-' }}</span>
+          <span>{{ employee.contract?.name ?? '-' }}</span>
           <div class="flex items-center justify-end gap-2">
             <button
               type="button"
@@ -105,6 +107,24 @@
             Le site est obligatoire.
           </p>
         </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="contract">
+            Contrat <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 contrat est obligatoire.
+          </p>
+        </div>
         <div class="flex justify-end gap-3 pt-2">
           <button
             type="button"
@@ -127,8 +147,10 @@
 </template>
 
 <script setup lang="ts">
+import type { Contract } from '~/services/dto/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'
 
@@ -142,24 +164,28 @@ const drawerTitle = computed(() =>
 
 const employees = ref<Employee[]>([])
 const sites = ref<Site[]>([])
+const contracts = ref<Contract[]>([])
 
 const form = reactive({
   firstName: '',
   lastName: '',
-  siteId: '' as number | ''
+  siteId: '' as number | '',
+  contractId: '' as number | ''
 })
 
 const validationTouched = reactive({
   firstName: false,
   lastName: false,
-  siteId: false
+  siteId: false,
+  contractId: false
 })
 
 const isFirstNameValid = computed(() => form.firstName.trim() !== '')
 const isLastNameValid = computed(() => form.lastName.trim() !== '')
 const isSiteValid = computed(() => form.siteId !== '')
+const isContractValid = computed(() => form.contractId !== '')
 const isFormValid = computed(
-  () => isFirstNameValid.value && isLastNameValid.value && isSiteValid.value
+  () => isFirstNameValid.value && isLastNameValid.value && isSiteValid.value && isContractValid.value
 )
 
 const showFirstNameError = computed(
@@ -171,9 +197,12 @@ const showLastNameError = computed(
 const showSiteError = computed(
   () => validationTouched.siteId && !isSiteValid.value
 )
+const showContractError = computed(
+  () => validationTouched.contractId && !isContractValid.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-primary-200'
+  '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`
@@ -194,6 +223,14 @@ const siteFieldClass = computed(() => {
   }
   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 submitButtonClass = computed(() => {
   if (isSubmitting.value || !isFormValid.value) {
@@ -215,8 +252,12 @@ const loadSites = async () => {
   sites.value = await listSites()
 }
 
+const loadContracts = async () => {
+  contracts.value = await listContracts()
+}
+
 onMounted(async () => {
-  await Promise.all([loadEmployees(), loadSites()])
+  await Promise.all([loadEmployees(), loadSites(), loadContracts()])
 })
 
 const handleSubmit = async () => {
@@ -224,6 +265,7 @@ const handleSubmit = async () => {
   validationTouched.firstName = true
   validationTouched.lastName = true
   validationTouched.siteId = true
+  validationTouched.contractId = true
   if (!isFormValid.value) return
 
   isSubmitting.value = true
@@ -232,19 +274,22 @@ const handleSubmit = async () => {
       await updateEmployee(editingEmployee.value.id, {
         firstName: form.firstName,
         lastName: form.lastName,
-        siteId: form.siteId === '' ? null : Number(form.siteId)
+        siteId: form.siteId === '' ? null : Number(form.siteId),
+        contractId: Number(form.contractId)
       })
     } else {
       await createEmployee({
         firstName: form.firstName,
         lastName: form.lastName,
-        siteId: form.siteId === '' ? null : Number(form.siteId)
+        siteId: form.siteId === '' ? null : Number(form.siteId),
+        contractId: Number(form.contractId)
       })
     }
 
     form.firstName = ''
     form.lastName = ''
     form.siteId = ''
+    form.contractId = ''
     editingEmployee.value = null
     isDrawerOpen.value = false
     await loadEmployees()
@@ -258,6 +303,7 @@ watch(isDrawerOpen, (isOpen) => {
     validationTouched.firstName = false
     validationTouched.lastName = false
     validationTouched.siteId = false
+    validationTouched.contractId = false
   }
 })
 
@@ -266,6 +312,7 @@ const openEdit = (employee: Employee) => {
   form.firstName = employee.firstName
   form.lastName = employee.lastName
   form.siteId = employee.site?.id ?? ''
+  form.contractId = employee.contract?.id ?? ''
   isDrawerOpen.value = true
 }