Ferme/frontend/pages/infrastructure/building.vue

<template>
    <div class="min-h-screen">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-10">
                <Icon
                    @click="router.push('/')"
                    name="gg:arrow-left-o"
                    size="44"
                    class="cursor-pointer text-primary-500"
                />
                <h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
            </div>
        </div>

        <div class="px-[86px]">
            <div>
                <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="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>
                                </div>
                            </div>
                        </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>
                    </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"


definePageMeta({ layout: "default" })

const router = useRouter()
const buildingList = ref<BuildingData[]>([])
const statutLegend = ref<BuildingCaseStatusData[]>([])
const activeLegendStatutId = ref<number | null>(null)
const buildingLayouts = computed(() =>
    buildingList.value.map((building) => {
        const layout = building.layouts?.[0] ?? null
        const view = layout ? buildLayoutView(layout) : null
        return { building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {} }
    })
)

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 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 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) => !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 } }
}

onMounted(async () => {
    const buildings = await getBuildingList()
    const statuts = await getStatutList()
    buildingList.value = buildings
    statutLegend.value = [...statuts].sort((a, b) =>
        (a.label ?? "").localeCompare(b.label ?? "", "fr", { sensitivity: "base" })
    )
})
</script>