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

Merge pull request 'Compact store delete count label' (#10) from feature/compact-store-delete-label into feature-custom-store-locations

Browse Source
This commit is contained in:
nalalangan 2026-05-31 17:22:59 -09:00
commit ce04ac6951
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/guides/management-modal-patterns.md
View File

@ -23,7 +23,7 @@ Use this guide for modals that manage scoped lists of app-owned records, such as
## Bulk Delete Pattern ## Bulk Delete Pattern
- Show a `Delete Items` button above the list for users with delete permission. - Show a `Delete Items` button above the list for users with delete permission.
- Clicking `Delete Items` enters delete mode, clears any previous selection, and changes the button to `Confirm Delete (# selected)`. - Clicking `Delete Items` enters delete mode, clears any previous selection, and changes the button to `Confirm Delete (#)`.
- Show a `Cancel` button while delete mode is active. - Show a `Cancel` button while delete mode is active.
- Disable confirm while zero items are selected. - Disable confirm while zero items are selected.
- Clicking confirm opens `ConfirmSlideModal`; only the slide confirmation performs the mutation. - Clicking confirm opens `ConfirmSlideModal`; only the slide confirmation performs the mutation.

2
frontend/src/components/manage/StoreAvailableItemsManager.jsx
View File

@ -246,7 +246,7 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
disabled={deleteMode ? selectedDeleteCount === 0 : loading} disabled={deleteMode ? selectedDeleteCount === 0 : loading}
onClick={deleteMode ? confirmSelectedDelete : startDeleteMode} onClick={deleteMode ? confirmSelectedDelete : startDeleteMode}
> >
{deleteMode ? `Confirm Delete (${selectedDeleteCount} selected)` : "Delete Items"} {deleteMode ? `Confirm Delete (${selectedDeleteCount})` : "Delete Items"}
</button> </button>
{deleteMode ? ( {deleteMode ? (
<button <button

8
frontend/tests/available-items-catalog.spec.ts
View File

@ -149,19 +149,19 @@ test("manage stores opens a modal to edit and delete household store items", asy
await expect(managerModal.getByText("produce | Fruits | Produce & Fresh Vegetables")).toHaveCount(0); await expect(managerModal.getByText("produce | Fruits | Produce & Fresh Vegetables")).toHaveCount(0);
await managerModal.getByRole("button", { name: "Delete Items" }).click(); await managerModal.getByRole("button", { name: "Delete Items" }).click();
await expect(managerModal.getByRole("button", { name: "Confirm Delete (0 selected)" })).toBeDisabled(); await expect(managerModal.getByRole("button", { name: "Confirm Delete (0)" })).toBeDisabled();
await expect(managerModal.getByRole("button", { name: "Cancel" })).toBeVisible(); await expect(managerModal.getByRole("button", { name: "Cancel" })).toBeVisible();
await milkRow.click(); await milkRow.click();
await expect(managerModal.getByRole("button", { name: "Confirm Delete (1 selected)" })).toBeEnabled(); await expect(managerModal.getByRole("button", { name: "Confirm Delete (1)" })).toBeEnabled();
await expect(milkRow).toHaveClass(/is-selected/); await expect(milkRow).toHaveClass(/is-selected/);
await milkRow.click(); await milkRow.click();
await expect(managerModal.getByRole("button", { name: "Confirm Delete (0 selected)" })).toBeDisabled(); await expect(managerModal.getByRole("button", { name: "Confirm Delete (0)" })).toBeDisabled();
await expect(milkRow).not.toHaveClass(/is-selected/); await expect(milkRow).not.toHaveClass(/is-selected/);
await milkRow.click(); await milkRow.click();
await managerModal.getByRole("button", { name: "Confirm Delete (1 selected)" }).click(); await managerModal.getByRole("button", { name: "Confirm Delete (1)" }).click();
const confirmModal = page.locator(".confirm-slide-modal"); const confirmModal = page.locator(".confirm-slide-modal");
await expect(confirmModal).toBeVisible(); await expect(confirmModal).toBeVisible();
await expect(confirmModal.getByText("Delete milk?")).toBeVisible(); await expect(confirmModal.getByText("Delete milk?")).toBeVisible();