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

fix: use item placeholder icon in store manager

Browse Source
This commit is contained in:
Nico 2026-05-31 18:15:52 -07:00
parent cb38b051b3
commit 6731ba3d09
3 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -213,8 +213,11 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
{imageSrc ? ( {imageSrc ? (
<img src={imageSrc} alt="" className="store-available-items-thumb" /> <img src={imageSrc} alt="" className="store-available-items-thumb" />
) : ( ) : (
<span className="store-available-items-thumb store-available-items-thumb-placeholder"> <span
{item.item_name?.slice(0, 1).toUpperCase() || "?"} className="store-available-items-thumb store-available-items-thumb-placeholder"
aria-hidden="true"
>
{"\uD83D\uDCE6"}
</span> </span>
)} )}
<div className="store-available-items-copy"> <div className="store-available-items-copy">

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

@ -153,8 +153,11 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--color-text-secondary); border: var(--border-width-medium) solid var(--color-border-light);
font-weight: var(--font-weight-semibold); background: var(--color-gray-100);
color: var(--color-border-medium);
font-size: 1.75rem;
line-height: 1;
} }
.store-available-items-copy { .store-available-items-copy {

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

@ -36,15 +36,15 @@ test("manage stores opens a modal to edit and delete household store items", asy
}, },
]; ];
await page.route("**/stores", async (route) => { await page.route("**/households/1/stores", async (route) => {
await route.fulfill({ await route.fulfill({
status: 200, status: 200,
contentType: "application/json", contentType: "application/json",
body: JSON.stringify([{ id: 10, name: "Costco" }]), body: JSON.stringify([{ id: 10, household_store_id: 100, name: "Costco", is_default: true }]),
}); });
}); });
await page.route("**/households/1/stores/10/available-items*", async (route) => { await page.route("**/households/1/locations/10/available-items*", async (route) => {
const request = route.request(); const request = route.request();
const url = new URL(request.url()); const url = new URL(request.url());
const query = (url.searchParams.get("query") || "").toLowerCase(); const query = (url.searchParams.get("query") || "").toLowerCase();
@ -62,7 +62,7 @@ test("manage stores opens a modal to edit and delete household store items", asy
await route.fulfill({ status: 500 }); await route.fulfill({ status: 500 });
}); });
await page.route("**/households/1/stores/10/available-items/777", async (route) => { await page.route("**/households/1/locations/10/available-items/777", async (route) => {
if (route.request().method() === "PATCH") { if (route.request().method() === "PATCH") {
availableItems = availableItems.map((item) => availableItems = availableItems.map((item) =>
item.item_id === 777 item.item_id === 777
@ -89,7 +89,7 @@ test("manage stores opens a modal to edit and delete household store items", asy
await route.fulfill({ status: 500 }); await route.fulfill({ status: 500 });
}); });
await page.route("**/households/1/stores/10/available-items/501", async (route) => { await page.route("**/households/1/locations/10/available-items/501", async (route) => {
if (route.request().method() === "DELETE") { if (route.request().method() === "DELETE") {
availableItems = availableItems.filter((item) => item.item_id !== 501); availableItems = availableItems.filter((item) => item.item_id !== 501);
await route.fulfill({ await route.fulfill({
@ -115,6 +115,7 @@ test("manage stores opens a modal to edit and delete household store items", asy
await expect(managerModal).toBeVisible(); await expect(managerModal).toBeVisible();
await expect(managerModal.getByText("milk", { exact: true })).toBeVisible(); await expect(managerModal.getByText("milk", { exact: true })).toBeVisible();
await expect(managerModal.getByText("apples", { 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 managerModal.locator(".store-items-table-row").filter({ hasText: "apples" }).getByRole("button", { name: "Edit Settings" }).click(); await managerModal.locator(".store-items-table-row").filter({ hasText: "apples" }).getByRole("button", { name: "Edit Settings" }).click();
const editorModal = page.locator(".available-item-editor-modal"); const editorModal = page.locator(".available-item-editor-modal");
@ -156,7 +157,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
}); });
}); });
await page.route("**/households/1/stores/10/list/recent", async (route) => { await page.route("**/households/1/locations/10/list/recent", async (route) => {
await route.fulfill({ await route.fulfill({
status: 200, status: 200,
contentType: "application/json", contentType: "application/json",
@ -164,7 +165,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
}); });
}); });
await page.route("**/households/1/stores/10/list/suggestions**", async (route) => { await page.route("**/households/1/locations/10/list/suggestions**", async (route) => {
await route.fulfill({ await route.fulfill({
status: 200, status: 200,
contentType: "application/json", contentType: "application/json",
@ -172,7 +173,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
}); });
}); });
await page.route("**/households/1/stores/10/list/item**", async (route) => { await page.route("**/households/1/locations/10/list/item**", async (route) => {
await route.fulfill({ await route.fulfill({
status: 404, status: 404,
contentType: "application/json", contentType: "application/json",
@ -180,7 +181,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
}); });
}); });
await page.route("**/households/1/stores/10/list", async (route) => { await page.route("**/households/1/locations/10/list", async (route) => {
await route.fulfill({ await route.fulfill({
status: 200, status: 200,
contentType: "application/json", contentType: "application/json",