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

fix: expose map item panels

Browse Source
This commit is contained in:
Nico 2026-06-15 23:27:09 -07:00
parent 82eab81149
commit 407d8a6943
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/maps/LocationMapBottomSheetSections.jsx
View File

@ -222,7 +222,7 @@ export function SelectedZoneItemsPanel({
if (!hasHiddenSelectedItems) return null; if (!hasHiddenSelectedItems) return null;
return ( return (
<div className="location-map-zone-items"> <div className="location-map-zone-items" role="group" aria-label="Zone items">
<div className="location-map-zone-empty"> <div className="location-map-zone-empty">
<InlineStateAction <InlineStateAction
label="Hidden" label="Hidden"
@ -236,7 +236,7 @@ export function SelectedZoneItemsPanel({
} }
return ( return (
<div className="location-map-zone-items"> <div className="location-map-zone-items" role="group" aria-label="Zone items">
<MapItemActionList <MapItemActionList
items={selectedZoneItems} items={selectedZoneItems}
onSelectItem={onSelectZoneItem} onSelectItem={onSelectZoneItem}
@ -266,7 +266,7 @@ export function UnmappedItemsPanel({
}) { }) {
if (visibleUnmappedItems.length === 0 && hasHiddenUnmappedItems) { if (visibleUnmappedItems.length === 0 && hasHiddenUnmappedItems) {
return ( return (
<div className="location-map-unmapped-list" aria-label="Unmapped items"> <div className="location-map-unmapped-list" role="group" aria-label="Unmapped items">
<div className="location-map-zone-empty"> <div className="location-map-zone-empty">
<InlineStateAction <InlineStateAction
label="Hidden" label="Hidden"
@ -284,7 +284,7 @@ export function UnmappedItemsPanel({
} }
return ( return (
<div className="location-map-unmapped-list" aria-label="Unmapped items"> <div className="location-map-unmapped-list" role="group" aria-label="Unmapped items">
<MapItemActionList <MapItemActionList
items={visibleUnmappedItems} items={visibleUnmappedItems}
onSelectItem={onSelectUnmappedItem} onSelectItem={onSelectUnmappedItem}

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

@ -3490,7 +3490,7 @@ test("viewer hides unrelated unmapped items while a zone is selected", async ({
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByRole("button", { name: "Unmapped" }).click(); await page.getByRole("button", { name: "Unmapped" }).click();
await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible(); await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
await expect(page.getByLabel("Unmapped items")).toBeVisible(); await expect(page.getByRole("group", { name: "Unmapped items" })).toBeVisible();
await expect(page.getByText("Unmapped Items")).toHaveCount(0); await expect(page.getByText("Unmapped Items")).toHaveCount(0);
await expect(page.getByText("loose batteries")).toBeVisible(); await expect(page.getByText("loose batteries")).toBeVisible();
@ -3499,12 +3499,12 @@ test("viewer hides unrelated unmapped items while a zone is selected", async ({
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false"); await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0); await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
await expect(page.getByText("french bread")).toBeVisible(); await expect(page.getByText("french bread")).toBeVisible();
await expect(page.getByLabel("Unmapped items")).toHaveCount(0); await expect(page.getByRole("group", { name: "Unmapped items" })).toHaveCount(0);
await expect(page.getByText("loose batteries")).toHaveCount(0); await expect(page.getByText("loose batteries")).toHaveCount(0);
await page.locator(".location-map-background").click({ position: { x: 8, y: 8 } }); await page.locator(".location-map-background").click({ position: { x: 8, y: 8 } });
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details"); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details");
await expect(page.getByLabel("Unmapped items")).toBeVisible(); await expect(page.getByRole("group", { name: "Unmapped items" })).toBeVisible();
await expect(page.getByText("Unmapped Items")).toHaveCount(0); await expect(page.getByText("Unmapped Items")).toHaveCount(0);
await expect(page.getByText("loose batteries")).toBeVisible(); await expect(page.getByText("loose batteries")).toBeVisible();
}); });
@ -3594,7 +3594,7 @@ test("viewer can buy selected zone items from the map", async ({ page }) => {
await expect(page.locator(".confirm-buy-item-name")).toHaveText("sourdough"); await expect(page.locator(".confirm-buy-item-name")).toHaveText("sourdough");
await expect(page.locator(".location-map-sheet-count")).toHaveText("1 shown"); await expect(page.locator(".location-map-sheet-count")).toHaveText("1 shown");
await expect(bakeryArea.locator(".location-map-count")).toHaveText("1 shown"); await expect(bakeryArea.locator(".location-map-count")).toHaveText("1 shown");
await expect(page.locator(".location-map-zone-items")).not.toContainText("french bread"); await expect(page.getByRole("group", { name: "Zone items" })).not.toContainText("french bread");
await page.getByRole("button", { name: "Mark as Bought" }).click(); await page.getByRole("button", { name: "Mark as Bought" }).click();
@ -3607,7 +3607,7 @@ test("viewer can buy selected zone items from the map", async ({ page }) => {
await expect(page.locator(".confirm-buy-modal")).toHaveCount(0); await expect(page.locator(".confirm-buy-modal")).toHaveCount(0);
await expect(page.locator(".location-map-sheet-count")).toHaveText("0 shown"); await expect(page.locator(".location-map-sheet-count")).toHaveText("0 shown");
await expect(bakeryArea.locator(".location-map-count")).toHaveText("0 shown"); await expect(bakeryArea.locator(".location-map-count")).toHaveText("0 shown");
const hiddenZoneState = page.locator(".location-map-zone-items .location-map-inline-state", { hasText: "Hidden" }); const hiddenZoneState = page.getByRole("group", { name: "Zone items" }).locator(".location-map-inline-state", { hasText: "Hidden" });
await expect(hiddenZoneState).toContainText("2"); await expect(hiddenZoneState).toContainText("2");
await expect(hiddenZoneState.getByRole("button", { name: "Show Zone Items" })).toHaveText("Show"); await expect(hiddenZoneState.getByRole("button", { name: "Show Zone Items" })).toHaveText("Show");
await expect(page.getByText("Items are assigned here, but hidden by layer filters.")).toHaveCount(0); await expect(page.getByText("Items are assigned here, but hidden by layer filters.")).toHaveCount(0);
@ -3974,7 +3974,7 @@ test("viewer shows compact state when unmapped items are hidden by filters", asy
await page.getByRole("button", { name: "Unmapped" }).click(); await page.getByRole("button", { name: "Unmapped" }).click();
await expect(page.getByText("other batteries")).toHaveCount(0); await expect(page.getByText("other batteries")).toHaveCount(0);
const hiddenUnmappedState = page.locator(".location-map-unmapped-list .location-map-inline-state", { hasText: "Hidden" }); const hiddenUnmappedState = page.getByRole("group", { name: "Unmapped items" }).locator(".location-map-inline-state", { hasText: "Hidden" });
await expect(hiddenUnmappedState).toContainText("1"); await expect(hiddenUnmappedState).toContainText("1");
await expect(hiddenUnmappedState.getByRole("button", { name: "Show Unmapped Items" })).toHaveText("Show"); await expect(hiddenUnmappedState.getByRole("button", { name: "Show Unmapped Items" })).toHaveText("Show");
await expect(page.getByText("Unmapped items are hidden by layer filters.")).toHaveCount(0); await expect(page.getByText("Unmapped items are hidden by layer filters.")).toHaveCount(0);
@ -4028,7 +4028,7 @@ test("viewer marks partial unmapped counts when filters hide some items", async
await expect(page.getByText("visible batteries")).toBeVisible(); await expect(page.getByText("visible batteries")).toBeVisible();
await expect(page.getByText("hidden batteries")).toHaveCount(0); await expect(page.getByText("hidden batteries")).toHaveCount(0);
const hiddenUnmappedState = page.locator(".location-map-unmapped-list .location-map-inline-state", { hasText: "Hidden" }); const hiddenUnmappedState = page.getByRole("group", { name: "Unmapped items" }).locator(".location-map-inline-state", { hasText: "Hidden" });
await expect(hiddenUnmappedState).toContainText("1"); await expect(hiddenUnmappedState).toContainText("1");
await expect(hiddenUnmappedState.getByRole("button", { name: "Show All Unmapped Items" })).toHaveText("Show All"); await expect(hiddenUnmappedState.getByRole("button", { name: "Show All Unmapped Items" })).toHaveText("Show All");
await expect(page.getByText("1 more hidden by layer filters.")).toHaveCount(0); await expect(page.getByText("1 more hidden by layer filters.")).toHaveCount(0);
@ -4077,7 +4077,7 @@ test("viewer shows compact state when selected zone items are hidden by filters"
await frozenArea.locator("rect").first().click(); await frozenArea.locator("rect").first().click();
await expect(page.locator(".location-map-sheet-count")).toHaveText("0 shown"); await expect(page.locator(".location-map-sheet-count")).toHaveText("0 shown");
const hiddenZoneState = page.locator(".location-map-zone-items .location-map-inline-state", { hasText: "Hidden" }); const hiddenZoneState = page.getByRole("group", { name: "Zone items" }).locator(".location-map-inline-state", { hasText: "Hidden" });
await expect(hiddenZoneState).toContainText("1"); await expect(hiddenZoneState).toContainText("1");
await expect(hiddenZoneState.getByRole("button", { name: "Show Zone Items" })).toHaveText("Show"); await expect(hiddenZoneState.getByRole("button", { name: "Show Zone Items" })).toHaveText("Show");
await expect(page.getByText("Items are assigned here, but hidden by layer filters.")).toHaveCount(0); await expect(page.getByText("Items are assigned here, but hidden by layer filters.")).toHaveCount(0);
@ -4151,7 +4151,7 @@ test("viewer marks partial zone counts when filters hide some items", async ({ p
await expect(page.locator(".location-map-sheet-count")).toHaveText("1 shown"); await expect(page.locator(".location-map-sheet-count")).toHaveText("1 shown");
await expect(page.getByText("visible bread")).toBeVisible(); await expect(page.getByText("visible bread")).toBeVisible();
await expect(page.getByText("hidden baguette")).toHaveCount(0); await expect(page.getByText("hidden baguette")).toHaveCount(0);
const hiddenZoneState = page.locator(".location-map-zone-items .location-map-inline-state", { hasText: "Hidden" }); const hiddenZoneState = page.getByRole("group", { name: "Zone items" }).locator(".location-map-inline-state", { hasText: "Hidden" });
await expect(hiddenZoneState).toContainText("1"); await expect(hiddenZoneState).toContainText("1");
await expect(hiddenZoneState.getByRole("button", { name: "Show All Zone Items" })).toHaveText("Show All"); await expect(hiddenZoneState.getByRole("button", { name: "Show All Zone Items" })).toHaveText("Show All");
await expect(page.getByText("1 more hidden by layer filters.")).toHaveCount(0); await expect(page.getByText("1 more hidden by layer filters.")).toHaveCount(0);
@ -4227,14 +4227,15 @@ test("viewer handles empty and many-item zone panels without default pins", asyn
await page.locator('[data-object-key="1562"]').locator("rect").first().click(); await page.locator('[data-object-key="1562"]').locator("rect").first().click();
await expect(page.locator(".location-map-sheet-count")).toHaveText("0 items"); await expect(page.locator(".location-map-sheet-count")).toHaveText("0 items");
await expect(page.locator(".location-map-zone-items")).toHaveCount(0); await expect(page.getByRole("group", { name: "Zone items" })).toHaveCount(0);
await expect(page.locator(".location-map-inline-state", { hasText: "Items" })).toHaveCount(0); await expect(page.locator(".location-map-inline-state", { hasText: "Items" })).toHaveCount(0);
await expect(page.getByText("No items assigned to this zone yet.")).toHaveCount(0); await expect(page.getByText("No items assigned to this zone yet.")).toHaveCount(0);
await page.locator('[data-object-key="1561"]').locator("rect").first().click(); await page.locator('[data-object-key="1561"]').locator("rect").first().click();
await expect(page.locator(".location-map-sheet-count")).toHaveText("14 items"); await expect(page.locator(".location-map-sheet-count")).toHaveText("14 items");
await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(8); const zoneItems = page.getByRole("group", { name: "Zone items" });
await expect(page.locator(".location-map-zone-items .location-map-item-row").first()).toContainText("bulk item 1"); await expect(zoneItems.locator(".location-map-item-row")).toHaveCount(8);
await expect(zoneItems.locator(".location-map-item-row").first()).toContainText("bulk item 1");
await expect(page.getByText("bulk item 9")).toHaveCount(0); await expect(page.getByText("bulk item 9")).toHaveCount(0);
await expect(page.getByRole("button", { name: "Show 6 more zone items" })).toHaveText("+6 more"); await expect(page.getByRole("button", { name: "Show 6 more zone items" })).toHaveText("+6 more");
const firstZoneItemButtonBox = await page.getByRole("button", { name: "Mark bulk item 1 bought" }).boundingBox(); const firstZoneItemButtonBox = await page.getByRole("button", { name: "Mark bulk item 1 bought" }).boundingBox();
@ -4249,8 +4250,8 @@ test("viewer handles empty and many-item zone panels without default pins", asyn
await page.getByRole("button", { name: "Show 6 more zone items" }).click(); await page.getByRole("button", { name: "Show 6 more zone items" }).click();
await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(14); await expect(zoneItems.locator(".location-map-item-row")).toHaveCount(14);
await expect(page.locator(".location-map-zone-items .location-map-item-row").last()).toContainText("bulk item 14"); await expect(zoneItems.locator(".location-map-item-row").last()).toContainText("bulk item 14");
await expect(page.getByRole("button", { name: "Show fewer zone items" })).toHaveText("Show fewer"); await expect(page.getByRole("button", { name: "Show fewer zone items" })).toHaveText("Show fewer");
await expect(page.locator(".location-map-pin")).toHaveCount(0); await expect(page.locator(".location-map-pin")).toHaveCount(0);
}); });
@ -4326,15 +4327,16 @@ test("viewer collapses expanded zone items after selecting another zone", async
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
await page.locator('[data-object-key="1563"]').locator("rect").first().click(); await page.locator('[data-object-key="1563"]').locator("rect").first().click();
await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(8); const zoneItems = page.getByRole("group", { name: "Zone items" });
await expect(zoneItems.locator(".location-map-item-row")).toHaveCount(8);
await page.getByRole("button", { name: "Show 3 more zone items" }).click(); await page.getByRole("button", { name: "Show 3 more zone items" }).click();
await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(11); await expect(zoneItems.locator(".location-map-item-row")).toHaveCount(11);
await expect(page.getByText("bakery item 11")).toBeVisible(); await expect(page.getByText("bakery item 11")).toBeVisible();
await page.locator('[data-object-key="1564"]').locator("rect").first().click(); await page.locator('[data-object-key="1564"]').locator("rect").first().click();
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Frozen Foods"); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Frozen Foods");
await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(8); await expect(zoneItems.locator(".location-map-item-row")).toHaveCount(8);
await expect(page.getByText("frozen item 8")).toBeVisible(); await expect(page.getByText("frozen item 8")).toBeVisible();
await expect(page.getByText("frozen item 9")).toHaveCount(0); await expect(page.getByText("frozen item 9")).toHaveCount(0);
await expect(page.getByText("bakery item 11")).toHaveCount(0); await expect(page.getByText("bakery item 11")).toHaveCount(0);