feat : plan du site (WIP)

frontend/pages/infrastructure/building.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="min-h-screen">
-        <div class="flex items-center justify-between">
+        <div class="flex items-center justify-between mb-4">
             <div class="flex items-center gap-10">
                 <Icon
                     @click="router.push('/')"
@@ -13,13 +13,13 @@
         </div>
 
         <div class="px-[86px]">
-            <div class="border border-slate-200">
+            <div>
                 <div
                     v-for="entry in buildingLayouts"
                     :key="entry.building.id"
-                    class="border-t border-slate-200"
+
                 >
-                    <div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide">
+                    <div class="  font-semibold tracking-wide">
                         {{ entry.building.label || `Bâtiment ${entry.building.id}` }}
                     </div>
 
@@ -31,23 +31,17 @@
                         <div v-else>
                             <div class="overflow-auto">
                                 <div class="grid" :style="entry.gridStyle">
-                                    <template v-for="cell in entry.cells" :key="cell.key">
-                                        <div
-                                            v-if="cell.isEmpty"
-                                            class="h-[50px] border-x-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]"
-                                            :style="cell.spanStyle"
-                                        ></div>
-                                        <NuxtLink
-                                            v-else
-                                            class="relative flex items-center justify-center border-2 border-x-white border-y-black h-[50px]"
-                                            :class="cell.baseClass + (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>
-                                    </template>
+                                    <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>
                                 </div>
                             </div>
                         </div>
@@ -55,21 +49,17 @@
                 </div>
             </div>
 
-            <div class="mb-16 border border-slate-200">
-                <div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide ">
-                    Légende
-                </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 rounded border border-slate-200 px-2 py-1"
+                            class="inline-flex cursor-pointer items-center gap-2  px-2 py-1"
                             @mouseenter="activeLegendStatutId = statut.id"
                             @mouseleave="activeLegendStatutId = null"
                         >
                             <span
-                                class="h-4 w-4 rounded border border-slate-300"
+                                class="h-5 w-5 border border-slate-300"
                                 :style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
                             ></span>
                             <span class="text-sm uppercase text-slate-700">
@@ -80,12 +70,12 @@
                 </div>
             </div>
         </div>
-    </div>
+
 </template>
 
 <script setup lang="ts">
 import type { BuildingData } from "~/services/dto/building-data"
-import type { BuildingLayoutData, LayoutCell } from "~/services/dto/building-layout-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"
@@ -106,79 +96,57 @@ const buildingLayouts = computed(() =>
     })
 )
 
+type GridCell = {
+    key: string
+    caseId: number | null
+    display: string
+    caseStatusId: number | null
+    caseStatusLabel: string | null
+    caseStyle?: Record<string, string>
+    spanStyle: Record<string, string>
+}
+
 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 createEmptyCell = (key: string, spanStyle: Record<string, string>): LayoutCell => ({
-    key,
-    isEmpty: true,
-    caseId: null,
-    display: "",
-    caseStatusId: null,
-    caseStatusLabel: null,
-    caseStyle: undefined,
-    spanStyle,
-    baseClass: ""
-})
-const buildLayoutView = (layout: BuildingLayoutData): { cells: LayoutCell[]; gridStyle: Record<string, string> } | null => {
+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
     const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
-    const covered = Array.from({ length: rows }, () => Array.from({ length: cols }, () => false))
-    const map = new Map<string, BuildingCasePositionData>()
-    const occupied = new Set<number>()
-    for (const position of positions) {
-        const x = position.x ?? 1, y = position.y ?? 1
-        const key = `${x}-${y}`
-        if (!map.has(key)) map.set(key, position)
-        occupied.add(x)
+    const occupiedColumns = new Set<number>()
+    const seenCoordinates = new Set<string>()
+    const cells: GridCell[] = []
+    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
+        const y = position.y ?? 1
+        const coordinateKey = `${x}-${y}`
+        if (seenCoordinates.has(coordinateKey)) continue
+        seenCoordinates.add(coordinateKey)
+        occupiedColumns.add(x)
+
+        const columnSpan = position.w ?? 1
+        const rowSpan = position.h ?? 1
+        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({
+            key: `case-${layout.id}-${position.id}`,
+            caseId,
+            display: caseNumber !== null ? String(caseNumber) : "Case",
+            caseStatusId,
+            caseStatusLabel,
+            caseStyle: statusColor ? { backgroundColor: statusColor } : undefined,
+            spanStyle: { gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}` }
+        })
     }
-    const gapColumns = Array.from({ length: cols }, (_, i) => i + 1).filter((x) => !occupied.has(x))
+    const gapColumns = Array.from({ length: cols }, (_, i) => i + 1).filter((x) => !occupiedColumns.has(x))
     const gapSet = new Set(gapColumns)
-    const cells: LayoutCell[] = []
-    for (let y = 1; y <= rows; y++) {
-        for (let x = 1; x <= cols; x++) {
-            if (covered[y - 1][x - 1]) continue
-            const position = map.get(`${x}-${y}`)
-            if (!position) continue
-            const columnSpan = position.w ?? 1, rowSpan = position.h ?? 1
-            for (let row = y - 1; row < y - 1 + rowSpan; row++) {
-                for (let col = x - 1; col < x - 1 + columnSpan; col++) {
-                    if (row < rows && col < cols) covered[row][col] = true
-                }
-            }
-            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)
-            const caseStyle = statusColor ? { backgroundColor: statusColor } : undefined
-            const baseClass = [
-                !caseId ? "border-x-[3px] [border-left-style:dotted] [border-right-style:dotted]" : "",
-                caseId ? "hover:opacity-85 focus-visible:outline-none" : "hover:opacity-85",
-                gapSet.has(x - 1) ? "border-l-0" : "",
-                gapSet.has(x + columnSpan) ? "border-r-0" : "",
-                x === 1 ? "[border-left-style:dotted] border-l-[3px]" : "",
-                x + columnSpan - 1 === cols ? "[border-right-style:dotted] border-r-[3px]" : ""
-            ].filter(Boolean).join(" ")
-            cells.push({
-                key: `case-${layout.id}-${position.id}`,
-                isEmpty: false,
-                caseId,
-                display: caseNumber !== null ? String(caseNumber) : "Case",
-                caseStatusId,
-                caseStatusLabel,
-                caseStyle,
-                spanStyle: { gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}` },
-                baseClass
-            })
-        }
-        for (const gapX of gapColumns) {
-            cells.push(createEmptyCell(`gap-${layout.id}-${y}-${gapX}`, { gridColumn: `${gapX} / span 1`, gridRow: `${y} / span 1` }))
-        }
-    }
     const columnsTemplate = Array.from({ length: cols }, (_, i) => (gapSet.has(i + 1) ? "24px" : "minmax(0, 1fr)")).join(" ")
     return { cells, gridStyle: { gridTemplateColumns: columnsTemplate, ...BASE_GRID_STYLE } }
 }