feat(sites) : API CRUD + rattachement User<->Site + admin (ticket 2/4)

Exposition de Site via API Platform (5 operations RBAC sites.view/sites.manage),
relation User.sites (M2M user_site EAGER) + User.currentSite (M2O nullable,
ON DELETE SET NULL). Endpoint PATCH /api/me/current-site via ressource
virtuelle + processor (SiteNotAuthorizedException → 403). UserRbacProcessor
etendu avec gardes post-persist : auto-reset si currentSite retire, auto-select
premier site si null + sites non vide.

Page /admin/sites (DataTable + drawer creation/edition + modale suppression).
UserRbacDrawer etendu avec section "Sites autorises". Colonne "Sites" ajoutee
dans la table /admin/users (liste des noms separes par virgule). Sidebar
entree Sites (module: sites, permission: sites.view).

Refactor adresse : split full_address en street + complement (nullable) + getter
computed Site::getFullAddress() multi-lignes. Migration ALTER dediee pour
compat devs ayant deja joue le ticket 1. Fixtures avec vraies adresses
(Chatellerault/Fontenet/Pommevic).

Doctrine : inversedBy synchrone User.sites <-> Site.users pour maintenir la
collection inverse en memoire. User::switchCurrentSite() porte la garde
domaine (throw SiteNotAuthorizedException), aligne sur Role::ensureDeletable.
Helper skipIfSitesModuleDisabled centralise dans AbstractApiTestCase.

Tests : 182/182 (182/182 aussi module desactive, 2 skipped). 29 nouveaux tests
PHPUnit (CRUD API, switch currentSite, cascade DB, /api/me enrichi, extension
/rbac, gardes structurelles fullAddress/currentSite ignores, anti-cycle
Site.users). 11 tests Vitest sur la validation hex couleur.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/modules/core/components/UserRbacDrawer.vue

@@ -64,6 +64,27 @@
                 </div>
             </div>
 
+            <!-- Section Sites autorises (ticket 2 module Sites) -->
+            <div>
+                <h4 class="mb-3 text-sm font-semibold text-neutral-700">
+                    {{ t('admin.users.drawer.sitesSection') }}
+                </h4>
+                <div v-if="allSites.length === 0" class="text-sm text-neutral-400">
+                    {{ t('admin.sites.noSites') }}
+                </div>
+                <div class="flex flex-col gap-2">
+                    <MalioCheckbox
+                        v-for="site in allSites"
+                        :id="`site-${site.id}`"
+                        :key="site.id"
+                        :label="site.name"
+                        :model-value="selectedSiteIds.has(site.id)"
+                        label-class="text-sm text-neutral-600"
+                        @update:model-value="(val: boolean) => toggleSite(site.id, val)"
+                    />
+                </div>
+            </div>
+
             <!-- Section Resume permissions effectives -->
             <div>
                 <h4 class="mb-3 text-sm font-semibold text-neutral-700">
@@ -92,6 +113,7 @@
 
 <script setup lang="ts">
 import type { Permission, Role, UserListItem, EffectivePermission } from '~/shared/types/rbac'
