Inventory_frontend/app/pages/constructeurs.vue

<template>
  <main class="container mx-auto px-6 py-8 space-y-6">
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-3xl font-bold">
          Constructeurs
        </h1>
        <p class="text-sm text-gray-500">
          Gérez les constructeurs et leurs coordonnées.
        </p>
      </div>
      <button class="btn btn-primary" @click="openCreateModal">
        <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
        Nouveau constructeur
      </button>
    </div>

    <div class="card bg-base-100 shadow-lg">
      <div class="card-body space-y-4">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
          <div class="flex-1">
            <label class="label"><span class="label-text">Recherche</span></label>
            <input
              v-model="searchTerm"
              type="search"
              class="input input-bordered w-full"
              placeholder="Nom, email ou téléphone"
              @input="debouncedSearch"
            >
          </div>
          <div class="md:w-1/3">
            <label class="label"><span class="label-text">Tri</span></label>
            <select v-model="sortKey" class="select select-bordered w-full">
              <option value="name">
                Nom
              </option>
              <option value="email">
                Email
              </option>
              <option value="phone">
                Téléphone
              </option>
            </select>
          </div>
        </div>

        <div v-if="loading" class="py-16 text-center text-sm text-gray-500">
          <span class="loading loading-spinner loading-lg mb-2" />
          Chargement des constructeurs...
        </div>

        <div v-else-if="filteredConstructeurs.length === 0" class="py-16 text-center text-sm text-gray-500">
          Aucun constructeur trouvé.
        </div>

        <div v-else class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr class="text-xs uppercase">
                <th>Nom</th>
                <th>Email</th>
                <th>Téléphone</th>
                <th class="text-right">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="constructeur in filteredConstructeurs" :key="constructeur.id" class="text-sm">
                <td>{{ constructeur.name }}</td>
                <td>{{ constructeur.email || '—' }}</td>
                <td>{{ constructeur.phone || '—' }}</td>
                <td class="text-right">
                  <div class="flex justify-end gap-2">
                    <button class="btn btn-ghost btn-xs" @click="openEditModal(constructeur)">
                      Modifier
                    </button>
                    <button class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">
                      Supprimer
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <dialog class="modal" :class="{ 'modal-open': modalOpen }">
      <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">
          {{ editingConstructeur ? 'Modifier' : 'Nouveau' }} constructeur
        </h3>
        <form class="space-y-4" @submit.prevent="saveConstructeur">
          <div class="form-control">
            <label class="label"><span class="label-text">Nom</span></label>
            <input v-model="form.name" type="text" class="input input-bordered" required>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <FieldEmail v-model="form.email" label="Email" />
            <FieldPhone v-model="form.phone" label="Téléphone" />
          </div>
          <div class="modal-action">
            <button type="button" class="btn" @click="closeModal">
              Annuler
            </button>
            <button type="submit" class="btn btn-primary" :disabled="saving">
              <span v-if="saving" class="loading loading-spinner loading-xs mr-2" />
              {{ editingConstructeur ? 'Enregistrer' : 'Créer' }}
            </button>
          </div>
        </form>
      </div>
    </dialog>
  </main>
</template>

<script setup>
import { ref, computed } from 'vue'
import FieldEmail from '~/components/form/FieldEmail.vue'
import FieldPhone from '~/components/form/FieldPhone.vue'
import { useConstructeurs } from '~/composables/useConstructeurs'
import { useToast } from '~/composables/useToast'
import IconLucidePlus from '~icons/lucide/plus'

const { constructeurs, loading, searchConstructeurs, createConstructeur, updateConstructeur, deleteConstructeur, loadConstructeurs } = useConstructeurs()
const { showError, showSuccess } = useToast()

const searchTerm = ref('')
const sortKey = ref('name')
const modalOpen = ref(false)
const saving = ref(false)
const editingConstructeur = ref(null)
const form = ref({ name: '', email: '', phone: '' })

const filteredConstructeurs = computed(() => {
  const sorted = [...constructeurs.value].sort((a, b) => {
    const key = sortKey.value
    return (a[key] || '').localeCompare(b[key] || '')
  })
  if (!searchTerm.value) { return sorted }
  const term = searchTerm.value.toLowerCase()
  return sorted.filter(item =>
    [item.name, item.email, item.phone].some(value => value && value.toLowerCase().includes(term))
  )
})

const debouncedSearch = debounce(async () => {
  await searchConstructeurs(searchTerm.value)
}, 300)

function debounce (fn, delay) {
  let timeout
  return (...args) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => fn(...args), delay)
  }
}

const resetForm = () => {
  form.value = { name: '', email: '', phone: '' }
  editingConstructeur.value = null
}

const openCreateModal = () => {
  resetForm()
  modalOpen.value = true
}

const openEditModal = (constructeur) => {
  editingConstructeur.value = constructeur
  form.value = {
    name: constructeur.name,
    email: constructeur.email || '',
    phone: constructeur.phone || ''
  }
  modalOpen.value = true
}

const closeModal = () => {
  modalOpen.value = false
  resetForm()
}

const saveConstructeur = async () => {
  saving.value = true
  const payload = { ...form.value }
  if (!payload.email) { delete payload.email }
  if (!payload.phone) { delete payload.phone }
  let result
  if (editingConstructeur.value) {
    result = await updateConstructeur(editingConstructeur.value.id, payload)
  } else {
    result = await createConstructeur(payload)
  }
  saving.value = false
  if (result.success) {
    closeModal()
    await searchConstructeurs(searchTerm.value)
  }
}

const confirmDelete = async (constructeur) => {
  if (!confirm(`Supprimer le constructeur "${constructeur.name}" ?`)) { return }
  const result = await deleteConstructeur(constructeur.id)
  if (!result.success && result.error) {
    showError(result.error)
  }
}

loadConstructeurs()
</script>

<style scoped>
</style>