SIRH/frontend/pages/employees.vue

<template>
  <div class="h-full overflow-hidden flex 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>

    <div class="flex flex-col gap-3 py-6">
        <div class="flex justify-between">
            <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites" />
            <button
                type="button"
                class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
                @click="isDrawerOpen = true"
            >
                Ajouter un employé
            </button>
        </div>
        <div class="w-80">
            <EmployeeNameFilterInput v-model="employeeFilter" />
        </div>
    </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="flex-1 min-h-0 rounded-lg border border-neutral-200 bg-white overflow-hidden">
      <div class="h-full overflow-auto">
        <div class="min-w-[900px]">
          <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 sticky top-0 z-10">
            <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">
            Chargement...
          </div>
          <div v-else>
            <div
              v-for="employee in filteredEmployees"
              :key="employee.id"
              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
                class="inline-flex w-fit max-w-full rounded-md px-2 py-1 text-sm font-semibold"
                :style="employee.site ? { backgroundColor: employee.site.color, color: '#0f172a' } : {}"
                :class="employee.site ? '' : 'bg-neutral-100 text-neutral-600'"
              >
                {{ employee.site?.name ?? '-' }}
              </span>
              <span>{{ employee.contract?.name ?? '-' }}</span>
              <div class="flex items-center justify-end gap-2">
                <button
                  type="button"
                  class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
                  @click="openEdit(employee)"
                >
                  Modifier
                </button>
                <button
                  type="button"
                  class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
                  @click="confirmDelete(employee)"
                >
                  Supprimer
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </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>
        <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"
            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>
  </div>
</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'
import SiteFilterSelector from '~/components/SiteFilterSelector.vue'

const isDrawerOpen = ref(false)
const isSubmitting = ref(false)
const isLoading = ref(false)
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 employeeFilter = ref('')
const selectedSiteIds = ref<number[]>([])

const filteredEmployees = computed(() => {
  if (selectedSiteIds.value.length === 0) return []

  const filter = employeeFilter.value.trim().toLowerCase()
  const bySite = employees.value.filter((employee) => {
    const siteId = employee.site?.id
    return !!siteId && selectedSiteIds.value.includes(siteId)
  })

  if (!filter) return bySite

  return bySite.filter((employee) => {
    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 | ''
})

const validationTouched = reactive({
  firstName: false,
  lastName: 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 && isContractValid.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 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 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()
}

onMounted(async () => {
  await Promise.all([loadEmployees(), loadSites(), loadContracts()])
})

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
  validationTouched.contractId = 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: Number(form.contractId)
      })
    } else {
      await createEmployee({
        firstName: form.firstName,
        lastName: form.lastName,
        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()
  } finally {
    isSubmitting.value = false
  }
}

watch(isDrawerOpen, (isOpen) => {
  if (!isOpen) {
    validationTouched.firstName = false
    validationTouched.lastName = false
    validationTouched.siteId = false
    validationTouched.contractId = false
  }
})

const openEdit = (employee: Employee) => {
  editingEmployee.value = employee
  form.firstName = employee.firstName
  form.lastName = employee.lastName
  form.siteId = employee.site?.id ?? ''
  form.contractId = employee.contract?.id ?? ''
  isDrawerOpen.value = true
}

const confirmDelete = async (employee: Employee) => {
  const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
  if (!ok) return

  await deleteEmployee(employee.id)
  await loadEmployees()
}
</script>