+import type { Site } from '~/shared/types/sites'
 
 interface PermissionModule {
     module: string
@@ -115,10 +137,12 @@ const emit = defineEmits<{
 const saving = ref(false)
 const allRoles = ref<Role[]>([])
 const allPermissions = ref<Permission[]>([])
+const allSites = ref<Site[]>([])
 
 const form = ref({ isAdmin: false })
 const selectedRoleIds = ref(new Set<number>())
 const selectedDirectPermissionIds = ref(new Set<number>())
+const selectedSiteIds = ref(new Set<number>())
 
 // Detecter l'auto-edition
 const isSelfEdit = computed(() => props.user?.id === auth.user?.id)
@@ -182,14 +206,17 @@ const effectivePermissions = computed<EffectivePermission[]>(() => {
         .sort((a, b) => a.code.localeCompare(b.code))
 })
 
-// Charger roles et permissions
+// Charger roles, permissions et sites en parallele pour minimiser le TTFB
+// a l'ouverture du drawer.
 async function loadData() {
-    const [rolesData, permsData] = await Promise.all([
+    const [rolesData, permsData, sitesData] = await Promise.all([
         api.get<{ member: Role[] }>('/roles', {}, { toast: false }),
         api.get<{ member: Permission[] }>('/permissions', { orphan: false, itemsPerPage: 999 }, { toast: false }),
+        api.get<{ member: Site[] }>('/sites', { itemsPerPage: 999 }, { toast: false }),
     ])
     allRoles.value = rolesData.member
     allPermissions.value = permsData.member
+    allSites.value = sitesData.member
 }
 
 // Remplir le formulaire quand le user change
@@ -198,10 +225,12 @@ watch(() => props.user, (user) => {
         form.value.isAdmin = user.isAdmin
         selectedRoleIds.value = new Set(user.roles.map(iriToId))
         selectedDirectPermissionIds.value = new Set(user.directPermissions.map(iriToId))
+        selectedSiteIds.value = new Set((user.sites ?? []).map(iriToId))
     } else {
         form.value.isAdmin = false
         selectedRoleIds.value = new Set()
         selectedDirectPermissionIds.value = new Set()
+        selectedSiteIds.value = new Set()
     }
 }, { immediate: true })
 
@@ -235,6 +264,13 @@ function handleToggleAll(module: string, selected: boolean) {
     selectedDirectPermissionIds.value = ids
 }
 
+function toggleSite(id: number, selected: boolean) {
+    const ids = new Set(selectedSiteIds.value)
+    if (selected) ids.add(id)
+    else ids.delete(id)
+    selectedSiteIds.value = ids
+}
+
 async function handleSave() {
     if (!props.user) return
     saving.value = true
@@ -243,6 +279,7 @@ async function handleSave() {
             isAdmin: form.value.isAdmin,
             roles: Array.from(selectedRoleIds.value).map(id => `/api/roles/${id}`),
             directPermissions: Array.from(selectedDirectPermissionIds.value).map(id => `/api/permissions/${id}`),
+            sites: Array.from(selectedSiteIds.value).map(id => `/api/sites/${id}`),
         }, {
             toastSuccessMessage: t('admin.users.toast.updated'),
         })

frontend/modules/core/pages/admin/users.vue

@@ -38,6 +38,7 @@
 
 <script setup lang="ts">
 import type { UserListItem } from '~/shared/types/rbac'
+import type { Site } from '~/shared/types/sites'
 
 const { t } = useI18n()
 const api = useApi()
@@ -48,6 +49,7 @@ useHead({ title: t('admin.users.title') })
 const canManage = computed(() => can('core.users.manage'))
 
 const users = ref<UserListItem[]>([])
+const sitesById = ref(new Map<number, Site>())
 const loading = ref(false)
 const drawerOpen = ref(false)
 const selectedUser = ref<UserListItem | null>(null)
@@ -57,8 +59,14 @@ const columns = [
     { key: 'admin', label: t('admin.users.table.admin') },
     { key: 'roles', label: t('admin.users.table.roles') },
     { key: 'directPermissions', label: t('admin.users.table.directPermissions') },
+    { key: 'sites', label: t('admin.users.table.sites') },
 ]
 
+// Extraire l'id numerique depuis une IRI API Platform type `/api/sites/3`.
+function iriToId(iri: string): number {
+    return Number(iri.split('/').pop())
+}
+
 const userItems = computed(() =>
     users.value.map(user => ({
         id: user.id,
@@ -66,18 +74,27 @@ const userItems = computed(() =>
         admin: user.isAdmin,
         roles: user.roles.length,
         directPermissions: user.directPermissions.length,
-    }))
+        // Affichage : liste des noms de sites separes par virgule. Les IRIs
+        // du payload /api/users (groupe user:list) sont resolues via la Map
+        // construite en parallele depuis /api/sites.
+        sites: (user.sites ?? [])
+            .map(iri => sitesById.value.get(iriToId(iri))?.name)
+            .filter((name): name is string => Boolean(name))
+            .join(', '),
+    })),
 )
 
 async function loadUsers() {
     loading.value = true
     try {
-        const data = await api.get<{ member: UserListItem[] }>(
-            '/users',
-            {},
-            { toast: false },
-        )
-        users.value = data.member
+        // Chargement parallele : les sites alimentent la Map de resolution
+        // IRI→name pour la colonne "Sites" de la table.
+        const [usersData, sitesData] = await Promise.all([
+            api.get<{ member: UserListItem[] }>('/users', {}, { toast: false }),
+            api.get<{ member: Site[] }>('/sites', { itemsPerPage: 999 }, { toast: false }),
+        ])
+        users.value = usersData.member
+        sitesById.value = new Map(sitesData.member.map(s => [s.id, s]))
     } finally {
         loading.value = false
     }

frontend/modules/sites/components/SiteDeleteModal.vue

@@ -0,0 +1,76 @@
+<template>
+    <Teleport to="body">
+        <Transition name="fade">
+            <div
+                v-if="modelValue"
+                class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+                @click.self="cancel"
+            >
+                <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+                    <h3 class="text-lg font-semibold text-neutral-900">
+                        {{ t('admin.sites.delete.title') }}
+                    </h3>
+                    <p class="mt-3 text-sm text-neutral-600">
+                        {{ t('admin.sites.delete.message', { name: siteName }) }}
+                    </p>
+                    <div class="mt-6 flex justify-end gap-3">
+                        <MalioButton
+                            :label="t('common.cancel')"
+                            variant="secondary"
+                            @click="cancel"
+                        />
+                        <MalioButton
+                            :label="t('common.delete')"
+                            variant="danger"
+                            icon-name="mdi:delete-outline"
+                            icon-position="left"
+                            :disabled="loading"
+                            @click="confirm"
+                        />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+defineProps<{
+    modelValue: boolean
+    siteName: string
+    loading: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    confirm: []
+}>()
+
+function cancel() {
+    emit('update:modelValue', false)
+}
+
+function confirm() {
+    emit('confirm')
+}
+
+function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') cancel()
+}
+
+onMounted(() => document.addEventListener('keydown', onKeydown))
+onUnmounted(() => document.removeEventListener('keydown', onKeydown))
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

frontend/modules/sites/components/SiteDrawer.vue

@@ -0,0 +1,185 @@
+<template>
+    <MalioDrawer
+        :model-value="modelValue"
+        :title="isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite')"
+        drawer-class="w-full max-w-lg"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <form class="flex flex-col gap-6 p-4" @submit.prevent="handleSave">
+            <MalioInputText
+                v-model="form.name"
+                :label="t('admin.sites.form.name')"
+                input-class="w-full"
+                required
+            />
+
+            <MalioInputText
+                v-model="form.street"
+                :label="t('admin.sites.form.street')"
+                input-class="w-full"
+                required
+            />
+
+            <MalioInputText
+                v-model="form.complement"
+                :label="t('admin.sites.form.complement')"
+                :placeholder="t('admin.sites.form.complementPlaceholder')"
+                input-class="w-full"
+            />
+
+            <!-- Code postal FR : masque "#####" (5 chiffres stricts) +
+                 maxLength en double securite. La regex backend validera la
+                 forme finale, le masque empeche juste la saisie de
+                 caracteres non numeriques. -->
+            <MalioInputText
+                v-model="form.postalCode"
+                :label="t('admin.sites.form.postalCode')"
+                input-class="w-full"
+                mask="#####"
+                max-length="5"
+                required
+            />
+
+            <MalioInputText
+                v-model="form.city"
+                :label="t('admin.sites.form.city')"
+                input-class="w-full"
+                required
+            />
+
+            <!-- Champ couleur avec preview puce -->
+            <div>
+                <label class="mb-1 block text-sm font-semibold text-neutral-700">
+                    {{ t('admin.sites.form.color') }}
+                </label>
+                <div class="flex items-center gap-3">
+                    <MalioInputText
+                        v-model="form.color"
+                        placeholder="#RRGGBB"
+                        input-class="w-full font-mono"
+                        required
+                    />
+                    <span
+                        :style="{ backgroundColor: isValidHex ? form.color : 'transparent' }"
+                        class="inline-block size-10 shrink-0 rounded-lg border border-neutral-200"
+                        :class="{ 'border-dashed': !isValidHex }"
+                    />
+                </div>
+                <p v-if="form.color && !isValidHex" class="mt-1 text-xs text-red-600">
+                    {{ t('admin.sites.form.colorInvalid') }}
+                </p>
+            </div>
+
+            <!-- Boutons -->
+            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
+                <MalioButton
+                    v-if="isEditMode"
+                    :label="t('common.delete')"
+                    variant="danger"
+                    icon-name="mdi:delete-outline"
+                    icon-position="left"
+                    @click="emit('delete')"
+                />
+                <MalioButton
+                    v-else
+                    :label="t('common.cancel')"
+                    variant="tertiary"
+                    @click="emit('update:modelValue', false)"
+                />
+                <MalioButton
+                    :label="t('common.save')"
+                    variant="primary"
+                    :disabled="saving || !isValidHex"
+                    @click="handleSave"
+                />
+            </div>
+        </form>
+    </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Site } from '~/shared/types/sites'
+import { isValidSiteColor } from '~/modules/sites/utils/color'
+
+const { t } = useI18n()
+const api = useApi()
+
+const props = defineProps<{
+    modelValue: boolean
+    site: Site | null
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    saved: []
+    delete: []
+}>()
+
+const saving = ref(false)
+
+const form = ref({
+    name: '',
+    street: '',
+    complement: '',
+    postalCode: '',
+    city: '',
+    color: '#000000',
+})
+
+const isEditMode = computed(() => props.site !== null)
+
+// Validation locale du format hex #RRGGBB avant envoi backend.
+const isValidHex = computed(() => isValidSiteColor(form.value.color))
+
+// Remplir le formulaire quand le site change
+watch(() => props.site, (site) => {
+    if (site) {
+        form.value.name = site.name
+        form.value.street = site.street
+        form.value.complement = site.complement ?? ''
+        form.value.postalCode = site.postalCode
+        form.value.city = site.city
+        form.value.color = site.color
+    } else {
+        form.value.name = ''
+        form.value.street = ''
+        form.value.complement = ''
+        form.value.postalCode = ''
+        form.value.city = ''
+        form.value.color = '#056CF2'
+    }
+}, { immediate: true })
+
+async function handleSave() {
+    if (!isValidHex.value) return
+    saving.value = true
+    try {
+        // Le champ complement est optionnel cote DB : on envoie null si vide
+        // pour que le backend stocke NULL plutot qu'une chaine vide.
+        const trimmedComplement = form.value.complement.trim()
+        const payload = {
+            name: form.value.name,
+            street: form.value.street,
+            complement: trimmedComplement === '' ? null : trimmedComplement,
+            postalCode: form.value.postalCode,
+            city: form.value.city,
+            color: form.value.color,
+        }
+
+        if (isEditMode.value && props.site) {
+            await api.patch(`/sites/${props.site.id}`, payload, {
+                toastSuccessMessage: t('admin.sites.toast.updated'),
+            })
+        } else {
+            await api.post('/sites', payload, {
+                toastSuccessMessage: t('admin.sites.toast.created'),
+            })
+        }
+
+        emit('saved')
+        emit('update:modelValue', false)
+    } finally {
+        saving.value = false
+    }
+}
+</script>

