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

feat : front page admin client et changelog et text

Browse Source
This commit is contained in:
Sebastien Roy
2026-02-27 14:01:27 +01:00
parent a0557b077b
commit 19ff94c3b7
8 changed files with 72 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -55,7 +55,8 @@ Ajouter dans le fichier .env du frontend
* [#332] Refonte écran réception terminée * [#332] Refonte écran réception terminée
* [#327] afficher/modifier écran expédition terminée * [#327] afficher/modifier écran expédition terminée
* [#352] modification front admin fournisseur * [#352] modification front admin fournisseur
* [#355] afficher/modifier écran expédition terminée * [#355] modification front admin transporteur
* [#353] modification front admin client
### Changed ### Changed
### Fixed ### Fixed

2
frontend/pages/admin/carrier/[[id]].vue
View File

@@ -11,7 +11,7 @@
/> />
</div> </div>
<h1 class="text-4xl text-primary-500 font-bold uppercase"> <h1 class="text-4xl text-primary-500 font-bold uppercase">
{{ route.params.id ? 'Modifications du transporteur' : 'Ajout d\'un transporteur' }} {{ route.params.id ? 'Modification du transporteur' : 'Ajout d\'un transporteur' }}
</h1> </h1>
</div> </div>

81
frontend/pages/admin/customer/[[id]].vue
View File

@@ -1,12 +1,22 @@
<template> <template>
<form @submit.prevent="validate"> <form @submit.prevent="validate">
<div class="flex items-center justify-between"> <div class="flex items-center relative">
<h1 class="text-3xl font-bold uppercase"> <div class="flex flex-row absolute -left-[60px] ">
{{ customerId ? "Modifications du client" : "Ajout d'un client" }} <Icon @click="router.push('/admin/customer/customer-list')" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
</div>
<h1 class="text-3xl text-primary-500 font-bold uppercase">
{{ customerId ? "Modification du client" : "Ajout d'un client" }}
</h1> </h1>
</div>
<div class="flex flex-cols-3 justify-between mb-11 pt-7">
<UiTextInput id="customer-name" v-model="form.name" label="Nom du client" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
<UiTextInput id="customer-phone" v-model="form.phone" label="Téléphone" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
<UiTextInput id="customer-email" v-model="form.email" label="Email" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
</div>
<div class="flex items-center justify-center">
<UiButton <UiButton
class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2" class="inline-flex mb-28 items-center justify-center text-xl min-w-[194px] text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
type="submit" type="submit"
:disabled="isLoading || !auth.isAdmin" :disabled="isLoading || !auth.isAdmin"
> >
@@ -15,35 +25,19 @@
</UiButton> </UiButton>
</div> </div>
<div class="grid grid-cols-2 gap-y-8 gap-x-80 mb-10 py-12"> <div class="flex items-center justify-between mb-7">
<UiTextInput id="customer-name" v-model="form.name" label="Nom du client" :disabled="!auth.isAdmin"/> <h2 class="text-3xl text-primary-500 font-bold uppercase">Adresses du client</h2>
<UiTextInput id="customer-phone" v-model="form.phone" label="Téléphone" :disabled="!auth.isAdmin"/>
<UiTextInput id="customer-email" v-model="form.email" label="Email" :disabled="!auth.isAdmin"/>
</div> </div>
<div class="overflow-x-auto mb-11 text-primary-700">
<div class="mx-24 mb-4 py-6 border-t border-black"></div> <table class="w-full border-collapse text-primary-700">
<div class="flex items-center justify-between mb-4">
<h2 class="text-3xl font-bold uppercase">Adresses client</h2>
<UiButton
type="button"
class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
:disabled="customerId === null || !auth.isAdmin"
@click="goToAddAddress"
>
<Icon name="mdi:plus" size="28" />
Ajouter
</UiButton>
</div>
<div class="overflow-x-auto mb-10">
<table class="w-full border-collapse">
<thead> <thead>
<tr class="text-left border-b border-gray-200"> <tr class="text-left border bg-slate-100 border-gray-200">
<th class="py-3 pr-4 text-sm uppercase">Libellé</th> <th class="py-3 px-4 text-sm uppercase">Libellé</th>
<th class="py-3 pr-4 text-sm uppercase">Rue</th> <th class="py-3 px-4 text-sm uppercase">Rue</th>
<th class="py-3 pr-4 text-sm uppercase">Complément</th> <th class="py-3 px-4 text-sm uppercase">Complément</th>
<th class="py-3 pr-4 text-sm uppercase">Code postal</th> <th class="py-3 px-4 text-sm uppercase">Code postal</th>
<th class="py-3 pr-4 text-sm uppercase">Ville</th> <th class="py-3 px-4 text-sm uppercase">Ville</th>
<th class="py-3 pr-4 text-sm uppercase">Pays</th> <th class="py-3 px-4 text-sm uppercase">Pays</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -58,21 +52,32 @@
<tr <tr
v-for="(address, index) in form.addresses" v-for="(address, index) in form.addresses"
:key="address.id ?? index" :key="address.id ?? index"
class="border-b border-gray-100 hover:bg-slate-50" class="border border-gray-100 hover:bg-slate-50"
:class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'" :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
@click="goToEditAddress(address.id ?? null)" @click="goToEditAddress(address.id ?? null)"
> >
<td class="py-3 pr-4">{{ address.label || "—" }}</td> <td class="py-3 px-4">{{ address.label || "—" }}</td>
<td class="py-3 pr-4">{{ address.street || "—" }}</td> <td class="py-3 px-4">{{ address.street || "—" }}</td>
<td class="py-3 pr-4">{{ address.street2 || "—" }}</td> <td class="py-3 px-4">{{ address.street2 || "—" }}</td>
<td class="py-3 pr-4">{{ address.postalCode || "—" }}</td> <td class="py-3 px-4">{{ address.postalCode || "—" }}</td>
<td class="py-3 pr-4">{{ address.city || "—" }}</td> <td class="py-3 px-4">{{ address.city || "—" }}</td>
<td class="py-3 pr-4">{{ address.countryCode || "—" }}</td> <td class="py-3 px-4">{{ address.countryCode || "—" }}</td>
</tr> </tr>
</template> </template>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="flex justify-center items-center">
<UiButton
type="button"
class="inline-flex items-center justify-center text-xl gap-2 text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
:disabled="customerId === null || !auth.isAdmin"
@click="goToAddAddress"
>
<Icon name="mdi:plus" size="28" />
Ajouter
</UiButton>
</div>
</form> </form>
</template> </template>

11
frontend/pages/admin/customer/address.vue
View File

@@ -16,13 +16,10 @@ const addressId = computed(() => (route.query.addressId !== undefined ? Number(r
const address = ref<AddressData | null>(null) const address = ref<AddressData | null>(null)
const validate = async (payload: AddressPayload) => { const validate = async (payload: AddressPayload) => {
try { if (addressId.value !== null) {
if (addressId.value !== null) { await updateAddress(addressId.value, payload)
await updateAddress(addressId.value, payload) } else {
} else { await addAddress(payload)
await addAddress(payload)
}
} finally {
await router.push("/admin/customer/" + customerId.value) await router.push("/admin/customer/" + customerId.value)
} }
} }

34
frontend/pages/admin/customer/customer-list.vue
View File

@@ -1,21 +1,12 @@
<template> <template>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h1 class="text-3xl font-bold uppercase text-primary-500">Liste des Clients</h1> <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des clients</h1>
<NuxtLink
to="/admin/customer"
class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
:class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
@click="handleAddClick"
>
<Icon name="mdi:plus" size="28" />
Ajouter
</NuxtLink>
</div> </div>
<div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16"> <div v-if="auth.isAdmin" class="mt-7 border border-slate-200 mb-11">
<div class="max-h-96 overflow-y-auto"> <div class="max-h-96 overflow-y-auto">
<div <div
class="sticky top-0 z-10 grid grid-cols-8 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide" class="sticky text-primary-700 top-0 z-10 grid grid-cols-8 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
> >
<div>Nom</div> <div>Nom</div>
<div>Téléphone</div> <div>Téléphone</div>
@@ -34,7 +25,7 @@
<div v-for="customer in customerList" :key="customer.id"> <div v-for="customer in customerList" :key="customer.id">
<div <div
v-if="!customer.addresses || customer.addresses.length === 0" v-if="!customer.addresses || customer.addresses.length === 0"
class="grid grid-cols-8 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer" class="grid text-primary-700 grid-cols-8 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
@click="goToCustomer(customer.id)" @click="goToCustomer(customer.id)"
> >
<div class="truncate">{{ customer.name || "—" }}</div> <div class="truncate">{{ customer.name || "—" }}</div>
@@ -51,7 +42,7 @@
<div <div
v-for="(address, idx) in customer.addresses" v-for="(address, idx) in customer.addresses"
:key="address.id ?? `${customer.id}-${idx}-${address.street}-${address.postalCode}`" :key="address.id ?? `${customer.id}-${idx}-${address.street}-${address.postalCode}`"
class="grid grid-cols-8 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer" class="grid grid-cols-8 text-primary-700 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
:class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''" :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
@click="goToCustomer(customer.id)" @click="goToCustomer(customer.id)"
> >
@@ -70,7 +61,7 @@
<template v-else> <template v-else>
<div <div
class="grid grid-cols-8 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer" class="grid grid-cols-8 text-primary-700 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
@click="goToCustomer(customer.id)" @click="goToCustomer(customer.id)"
> >
<div class="truncate">{{ customer.name || "—" }}</div> <div class="truncate">{{ customer.name || "—" }}</div>
@@ -84,9 +75,20 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400"> <div v-else class="mt-7 border border-slate-200 mb-11 px-4 py-6 text-slate-400">
Accès réservé aux administrateurs. Accès réservé aux administrateurs.
</div> </div>
<div class="flex justify-center items-center">
<NuxtLink
to="/admin/customer"
class="inline-flex items-center mb-16 justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
:class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
@click="handleAddClick"
>
<Icon name="mdi:plus" size="28" />
Ajouter
</NuxtLink>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

4
frontend/pages/admin/supplier/[[id]].vue
View File

@@ -6,7 +6,7 @@
<Icon @click="router.push('/admin/supplier/supplier-list')" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/> <Icon @click="router.push('/admin/supplier/supplier-list')" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
</div> </div>
<h1 class="text-3xl text-primary-500 font-bold uppercase"> <h1 class="text-3xl text-primary-500 font-bold uppercase">
{{ supplierId ? "Modifications du fournisseur" : "Ajout d'un fournisseur" }} {{ supplierId ? "Modification du fournisseur" : "Ajout d'un fournisseur" }}
</h1> </h1>
</div> </div>
@@ -27,7 +27,7 @@
</div> </div>
<div class="flex items-center justify-between mb-7"> <div class="flex items-center justify-between mb-7">
<h2 class="text-3xl text-primary-500 font-bold uppercase">Adresses fournisseur</h2> <h2 class="text-3xl text-primary-500 font-bold uppercase">Adresses du fournisseur</h2>
</div> </div>
<div class="overflow-x-auto mb-11 text-primary-700"> <div class="overflow-x-auto mb-11 text-primary-700">
<table class="w-full border-collapse"> <table class="w-full border-collapse">

5
frontend/pages/admin/supplier/address.vue
View File

@@ -16,15 +16,12 @@ const addressId = computed(() => { return route.query.addressId !== undefined ?
const address = ref<AddressData|null>(null) const address = ref<AddressData|null>(null)
const validate = async (address: AddressPayload) => { const validate = async (address: AddressPayload) => {
try {
if (addressId.value !== null) { if (addressId.value !== null) {
await updateAddress(addressId.value, address) await updateAddress(addressId.value, address)
} else { } else {
await addAddress(address) await addAddress(address)
await router.push('/admin/supplier/' + supplierId.value)
} }
} finally {
await router.push('/admin/supplier/' + supplierId.value)
}
} }
const addAddress = async (address: AddressPayload) => { const addAddress = async (address: AddressPayload) => {

2
frontend/pages/admin/user/[[id]].vue
View File

@@ -3,7 +3,7 @@
<div <div
class="flex items-center justify-between gap-10"> class="flex items-center justify-between gap-10">
<h1 class="text-3xl font-bold uppercase"> <h1 class="text-3xl font-bold uppercase">
{{ userId ? "Modifications de l'utilisateur" : "Ajout d'un utilisateur" }} {{ userId ? "Modification de l'utilisateur" : "Ajout d'un utilisateur" }}
</h1> </h1>
<UiButton <UiButton
class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2" class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"