feat : admin fournisseurs creation et modif (WIP)
This commit is contained in:
82
frontend/components/address.vue
Normal file
82
frontend/components/address.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<form @submit.prevent="validateForm">
|
||||
<div class="flex items-center justify-between gap-10">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold uppercase">
|
||||
{{ props.address ? "Modification d'une adresse" : "Ajout d'une adresse" }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
{{ props.address? "Sauvegarder" : "Ajouter" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-16 mt-10">
|
||||
<UiTextInput id="address-label" v-model="form.label" label="Libellé" />
|
||||
<UiTextInput id="address-street" v-model="form.street" label="Rue" />
|
||||
<UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
|
||||
<UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" />
|
||||
<UiTextInput id="address-city" v-model="form.city" label="Ville" />
|
||||
<UiTextInput id="address-country" v-model="form.countryCode" label="Pays" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AddressPayload } from "~/services/address"
|
||||
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps<{
|
||||
type?: "supplier" | "customer",
|
||||
address?: AddressPayload | null
|
||||
}>()
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
const emptyForm = (): AddressPayload => ({
|
||||
label: "",
|
||||
street: "",
|
||||
street2: null,
|
||||
postalCode: "",
|
||||
city: "",
|
||||
countryCode: "",
|
||||
})
|
||||
|
||||
const form = reactive<AddressPayload>(emptyForm())
|
||||
|
||||
const hydrateForm = (address?: AddressPayload | null) => {
|
||||
console.log(props.address)
|
||||
const data = address ?? emptyForm()
|
||||
form.label = data.label ?? ""
|
||||
form.street = data.street ?? ""
|
||||
form.street2 = data.street2 ?? null
|
||||
form.postalCode = data.postalCode ?? ""
|
||||
form.city = data.city ?? ""
|
||||
form.countryCode = data.countryCode ?? ""
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.address,
|
||||
(addr) => {
|
||||
hydrateForm(addr)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const validateForm = () => {
|
||||
if (isLoading.value) return
|
||||
emit("validate", {...form})
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'validate', form: AddressPayload): void
|
||||
}>()
|
||||
</script>
|
||||
@@ -1,238 +0,0 @@
|
||||
<template>
|
||||
<form @submit.prevent="validate">
|
||||
<div class="flex items-center justify-between gap-10">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold uppercase">
|
||||
{{ addressId ? "Modification d'une adresse" : "Ajout d'une adresse" }}
|
||||
</h1>
|
||||
<p v-if="entityName" class="text-sm text-slate-500 mt-1">
|
||||
{{ entityLabel }} : {{ entityName }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
|
||||
type="submit"
|
||||
:disabled="isLoading || entityId === null"
|
||||
>
|
||||
{{ addressId ? "Sauvegarder" : "Ajouter" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-16 mt-10">
|
||||
<UiTextInput id="address-label" v-model="form.label" label="Libellé" />
|
||||
<UiTextInput id="address-street" v-model="form.street" label="Rue" />
|
||||
<UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
|
||||
<UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" />
|
||||
<UiTextInput id="address-city" v-model="form.city" label="Ville" />
|
||||
<UiTextInput id="address-country" v-model="form.countryCode" label="Pays" />
|
||||
</div>
|
||||
|
||||
<p v-if="errorMsg" class="text-red-600 mt-4">{{ errorMsg }}</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from "vue"
|
||||
import { createAddress, getAddress, updateAddress, type AddressPayload } from "~/services/address"
|
||||
import { getSupplier, updateSupplier } from "~/services/supplier"
|
||||
import type { SupplierPayload } from "~/services/dto/supplier-data"
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { $i18n } = useNuxtApp()
|
||||
|
||||
type AddressOwner = {
|
||||
id: number
|
||||
name?: string | null
|
||||
email?: string | null
|
||||
phone?: string | null
|
||||
addresses?: unknown
|
||||
}
|
||||
|
||||
type AddressOwnerAdapter = {
|
||||
loadEntity: (id: number) => Promise<AddressOwner>
|
||||
updateEntity: (id: number, payload: unknown) => Promise<unknown>
|
||||
buildUpdatePayload: (owner: AddressOwner | null, addresses: string[]) => unknown
|
||||
getEntityName: (owner: AddressOwner | null) => string
|
||||
normalizeAddresses: (addresses: AddressOwner["addresses"]) => string[]
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
entityType?: "supplier" | "customer"
|
||||
entityId?: number | null
|
||||
returnPath?: string
|
||||
adapter?: Partial<AddressOwnerAdapter>
|
||||
}>()
|
||||
|
||||
const resolveId = (param: unknown) => {
|
||||
const idStr = Array.isArray(param) ? param[0] : param
|
||||
if (!idStr) return null
|
||||
const id = Number(idStr)
|
||||
return Number.isFinite(id) ? id : null
|
||||
}
|
||||
|
||||
const entityType = computed<"supplier" | "customer">(() => {
|
||||
if (props.entityType) return props.entityType
|
||||
const queryType = route.query.entityType
|
||||
if (queryType === "customer" || queryType === "supplier") return queryType
|
||||
const path = route.path
|
||||
if (path.includes("/customer/")) return "customer"
|
||||
return "supplier"
|
||||
})
|
||||
|
||||
const entityId = computed(() => {
|
||||
if (props.entityId !== undefined) return props.entityId ?? null
|
||||
const typeKey = `${entityType.value}Id`
|
||||
return resolveId(route.query[typeKey]) ?? resolveId(route.query.entityId)
|
||||
})
|
||||
const addressId = computed(() => resolveId(route.query.addressId))
|
||||
|
||||
const entity = ref<AddressOwner | null>(null)
|
||||
const entityName = computed(() => activeAdapter.value.getEntityName(entity.value))
|
||||
const entityLabel = computed(() => (entityType.value === "customer" ? "Client" : "Fournisseur"))
|
||||
|
||||
const isLoading = ref(false)
|
||||
const errorMsg = ref<string | null>(null)
|
||||
|
||||
const form = reactive<AddressPayload>({
|
||||
label: "",
|
||||
street: "",
|
||||
street2: null,
|
||||
postalCode: "",
|
||||
city: "",
|
||||
countryCode: "",
|
||||
})
|
||||
|
||||
const defaultSupplierAdapter: AddressOwnerAdapter = {
|
||||
loadEntity: getSupplier,
|
||||
updateEntity: updateSupplier,
|
||||
buildUpdatePayload: (owner, addresses) => ({
|
||||
name: owner?.name ?? "",
|
||||
email: owner?.email ?? null,
|
||||
phone: owner?.phone ?? null,
|
||||
addresses,
|
||||
} satisfies SupplierPayload),
|
||||
getEntityName: (owner) => owner?.name ?? "",
|
||||
normalizeAddresses: (value) => {
|
||||
if (!Array.isArray(value) || value.length === 0) return []
|
||||
if (typeof value[0] === "string") {
|
||||
return value.filter((item): item is string => typeof item === "string")
|
||||
}
|
||||
return value
|
||||
.map((address) =>
|
||||
address && typeof address === "object" && "id" in address && address.id
|
||||
? `/api/addresses/${address.id}`
|
||||
: null
|
||||
)
|
||||
.filter((item): item is string => Boolean(item))
|
||||
},
|
||||
}
|
||||
|
||||
const activeAdapter = computed<AddressOwnerAdapter>(() => ({
|
||||
...defaultSupplierAdapter,
|
||||
...props.adapter,
|
||||
}))
|
||||
|
||||
watch(
|
||||
() => [entityId.value, addressId.value] as const,
|
||||
async ([entityIdValue, addressIdValue]) => {
|
||||
if (entityIdValue === null) {
|
||||
entity.value = null
|
||||
return
|
||||
}
|
||||
isLoading.value = true
|
||||
try {
|
||||
entity.value = await activeAdapter.value.loadEntity(entityIdValue)
|
||||
if (addressIdValue !== null) {
|
||||
const address = await getAddress(addressIdValue)
|
||||
form.label = address.label ?? ""
|
||||
form.street = address.street ?? ""
|
||||
form.street2 = address.street2 ?? null
|
||||
form.postalCode = address.postalCode ?? ""
|
||||
form.city = address.city ?? ""
|
||||
form.countryCode = address.countryCode ?? ""
|
||||
} else {
|
||||
form.label = ""
|
||||
form.street = ""
|
||||
form.street2 = null
|
||||
form.postalCode = ""
|
||||
form.city = ""
|
||||
form.countryCode = ""
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
async function validate() {
|
||||
if (isLoading.value) return
|
||||
if (entityId.value === null) {
|
||||
errorMsg.value = String($i18n.t("errors.address.entityNotFound"))
|
||||
return
|
||||
}
|
||||
errorMsg.value = null
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
if (!entity.value) {
|
||||
entity.value = await activeAdapter.value.loadEntity(entityId.value)
|
||||
}
|
||||
|
||||
const payload: AddressPayload = {
|
||||
label: form.label.trim() || entityName.value || "Adresse",
|
||||
street: form.street.trim(),
|
||||
street2: form.street2?.trim() || null,
|
||||
postalCode: form.postalCode.trim(),
|
||||
city: form.city.trim(),
|
||||
countryCode: form.countryCode.trim().toUpperCase(),
|
||||
}
|
||||
if (!payload.street) {
|
||||
errorMsg.value = String($i18n.t("errors.address.streetRequired"))
|
||||
return
|
||||
}
|
||||
if (!payload.postalCode) {
|
||||
errorMsg.value = String($i18n.t("errors.address.postalCodeRequired"))
|
||||
return
|
||||
}
|
||||
if (!payload.city) {
|
||||
errorMsg.value = String($i18n.t("errors.address.cityRequired"))
|
||||
return
|
||||
}
|
||||
if (payload.countryCode.length !== 2) {
|
||||
errorMsg.value = String($i18n.t("errors.address.countryCodeInvalid"))
|
||||
return
|
||||
}
|
||||
|
||||
let updatedAddressId = addressId.value
|
||||
if (addressId.value !== null) {
|
||||
const updated = await updateAddress(addressId.value, payload)
|
||||
updatedAddressId = updated.id
|
||||
} else {
|
||||
const created = await createAddress(payload)
|
||||
updatedAddressId = created.id
|
||||
}
|
||||
|
||||
if (updatedAddressId !== null) {
|
||||
const existingAddresses = activeAdapter.value.normalizeAddresses(entity.value?.addresses ?? [])
|
||||
const updatedAddresses = existingAddresses.includes(`/api/addresses/${updatedAddressId}`)
|
||||
? existingAddresses
|
||||
: [...existingAddresses, `/api/addresses/${updatedAddressId}`]
|
||||
|
||||
const updatePayload = activeAdapter.value.buildUpdatePayload(entity.value, updatedAddresses)
|
||||
await activeAdapter.value.updateEntity(entityId.value, updatePayload)
|
||||
}
|
||||
const returnPath =
|
||||
props.returnPath ?? `/admin/${entityType.value}/${entityId.value}`
|
||||
await router.push(returnPath)
|
||||
} catch (e) {
|
||||
const errorKey = addressId.value !== null ? "errors.address.update" : "errors.address.create"
|
||||
errorMsg.value = String($i18n.t(errorKey))
|
||||
throw e
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<form @submit.prevent="validate">
|
||||
<div class="flex items-center justify-between gap-10">
|
||||
<h1 class="text-3xl font-bold uppercase">
|
||||
{{ supplierId ? "Modifications du fournisseur" : "Ajout d'un fournisseur" }}
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
{{ supplierId ? "Sauvegarder" : "Ajouter" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from "vue"
|
||||
import { createSupplier, getSupplier, updateSupplier } from "~/services/supplier"
|
||||
import type { SupplierData, SupplierFormData, SupplierPayload } from "~/services/dto/supplier-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
|
||||
if (!idStr) return null
|
||||
const id = Number(idStr)
|
||||
return Number.isFinite(id) ? id : null
|
||||
}
|
||||
|
||||
const supplierId = computed(() => resolveId(route.params.id))
|
||||
|
||||
const isLoading = ref(false)
|
||||
const errorMsg = ref<string | null>(null)
|
||||
|
||||
const form = reactive<SupplierFormData>({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
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
|
||||
|
||||
form.name = supplier.name ?? ""
|
||||
form.email = supplier.email ?? ""
|
||||
form.phone = supplier.phone ?? ""
|
||||
|
||||
if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) {
|
||||
form.addresses = []
|
||||
return
|
||||
}
|
||||
if (typeof supplier.addresses[0] === "string") {
|
||||
form.addresses = []
|
||||
return
|
||||
}
|
||||
|
||||
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(
|
||||
() => supplierId.value,
|
||||
async (id) => {
|
||||
if (id === null) return
|
||||
isLoading.value = true
|
||||
try {
|
||||
const supplier = await getSupplier(id)
|
||||
hydrateFromSupplier(supplier)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
async function validate() {
|
||||
if (isLoading.value) return
|
||||
isLoading.value = true
|
||||
errorMsg.value = null
|
||||
|
||||
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 supplierPayload: SupplierPayload = {
|
||||
name,
|
||||
email,
|
||||
phone,
|
||||
}
|
||||
|
||||
if (supplierId.value !== null) {
|
||||
await updateSupplier(supplierId.value, supplierPayload)
|
||||
} else {
|
||||
await createSupplier(supplierPayload)
|
||||
}
|
||||
|
||||
await router.push("/admin/supplier/supplier-list")
|
||||
} catch (e) {
|
||||
const errorKey = supplierId.value !== null ? "errors.supplier.update" : "errors.supplier.create"
|
||||
errorMsg.value = String($i18n.t(errorKey))
|
||||
throw e
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -53,6 +53,12 @@
|
||||
"cityRequired": "La ville est obligatoire.",
|
||||
"countryCodeInvalid": "Le pays doit être un code ISO2 (2 lettres)."
|
||||
},
|
||||
"customer": {
|
||||
"list": "Impossible de récupérer la liste des clients.",
|
||||
"fetch": "Impossible de récupérer le client.",
|
||||
"create": "Impossible de créer le client.",
|
||||
"update": "Impossible de mettre à jour le client."
|
||||
},
|
||||
"truck": {
|
||||
"list": "Impossible de récupérer la liste des camions."
|
||||
},
|
||||
@@ -92,6 +98,10 @@
|
||||
"create": "Adresse créée avec succès.",
|
||||
"update": "Adresse mise à jour avec succès."
|
||||
},
|
||||
"customer": {
|
||||
"create": "Client créé avec succès.",
|
||||
"update": "Client mis à jour avec succès."
|
||||
},
|
||||
"auth": {
|
||||
"update": "Utilisateur mis à jour avec succès.",
|
||||
"create": "Utilisateur créé avec succès.",
|
||||
|
||||
@@ -1,8 +1,191 @@
|
||||
<template>
|
||||
<SupplierForm/>
|
||||
<form @submit.prevent="validate">
|
||||
<div class="flex items-center justify-between gap-10">
|
||||
<h1 class="text-3xl font-bold uppercase">
|
||||
{{ supplierId ? "Modifications du fournisseur" : "Ajout d'un fournisseur" }}
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
|
||||
type="submit"
|
||||
:disabled="isLoading || !auth.isAdmin"
|
||||
>
|
||||
{{ supplierId ? "Sauvegarder" : "Ajouter" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-10 py-12 border-b border-black ">
|
||||
<UiTextInput id="supplier-name" v-model="form.name" label="Nom du fournisseur" :disabled="!auth.isAdmin"/>
|
||||
<UiTextInput id="supplier-email" v-model="form.email" label="Email" :disabled="!auth.isAdmin"/>
|
||||
<UiTextInput id="supplier-phone" v-model="form.phone" label="Téléphone" :disabled="!auth.isAdmin"/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-4 py-6 border-t border-black"></div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-3xl font-bold uppercase">Adresses fournisseur</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
|
||||
:disabled="supplierId === null || !auth.isAdmin"
|
||||
@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 hover:bg-slate-50"
|
||||
:class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
|
||||
@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>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
import {computed, reactive, ref, watch} from "vue"
|
||||
import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
|
||||
import type {SupplierData, SupplierFormData, SupplierPayload} from "~/services/dto/supplier-data"
|
||||
import {useAuthStore} from "~/stores/auth"
|
||||
|
||||
definePageMeta({layout: "admin"})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const resolveId = (param: unknown) => {
|
||||
const idStr = Array.isArray(param) ? param[0] : param
|
||||
if (!idStr) return null
|
||||
const id = Number(idStr)
|
||||
return Number.isFinite(id) ? id : null
|
||||
}
|
||||
const supplierId = computed(() => resolveId(route.params.id))
|
||||
const isLoading = ref(false)
|
||||
const form = reactive<SupplierFormData>({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
addresses: [],
|
||||
})
|
||||
|
||||
const goToAddAddress = () => {
|
||||
if (supplierId.value === null || !auth.isAdmin) 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 || !auth.isAdmin) 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
|
||||
if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) {
|
||||
form.addresses = []
|
||||
return
|
||||
}
|
||||
if (typeof supplier.addresses[0] === "string") {
|
||||
form.addresses = []
|
||||
return
|
||||
}
|
||||
|
||||
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(
|
||||
() => supplierId.value,
|
||||
async (id) => {
|
||||
if (id === null) return
|
||||
isLoading.value = true
|
||||
try {
|
||||
const supplier = await getSupplier(id)
|
||||
hydrateFromSupplier(supplier)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
},
|
||||
{immediate: true}
|
||||
)
|
||||
|
||||
async function validate() {
|
||||
if (isLoading.value) return
|
||||
if (!auth.isAdmin) return
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
const name = form.name.trim()
|
||||
const email = (form.email ?? "").trim() || null
|
||||
const phone = (form.phone ?? "").trim() || null
|
||||
|
||||
const supplierPayload: SupplierPayload = {
|
||||
name,
|
||||
email,
|
||||
phone,
|
||||
}
|
||||
|
||||
if (supplierId.value !== null) {
|
||||
await updateSupplier(supplierId.value, supplierPayload)
|
||||
} else {
|
||||
await createSupplier(supplierPayload)
|
||||
}
|
||||
|
||||
await router.push("/admin/supplier/supplier-list")
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,47 @@
|
||||
<template>
|
||||
<AddressAddAddress />
|
||||
<Address type="supplier" :address="address" @validate="validate"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type {AddressData, AddressPayload} from "~/services/address";
|
||||
import {createAddress, getAddress, updateAddress} from "~/services/address";
|
||||
import {getSupplier, updateSupplier} from "~/services/supplier";
|
||||
import type {SupplierData} from "~/services/dto/supplier-data";
|
||||
|
||||
definePageMeta({ layout: "admin" })
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const supplierId = computed(() => { return Number(route.query.supplierId) })
|
||||
const supplier = ref<SupplierData|null>(null);
|
||||
const addressId = computed(() => { return route.query.addressId !== undefined ? Number(route.query.addressId) : null })
|
||||
const address = ref<AddressData|null>(null)
|
||||
|
||||
const validate = async (address: AddressPayload) => {
|
||||
try {
|
||||
if (addressId.value !== null) {
|
||||
await updateAddress(addressId.value, address)
|
||||
} else {
|
||||
await addAddress(address)
|
||||
}
|
||||
} finally {
|
||||
await router.push('/admin/supplier/' + supplierId.value)
|
||||
}
|
||||
}
|
||||
|
||||
const addAddress = async (address: AddressPayload) => {
|
||||
const response: AddressData = await createAddress(address)
|
||||
const addressIRI = `/api/addresses/${response.id}`
|
||||
const existingIris = (supplier.value.addresses ?? []).map((item: any) => `/api/addresses/${item.id}`)
|
||||
const next = [...new Set([...existingIris, addressIRI])]
|
||||
|
||||
return await updateSupplier(supplierId.value, { addresses: next })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
supplier.value = await getSupplier(supplierId.value)
|
||||
if (addressId.value !== null) {
|
||||
address.value = await getAddress(addressId.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -4,12 +4,14 @@
|
||||
<NuxtLink
|
||||
to="/admin/supplier"
|
||||
class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
|
||||
:class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
|
||||
@click="handleAddClick"
|
||||
>
|
||||
Ajouter
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 border border-slate-200 mb-16">
|
||||
<div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
|
||||
<div class="max-h-96 overflow-y-auto">
|
||||
<div
|
||||
class="sticky top-0 z-10 grid grid-cols-7 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
|
||||
@@ -30,19 +32,19 @@
|
||||
<div v-for="supplier in supplierList" :key="supplier.id">
|
||||
<div
|
||||
v-if="!supplier.addresses || supplier.addresses.length === 0"
|
||||
class="grid grid-cols-7 border-t gap-4 px-4 py-2 cursor-pointer hover:bg-slate-50"
|
||||
class="grid grid-cols-7 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
|
||||
@click="goToSupplier(supplier.id)"
|
||||
>
|
||||
<div class="truncate">{{ supplier.name }}</div>
|
||||
<div class="truncate">{{ supplier.email }}</div>
|
||||
<div class="col-span-1">Pas d'adresse</div>
|
||||
<div class="col-span-1"></div>
|
||||
<div class="col-span-1"></div>
|
||||
<div class="col-span-1"></div>
|
||||
<div class="col-span-1"></div>
|
||||
<div class="uppercase truncate">{{"—"}}</div>
|
||||
<div class="uppercase truncate">{{"—"}}</div>
|
||||
<div class="uppercase truncate">{{"—"}}</div>
|
||||
<div class="uppercase truncate">{{"—"}}</div>
|
||||
</div>
|
||||
|
||||
<template v-else-if="isAddressObjectArray(supplier.addresses)">
|
||||
<template v-else-if="supplier.addresses.length > 0">
|
||||
<div
|
||||
v-for="(address, idx) in supplier.addresses"
|
||||
:key="address.id ?? `${supplier.id}-${idx}-${address.street}-${address.postalCode}`"
|
||||
@@ -53,12 +55,12 @@
|
||||
<div class="truncate">
|
||||
{{ idx === 0 ? supplier.name : "↳" }}
|
||||
</div>
|
||||
<div class="truncate">{{ idx === 0 ? supplier.email : "" }}</div>
|
||||
<div class="truncate">{{ address.street }}</div>
|
||||
<div class="truncate">{{ address.street2 }}</div>
|
||||
<div>{{ address.postalCode }}</div>
|
||||
<div class="uppercase truncate">{{ address.city }}</div>
|
||||
<div class="uppercase truncate">{{ address.countryCode }}</div>
|
||||
<div class="truncate">{{ idx === 0 ? supplier.email : "" }}</div>
|
||||
<div class="truncate">{{ address.street || "—" }}</div>
|
||||
<div class="truncate">{{ address.street2 || "—" }}</div>
|
||||
<div>{{ address.postalCode || "—" }}</div>
|
||||
<div class="uppercase truncate">{{ address.city || "—" }}</div>
|
||||
<div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -70,36 +72,41 @@
|
||||
<div class="truncate">{{ supplier.name }}</div>
|
||||
<div class="truncate">{{ supplier.email }}</div>
|
||||
<div class="col-span-5 text-slate-400">
|
||||
Adresses non chargées (IRIs)
|
||||
Adresses non chargées
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
|
||||
Accès réservé aux administrateurs.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getSupplierList } from "~/services/supplier"
|
||||
import type { SupplierData } from "~/services/dto/supplier-data"
|
||||
import type { AddressFormData } from "~/services/dto/address-data"
|
||||
import { useAuthStore } from "~/stores/auth"
|
||||
|
||||
definePageMeta({ layout: "admin" })
|
||||
|
||||
const supplierList = ref<SupplierData[]>([])
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const goToSupplier = (id: number) => {
|
||||
if (!auth.isAdmin) return
|
||||
router.push(`/admin/supplier/${id}`)
|
||||
}
|
||||
|
||||
function isAddressObjectArray(value: SupplierData["addresses"]): value is AddressFormData[] {
|
||||
if (!Array.isArray(value) || value.length === 0) return false
|
||||
const v0 = value[0]
|
||||
return typeof v0 === "object" && v0 !== null && "street" in v0 && "postalCode" in v0
|
||||
const handleAddClick = (event: Event) => {
|
||||
if (auth.isAdmin) return
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.isAdmin) return
|
||||
supplierList.value = await getSupplierList()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -25,7 +25,7 @@ export async function getSupplier(id: number): Promise<SupplierData> {
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateSupplier(id: number, payload: SupplierPayload): Promise<SupplierData> {
|
||||
export async function updateSupplier(id: number, payload: Partial<SupplierPayload>): Promise<SupplierData> {
|
||||
const api = useApi()
|
||||
return api.patch<SupplierData>(`suppliers/${id}`, payload, {
|
||||
toastErrorKey: "errors.supplier.update",
|
||||
|
||||
@@ -26,6 +26,11 @@ use Symfony\Component\Serializer\Attribute\Groups;
|
||||
new GetCollection(
|
||||
normalizationContext: ['groups' => ['supplier:read']],
|
||||
),
|
||||
new GetCollection(
|
||||
uriTemplate: '/admin/suppliers',
|
||||
normalizationContext: ['groups' => ['supplier:read']],
|
||||
security: "is_granted('ROLE_ADMIN')"
|
||||
),
|
||||
new Post(
|
||||
normalizationContext: ['groups' => ['supplier:read']],
|
||||
denormalizationContext: ['groups' => ['supplier:write']],
|
||||
|
||||
Reference in New Issue
Block a user