Add store location map manager #20

Open
nalalangan wants to merge 206 commits from feature/location-map-manager into feature/store-selector-modal
4 changed files with 113 additions and 13 deletions
Showing only changes of commit ed40554ef3 - Show all commits

View File

@ -229,7 +229,7 @@ export default function LocationMapCanvas({
if (!hasObjectBoundsChanged(draggedObject, nextDraggedObject)) return; if (!hasObjectBoundsChanged(draggedObject, nextDraggedObject)) return;
if (!objectDragHistoryCapturedRef.current) { if (!objectDragHistoryCapturedRef.current) {
remember(); remember(undefined, dragState.key);
objectDragHistoryCapturedRef.current = true; objectDragHistoryCapturedRef.current = true;
} }
@ -292,7 +292,7 @@ export default function LocationMapCanvas({
setSelectedObjectKey(getObjectKey(object)); setSelectedObjectKey(getObjectKey(object));
if (!hasObjectBoundsChanged(object, nextObject)) return; if (!hasObjectBoundsChanged(object, nextObject)) return;
remember(); remember(undefined, getObjectKey(object));
updateObjects((currentObjects) => updateObjects((currentObjects) =>
currentObjects.map((candidate) => currentObjects.map((candidate) =>
getObjectKey(candidate) === getObjectKey(object) getObjectKey(candidate) === getObjectKey(object)

View File

@ -9,6 +9,13 @@ import {
const EMPTY_ZONES = []; const EMPTY_ZONES = [];
function createHistorySnapshot(objects, selectedObjectKey) {
return {
objects: objects.map((object) => ({ ...object })),
selectedObjectKey: selectedObjectKey ?? null,
};
}
export default function useLocationMapObjectActions({ export default function useLocationMapObjectActions({
canManage, canManage,
hiddenAreaCount, hiddenAreaCount,
@ -27,10 +34,13 @@ export default function useLocationMapObjectActions({
const [pendingDeleteObject, setPendingDeleteObject] = useState(null); const [pendingDeleteObject, setPendingDeleteObject] = useState(null);
const zones = mapState?.zones || EMPTY_ZONES; const zones = mapState?.zones || EMPTY_ZONES;
const remember = useCallback((currentObjects = objects) => { const remember = useCallback((currentObjects = objects, currentSelectedObjectKey = selectedObjectKey) => {
setHistory((previous) => [...previous.slice(-19), currentObjects.map((object) => ({ ...object }))]); setHistory((previous) => [
...previous.slice(-19),
createHistorySnapshot(currentObjects, currentSelectedObjectKey),
]);
setFuture([]); setFuture([]);
}, [objects, setFuture, setHistory]); }, [objects, selectedObjectKey, setFuture, setHistory]);
const updateObjects = useCallback((updater) => { const updateObjects = useCallback((updater) => {
setHasUnsavedChanges(true); setHasUnsavedChanges(true);

View File

@ -2,6 +2,31 @@ import { useCallback, useEffect } from "react";
import useMobileMapAutoFit from "./useMobileMapAutoFit"; import useMobileMapAutoFit from "./useMobileMapAutoFit";
import { getObjectKey } from "../lib/locationMapUtils"; import { getObjectKey } from "../lib/locationMapUtils";
function cloneMapObjects(objects = []) {
return objects.map((object) => ({ ...object }));
}
function getHistorySnapshot(snapshot, fallbackSelectedObjectKey = null) {
if (Array.isArray(snapshot)) {
return {
objects: cloneMapObjects(snapshot),
selectedObjectKey: fallbackSelectedObjectKey,
};
}
return {
objects: cloneMapObjects(snapshot?.objects || []),
selectedObjectKey: snapshot?.selectedObjectKey ?? null,
};
}
function createHistorySnapshot(objects, selectedObjectKey) {
return {
objects: cloneMapObjects(objects),
selectedObjectKey: selectedObjectKey ?? null,
};
}
export default function useLocationMapViewControls({ export default function useLocationMapViewControls({
filters, filters,
hasUnsavedChanges, hasUnsavedChanges,
@ -45,24 +70,38 @@ export default function useLocationMapViewControls({
const handleUndo = useCallback(() => { const handleUndo = useCallback(() => {
setHistory((previous) => { setHistory((previous) => {
if (previous.length === 0) return previous; if (previous.length === 0) return previous;
const priorObjects = previous[previous.length - 1]; const priorSnapshot = getHistorySnapshot(previous[previous.length - 1], selectedObjectKey);
setFuture((nextFuture) => [objects.map((object) => ({ ...object })), ...nextFuture.slice(0, 19)]); setFuture((nextFuture) => [
setObjects(priorObjects); createHistorySnapshot(objects, selectedObjectKey),
...nextFuture.slice(0, 19),
]);
setObjects(priorSnapshot.objects);
setSelectedObjectKey(priorSnapshot.selectedObjectKey);
setHasUnsavedChanges(true); setHasUnsavedChanges(true);
return previous.slice(0, -1); return previous.slice(0, -1);
}); });
}, [objects, setFuture, setHasUnsavedChanges, setHistory, setObjects]); }, [
objects, selectedObjectKey, setFuture, setHasUnsavedChanges, setHistory,
setObjects, setSelectedObjectKey,
]);
const handleRedo = useCallback(() => { const handleRedo = useCallback(() => {
setFuture((previous) => { setFuture((previous) => {
if (previous.length === 0) return previous; if (previous.length === 0) return previous;
const nextObjects = previous[0]; const nextSnapshot = getHistorySnapshot(previous[0], selectedObjectKey);
setHistory((nextHistory) => [...nextHistory.slice(-19), objects.map((object) => ({ ...object }))]); setHistory((nextHistory) => [
setObjects(nextObjects); ...nextHistory.slice(-19),
createHistorySnapshot(objects, selectedObjectKey),
]);
setObjects(nextSnapshot.objects);
setSelectedObjectKey(nextSnapshot.selectedObjectKey);
setHasUnsavedChanges(true); setHasUnsavedChanges(true);
return previous.slice(1); return previous.slice(1);
}); });
}, [objects, setFuture, setHasUnsavedChanges, setHistory, setObjects]); }, [
objects, selectedObjectKey, setFuture, setHasUnsavedChanges, setHistory,
setObjects, setSelectedObjectKey,
]);
const handlePreviewDraft = useCallback(() => { const handlePreviewDraft = useCallback(() => {
setMode("view"); setMode("view");

View File

@ -2094,6 +2094,57 @@ test("admin cleared map area labels keep linked zone action names", async ({ pag
await expect(page.getByRole("button", { name: "Map area Area Copy" })).toHaveCount(0); await expect(page.getByRole("button", { name: "Map area Area Copy" })).toHaveCount(0);
}); });
test("admin restores selected map area through duplicate undo and redo", async ({ page }) => {
await mockMapShell(page);
const mapState = draftMapState([
{
id: 1355,
location_map_id: 900,
zone_id: 501,
zone_name: "Bakery",
type: "zone",
label: "Bakery",
x: 40,
y: 40,
width: 260,
height: 160,
rotation: 0,
locked: false,
visible: true,
sort_order: 1,
},
], true);
await page.route("**/households/1/locations/10/map", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify(mapState),
});
});
await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Continue Editing" }).click();
await page.getByRole("button", { name: "Map area Bakery" }).click();
await expect(page.locator(".location-map-object.is-selected")).toHaveAttribute("data-object-key", "1355");
await page.getByRole("button", { name: "Duplicate" }).click();
await expect(page.getByRole("textbox", { name: "Label" })).toHaveValue("Bakery Copy");
await expect(page.locator(".location-map-object.is-selected")).toContainText("Bakery Copy");
await page.getByRole("button", { name: "Undo" }).click();
await expect(page.getByRole("button", { name: "Map area Bakery Copy" })).toHaveCount(0);
await expect(page.getByRole("textbox", { name: "Label" })).toHaveValue("Bakery");
await expect(page.locator(".location-map-object.is-selected")).toHaveAttribute("data-object-key", "1355");
await page.getByRole("button", { name: "Redo" }).click();
await expect(page.getByRole("button", { name: "Map area Bakery Copy" })).toBeVisible();
await expect(page.getByRole("textbox", { name: "Label" })).toHaveValue("Bakery Copy");
await expect(page.locator(".location-map-object.is-selected")).toContainText("Bakery Copy");
});
test("admin nudges selected map areas with arrow keys", async ({ page }) => { test("admin nudges selected map areas with arrow keys", async ({ page }) => {
await mockMapShell(page); await mockMapShell(page);