frontend/modules/sites/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

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

@@ -0,0 +1,164 @@
+<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 -->
+        <MalioDataTable
+            class="mt-6"
+            :columns="columns"
+            :items="siteItems"
+            :total-items="sites.length"
+            :row-clickable="canManage"
+            :empty-message="t('admin.sites.noSites')"
+            @row-click="onRowClick"
+        >
+            <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') })
+
+const sites = ref<Site[]>([])
+const loading = ref(false)
+
+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(() =>
+    sites.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 sites.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)
+
+async function loadSites() {
+    loading.value = true
+    try {
+        const data = await api.get<{ member: Site[] }>(
+            '/sites',
+            { itemsPerPage: 999 },
+            { toast: false },
+        )
+        sites.value = data.member
+    } finally {
+        loading.value = 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
+        await loadSites()
+    } finally {
+        deleting.value = false
+    }
+}
+
+function onSiteSaved() {
+    loadSites()
+}
+
+onMounted(() => {
+    loadSites()
+})
+</script>

frontend/modules/sites/utils/__tests__/color.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { isValidSiteColor } from '../color'
+
+describe('isValidSiteColor', () => {
+    it('accepte un hex majuscule', () => {
+        expect(isValidSiteColor('#ABCDEF')).toBe(true)
+    })
+
+    it('accepte un hex minuscule', () => {
+        expect(isValidSiteColor('#abcdef')).toBe(true)
+    })
+
+    it('accepte un hex mixte', () => {
+        expect(isValidSiteColor('#0a1B2c')).toBe(true)
+    })
+
+    it('accepte les couleurs fixtures du projet', () => {
+        expect(isValidSiteColor('#056CF2')).toBe(true)
+        expect(isValidSiteColor('#10B981')).toBe(true)
+        expect(isValidSiteColor('#F59E0B')).toBe(true)
+    })
+
+    it('rejette un nom CSS', () => {
+        expect(isValidSiteColor('red')).toBe(false)
+    })
+
+    it('rejette un hex court (3 caracteres)', () => {
+        expect(isValidSiteColor('#FFF')).toBe(false)
+    })
+
+    it('rejette un hex sans diese', () => {
+        expect(isValidSiteColor('FFFFFF')).toBe(false)
+    })
+
+    it('rejette un format rgb()', () => {
+        expect(isValidSiteColor('rgb(255, 0, 0)')).toBe(false)
+    })
+
+    it('rejette un hex trop long', () => {
+        expect(isValidSiteColor('#1234567')).toBe(false)
+    })
+
+    it('rejette un caractere non hex', () => {
+        expect(isValidSiteColor('#12345G')).toBe(false)
+    })
+
+    it('rejette une chaine vide', () => {
+        expect(isValidSiteColor('')).toBe(false)
+    })
+})

frontend/modules/sites/utils/color.ts

@@ -0,0 +1,15 @@
+/**
+ * Validation du format de couleur d'un site.
+ *
+ * Aligne sur la regex backend (Site entity) : seul le format #RRGGBB
+ * strict est accepte, avec 6 caracteres hexadecimaux apres le #.
+ * Tolere la casse (majuscules, minuscules, mixte).
+ *
+ * Utilise par SiteDrawer pour bloquer le submit cote front avant qu'une
+ * requete invalide parte au backend.
+ */
+const HEX_COLOR_REGEX = /^#[0-9A-Fa-f]{6}$/
+
+export function isValidSiteColor(hex: string): boolean {
+    return HEX_COLOR_REGEX.test(hex)
+}