From 527fb776680b31f54a0ce8601e621d746c073cf0 Mon Sep 17 00:00:00 2001
From: Matteo <matteo@yuno.malio.fr>
Date: Mon, 23 Feb 2026 14:33:18 +0100
Subject: [PATCH] feat : plan du site (WIP)

---
 frontend/pages/infrastructure/building.vue    | 211 ++++++++++++------
 frontend/services/dto/building-layout-data.ts |  11 -
 2 files changed, 144 insertions(+), 78 deletions(-)

diff --git a/frontend/pages/infrastructure/building.vue b/frontend/pages/infrastructure/building.vue
index 638318e..4ee1aa1 100644
--- a/frontend/pages/infrastructure/building.vue
+++ b/frontend/pages/infrastructure/building.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="min-h-screen">
-        <div class="flex items-center justify-between mb-4">
+        <!-- En-tête de page avec retour et titre -->
+        <div class="flex items-center justify-between mb-8">
             <div class="flex items-center gap-10">
                 <Icon
                     @click="router.push('/')"
@@ -12,87 +13,102 @@
             </div>
         </div>
 
-        <div class="px-[86px]">
-            <div>
-                <div
-                    v-for="entry in buildingLayouts"
-                    :key="entry.building.id"
+        <div class="px-[86px] space-y-6">
+            <!-- Liste des bâtiments + rendu du plan de chaque bâtiment -->
+            <div
+                v-for="entry in buildingLayouts"
+                :key="entry.building.id"
+            >
+                <div class="font-semibold tracking-wide">
+                    {{ entry.building.label || `Bâtiment ${entry.building.id}` }}
+                </div>
 
-                >
-                    <div class="  font-semibold tracking-wide">
-                        {{ entry.building.label || `Bâtiment ${entry.building.id}` }}
+                <div class="py-4">
+                    <!-- Aucun layout disponible pour ce bâtiment -->
+                    <div v-if="!entry.layout" class="text-sm text-slate-400">
+                        Aucun plan de bâtiment.
                     </div>
 
-                    <div class="px-4 py-4">
-                        <div v-if="!entry.layout" class="text-sm text-slate-400">
-                            Aucun plan de bâtiment.
-                        </div>
-
-                        <div v-else>
-                            <div class="overflow-auto">
-                                <div class="grid" :style="entry.gridStyle">
-                                    <NuxtLink
-                                        v-for="cell in entry.cells"
-                                        :key="cell.key"
-                                        class="relative flex items-center justify-center h-[50px] border-y-2 border-y-black hover:opacity-85 focus-visible:outline-none"
-                                        :class="activeLegendStatutId !== null && cell.caseStatusId !== activeLegendStatutId ? 'opacity-35 hover:opacity-70' : ''"
-                                        :style="[cell.spanStyle, cell.caseStyle]"
-                                        :to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
-                                        :title="cell.caseStatusLabel ?? undefined"
-                                    >
-                                        {{ cell.display }}
-                                    </NuxtLink>
+                    <!-- Grille CSS : les cases sont positionnées via spanStyle -->
+                    <div v-else class="overflow-auto">
+                        <div class="grid" :style="entry.gridStyle">
+                            <NuxtLink
+                                v-for="cell in entry.cells"
+                                :key="cell.key"
+                                class="relative text-white flex h-[50px] items-center justify-center border-y-[3px] border-y-black bg-white hover:opacity-85 focus-visible:outline-none"
+                                :class="[cell.sideBorderClass, activeLegendStatutId !== null && cell.caseStatusId !== activeLegendStatutId ? 'opacity-35 hover:opacity-70' : '']"
+                                :style="[cell.spanStyle, cell.sideBorderStyle]"
+                                :to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
+                                :title="cell.caseStatusLabel ?? undefined"
+                            >
+                                <!-- Le blanc latéral est géré sur ce bloc interne (conditionnel par voisinage) -->
+                                <div
+                                    class="flex h-full w-full items-center justify-center bg-white"
+                                    :class="cell.contentInsetClass"
+                                    :style="cell.caseStyle"
+                                >
+                                    <!-- Numéro de case -->
+                                    {{ cell.display }}
                                 </div>
