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

19
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-controls">
{DISPLAY_CONTROLS.map(([key, label]) => (
<label key={key}>
<input
type="checkbox"
checked={filters[key]}
onChange={(event) =>
setFilters((current) => ({ ...current, [key]: event.target.checked }))
}
/>
<button
key={key}
type="button"
className={filters[key] ? "active" : ""}
aria-pressed={filters[key]}
onClick={() =>
setFilters((current) => ({ ...current, [key]: !current[key] }))
}
>
{label}
</label>
</button>
))}
</div>
</div>

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

@ -502,23 +502,27 @@
gap: 0.4rem;
}
.location-map-display-controls label {
.location-map-display-controls button {
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.35rem 0.45rem;
border: 1px solid var(--color-border-light);
border-radius: 8px;
border-radius: 999px;
background: rgba(15, 23, 34, 0.58);
color: #f8fafc;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
}
.location-map-display-controls input {
width: 16px;
height: 16px;
.location-map-display-controls button.active {
border-color: rgba(96, 165, 250, 0.76);
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 {

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 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();
});
@ -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 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(produceArea.locator(".location-map-label")).toHaveCount(0);
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 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.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.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 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.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("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.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("hidden batteries")).toHaveCount(0);