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

fix: expand long zone map item lists

Browse Source
This commit is contained in:
Nico 2026-06-04 11:29:52 -07:00
parent 4c42808396
commit 628a4f48c2
3 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/components/maps/LocationMapBottomSheetSections.jsx
View File

@ -12,7 +12,7 @@ export const MAP_DISPLAY_CONTROLS = [
["showUnmapped", "Unmapped"],
];
const UNMAPPED_PREVIEW_LIMIT = 8;
const MAP_ITEM_PREVIEW_LIMIT = 8;
function MapItemActionRow({ item, onSelectItem }) {
const isBought = Boolean(item.bought);
@ -35,6 +35,44 @@ function MapItemActionRow({ item, onSelectItem }) {
);
}
function MapItemActionList({ items, onSelectItem, itemGroupLabel }) {
const [showAllItems, setShowAllItems] = useState(false);
useEffect(() => {
if (items.length <= MAP_ITEM_PREVIEW_LIMIT) {
setShowAllItems(false);
}
}, [items.length]);
const visibleItems = showAllItems ? items : items.slice(0, MAP_ITEM_PREVIEW_LIMIT);
const overflowItemCount = items.length - visibleItems.length;
const hasOverflow = items.length > MAP_ITEM_PREVIEW_LIMIT;
return (
<ul>
{visibleItems.map((item) => (
<MapItemActionRow key={item.id} item={item} onSelectItem={onSelectItem} />
))}
{hasOverflow ? (
<li className="location-map-list-more">
<button
type="button"
className="location-map-list-more-button"
onClick={() => setShowAllItems((current) => !current)}
aria-label={
showAllItems
? `Show fewer ${itemGroupLabel}`
: `Show ${overflowItemCount} more ${itemGroupLabel}`
}
>
{showAllItems ? "Show fewer" : `+${overflowItemCount} more`}
</button>
</li>
) : null}
</ul>
);
}
export function LocationMapLayerPanel({ filters, setFilters }) {
return (
<div className="location-map-display-panel">
@ -159,11 +197,11 @@ export function SelectedZoneItemsPanel({
return (
<div className="location-map-zone-items">
<ul>
{selectedZoneItems.map((item) => (
<MapItemActionRow key={item.id} item={item} onSelectItem={onSelectZoneItem} />
))}
</ul>
<MapItemActionList
items={selectedZoneItems}
onSelectItem={onSelectZoneItem}
itemGroupLabel="zone items"
/>
{hasHiddenSelectedItems ? (
<div className="location-map-zone-hidden-note">
<p className="location-map-muted">
@ -185,14 +223,6 @@ export function UnmappedItemsPanel({
onShowUnmappedItems,
onSelectUnmappedItem,
}) {
const [showAllUnmappedItems, setShowAllUnmappedItems] = useState(false);
useEffect(() => {
if (visibleUnmappedItems.length <= UNMAPPED_PREVIEW_LIMIT) {
setShowAllUnmappedItems(false);
}
}, [visibleUnmappedItems.length]);
if (visibleUnmappedItems.length === 0 && hasHiddenUnmappedItems) {
return (
<div className="location-map-unmapped-list">
@ -213,36 +243,14 @@ export function UnmappedItemsPanel({
return null;
}
const unmappedItemPreview = showAllUnmappedItems
? visibleUnmappedItems
: visibleUnmappedItems.slice(0, UNMAPPED_PREVIEW_LIMIT);
const overflowUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
const hasUnmappedOverflow = visibleUnmappedItems.length > UNMAPPED_PREVIEW_LIMIT;
return (
<div className="location-map-unmapped-list">
<strong>Unmapped Items</strong>
<ul>
{unmappedItemPreview.map((item) => (
<MapItemActionRow key={item.id} item={item} onSelectItem={onSelectUnmappedItem} />
))}
{hasUnmappedOverflow ? (
<li className="location-map-unmapped-more">
<button
type="button"
className="location-map-list-more-button"
onClick={() => setShowAllUnmappedItems((current) => !current)}
aria-label={
showAllUnmappedItems
? "Show fewer unmapped items"
: `Show ${overflowUnmappedItemCount} more unmapped items`
}
>
{showAllUnmappedItems ? "Show fewer" : `+${overflowUnmappedItemCount} more`}
</button>
</li>
) : null}
</ul>
<MapItemActionList
items={visibleUnmappedItems}
onSelectItem={onSelectUnmappedItem}
itemGroupLabel="unmapped items"
/>
{hiddenUnmappedItemCount > 0 ? (
<div className="location-map-zone-hidden-note">
<p className="location-map-muted">

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

@ -827,7 +827,7 @@
margin-bottom: 0.45rem;
}
.location-map-unmapped-list .location-map-unmapped-more {
.location-map-list-more {
padding: 0;
overflow: hidden;
border-style: dashed;

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

@ -2696,9 +2696,16 @@ test("viewer handles empty and many-item zone panels without default pins", asyn
await page.locator('[data-object-key="1561"]').locator("rect").first().click();
await expect(page.locator(".location-map-sheet-count")).toHaveText("14 items");
await expect(page.locator(".location-map-zone-items li")).toHaveCount(14);
await expect(page.locator(".location-map-zone-items li").first()).toContainText("bulk item 1");
await expect(page.locator(".location-map-zone-items li").last()).toContainText("bulk item 14");
await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(8);
await expect(page.locator(".location-map-zone-items .location-map-item-row").first()).toContainText("bulk item 1");
await expect(page.getByText("bulk item 9")).toHaveCount(0);
await expect(page.getByRole("button", { name: "Show 6 more zone items" })).toHaveText("+6 more");
await page.getByRole("button", { name: "Show 6 more zone items" }).click();
await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(14);
await expect(page.locator(".location-map-zone-items .location-map-item-row").last()).toContainText("bulk item 14");
await expect(page.getByRole("button", { name: "Show fewer zone items" })).toHaveText("Show fewer");
await expect(page.locator(".location-map-pin")).toHaveCount(0);
});