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

fix: show changed map layers

Browse Source
This commit is contained in:
Nico 2026-06-03 15:03:54 -07:00
parent eef8accf45
commit bc6cfb97a1
3 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { MAP_OBJECT_TYPES } from "../../lib/locationMapUtils";
import { DEFAULT_MAP_FILTERS, MAP_OBJECT_TYPES } from "../../lib/locationMapUtils";
function objectZoneId(object) {
return object?.zone_id ? String(object.zone_id) : "";
@ -69,6 +69,7 @@ export default function LocationMapBottomSheet({
: "Drag and zoom without changing objects.";
const showEditorControls = mode === "edit" && canManage;
const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject);
const changedLayerCount = DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length;
const showSelectedZoneItems = () => {
setFilters((current) => ({
...current,
@ -117,8 +118,12 @@ export default function LocationMapBottomSheet({
className={`location-map-layer-toggle ${layersOpen ? "active" : ""}`}
onClick={() => setLayersOpen((current) => !current)}
aria-expanded={layersOpen}
aria-label={changedLayerCount ? `Layers, ${changedLayerCount} changed` : "Layers"}
>
Layers
{changedLayerCount ? (
<span className="location-map-layer-count" aria-hidden="true">{changedLayerCount}</span>
) : null}
</button>
</div>

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

@ -357,6 +357,9 @@
.location-map-layer-toggle {
min-height: 40px;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.7rem;
border: 1px solid var(--color-border-light);
border-radius: 999px;
@ -366,6 +369,19 @@
cursor: pointer;
}
.location-map-layer-count {
min-width: 1.35rem;
height: 1.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--color-primary);
color: #06111f;
font-size: 0.72rem;
font-weight: 900;
}
.location-map-layer-toggle.active {
border-color: var(--color-primary);
background: rgba(59, 130, 246, 0.22);

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

@ -716,6 +716,7 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
await page.getByRole("button", { name: "Layers" }).click();
await page.getByLabel("Labels").uncheck();
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-count")).toHaveText("2 items");
await expect(produceArea.locator(".location-map-count")).toHaveAttribute("y", "92");