SIRH/frontend/components/employees/ContractTab.vue

<template>
  <section class="mt-8">
    <div class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
      <div class="grid grid-cols-4 border-b border-neutral-200 bg-neutral-50 px-6 py-3 text-md font-semibold text-neutral-700">
        <p>Contrat</p>
        <p>Heures</p>
        <p>Date de début</p>
        <p>Date de fin</p>
      </div>
      <div v-if="contractHistory.length === 0" class="px-6 py-4 text-md text-neutral-600">
        Aucun historique de contrat.
      </div>
      <div v-else>
        <div
          v-for="item in contractHistory"
          :key="`${item.startDate}-${item.endDate ?? 'open'}-${item.contractId ?? item.contractName}`"
          class="grid grid-cols-4 border-b border-neutral-100 px-6 py-3 text-md text-primary-500 last:border-b-0"
        >
          <p>{{ contractNatureLabel(item.contractNature) }}</p>
          <p>{{ contractHistoryLabel(item) }}</p>
          <p>{{ formatDate(item.startDate) }}</p>
          <p>{{ formatDate(item.endDate) }}</p>
        </div>
      </div>
    </div>

    <div class="mt-8 flex justify-center gap-12">
      <button
        type="button"
        class="w-[200px] rounded-md bg-blue-500 py-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
        :disabled="isContractSubmitting || !canCloseCurrentContract"
        @click="onOpenCloseContractDrawer"
      >
        Clôturer
      </button>
      <button
        type="button"
        class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md text-white disabled:cursor-not-allowed disabled:opacity-50"
        :disabled="isCreateContractSubmitting || contracts.length === 0 || !canCreateContract"
        @click="onOpenCreateContractDrawer"
      >
        + Ajouter
      </button>
    </div>

    <AppDrawer :model-value="isContractDrawerOpen" title="Clôturer le contrat" @update:model-value="onUpdateContractDrawerOpen">
      <form class="space-y-4" @submit.prevent="onSubmitCloseContract">
        <div>
          <label class="text-md font-semibold text-neutral-700" for="contract-nature">
            Type de contrat
          </label>
          <input id="contract-nature" :value="contractNatureLabel(contractForm.contractNature)" type="text" :class="readonlyFieldClass" readonly />
        </div>

        <div>
          <label class="text-md font-semibold text-neutral-700" for="contract">
            Temps de travail
          </label>
          <input id="contract" :value="closeContractWorkedHoursLabel" type="text" :class="readonlyFieldClass" readonly />
        </div>

        <div>
          <label class="text-md font-semibold text-neutral-700" for="contract-start-date">
            Début contrat
          </label>
          <input
            id="contract-start-date"
            :value="contractForm.startDate"
            type="date"
            :class="readonlyFieldClass"
            readonly
          />
        </div>

        <div>
          <label class="text-md font-semibold text-neutral-700" for="contract-end-date">
            Fin contrat <span class="text-red-600">*</span>
          </label>
          <input
            id="contract-end-date"
            v-model="contractForm.endDate"
            type="date"
            :class="contractEndDateFieldClass"
          />
          <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">La date de fin est obligatoire.</p>
        </div>

        <div>
          <label class="text-md font-semibold text-neutral-700" for="contract-comment">
            Commentaire
          </label>
          <textarea
            id="contract-comment"
            v-model="contractForm.comment"
            rows="3"
            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
            placeholder="Motif de la clôture..."
          />
        </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="contract-paid-leave-settled">
            <input
              id="contract-paid-leave-settled"
              v-model="contractForm.paidLeaveSettled"
              type="checkbox"
              class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
            />
            Soldé dans le solde de tout compte
          </label>
        </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"
            :disabled="isContractSubmitting"
            @click="onUpdateContractDrawerOpen(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 disabled:cursor-not-allowed disabled:opacity-50"
            :disabled="isContractSubmitting || !isContractEndDateValid"
          >
            Enregistrer
          </button>
        </div>
      </form>
    </AppDrawer>

    <AppDrawer :model-value="isCreateContractDrawerOpen" title="Ajouter un contrat" @update:model-value="onUpdateCreateContractDrawerOpen">
      <form class="space-y-4" @submit.prevent="onSubmitCreateContract">
        <div>
          <label class="text-md font-semibold text-neutral-700" for="create-contract-nature">
            Type de contrat <span class="text-red-600">*</span>
          </label>
          <select id="create-contract-nature" v-model="createContractForm.contractNature" :class="createContractNatureFieldClass">
            <option value="CDI">CDI</option>
            <option value="CDD">CDD</option>
            <option value="INTERIM">Intérim</option>
          </select>
        </div>

        <div>
          <label class="text-md font-semibold text-neutral-700" for="create-contract-id">
            Temps de travail <span class="text-red-600">*</span>
          </label>
          <select id="create-contract-id" v-model="createContractForm.contractId" :class="createContractFieldClass">
            <option value="">Sélectionner un contrat</option>
            <option v-for="contract in contracts" :key="contract.id" :value="contract.id">
              {{ contract.name }}
            </option>
          </select>
        </div>

        <div>
          <label class="text-md font-semibold text-neutral-700" for="create-contract-start-date">
            Début contrat <span class="text-red-600">*</span>
          </label>
          <input id="create-contract-start-date" v-model="createContractForm.startDate" type="date" :class="createContractStartDateFieldClass" />
        </div>

        <div v-if="showsCreateContractEndDate">
          <label class="text-md font-semibold text-neutral-700" for="create-contract-end-date">
            Fin contrat <span v-if="requiresCreateContractEndDate" class="text-red-600">*</span>
          </label>
          <input id="create-contract-end-date" v-model="createContractForm.endDate" type="date" :class="createContractEndDateFieldClass" />
        </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"
            :disabled="isCreateContractSubmitting"
            @click="onUpdateCreateContractDrawerOpen(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 disabled:cursor-not-allowed disabled:opacity-50"
            :disabled="isCreateContractSubmitting || !isCreateContractFormValid"
          >
            Enregistrer
          </button>
        </div>
      </form>
    </AppDrawer>
  </section>
