feat : plan du site (WIP)
This commit is contained in:
@@ -1,274 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="min-h-screen">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<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 class="mt-6 border border-slate-200 mb-16">
|
|
||||||
<div
|
|
||||||
v-for="entry in buildingLayouts"
|
|
||||||
:key="entry.building.id"
|
|
||||||
class="border-t border-slate-200 first:border-t-0"
|
|
||||||
>
|
|
||||||
<div class="bg-slate-100 px-4 py-3 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">
|
|
||||||
<template v-for="cell in entry.cells" :key="cell.key">
|
|
||||||
<div
|
|
||||||
v-if="cell.isEmpty"
|
|
||||||
class="h-[50px] border-l-[2.5px] border-r-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]"
|
|
||||||
:style="cell.spanStyle"
|
|
||||||
></div>
|
|
||||||
<NuxtLink
|
|
||||||
v-else
|
|
||||||
class="flex items-center justify-center border border-slate-200 border-y-black hover:bg-primary-500/15 h-[50px]"
|
|
||||||
:class="[
|
|
||||||
!cell.caseId ? 'border-l-[2.5px] border-r-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]' : '',
|
|
||||||
cell.hasGapLeft ? 'border-l-0' : '',
|
|
||||||
cell.hasGapRight ? 'border-r-0' : '',
|
|
||||||
cell.isOuterLeft ? '[border-left-style:dotted] border-l-[2.5px] border-l-slate-300' : '',
|
|
||||||
cell.isOuterRight ? '[border-right-style:dotted] border-r-[2.5px] border-r-slate-300' : ''
|
|
||||||
]"
|
|
||||||
:style="[cell.spanStyle, cell.caseStyle]"
|
|
||||||
:to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
|
|
||||||
:title="cell.caseStatusLabel ?? undefined"
|
|
||||||
>
|
|
||||||
{{ cell.display }}
|
|
||||||
</NuxtLink>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-16 border border-slate-200">
|
|
||||||
<div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide uppercase">
|
|
||||||
legendes
|
|
||||||
</div>
|
|
||||||
<div class="px-4 py-4">
|
|
||||||
<div v-if="statutLegend.length === 0" class="text-sm text-slate-400">
|
|
||||||
Aucun statut disponible.
|
|
||||||
</div>
|
|
||||||
<div v-else class="flex flex-wrap gap-3">
|
|
||||||
<div
|
|
||||||
v-for="statut in statutLegend"
|
|
||||||
:key="statut.id"
|
|
||||||
class="inline-flex items-center gap-2 rounded border border-slate-200 bg-white px-3 py-2"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="h-4 w-4 rounded border border-slate-300"
|
|
||||||
:style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
|
|
||||||
></span>
|
|
||||||
<span class="text-sm uppercase text-slate-700">
|
|
||||||
{{ statut.label || "Sans libellé" }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</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 buildingLayouts = computed(() => {
|
|
||||||
return buildingList.value.map((building) => {
|
|
||||||
const layout = building.layouts?.[0] ?? null
|
|
||||||
const view = layout ? buildLayoutView(layout) : null
|
|
||||||
return {
|
|
||||||
building,
|
|
||||||
layout,
|
|
||||||
cells: view?.cells ?? [],
|
|
||||||
columnsTemplate: view?.columnsTemplate,
|
|
||||||
gridStyle: view?.gridStyle ?? {}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
type LayoutCell = {
|
|
||||||
key: string
|
|
||||||
x: number
|
|
||||||
y: number
|
|
||||||
w: number
|
|
||||||
h: number
|
|
||||||
isEmpty: boolean
|
|
||||||
caseNumber: number | null
|
|
||||||
caseId: number | null
|
|
||||||
display: string
|
|
||||||
rawId?: number | string
|
|
||||||
hasGapLeft: boolean
|
|
||||||
hasGapRight: boolean
|
|
||||||
isOuterLeft: boolean
|
|
||||||
isOuterRight: boolean
|
|
||||||
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 buildLayoutView = (
|
|
||||||
layout: BuildingLayoutData
|
|
||||||
): { cells: LayoutCell[]; columnsTemplate: string; gridStyle: Record<string, string> } | null => {
|
|
||||||
const totalRows = layout.rows ?? 0
|
|
||||||
const totalCols = layout.columns ?? 0
|
|
||||||
if (totalRows <= 0 || totalCols <= 0) return null
|
|
||||||
const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
|
|
||||||
|
|
||||||
// éviter des doublons/chevauchements dans la grille pour les spans.
|
|
||||||
const covered = Array.from({ length: totalRows }, () => Array.from({ length: totalCols }, () => false))
|
|
||||||
|
|
||||||
// map positions by (x,y)
|
|
||||||
const map = new Map<string, BuildingCasePositionData>()
|
|
||||||
const occupiedColumns = new Set<number>()
|
|
||||||
|
|
||||||
for (const p of positions) {
|
|
||||||
const rawX = p.x ?? 1
|
|
||||||
const rawY = p.y ?? 1
|
|
||||||
const key = `${rawX}-${rawY}`
|
|
||||||
if (!map.has(key)) map.set(key, p)
|
|
||||||
occupiedColumns.add(rawX)
|
|
||||||
}
|
|
||||||
const cells: LayoutCell[] = []
|
|
||||||
const gapColumns: number[] = []
|
|
||||||
for (let x = 1; x <= totalCols; x++) {
|
|
||||||
if (!occupiedColumns.has(x)) gapColumns.push(x)
|
|
||||||
}
|
|
||||||
const gapColumnsSet = new Set(gapColumns)
|
|
||||||
|
|
||||||
for (let y = 1; y <= totalRows; y++) {
|
|
||||||
for (let x = 1; x <= totalCols; x++) {
|
|
||||||
if (covered[y - 1][x - 1]) continue
|
|
||||||
const p = map.get(`${x}-${y}`)
|
|
||||||
if (!p) continue
|
|
||||||
const w = p.w ?? 1
|
|
||||||
const h = p.h ?? 1
|
|
||||||
for (let dy = 0; dy < h; dy++) {
|
|
||||||
for (let dx = 0; dx < w; dx++) {
|
|
||||||
const ty = y - 1 + dy
|
|
||||||
const tx = x - 1 + dx
|
|
||||||
if (ty < totalRows && tx < totalCols) covered[ty][tx] = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const caseNumber = (p.buildingCase?.caseNumber ?? null) as number | null
|
|
||||||
const caseId = (p.buildingCase?.id ?? null) as number | null
|
|
||||||
const statusLabel = p.buildingCase?.statut?.label ?? null
|
|
||||||
const statusColor = normalizeCaseStatusColor(p.buildingCase?.statut?.couleur)
|
|
||||||
const caseStatusLabel = statusLabel
|
|
||||||
const caseStyle = statusColor
|
|
||||||
? { backgroundColor: statusColor }
|
|
||||||
: undefined
|
|
||||||
const spanStyle = {
|
|
||||||
gridColumn: `${x} / span ${w}`,
|
|
||||||
gridRow: `${y} / span ${h}`
|
|
||||||
}
|
|
||||||
const hasGapLeft = gapColumnsSet.has(x - 1)
|
|
||||||
const hasGapRight = gapColumnsSet.has(x + w)
|
|
||||||
const isOuterLeft = x === 1
|
|
||||||
const isOuterRight = x + w - 1 === totalCols
|
|
||||||
cells.push({
|
|
||||||
key: `case-${layout.id}-${p.id}`,
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
w,
|
|
||||||
h,
|
|
||||||
isEmpty: false,
|
|
||||||
caseNumber,
|
|
||||||
caseId,
|
|
||||||
display: caseNumber !== null ? String(caseNumber) : "Case",
|
|
||||||
rawId: p.id,
|
|
||||||
hasGapLeft,
|
|
||||||
hasGapRight,
|
|
||||||
isOuterLeft,
|
|
||||||
isOuterRight,
|
|
||||||
caseStatusLabel,
|
|
||||||
caseStyle,
|
|
||||||
spanStyle
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const gapX of gapColumns) {
|
|
||||||
const spanStyle = {
|
|
||||||
gridColumn: `${gapX} / span 1`,
|
|
||||||
gridRow: `${y} / span 1`
|
|
||||||
}
|
|
||||||
cells.push({
|
|
||||||
key: `gap-${layout.id}-${y}-${gapX}`,
|
|
||||||
x: gapX,
|
|
||||||
y,
|
|
||||||
w: 1,
|
|
||||||
h: 1,
|
|
||||||
isEmpty: true,
|
|
||||||
caseNumber: null,
|
|
||||||
caseId: null,
|
|
||||||
display: "",
|
|
||||||
rawId: undefined,
|
|
||||||
hasGapLeft: false,
|
|
||||||
hasGapRight: false,
|
|
||||||
isOuterLeft: gapX === 1,
|
|
||||||
isOuterRight: gapX === totalCols,
|
|
||||||
caseStatusLabel: null,
|
|
||||||
caseStyle: undefined,
|
|
||||||
spanStyle
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const columnsTemplate = Array.from({ length: totalCols }, (_, idx) =>
|
|
||||||
gapColumnsSet.has(idx + 1) ? "24px" : "minmax(0, 1fr)"
|
|
||||||
).join(" ")
|
|
||||||
const cols = Math.max(0, layout.columns ?? 0)
|
|
||||||
const gridStyle = {
|
|
||||||
gridTemplateColumns: columnsTemplate ?? `repeat(${cols}, minmax(0, 1fr))`,
|
|
||||||
gridAutoRows: "1fr",
|
|
||||||
rowGap: "18px",
|
|
||||||
columnGap: "0px",
|
|
||||||
width: "100%"
|
|
||||||
}
|
|
||||||
|
|
||||||
return { cells, columnsTemplate, gridStyle }
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const buildingsPromise = getBuildingList()
|
|
||||||
const statutsPromise = getStatutList()
|
|
||||||
const buildings = await buildingsPromise
|
|
||||||
const statuts = await statutsPromise
|
|
||||||
buildingList.value = buildings
|
|
||||||
statutLegend.value = [...statuts].sort((a, b) =>
|
|
||||||
(a.label ?? "").localeCompare(b.label ?? "", "fr", { sensitivity: "base" })
|
|
||||||
)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
194
frontend/pages/infrastructure/building.vue
Normal file
194
frontend/pages/infrastructure/building.vue
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<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 class="border border-slate-200">
|
||||||
|
<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">
|
||||||
|
{{ 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">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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"
|
||||||
|
@mouseenter="activeLegendStatutId = statut.id"
|
||||||
|
@mouseleave="activeLegendStatutId = null"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="h-4 w-4 rounded 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>
|
||||||
|
</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 { 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 ?? {} }
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
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 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 gapColumns = Array.from({ length: cols }, (_, i) => i + 1).filter((x) => !occupied.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 } }
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
@@ -7,3 +7,14 @@ export interface BuildingLayoutData {
|
|||||||
rows: number | null
|
rows: number | null
|
||||||
casePositions?: BuildingCasePositionData[] | 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
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user