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

Simplify store item manager rows #8

Merged
nalalangan merged 1 commits from feature/store-item-manager-cleanup into feature-custom-store-locations 2026-05-31 16:43:56 -09:00
Conversation 0 Commits 1 Files Changed 3 +42 -58
3 changed files with 42 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6252c0538f - Show all commits

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

@ -195,20 +195,13 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
<p className="empty-message">No household items found for this store yet.</p>
) : (
<div className="store-items-table">
<div className="store-items-table-head" aria-hidden="true">
<span>Item</span>
<span>Store Defaults</span>
<span>Actions</span>
</div>
<div className="store-items-table-body">
{items.map((item) => {
const imageSrc = itemImageSource(item);
const details = [item.item_type, item.item_group, item.zone].filter(Boolean);
return (
<div key={item.item_id} className="store-items-table-row">
<div className="store-items-table-cell store-items-table-item">
<span className="store-items-mobile-label">Item</span>
<div className="store-available-items-summary">
{imageSrc ? (
<img src={imageSrc} alt="" className="store-available-items-thumb" />
@ -226,19 +219,11 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
</div>
</div>
<div className="store-items-table-cell">
<span className="store-items-mobile-label">Store Defaults</span>
<span className="store-items-defaults-text">
{details.join(" | ") || "No store defaults set"}
</span>
</div>
<div className="store-items-table-cell store-items-table-actions">
<span className="store-items-mobile-label">Actions</span>
<div className="store-available-items-actions">
<button
type="button"
className="btn-secondary btn-small"
className="btn-secondary btn-small store-available-items-action"
onClick={() => {
setEditorItem(item);
setShowEditor(true);
@ -249,7 +234,7 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
{isAdmin ? (
<button
type="button"
className="btn-danger btn-small"
className="btn-danger btn-small store-available-items-action"
onClick={() => setPendingDeleteItem(item)}
>
Delete Item

56
frontend/src/styles/components/manage/StoreAvailableItemsManager.css
View File

@ -60,11 +60,22 @@
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
gap: var(--spacing-xs);
background: var(--modal-bg);
}
.store-items-modal-toolbar .btn-small {
flex: 0 0 auto;
min-height: 40px;
white-space: nowrap;
}
.store-available-items-search {
flex: 1 1 auto;
width: 100%;
min-width: 0;
padding: var(--input-padding-y) var(--input-padding-x);
border: var(--border-width-thin) solid var(--input-border-color);
border-radius: var(--input-border-radius);
@ -92,26 +103,13 @@
gap: var(--spacing-sm);
}
.store-items-table-head,
.store-items-table-row {
display: grid;
grid-template-columns: minmax(220px, 2fr) minmax(180px, 2fr) minmax(170px, 1fr);
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--spacing-md);
align-items: center;
}
.store-items-table-head {
position: sticky;
top: 0;
padding: 0 var(--spacing-sm) var(--spacing-xs);
background: var(--modal-bg);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.store-items-table-body {
display: flex;
flex-direction: column;
@ -174,11 +172,6 @@
white-space: nowrap;
}
.store-items-defaults-text {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.store-items-table-actions {
justify-self: end;
}
@ -190,8 +183,11 @@
justify-content: flex-end;
}
.store-items-mobile-label {
display: none;
.store-available-items-action {
min-width: 112px;
min-height: 36px;
border-radius: var(--button-border-radius);
padding-inline: var(--spacing-md);
}
@media (max-width: 720px) {
@ -200,27 +196,11 @@
padding: var(--spacing-md);
}
.store-items-table-head {
display: none;
}
.store-items-table-row {
display: flex;
flex-direction: column;
align-items: stretch;
grid-template-columns: minmax(0, 1fr);
gap: var(--spacing-sm);
}
.store-items-mobile-label {
display: block;
margin-bottom: 4px;
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.store-items-table-actions {
justify-self: stretch;
}

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

@ -116,8 +116,27 @@ test("manage stores opens a modal to edit and delete household store items", asy
await expect(managerModal.getByText("milk", { exact: true })).toBeVisible();
await expect(managerModal.getByText("apples", { exact: true })).toBeVisible();
await expect(managerModal.locator(".store-available-items-thumb-placeholder").first()).toHaveText("\uD83D\uDCE6");
await expect(managerModal.getByText("Store Defaults")).toHaveCount(0);
await expect(managerModal.getByText("No store defaults set")).toHaveCount(0);
await managerModal.locator(".store-items-table-row").filter({ hasText: "apples" }).getByRole("button", { name: "Edit Settings" }).click();
const searchBox = await managerModal.getByPlaceholder("Search household/store items").boundingBox();
const addButtonBox = await managerModal.getByRole("button", { name: "Add Item" }).boundingBox();
expect(searchBox).not.toBeNull();
expect(addButtonBox).not.toBeNull();
expect(
Math.abs(
((searchBox?.y ?? 0) + (searchBox?.height ?? 0) / 2) -
((addButtonBox?.y ?? 0) + (addButtonBox?.height ?? 0) / 2)
)
).toBeLessThan(2);
const appleRow = managerModal.locator(".store-items-table-row").filter({ hasText: "apples" });
const appleEditButton = appleRow.getByRole("button", { name: "Edit Settings" });
const milkDeleteButton = managerModal.locator(".store-items-table-row").filter({ hasText: "milk" }).getByRole("button", { name: "Delete Item" });
await expect(appleEditButton).toHaveClass(/store-available-items-action/);
await expect(milkDeleteButton).toHaveClass(/store-available-items-action/);
await appleEditButton.click();
const editorModal = page.locator(".available-item-editor-modal");
await expect(editorModal).toBeVisible();
await expect(editorModal.getByLabel("Item Name")).toBeDisabled();
@ -127,9 +146,9 @@ test("manage stores opens a modal to edit and delete household store items", asy
await editorModal.getByRole("button", { name: "Save Changes" }).click();
await expect(page.locator(".action-toast.action-toast-success")).toContainText("Updated store item");
await expect(managerModal.getByText("produce | Fruits | Produce & Fresh Vegetables")).toBeVisible();
await expect(managerModal.getByText("produce | Fruits | Produce & Fresh Vegetables")).toHaveCount(0);
await managerModal.locator(".store-items-table-row").filter({ hasText: "milk" }).getByRole("button", { name: "Delete Item" }).click();
await milkDeleteButton.click();
const confirmModal = page.locator(".confirm-slide-modal");
await expect(confirmModal).toBeVisible();
await expect(confirmModal.getByText("Delete milk?")).toBeVisible();