-                            </div>
+                            </NuxtLink>
                         </div>
                     </div>
                 </div>
             </div>
 
-                <div class="px-4 py-4">
-                    <div class="flex flex-wrap gap-3">
-                        <div
-                            v-for="statut in statutLegend"
-                            :key="statut.id"
-                            class="inline-flex cursor-pointer items-center gap-2  px-2 py-1"
-                            @mouseenter="activeLegendStatutId = statut.id"
-                            @mouseleave="activeLegendStatutId = null"
-                        >
-                            <span
-                                class="h-5 w-5 border border-slate-300"
-                                :style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
-                            ></span>
-                            <span class="text-sm uppercase text-slate-700">
-                                {{ statut.label}}
-                            </span>
-                        </div>
+            <!-- Légende : survol d'un statut => atténue les autres cases -->
+            <div class="py-4">
+                <!-- 3 zones fixes pour forcer gauche / centre / droite sur toute la largeur -->
+                <div class="grid w-full grid-cols-3 gap-3">
+                    <div
+                        v-for="(statut, index) in statutLegend"
+                        :key="statut.id"
+                        class="flex min-w-0 cursor-pointer items-center gap-2 py-1"
+                        :class="[
+                            index === 0 ? 'justify-self-start' : '',
+                            index === statutLegend.length - 1 ? 'justify-self-end' : '',
+                            index > 0 && index < statutLegend.length - 1 ? 'justify-self-center' : ''
+                        ]"
+                        @mouseenter="activeLegendStatutId = statut.id"
+                        @mouseleave="activeLegendStatutId = null"
+                    >
+                        <span
+                            class="h-5 w-5 border border-slate-300"
+                            :style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
+                        ></span>
+                        <span class="truncate text-sm uppercase text-slate-700">
+                            {{ statut.label }}
+                        </span>
                     </div>
                 </div>
             </div>
         </div>
-
+    </div>
 </template>
 
 <script setup lang="ts">
-import type { BuildingData } from "~/services/dto/building-data"
-import type { BuildingLayoutData } from "~/services/dto/building-layout-data"
-import type { BuildingCasePositionData } from "~/services/dto/building-case-position-data"
-import type { BuildingCaseStatusData } from "~/services/dto/building-case-status-data"
-import { getBuildingList } from "~/services/building"
-import { getStatutList } from "~/services/statut"
+import type {BuildingData} from "~/services/dto/building-data"
+import type {BuildingLayoutData} from "~/services/dto/building-layout-data"
+import type {BuildingCasePositionData} from "~/services/dto/building-case-position-data"
+import type {BuildingCaseStatusData} from "~/services/dto/building-case-status-data"
+import {getBuildingList} from "~/services/building"
+import {getStatutList} from "~/services/statut"
 
-
-definePageMeta({ layout: "default" })
+definePageMeta({layout: "default"})
 
 const router = useRouter()
+// Données brutes chargées depuis l'API
 const buildingList = ref<BuildingData[]>([])
 const statutLegend = ref<BuildingCaseStatusData[]>([])
+// Statut actuellement survolé dans la légende (pour filtrage visuel)
 const activeLegendStatutId = ref<number | null>(null)
+// Modèle de vue prêt pour le template (layout + cellules + styles de grille)
 const buildingLayouts = computed(() =>
     buildingList.value.map((building) => {
+        // On affiche uniquement le premier layout du bâtiment
         const layout = building.layouts?.[0] ?? null
         const view = layout ? buildLayoutView(layout) : null
-        return { building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {} }
+        return {building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {}}
     })
 )
 
@@ -102,22 +118,46 @@ type GridCell = {
     display: string
     caseStatusId: number | null
     caseStatusLabel: string | null
+    // Couleur de fond de la case (dépend du statut)
     caseStyle?: Record<string, string>
+    // Placement dans la grille CSS (colonne/ligne de départ + span)
     spanStyle: Record<string, string>
+    // Bordures latérales pointillées si la case touche un gap ou le bord du plan
+    sideBorderClass: string
+    // Couleur des bordures pointillées latérales (reprend la couleur de la cellule)
+    sideBorderStyle?: Record<string, string>
+    // Espace blanc interne uniquement côté(s) adjacent(s) à une autre case
+    contentInsetClass: string
 }
