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

Add store location map manager #20

Open
nalalangan wants to merge 206 commits from feature/location-map-manager into feature/store-selector-modal
pull from: feature/location-map-manager
merge into: nalalangan:feature/store-selector-modal
Conversation 0 Commits 206 Files Changed 47 +31 -20
3 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 59b82650a6 - Show all commits

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

@ -166,16 +166,17 @@ export default function LocationMapBottomSheet({
<div className="location-map-display-panel"> <div className="location-map-display-panel">
<div className="location-map-display-controls"> <div className="location-map-display-controls">
{DISPLAY_CONTROLS.map(([key, label]) => ( {DISPLAY_CONTROLS.map(([key, label]) => (
<label key={key}> <button
<input key={key}
type="checkbox" type="button"
checked={filters[key]} className={filters[key] ? "active" : ""}
onChange={(event) => aria-pressed={filters[key]}
setFilters((current) => ({ ...current, [key]: event.target.checked })) onClick={() =>
setFilters((current) => ({ ...current, [key]: !current[key] }))
} }
/> >
{label} {label}
</label> </button>
))} ))}
</div> </div>
</div> </div>

14
frontend/src/styles/pages/LocationMapManager.css
View File

@ -502,23 +502,27 @@
gap: 0.4rem; gap: 0.4rem;
} }
.location-map-display-controls label { .location-map-display-controls button {
min-height: 40px; min-height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
gap: 0.35rem; gap: 0.35rem;
padding: 0.35rem 0.45rem; padding: 0.35rem 0.45rem;
border: 1px solid var(--color-border-light); border: 1px solid var(--color-border-light);
border-radius: 8px; border-radius: 999px;
background: rgba(15, 23, 34, 0.58); background: rgba(15, 23, 34, 0.58);
color: #f8fafc; color: #f8fafc;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 700; font-weight: 700;
cursor: pointer;
} }
.location-map-display-controls input { .location-map-display-controls button.active {
width: 16px; border-color: rgba(96, 165, 250, 0.76);
height: 16px; background: rgba(59, 130, 246, 0.32);
color: #f8fafc;
box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18);
} }
.location-map-editor-actions { .location-map-editor-actions {

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

@ -377,7 +377,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
await expect(page.getByText("frozen salmon")).toHaveCount(0); await expect(page.getByText("frozen salmon")).toHaveCount(0);
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByLabel("Unmapped").check(); await page.getByRole("button", { name: "Unmapped" }).click();
await expect(page.getByText("loose batteries")).toBeVisible(); await expect(page.getByText("loose batteries")).toBeVisible();
}); });
@ -1392,7 +1392,10 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
await expect(page.locator(".location-map-pin")).toHaveCount(0); await expect(page.locator(".location-map-pin")).toHaveCount(0);
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByLabel("Labels").uncheck(); const labelsToggle = page.getByRole("button", { name: "Labels" });
await expect(labelsToggle).toHaveAttribute("aria-pressed", "true");
await labelsToggle.click();
await expect(labelsToggle).toHaveAttribute("aria-pressed", "false");
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toBeVisible(); await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toBeVisible();
await expect(produceArea.locator(".location-map-label")).toHaveCount(0); await expect(produceArea.locator(".location-map-label")).toHaveCount(0);
await expect(produceArea.locator(".location-map-count")).toHaveText("2 items"); await expect(produceArea.locator(".location-map-count")).toHaveText("2 items");
@ -1444,7 +1447,7 @@ test("viewer explains when the zones layer hides the map", async ({ page }) => {
await expect(page.locator(".location-map-sheet-count")).toHaveText("2 items"); await expect(page.locator(".location-map-sheet-count")).toHaveText("2 items");
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByLabel("Zones").uncheck(); await page.getByRole("button", { name: "Zones" }).click();
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("Map Details"); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details");
@ -1487,7 +1490,10 @@ test("viewer shows a compact overflow cue for long unmapped lists", async ({ pag
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByLabel("Unmapped").check(); const unmappedToggle = page.getByRole("button", { name: "Unmapped" });
await expect(unmappedToggle).toHaveAttribute("aria-pressed", "false");
await unmappedToggle.click();
await expect(unmappedToggle).toHaveAttribute("aria-pressed", "true");
await expect(page.getByText("unmapped item 1")).toBeVisible(); await expect(page.getByText("unmapped item 1")).toBeVisible();
await expect(page.getByText("unmapped item 8")).toBeVisible(); await expect(page.getByText("unmapped item 8")).toBeVisible();
@ -1524,7 +1530,7 @@ test("viewer explains when unmapped items are hidden by filters", async ({ page
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByLabel("Unmapped").check(); await page.getByRole("button", { name: "Unmapped" }).click();
await expect(page.getByText("other batteries")).toHaveCount(0); await expect(page.getByText("other batteries")).toHaveCount(0);
await expect(page.getByText("Unmapped items are hidden by layer filters.")).toBeVisible(); await expect(page.getByText("Unmapped items are hidden by layer filters.")).toBeVisible();
@ -1575,7 +1581,7 @@ test("viewer marks partial unmapped counts when filters hide some items", async
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByLabel("Unmapped").check(); await page.getByRole("button", { name: "Unmapped" }).click();
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);