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 +23 -1
3 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bc6cfb97a1 - Show all commits

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

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

@ -357,6 +357,9 @@
.location-map-layer-toggle { .location-map-layer-toggle {
min-height: 40px; min-height: 40px;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.7rem; padding: 0.45rem 0.7rem;
border: 1px solid var(--color-border-light); border: 1px solid var(--color-border-light);
border-radius: 999px; border-radius: 999px;
@ -366,6 +369,19 @@
cursor: pointer; 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 { .location-map-layer-toggle.active {
border-color: var(--color-primary); border-color: var(--color-primary);
background: rgba(59, 130, 246, 0.22); 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.getByRole("button", { name: "Layers" }).click();
await page.getByLabel("Labels").uncheck(); 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-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");