Ferme/frontend/pages/admin/customer/customer-list.vue

<template>
    <div class="flex items-center justify-between">
        <h1 class="text-3xl font-bold uppercase">Liste des Clients</h1>
        <NuxtLink
            to="/admin/customer"
            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 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-8 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
            >
                <div>Nom</div>
                <div>Téléphone</div>
                <div>Email</div>
                <div>Rue</div>
                <div>Complément</div>
                <div>Code Postal</div>
                <div>Ville</div>
                <div>Pays</div>
            </div>

            <div v-if="customerList.length === 0" class="px-4 py-6 text-slate-400">
                Aucun client.
            </div>

            <div v-for="customer in customerList" :key="customer.id">
                <div
                    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"
                    @click="goToCustomer(customer.id)"
                >
                    <div class="truncate">{{ customer.name || "—" }}</div>
                    <div class="truncate">{{ customer.phone || "—" }}</div>
                    <div class="truncate">{{ customer.email || "—" }}</div>
                    <div class="col-span-1">Pas d'adresse</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="customer.addresses.length > 0">
                    <div
                        v-for="(address, idx) in customer.addresses"
                        :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="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
                        @click="goToCustomer(customer.id)"
                    >
                        <div class="truncate">
                            {{ idx === 0 ? (customer.name || "—") : "↳" }}
                        </div>
                        <div class="truncate">{{ idx === 0 ? (customer.phone || "—") : ""  }}</div>
                        <div class="truncate">{{ idx === 0 ? (customer.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>

                <template v-else>
                    <div
                        class="grid grid-cols-8 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
                        @click="goToCustomer(customer.id)"
                    >
                        <div class="truncate">{{ customer.name || "—" }}</div>
                        <div class="truncate">{{ customer.phone || "—" }}</div>
                        <div class="truncate">{{ customer.email || "—" }}</div>
                        <div class="col-span-5 text-slate-400">
                            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 { getCustomerList } from "~/services/customer"
import type { CustomerData } from "~/services/dto/customer-data"
import { useAuthStore } from "~/stores/auth"

definePageMeta({ layout: "default" })

const customerList = ref<CustomerData[]>([])
const router = useRouter()
const auth = useAuthStore()

const goToCustomer = (id: number) => {
    if (!auth.isAdmin) return
    router.push(`/admin/customer/${id}`)
}

const handleAddClick = (event: Event) => {
    if (auth.isAdmin) return
    event.preventDefault()
}

onMounted(async () => {
    if (!auth.isAdmin) return
    customerList.value = await getCustomerList()
})
</script>