Add store location map manager #20
@ -22,7 +22,9 @@ export default function LocationMapCanvas({
|
|||||||
svgRef,
|
svgRef,
|
||||||
dragState,
|
dragState,
|
||||||
editingLocked = false,
|
editingLocked = false,
|
||||||
|
hiddenAreaCount = 0,
|
||||||
onShowZones,
|
onShowZones,
|
||||||
|
onShowHiddenAreas,
|
||||||
setDragState,
|
setDragState,
|
||||||
setSelectedObjectKey,
|
setSelectedObjectKey,
|
||||||
remember,
|
remember,
|
||||||
@ -35,6 +37,9 @@ export default function LocationMapCanvas({
|
|||||||
? objects.filter((object) => object.visible).length
|
? objects.filter((object) => object.visible).length
|
||||||
: 0;
|
: 0;
|
||||||
const hasNoVisibleObjects = objects.length > 0 && filters.showZones && visibleObjectCount === 0;
|
const hasNoVisibleObjects = objects.length > 0 && filters.showZones && visibleObjectCount === 0;
|
||||||
|
const canRecoverHiddenAreas =
|
||||||
|
mode === "edit" && hasNoVisibleObjects && hiddenAreaCount > 0 && typeof onShowHiddenAreas === "function";
|
||||||
|
const hasEmptyCanvasAction = hiddenByZonesLayer || canRecoverHiddenAreas;
|
||||||
const emptyCanvasMessage = objects.length === 0
|
const emptyCanvasMessage = objects.length === 0
|
||||||
? "No map areas yet"
|
? "No map areas yet"
|
||||||
: hiddenByZonesLayer
|
: hiddenByZonesLayer
|
||||||
@ -155,6 +160,11 @@ export default function LocationMapCanvas({
|
|||||||
onShowZones?.();
|
onShowZones?.();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleShowHiddenAreas = (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onShowHiddenAreas?.();
|
||||||
|
};
|
||||||
|
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
if (suppressPanClickRef.current) {
|
if (suppressPanClickRef.current) {
|
||||||
suppressPanClickRef.current = false;
|
suppressPanClickRef.current = false;
|
||||||
@ -392,7 +402,7 @@ export default function LocationMapCanvas({
|
|||||||
<div
|
<div
|
||||||
className={[
|
className={[
|
||||||
"location-map-empty-canvas",
|
"location-map-empty-canvas",
|
||||||
hiddenByZonesLayer ? "has-action" : "",
|
hasEmptyCanvasAction ? "has-action" : "",
|
||||||
].filter(Boolean).join(" ")}
|
].filter(Boolean).join(" ")}
|
||||||
>
|
>
|
||||||
<span>{emptyCanvasMessage}</span>
|
<span>{emptyCanvasMessage}</span>
|
||||||
@ -404,6 +414,14 @@ export default function LocationMapCanvas({
|
|||||||
>
|
>
|
||||||
Show Zones
|
Show Zones
|
||||||
</button>
|
</button>
|
||||||
|
) : canRecoverHiddenAreas ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onPointerDown={(event) => event.stopPropagation()}
|
||||||
|
onClick={handleShowHiddenAreas}
|
||||||
|
>
|
||||||
|
Show Hidden
|
||||||
|
</button>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@ -558,6 +558,7 @@ export default function LocationMapManager() {
|
|||||||
svgRef={svgRef}
|
svgRef={svgRef}
|
||||||
dragState={dragState}
|
dragState={dragState}
|
||||||
editingLocked={saving}
|
editingLocked={saving}
|
||||||
|
hiddenAreaCount={hiddenAreaCount}
|
||||||
setDragState={setDragState}
|
setDragState={setDragState}
|
||||||
setSelectedObjectKey={setSelectedObjectKey}
|
setSelectedObjectKey={setSelectedObjectKey}
|
||||||
remember={remember}
|
remember={remember}
|
||||||
@ -568,6 +569,7 @@ export default function LocationMapManager() {
|
|||||||
showZones: true,
|
showZones: true,
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
onShowHiddenAreas={handleShowHiddenAreas}
|
||||||
/>
|
/>
|
||||||
<LocationMapBottomSheet
|
<LocationMapBottomSheet
|
||||||
mode={mode}
|
mode={mode}
|
||||||
|
|||||||
@ -596,7 +596,7 @@ test("admin selecting an object does not mark a draft dirty until it changes", a
|
|||||||
await expect(page.getByRole("button", { name: "Undo" })).toBeEnabled();
|
await expect(page.getByRole("button", { name: "Undo" })).toBeEnabled();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("admin can recover hidden map areas from the edit sheet", async ({ page }) => {
|
test("admin can recover hidden map areas from the empty canvas", async ({ page }) => {
|
||||||
await mockMapShell(page);
|
await mockMapShell(page);
|
||||||
|
|
||||||
let savedPayload: Record<string, unknown> | null = null;
|
let savedPayload: Record<string, unknown> | null = null;
|
||||||
@ -655,11 +655,13 @@ test("admin can recover hidden map areas from the edit sheet", async ({ page })
|
|||||||
await expect(page.getByRole("button", { name: "Map area Bakery" })).toHaveCount(0);
|
await expect(page.getByRole("button", { name: "Map area Bakery" })).toHaveCount(0);
|
||||||
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Edit Objects");
|
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Edit Objects");
|
||||||
await expect(page.getByText("No visible map areas")).toBeVisible();
|
await expect(page.getByText("No visible map areas")).toBeVisible();
|
||||||
|
await expect(page.locator(".location-map-empty-canvas").getByRole("button", { name: "Show Hidden" })).toBeVisible();
|
||||||
await expect(page.getByRole("button", { name: "Show Hidden Areas (1)" })).toBeVisible();
|
await expect(page.getByRole("button", { name: "Show Hidden Areas (1)" })).toBeVisible();
|
||||||
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
|
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
|
||||||
|
|
||||||
await page.getByRole("button", { name: "Show Hidden Areas (1)" }).click();
|
await page.locator(".location-map-empty-canvas").getByRole("button", { name: "Show Hidden" }).click();
|
||||||
await expect(page.getByRole("button", { name: "Map area Bakery" })).toBeVisible();
|
await expect(page.getByRole("button", { name: "Map area Bakery" })).toBeVisible();
|
||||||
|
await expect(page.locator(".location-map-empty-canvas").getByRole("button", { name: "Show Hidden" })).toHaveCount(0);
|
||||||
await expect(page.getByRole("button", { name: "Show Hidden Areas (1)" })).toHaveCount(0);
|
await expect(page.getByRole("button", { name: "Show Hidden Areas (1)" })).toHaveCount(0);
|
||||||
|
|
||||||
await page.getByRole("button", { name: "Save Draft" }).click();
|
await page.getByRole("button", { name: "Save Draft" }).click();
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user