</template>

<script setup lang="ts">
import type { Contract } from '~/services/dto/contract'
import type { ContractHistoryItem } from '~/services/dto/employee'

type ContractForm = {
  contractId: number | ''
  contractName: string
  weeklyHours: number | null
  contractNature: 'CDI' | 'CDD' | 'INTERIM'
  startDate: string
  endDate: string
  paidLeaveSettled: boolean
  comment: string
}

type CreateContractForm = {
  contractId: number | ''
  contractNature: 'CDI' | 'CDD' | 'INTERIM'
  startDate: string
  endDate: string
}

defineProps<{
  contractHistory: ContractHistoryItem[]
  contractNatureLabel: (value?: 'CDI' | 'CDD' | 'INTERIM') => string
  contractHistoryLabel: (item: ContractHistoryItem) => string
  formatDate: (value?: string | null) => string
  isContractSubmitting: boolean
  canCloseCurrentContract: boolean
  isCreateContractSubmitting: boolean
  contracts: Contract[]
  canCreateContract: boolean
  isContractDrawerOpen: boolean
  contractForm: ContractForm
  readonlyFieldClass: string
  closeContractWorkedHoursLabel: string
  contractEndDateFieldClass: string
  showContractEndDateError: boolean
  isContractEndDateValid: boolean
  isCreateContractDrawerOpen: boolean
  createContractForm: CreateContractForm
  createContractNatureFieldClass: string
  createContractFieldClass: string
  createContractStartDateFieldClass: string
  showsCreateContractEndDate: boolean
  requiresCreateContractEndDate: boolean
  createContractEndDateFieldClass: string
  isCreateContractFormValid: boolean
  onOpenCloseContractDrawer: () => void
  onOpenCreateContractDrawer: () => void
  onUpdateContractDrawerOpen: (open: boolean) => void
  onUpdateCreateContractDrawerOpen: (open: boolean) => void
  onSubmitCloseContract: () => void
  onSubmitCreateContract: () => void
}>()
</script>