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

fix: compact map setup states

Browse Source
This commit is contained in:
Nico 2026-06-04 07:53:12 -07:00
parent ea05691a65
commit d5cfd22014
3 changed files with 60 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/maps/LocationMapSetupPanel.jsx
View File

@ -10,14 +10,12 @@ export default function LocationMapSetupPanel({
onCreateFromZones,
onCreateBlank,
}) {
const description = hasAnyMap
? canManage
? "A draft map exists for this location."
: "A map draft exists for this location, but it has not been published yet."
: canManage
? "Create a rough map for this store location."
: "A household admin has not published a map yet.";
const hasZones = zoneCount > 0;
const status = hasAnyMap
? "Draft"
: canManage
? "Not started"
: "Not published";
const createFromZonesLabel = hasZones
? `Create From ${zoneCount} Zone${zoneCount === 1 ? "" : "s"}`
: "Create From Zones";
@ -28,7 +26,18 @@ export default function LocationMapSetupPanel({
return (
<section className="location-map-setup">
<h2>{hasAnyMap ? "Draft Map" : "No Map"}</h2>
<p>{description}</p>
<div className="location-map-setup-rows" role="group" aria-label="Map setup status">
<div className="location-map-setup-row">
<span>Status</span>
<strong>{status}</strong>
</div>
{canManage ? (
<div className="location-map-setup-row">
<span>Zones</span>
<strong>{zoneCount}</strong>
</div>
) : null}
</div>
{hasAnyMap && canManage ? (
<div className="location-map-setup-actions">
<button type="button" className="btn-primary" onClick={onContinue} disabled={saving}>
@ -43,11 +52,6 @@ export default function LocationMapSetupPanel({
</div>
) : !hasAnyMap && canManage ? (
<div className="location-map-setup-actions">
{!hasZones ? (
<p className="location-map-setup-note">
No zones are available yet. Create a blank map now, or add zones first for an automatic starter layout.
</p>
) : null}
{!hasZones ? (
<>
<button type="button" className="btn-primary" onClick={onCreateBlank} disabled={saving}>

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

@ -777,9 +777,33 @@
font-size: 1.35rem;
}
.location-map-setup p {
margin-bottom: 1rem;
.location-map-setup-rows {
display: grid;
gap: 0.4rem;
margin-bottom: 0.9rem;
}
.location-map-setup-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-height: 40px;
padding: 0.5rem 0.7rem;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
background: rgba(8, 15, 25, 0.42);
}
.location-map-setup-row span {
color: #9fb3c8;
font-size: 0.86rem;
font-weight: 700;
}
.location-map-setup-row strong {
color: #f8fafc;
font-weight: 900;
}
.location-map-setup-actions {
@ -787,17 +811,6 @@
gap: 0.6rem;
}
.location-map-setup-note {
margin: 0;
padding: 0.6rem 0.7rem;
border: 1px solid rgba(245, 158, 11, 0.28);
border-radius: 8px;
background: rgba(245, 158, 11, 0.1);
color: #f8fafc;
font-size: 0.9rem;
font-weight: 700;
}
.location-map-loading {
margin: 3rem auto;
color: #9fb3c8;

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

@ -393,7 +393,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
await expect(page.getByText("loose batteries")).toBeVisible();
});
test("admin setup explains when no zones exist yet", async ({ page }) => {
test("admin setup uses compact status rows when no zones exist yet", async ({ page }) => {
await mockMapShell(page);
await page.route("**/households/1/locations/10/map", async (route) => {
@ -412,7 +412,12 @@ test("admin setup explains when no zones exist yet", async ({ page }) => {
await page.goto("/stores/100/locations/10/map");
await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
await expect(page.getByText("No zones are available yet.")).toBeVisible();
const setupStatus = page.getByRole("group", { name: "Map setup status" });
await expect(setupStatus.getByText("Status")).toBeVisible();
await expect(setupStatus.getByText("Not started")).toBeVisible();
await expect(setupStatus.getByText("Zones")).toBeVisible();
await expect(setupStatus.getByText("0")).toBeVisible();
await expect(page.getByText("No zones are available yet.")).toHaveCount(0);
await expect(page.getByRole("button", { name: "Create From Zones" })).toBeDisabled();
await expect(page.getByRole("button", { name: "Create Blank Map" })).toBeEnabled();
const blankButtonBox = await page.getByRole("button", { name: "Create Blank Map" }).boundingBox();
@ -2826,8 +2831,12 @@ test("members see a clean empty state when no map is published", async ({ page }
await page.goto("/stores/100/locations/10/map");
await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
await expect(page.getByText("A household admin has not published a map yet.")).toBeVisible();
await expect(page.getByText("Create a rough map for this store location.")).toHaveCount(0);
const setupStatus = page.getByRole("group", { name: "Map setup status" });
await expect(setupStatus.getByText("Status")).toBeVisible();
await expect(setupStatus.getByText("Not published")).toBeVisible();
await expect(setupStatus.getByText("Zones")).toHaveCount(0);
await expect(page.getByText("A household admin has not published a map yet.")).toHaveCount(0);
await expect(page.getByText("Not started")).toHaveCount(0);
await expect(page.getByRole("button", { name: /Create From/ })).toHaveCount(0);
await expect(page.getByRole("button", { name: "Create Blank Map" })).toHaveCount(0);
await expect(page.getByLabel("Map controls")).toHaveCount(0);
@ -2866,7 +2875,10 @@ test("members do not see unpublished draft maps", async ({ page }) => {
await page.goto("/stores/100/locations/10/map");
await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
await expect(page.getByText("A household admin has not published a map yet.")).toBeVisible();
const setupStatus = page.getByRole("group", { name: "Map setup status" });
await expect(setupStatus.getByText("Status")).toBeVisible();
await expect(setupStatus.getByText("Not published")).toBeVisible();
await expect(page.getByText("A household admin has not published a map yet.")).toHaveCount(0);
await expect(page.getByRole("heading", { name: "Draft Map" })).toHaveCount(0);
await expect(page.getByText("A map draft exists for this location")).toHaveCount(0);
await expect(page.getByText("Draft Bakery")).toHaveCount(0);