MALIO-DEV/Ferme
4
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 82 Wiki Activity

feat : admin fournisseurs creation et modif (WIP)

Browse Source
This commit is contained in:
Mattéo Dunoyer
2026-02-11 08:18:55 +01:00
parent 83b339746e
commit 1e794bba00
7 changed files with 389 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
frontend/components/supplier/supplier-form.vue
View File

@@ -14,16 +14,60 @@
</button>
</div>
<div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-16">
<div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-10">
<UiTextInput id="supplier-name" v-model="form.name" label="Nom du fournisseur" />
<UiTextInput id="supplier-email" v-model="form.email" label="Email" />
<UiTextInput id="supplier-phone" v-model="form.phone" label="Téléphone" />
</div>
<UiTextInput id="supplier-street" v-model="form.addresses[0].street" label="Rue" />
<UiTextInput id="supplier-street2" v-model="form.addresses[0].street2" label="Complément" />
<UiTextInput id="supplier-postalCode" v-model="form.addresses[0].postalCode" label="Code postal" />
<UiTextInput id="supplier-city" v-model="form.addresses[0].city" label="Ville" />
<UiTextInput id="supplier-country" v-model="form.addresses[0].countryCode" label="Pays" />
<div class="flex items-center justify-between mb-4">
<h2 class="text-2xl font-bold uppercase">Adresse fournisseur</h2>
<button
type="button"
class="text-sm uppercase bg-primary-500 text-white h-[40px] px-6"
:disabled="supplierId === null"
@click="goToAddAddress"
>
Ajouter
</button>
</div>
<div class="overflow-x-auto mb-10">
<table class="w-full border-collapse">
<thead>
<tr class="text-left border-b border-gray-200">
<th class="py-3 pr-4 text-sm uppercase">Libellé</th>
<th class="py-3 pr-4 text-sm uppercase">Rue</th>
<th class="py-3 pr-4 text-sm uppercase">Complément</th>
<th class="py-3 pr-4 text-sm uppercase">Code postal</th>
<th class="py-3 pr-4 text-sm uppercase">Ville</th>
<th class="py-3 pr-4 text-sm uppercase">Pays</th>
</tr>
</thead>
<tbody>
<template v-if="form.addresses.length === 0">
<tr>
<td colspan="6" class="py-4 text-slate-400">
Aucune adresse.
</td>
</tr>
</template>
<template v-else>
<tr
v-for="(address, index) in form.addresses"
:key="address.id ?? index"
class="border-b border-gray-100 cursor-pointer hover:bg-slate-50"
@click="goToEditAddress(address.id ?? null)"
>
<td class="py-3 pr-4">{{ address.label || "—" }}</td>
<td class="py-3 pr-4">{{ address.street || "—" }}</td>
<td class="py-3 pr-4">{{ address.street2 || "—" }}</td>
<td class="py-3 pr-4">{{ address.postalCode || "—" }}</td>
<td class="py-3 pr-4">{{ address.city || "—" }}</td>
<td class="py-3 pr-4">{{ address.countryCode || "—" }}</td>
</tr>
</template>
</tbody>
</table>
</div>
<p v-if="errorMsg" class="text-red-600 mt-4">{{ errorMsg }}</p>
@@ -33,14 +77,13 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue"
import { createSupplier, getSupplier, updateSupplier } from "~/services/supplier"
import { createAddress, updateAddress, type AddressPayload } from "~/services/address"
import type { SupplierData, SupplierFormData, SupplierPayload } from "~/services/dto/supplier-data"
import type { AddressFormData } from "~/services/dto/address-data"
definePageMeta({ layout: "admin" })
const route = useRoute()
const router = useRouter()
const { $i18n } = useNuxtApp()
const resolveId = (param: unknown) => {
const idStr = Array.isArray(param) ? param[0] : param
@@ -54,23 +97,36 @@ const supplierId = computed(() => resolveId(route.params.id))
const isLoading = ref(false)
const errorMsg = ref<string | null>(null)
const emptyAddress = (): AddressFormData => ({
id: null,
label: "",
street: "",
street2: null,
postalCode: "",
city: "",
countryCode: "",
})
const form = reactive<SupplierFormData>({
name: "",
email: "",
phone: "",
addresses: [emptyAddress()],
addresses: [],
})
const goToAddAddress = () => {
if (supplierId.value === null) return
router.push({
path: "/admin/supplier/address",
query: {
supplierId: String(supplierId.value),
fromSupplier: "1",
},
})
}
const goToEditAddress = (addressId: number | null) => {
if (supplierId.value === null || addressId === null) return
router.push({
path: "/admin/supplier/address",
query: {
supplierId: String(supplierId.value),
addressId: String(addressId),
fromSupplier: "1",
},
})
}
const hydrateFromSupplier = (supplier: SupplierData | null) => {
if (!supplier) return
@@ -78,18 +134,24 @@ const hydrateFromSupplier = (supplier: SupplierData | null) => {
form.email = supplier.email ?? ""
form.phone = supplier.phone ?? ""
if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) return
const a0 = supplier.addresses[0]
if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) {
form.addresses = []
return
}
if (typeof supplier.addresses[0] === "string") {
form.addresses = []
return
}
if (typeof a0 === "string") return
form.addresses[0].id = a0.id ?? null
form.addresses[0].label = a0.label ?? ""
form.addresses[0].street = a0.street ?? ""
form.addresses[0].street2 = a0.street2 ?? null
form.addresses[0].postalCode = a0.postalCode ?? ""
form.addresses[0].city = a0.city ?? ""
form.addresses[0].countryCode = a0.countryCode ?? ""
form.addresses = supplier.addresses.map((address) => ({
id: address.id ?? null,
label: address.label ?? "",
street: address.street ?? "",
street2: address.street2 ?? null,
postalCode: address.postalCode ?? "",
city: address.city ?? "",
countryCode: address.countryCode ?? "",
}))
}
watch(
@@ -114,36 +176,17 @@ async function validate() {
try {
const name = form.name.trim()
if (!name) {
errorMsg.value = String($i18n.t("errors.supplier.nameRequired"))
return
}
const email = (form.email ?? "").trim() || null
const phone = (form.phone ?? "").trim() || null
const a0 = form.addresses[0]
const label = a0.label.trim() || name || "Adresse"
const addressPayload: AddressPayload = {
label,
street: a0.street.trim(),
street2: a0.street2?.trim() || null,
postalCode: a0.postalCode.trim(),
city: a0.city.trim(),
countryCode: a0.countryCode.trim(),
}
let addressId: number
if (a0.id) {
const updated = await updateAddress(a0.id, addressPayload)
addressId = updated.id
} else {
const created = await createAddress(addressPayload)
addressId = created.id
a0.id = addressId
}
const supplierPayload: SupplierPayload = {
name,
email,
phone,
addresses: [`/api/addresses/${addressId}`],
}
if (supplierId.value !== null) {
@@ -154,7 +197,8 @@ async function validate() {
await router.push("/admin/supplier/supplier-list")
} catch (e) {
errorMsg.value = "Erreur lors de l’enregistrement."
const errorKey = supplierId.value !== null ? "errors.supplier.update" : "errors.supplier.create"
errorMsg.value = String($i18n.t(errorKey))
throw e
} finally {
isLoading.value = false