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

fix: reset map layer filters

Browse Source
This commit is contained in:
Nico 2026-06-03 15:50:56 -07:00
parent 3ac80c9a5b
commit 24a6405a1a
3 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -135,19 +135,30 @@ export default function LocationMapBottomSheet({
</div> </div>
{layersOpen ? ( {layersOpen ? (
<div className="location-map-display-controls"> <div className="location-map-display-panel">
{DISPLAY_CONTROLS.map(([key, label]) => ( {changedLayerCount ? (
<label key={key}> <button
<input type="button"
type="checkbox" className="location-map-layer-reset"
checked={filters[key]} onClick={() => setFilters({ ...DEFAULT_MAP_FILTERS })}
onChange={(event) => >
setFilters((current) => ({ ...current, [key]: event.target.checked })) Reset
} </button>
/> ) : null}
{label} <div className="location-map-display-controls">
</label> {DISPLAY_CONTROLS.map(([key, label]) => (
))} <label key={key}>
<input
type="checkbox"
checked={filters[key]}
onChange={(event) =>
setFilters((current) => ({ ...current, [key]: event.target.checked }))
}
/>
{label}
</label>
))}
</div>
</div> </div>
) : null} ) : null}

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

@ -408,11 +408,29 @@
background: rgba(59, 130, 246, 0.22); background: rgba(59, 130, 246, 0.22);
} }
.location-map-display-panel {
display: grid;
gap: 0.45rem;
margin-bottom: 0.7rem;
}
.location-map-layer-reset {
min-height: 36px;
width: fit-content;
justify-self: end;
padding: 0.35rem 0.65rem;
border: 1px solid var(--color-border-light);
border-radius: 999px;
background: rgba(15, 23, 34, 0.72);
color: #dbeafe;
font-weight: 800;
cursor: pointer;
}
.location-map-display-controls { .location-map-display-controls {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem; gap: 0.4rem;
margin-bottom: 0.7rem;
} }
.location-map-display-controls label { .location-map-display-controls label {

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

@ -725,6 +725,11 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
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");
await expect(produceArea.locator(".location-map-count")).toHaveAttribute("y", "92"); await expect(produceArea.locator(".location-map-count")).toHaveAttribute("y", "92");
await page.getByRole("button", { name: "Reset" }).click();
await expect(page.getByRole("button", { name: "Layers" })).toBeVisible();
await expect(produceArea.locator(".location-map-label tspan")).toHaveCount(2);
await expect(produceArea.locator(".location-map-count")).toHaveAttribute("y", "116");
}); });
test("viewer explains when selected zone items are hidden by filters", async ({ page }) => { test("viewer explains when selected zone items are hidden by filters", async ({ page }) => {