+// Type intermédiaire : garde des infos utiles au calcul des bordures, retirées ensuite
+type GridCellDraft = Omit<GridCell, "sideBorderClass" | "sideBorderStyle" | "contentInsetClass"> & { x: number; columnSpan: number }
 
+// Nettoie la couleur de statut pour éviter les chaînes vides / espaces
 const normalizeCaseStatusColor = (value: string | null | undefined): string | null => {
     const color = (value ?? "").trim()
     return color.length > 0 ? color : null
 }
-const BASE_GRID_STYLE = { gridAutoRows: "1fr", rowGap: "18px", columnGap: "0px", width: "100%" } as const
-const buildLayoutView = (layout: BuildingLayoutData): { cells: GridCell[]; gridStyle: Record<string, string> } | null => {
+
+// Styles de base communs à toutes les grilles de bâtiments
+const BASE_GRID_STYLE = {gridAutoRows: "1fr", rowGap: "18px", columnGap: "0px", width: "100%"} as const
+
+// Transforme un layout API en structure de rendu (cellules + style de grille)
+const buildLayoutView = (layout: BuildingLayoutData): {
+    cells: GridCell[];
+    gridStyle: Record<string, string>
+} | null => {
     const rows = layout.rows ?? 0, cols = layout.columns ?? 0
     if (rows <= 0 || cols <= 0) return null
+
+    // Liste des positions de cases (filtre de sécurité sur les valeurs nulles)
     const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
+    // Colonnes occupées par au moins une case (sert à détecter les gaps)
     const occupiedColumns = new Set<number>()
+    // Sécurité : si deux positions ont le même x/y, on garde la première
     const seenCoordinates = new Set<string>()
-    const cells: GridCell[] = []
+    const cellDrafts: GridCellDraft[] = []
+
+    // Tri visuel : de haut en bas, puis de gauche à droite
     const positionsSorted = [...positions].sort((a, b) => (a.y ?? 1) - (b.y ?? 1) || (a.x ?? 1) - (b.x ?? 1))
     for (const position of positionsSorted) {
         const x = position.x ?? 1
@@ -125,38 +165,75 @@ const buildLayoutView = (layout: BuildingLayoutData): { cells: GridCell[]; gridS
         const coordinateKey = `${x}-${y}`
         if (seenCoordinates.has(coordinateKey)) continue
         seenCoordinates.add(coordinateKey)
-        occupiedColumns.add(x)
 
+        // w/h = nombre de colonnes / lignes occupées par la case dans la grille
         const columnSpan = position.w ?? 1
         const rowSpan = position.h ?? 1
+
+        // Une case peut couvrir plusieurs colonnes : on les marque toutes comme occupées
+        for (let column = x; column < x + columnSpan; column++) {
+            if (column <= cols) occupiedColumns.add(column)
+        }
+
+        // Métadonnées utiles au rendu / navigation / légende
         const caseId = (position.buildingCase?.id ?? null) as number | null
         const caseNumber = (position.buildingCase?.caseNumber ?? null) as number | null
         const caseStatusId = position.buildingCase?.statut?.id ?? null
         const caseStatusLabel = position.buildingCase?.statut?.label ?? null
         const statusColor = normalizeCaseStatusColor(position.buildingCase?.statut?.couleur)
 
-        cells.push({
+        cellDrafts.push({
             key: `case-${layout.id}-${position.id}`,
+            x,
+            columnSpan,
             caseId,
             display: caseNumber !== null ? String(caseNumber) : "Case",
             caseStatusId,
             caseStatusLabel,
-            caseStyle: statusColor ? { backgroundColor: statusColor } : undefined,
-            spanStyle: { gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}` }
+            caseStyle: statusColor ? {backgroundColor: statusColor} : undefined,
+            // Exemple : "14 / span 1" => commence en colonne 14 et occupe 1 colonne
+            spanStyle: {gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}`}
         })
     }
-    const gapColumns = Array.from({ length: cols }, (_, i) => i + 1).filter((x) => !occupiedColumns.has(x))
+
+    // Colonnes vides = gaps visuels (plus étroites dans la grille)
+    const gapColumns = Array.from({length: cols}, (_, i) => i + 1).filter((x) => !occupiedColumns.has(x))
     const gapSet = new Set(gapColumns)
-    const columnsTemplate = Array.from({ length: cols }, (_, i) => (gapSet.has(i + 1) ? "24px" : "minmax(0, 1fr)")).join(" ")
-    return { cells, gridStyle: { gridTemplateColumns: columnsTemplate, ...BASE_GRID_STYLE } }
+
+    // Ajoute les bordures latérales pointillées pour les cases au contact d'un gap ou d'un bord
+    const cells: GridCell[] = cellDrafts.map(({x, columnSpan, ...cell}) => {
+        const touchesLeftGapOrEdge = x === 1 || gapSet.has(x - 1)
+        const touchesRightGapOrEdge = x + columnSpan - 1 === cols || gapSet.has(x + columnSpan)
+        const sideBorderClass = [
+            touchesLeftGapOrEdge ? "border-l-[3px] [border-left-style:dashed]" : "",
+            touchesRightGapOrEdge ? "border-r-[3px] [border-right-style:dashed]" : ""
+        ].filter(Boolean).join(" ")
+        // Les pointillés latéraux reprennent la couleur de la cellule (si un statut en fournit une)
+        const sideBorderStyle = {
+            ...(cell.caseStyle?.backgroundColor && touchesLeftGapOrEdge ? {borderLeftColor: cell.caseStyle.backgroundColor} : {}),
+            ...(cell.caseStyle?.backgroundColor && touchesRightGapOrEdge ? {borderRightColor: cell.caseStyle.backgroundColor} : {})
+        }
+        // Le "blanc" n'est ajouté qu'entre deux cellules adjacentes (pas sur bord/gap)
+        const contentInsetClass = [
+            !touchesLeftGapOrEdge ? "ml-[4px]" : "",
+            !touchesRightGapOrEdge ? "mr-[4px]" : ""
+        ].filter(Boolean).join(" ")
+        return {...cell, sideBorderClass, sideBorderStyle, contentInsetClass}
+    })
+
+    // Les colonnes de gap sont rendues en 24px, les autres occupent l'espace restant
+    const columnsTemplate = Array.from({length: cols}, (_, i) => (gapSet.has(i + 1) ? "24px" : "minmax(0, 1fr)")).join(" ")
+    return {cells, gridStyle: {gridTemplateColumns: columnsTemplate, ...BASE_GRID_STYLE}}
 }
 
 onMounted(async () => {
+    // Chargement initial des bâtiments et de la légende des statuts
     const buildings = await getBuildingList()
     const statuts = await getStatutList()
     buildingList.value = buildings
+    // Tri alphabétique FR pour une légende stable
     statutLegend.value = [...statuts].sort((a, b) =>
-        (a.label ?? "").localeCompare(b.label ?? "", "fr", { sensitivity: "base" })
+        (a.label ?? "").localeCompare(b.label ?? "", "fr", {sensitivity: "base"})
     )
 })
 </script>
diff --git a/frontend/services/dto/building-layout-data.ts b/frontend/services/dto/building-layout-data.ts
index 73e9de4..f9a2661 100644
--- a/frontend/services/dto/building-layout-data.ts
+++ b/frontend/services/dto/building-layout-data.ts
@@ -7,14 +7,3 @@ export interface BuildingLayoutData {
     rows: number | null
     casePositions?: BuildingCasePositionData[] | null
 }
-export type LayoutCell = {
-    key: string
-    isEmpty: boolean
-    caseId: number | null
-    display: string
-    caseStatusId: number | null
-    caseStatusLabel: string | null
-    caseStyle?: Record<string, string>
-    spanStyle: Record<string, string>
-    baseClass: string
-}