Files
Ferme/frontend/pages/admin/supplierList.vue

76 lines
2.3 KiB
Vue

<template>
<div class="flex items-center justify-between p-4">
<h1 class="text-xl font-fullbold uppercase"> Fournisseurs </h1>
<a href=""
class="flex items-center justify-center uppercase text-xl bg-primary-500 text-white h-[50px] w-[272px]"
role="button"
>
Ajouter </a>
</div>
<div class="mt-6 border border-slate-200 mb-16">
<div
class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
>
<div>Nom</div>
<div>Mail</div>
<div>Rue</div>
<div>Complément</div>
<div>Code Postal</div>
<div>Ville</div>
</div>
<div v-for="supplier in supplierList" :key="supplier.id">
<template v-if="supplier.addresses?.length">
<div
v-for="addr in supplier.addresses"
:key="addr.id"
class="grid grid-cols-6 gap-4 px-4 py-2 "
@click="goToSupplier(supplier.id)"
>
<div class="truncate">
{{ supplier.name }}
</div>
<div class="truncate">
{{ supplier.email }}
</div>
<div class="truncate">
{{ addr.street }}
</div>
<div class="truncate">
{{ addr.street2 }}
</div>
<div>{{ addr.postalCode }}</div>
<div class="uppercase truncate">
{{ addr.city }}
</div>
</div>
</template>
</div>
</div>
</template>
<script setup lang="ts">
import type {SupplierData} from "~/services/dto/supplier-data"
import {getSupplierList} from "~/services/supplier"
definePageMeta({layout: "admin"})
const supplierList = ref<SupplierData[]>([])
const router = useRouter()
const editSupplier = (id: number) => {
router.push(`/admin/supplier/${id}`)
}
const goToSupplier = (id: number) => {
router.push(`/admin/supplier/${id}`)
}
onMounted(async () => {
supplierList.value = (await getSupplierList(false)) ?? []
})
</script>