Starseed/frontend/modules/sites/pages/admin/sites.vue

<template>
    <div>
        <!-- En-tete -->
        <div class="flex items-center justify-between">
            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
                {{ t('admin.sites.title') }}
            </h1>
            <MalioButton
                v-if="can('sites.manage')"
                :label="t('admin.sites.newSite')"
                icon-name="mdi:plus"
                icon-position="left"
                @click="openCreateDrawer"
            />
        </div>

        <!-- Table des sites avec filtres + pagination -->
        <MalioDataTable
            v-model:page="page"
            v-model:per-page="perPage"
            class="mt-6"
            :columns="columns"
            :items="siteItems"
            :total-items="totalItems"
            :row-clickable="canManage"
            :empty-message="t('admin.sites.noSites')"
            @row-click="onRowClick"
        >
            <template #header-name>
                <input
                    v-model="filters.name"
                    type="text"
                    :placeholder="t('admin.sites.table.name')"
                    class="w-full border-0 border-b border-black bg-transparent px-0 py-1 text-xl outline-none"
                >
            </template>
            <template #header-city>
                <input
                    v-model="filters.city"
                    type="text"
                    :placeholder="t('admin.sites.table.city')"
                    class="w-full border-0 border-b border-black bg-transparent px-0 py-1 text-xl outline-none"
                >
            </template>
            <template #header-postalCode>
                <input
                    v-model="filters.postalCode"
                    type="text"
                    :placeholder="t('admin.sites.table.postalCode')"
                    class="w-full border-0 border-b border-black bg-transparent px-0 py-1 text-xl outline-none"
                >
            </template>

            <template #cell-color="{ item }">
                <span class="inline-flex items-center gap-2">
                    <span
                        :style="{ backgroundColor: item.color }"
                        class="inline-block size-5 rounded-full border border-neutral-200"
                    />
                    <span class="font-mono text-xs">{{ item.color }}</span>
                </span>
            </template>
            <template #cell-fullAddress="{ item }">
                <span class="line-clamp-2 text-xs text-neutral-600">
                    {{ item.fullAddress }}
                </span>
            </template>
        </MalioDataTable>

        <!-- Drawer creation/edition -->
        <SiteDrawer
            v-model="drawerOpen"
            :site="selectedSite"
            @saved="onSiteSaved"
            @delete="onDeleteRequest"
        />

        <!-- Modale de suppression -->
        <SiteDeleteModal
            v-model="deleteModalOpen"
            :site-name="siteToDelete?.name ?? ''"
            :loading="deleting"
            @confirm="handleDelete"
        />
    </div>
</template>

<script setup lang="ts">
import type { Site } from '~/shared/types/sites'

const { t } = useI18n()
const api = useApi()
const { can } = usePermissions()
const canManage = computed(() => can('sites.manage'))

useHead({ title: t('admin.sites.title') })

// Etat DataTable centralise : pagination serveur + filtres debounces.
// Les filtres name/city/postalCode sont des partiels SearchFilter cote API.
const {
    items,
    totalItems,
    page,
    perPage,
    filters,
    reload,
} = useDataTableServerState<Site>('/sites', {
    name: '',
    city: '',
    postalCode: '',
})

const columns = [
    { key: 'name', label: t('admin.sites.table.name') },
    { key: 'city', label: t('admin.sites.table.city') },
    { key: 'postalCode', label: t('admin.sites.table.postalCode') },
    { key: 'color', label: t('admin.sites.table.color') },
    { key: 'fullAddress', label: t('admin.sites.table.fullAddress') },
]

// Transformer les sites en items compatibles MalioDataTable.
// `fullAddress` provient du getter computed cote backend (Site::getFullAddress)
// au format multi-lignes — on l'aplatit en virgules pour l'affichage table.
const siteItems = computed(() =>
    items.value.map(site => ({
        id: site.id,
        name: site.name,
        city: site.city,
        postalCode: site.postalCode,
        color: site.color,
        fullAddress: site.fullAddress.split('\n').join(', '),
    })),
)

function getSiteById(id: number): Site | undefined {
    return items.value.find(s => s.id === id)
}

function onRowClick(item: Record<string, unknown>) {
    const site = getSiteById(item.id as number)
    if (site) openEditDrawer(site)
}

const drawerOpen = ref(false)
const selectedSite = ref<Site | null>(null)
const deleteModalOpen = ref(false)
const siteToDelete = ref<Site | null>(null)
const deleting = ref(false)

function openCreateDrawer() {
    selectedSite.value = null
    drawerOpen.value = true
}

function openEditDrawer(site: Site) {
    selectedSite.value = site
    drawerOpen.value = true
}

function onDeleteRequest() {
    if (!selectedSite.value) return
    siteToDelete.value = selectedSite.value
    deleteModalOpen.value = true
}

async function handleDelete() {
    if (!siteToDelete.value) return
    deleting.value = true
    try {
        await api.delete(`/sites/${siteToDelete.value.id}`, {}, {
            toastSuccessMessage: t('admin.sites.toast.deleted'),
        })
        deleteModalOpen.value = false
        siteToDelete.value = null
        drawerOpen.value = false
        reload()
    } finally {
        deleting.value = false
    }
}

function onSiteSaved() {
    reload()
}

onMounted(() => {
    reload()
})
</script>