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

fix: prioritize selected map draft actions

Browse Source
This commit is contained in:
Nico 2026-06-03 19:42:00 -07:00
parent 0701a62ff1
commit 46293cd3c2
3 changed files with 68 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,27 +92,33 @@ export default function LocationMapBottomSheet({
showCompleted: true,
}));
};
const primaryDraftActions = showEditorControls ? (
<div className="location-map-editor-actions location-map-primary-actions">
<button type="button" className="primary" onClick={onSaveDraft} disabled={saving || !hasUnsavedChanges}>
{saveDraftLabel}
</button>
<button
type="button"
className="primary"
onClick={onPublish}
disabled={saving || (!mapState?.draft_map && !hasUnsavedChanges)}
>
{publishLabel}
</button>
</div>
) : null;
const secondaryDraftActions = showEditorControls ? (
<div className="location-map-editor-actions location-map-secondary-actions">
<button type="button" onClick={onAddObject} disabled={saving}>Add Area</button>
<button type="button" onClick={onPreviewDraft} aria-label="Preview Draft" disabled={saving}>Preview</button>
<button type="button" onClick={onUndo} disabled={saving || history.length === 0}>Undo</button>
<button type="button" onClick={onRedo} disabled={saving || future.length === 0}>Redo</button>
</div>
) : null;
const editorActions = showEditorControls ? (
<div className="location-map-editor-action-stack" role="group" aria-label="Map draft actions">
<div className="location-map-editor-actions location-map-primary-actions">
<button type="button" className="primary" onClick={onSaveDraft} disabled={saving || !hasUnsavedChanges}>
{saveDraftLabel}
</button>
<button
type="button"
className="primary"
onClick={onPublish}
disabled={saving || (!mapState?.draft_map && !hasUnsavedChanges)}
>
{publishLabel}
</button>
</div>
<div className="location-map-editor-actions location-map-secondary-actions">
<button type="button" onClick={onAddObject} disabled={saving}>Add Area</button>
<button type="button" onClick={onPreviewDraft} aria-label="Preview Draft" disabled={saving}>Preview</button>
<button type="button" onClick={onUndo} disabled={saving || history.length === 0}>Undo</button>
<button type="button" onClick={onRedo} disabled={saving || future.length === 0}>Redo</button>
</div>
{primaryDraftActions}
{secondaryDraftActions}
</div>
) : canManage && mapState?.published_map ? (
<div className="location-map-editor-actions">
@ -176,7 +182,15 @@ export default function LocationMapBottomSheet({
</div>
) : null}
{showSelectedObjectForm ? null : editorActions}
{showSelectedObjectForm && primaryDraftActions ? (
<div
className="location-map-editor-action-stack location-map-selected-primary-actions"
role="group"
aria-label="Map draft actions"
>
{primaryDraftActions}
</div>
) : editorActions}
{showEditorControls ? (
<div className="location-map-mobile-tool-switch" aria-label="Edit tool">
@ -332,7 +346,15 @@ export default function LocationMapBottomSheet({
</p>
)}
{showSelectedObjectForm ? editorActions : null}
{showSelectedObjectForm && secondaryDraftActions ? (
<div
className="location-map-editor-action-stack location-map-selected-secondary-actions"
role="group"
aria-label="More map draft actions"
>
{secondaryDraftActions}
</div>
) : null}
{filters.showUnmapped && visibleUnmappedItems.length > 0 ? (
<div className="location-map-unmapped-list">

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

@ -492,6 +492,15 @@
margin-bottom: 0.75rem;
}
.location-map-selected-primary-actions {
margin-bottom: 0.55rem;
}
.location-map-selected-secondary-actions {
margin-top: 0.55rem;
margin-bottom: 0;
}
.location-map-primary-actions button {
flex: 1 1 140px;
}

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

@ -1371,8 +1371,23 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
await page.getByRole("button", { name: "Objects" }).click();
await expect(page.getByRole("button", { name: "Objects" })).toHaveClass(/active/);
await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
await expect(page.getByRole("textbox", { name: "Label" })).toBeVisible();
const labelInput = page.getByRole("textbox", { name: "Label" });
await expect(labelInput).toBeVisible();
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
const selectedPrimaryActions = page.locator(".location-map-selected-primary-actions");
const selectedSecondaryActions = page.locator(".location-map-selected-secondary-actions");
await expect(selectedPrimaryActions.getByRole("button", { name: "Save Draft" })).toBeVisible();
await expect(selectedPrimaryActions.getByRole("button", { name: "Publish" })).toBeVisible();
await expect(selectedSecondaryActions.getByRole("button", { name: "Add Area" })).toBeVisible();
await expect(selectedSecondaryActions.getByRole("button", { name: "Preview Draft" })).toBeVisible();
const selectedPrimaryBox = await selectedPrimaryActions.boundingBox();
const labelBox = await labelInput.boundingBox();
expect(selectedPrimaryBox).not.toBeNull();
expect(labelBox).not.toBeNull();
if (!selectedPrimaryBox || !labelBox) {
throw new Error("Selected object draft actions were not measurable");
}
expect(selectedPrimaryBox.y).toBeLessThan(labelBox.y);
await page.getByRole("button", { name: "Done" }).click();
await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Edit Objects");