nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: summarize draft map areas

Browse Source
This commit is contained in:
Nico 2026-06-04 03:30:10 -07:00
parent 8808dad38e
commit e5ccc26a89
2 changed files with 85 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/maps/LocationMapBottomSheet.jsx
View File

@ -75,6 +75,8 @@ export default function LocationMapBottomSheet({
? Math.max(0, totalAreaCount - hiddenAreaCount)
: 0;
const showMapOverview = mode !== "edit" && !selectedObject;
const unlinkedAreaCount = mapObjects.filter((object) => !objectZoneId(object)).length;
const showDraftOverview = mode === "edit" && editorTool === "edit" && !selectedObject;
const unmappedItemPreview = visibleUnmappedItems.slice(0, 8);
const overflowUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
const hiddenUnmappedItemCount = Math.max(0, unmappedItemCount - visibleUnmappedItems.length);
@ -233,6 +235,23 @@ export default function LocationMapBottomSheet({
</div>
) : null}
{showDraftOverview ? (
<div className="location-map-overview" aria-label="Draft map summary">
<div className="location-map-overview-row">
<span>Areas</span>
<strong>{totalAreaCount}</strong>
</div>
<div className="location-map-overview-row">
<span>Hidden</span>
<strong>{hiddenAreaCount}</strong>
</div>
<div className="location-map-overview-row">
<span>Unlinked</span>
<strong>{unlinkedAreaCount}</strong>
</div>
</div>
) : null}
{mode === "edit" && editorTool === "edit" && selectedObject ? (
<div className="location-map-object-form">
<label className="location-map-field-row">

66
frontend/tests/location-map-manager.spec.ts
View File

@ -746,6 +746,72 @@ test("admin can recover hidden map areas from the empty canvas", async ({ page }
);
});
test("admin edit mode summarizes draft areas before selection", async ({ page }) => {
await mockMapShell(page);
const mapState = draftMapState([
{
id: 1381,
location_map_id: 900,
zone_id: 501,
zone_name: "Bakery",
type: "zone",
label: "Bakery",
x: 40,
y: 40,
width: 260,
height: 160,
rotation: 0,
locked: false,
visible: true,
sort_order: 1,
},
{
id: 1382,
location_map_id: 900,
zone_id: null,
zone_name: null,
type: "zone",
label: "Seasonal Endcap",
x: 330,
y: 40,
width: 220,
height: 130,
rotation: 0,
locked: false,
visible: false,
sort_order: 2,
},
], true);
await page.route("**/households/1/locations/10/map", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify(mapState),
});
});
await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Continue Editing" }).click();
const summary = page.getByLabel("Draft map summary");
const areasRow = summary.locator(".location-map-overview-row", { hasText: "Areas" });
const hiddenRow = summary.locator(".location-map-overview-row", { hasText: "Hidden" });
const unlinkedRow = summary.locator(".location-map-overview-row", { hasText: "Unlinked" });
await expect(summary).toBeVisible();
await expect(areasRow.locator("strong")).toHaveText("2");
await expect(hiddenRow.locator("strong")).toHaveText("1");
await expect(unlinkedRow.locator("strong")).toHaveText("1");
await expect(page.getByRole("button", { name: "Show Hidden Areas (1)" })).toBeVisible();
await page.getByRole("button", { name: "Map area Bakery" }).click();
await expect(page.getByLabel("Draft map summary")).toHaveCount(0);
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
});
test("admin locked map areas hide resize affordances", async ({ page }) => {
await mockMapShell(page);