Draft: Improve grocery list interactions #21
@ -7,39 +7,49 @@ function GroceryListItem({
|
||||
onOpenBuyModal,
|
||||
onImageAdded,
|
||||
onLongPress,
|
||||
onSkip,
|
||||
compact = false
|
||||
}) {
|
||||
const [showAddImageModal, setShowAddImageModal] = useState(false);
|
||||
const [actionsOpen, setActionsOpen] = useState(false);
|
||||
|
||||
const longPressTimer = useRef(null);
|
||||
const pressStartPos = useRef({ x: 0, y: 0 });
|
||||
|
||||
const handleTouchStart = (e) => {
|
||||
const touch = e.touches[0];
|
||||
const hasActions = Boolean(onClick || onLongPress || onImageAdded || onSkip);
|
||||
|
||||
const clearLongPressTimer = () => {
|
||||
clearTimeout(longPressTimer.current);
|
||||
};
|
||||
|
||||
const handleTouchStart = (event) => {
|
||||
const touch = event.touches[0];
|
||||
pressStartPos.current = { x: touch.clientX, y: touch.clientY };
|
||||
|
||||
longPressTimer.current = setTimeout(() => {
|
||||
if (onLongPress) {
|
||||
onLongPress(item);
|
||||
}
|
||||
}, 500); // 500ms for long press
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const handleTouchMove = (e) => {
|
||||
// Cancel long press if finger moves too much
|
||||
const touch = e.touches[0];
|
||||
const moveDistance = Math.sqrt(
|
||||
Math.pow(touch.clientX - pressStartPos.current.x, 2) +
|
||||
Math.pow(touch.clientY - pressStartPos.current.y, 2)
|
||||
);
|
||||
const handleTouchMove = (event) => {
|
||||
const touch = event.touches[0];
|
||||
const deltaX = touch.clientX - pressStartPos.current.x;
|
||||
const deltaY = touch.clientY - pressStartPos.current.y;
|
||||
const moveDistance = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
|
||||
|
||||
if (moveDistance > 10) {
|
||||
clearTimeout(longPressTimer.current);
|
||||
clearLongPressTimer();
|
||||
}
|
||||
|
||||
if (hasActions && Math.abs(deltaX) > 45 && Math.abs(deltaX) > Math.abs(deltaY) * 1.25) {
|
||||
setActionsOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
clearTimeout(longPressTimer.current);
|
||||
clearLongPressTimer();
|
||||
};
|
||||
|
||||
const handleMouseDown = () => {
|
||||
@ -51,24 +61,42 @@ function GroceryListItem({
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
clearTimeout(longPressTimer.current);
|
||||
clearLongPressTimer();
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
clearTimeout(longPressTimer.current);
|
||||
clearLongPressTimer();
|
||||
};
|
||||
|
||||
const handleItemClick = () => {
|
||||
if (actionsOpen) {
|
||||
setActionsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (onClick) {
|
||||
onClick(item);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageClick = (e) => {
|
||||
e.stopPropagation(); // Prevent triggering the bought action
|
||||
const handleItemKeyDown = (event) => {
|
||||
if (event.key === "Escape" && actionsOpen) {
|
||||
setActionsOpen(false);
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
if ((event.key === "Enter" || event.key === " ") && onClick) {
|
||||
event.preventDefault();
|
||||
handleItemClick();
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageClick = (event) => {
|
||||
event.stopPropagation();
|
||||
if (item.item_image && onOpenBuyModal) {
|
||||
onOpenBuyModal(item);
|
||||
} else {
|
||||
} else if (onImageAdded) {
|
||||
setShowAddImageModal(true);
|
||||
}
|
||||
};
|
||||
@ -80,6 +108,52 @@ function GroceryListItem({
|
||||
setShowAddImageModal(false);
|
||||
};
|
||||
|
||||
const handleActionToggle = (event) => {
|
||||
event.stopPropagation();
|
||||
clearLongPressTimer();
|
||||
setActionsOpen((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleBoughtAction = (event) => {
|
||||
event.stopPropagation();
|
||||
clearLongPressTimer();
|
||||
setActionsOpen(false);
|
||||
if (onClick) {
|
||||
onClick(item);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditAction = (event) => {
|
||||
event.stopPropagation();
|
||||
clearLongPressTimer();
|
||||
setActionsOpen(false);
|
||||
if (onLongPress) {
|
||||
onLongPress(item);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageAction = (event) => {
|
||||
event.stopPropagation();
|
||||
clearLongPressTimer();
|
||||
setActionsOpen(false);
|
||||
if (onImageAdded) {
|
||||
setShowAddImageModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkipAction = (event) => {
|
||||
event.stopPropagation();
|
||||
clearLongPressTimer();
|
||||
setActionsOpen(false);
|
||||
if (onSkip) {
|
||||
onSkip(item);
|
||||
}
|
||||
};
|
||||
|
||||
const stopActionEvent = (event) => {
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
const imageUrl = item.item_image && item.image_mime_type
|
||||
? `data:${item.image_mime_type};base64,${item.item_image}`
|
||||
: null;
|
||||
@ -99,37 +173,39 @@ function GroceryListItem({
|
||||
|
||||
if (diffDays < 7) {
|
||||
return `${diffDays}d ago`;
|
||||
} else if (diffDays < 30) {
|
||||
}
|
||||
if (diffDays < 30) {
|
||||
const weeks = Math.floor(diffDays / 7);
|
||||
return `${weeks}w ago`;
|
||||
} else {
|
||||
const months = Math.floor(diffDays / 30);
|
||||
return `${months}m ago`;
|
||||
}
|
||||
const months = Math.floor(diffDays / 30);
|
||||
return `${months}m ago`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<li
|
||||
className={`glist-li ${compact ? 'compact' : ''}`}
|
||||
className={`glist-li ${compact ? "compact" : ""} ${actionsOpen ? "actions-open" : ""}`}
|
||||
onClick={handleItemClick}
|
||||
onKeyDown={handleItemKeyDown}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
tabIndex={onClick ? 0 : undefined}
|
||||
>
|
||||
<div className="glist-item-layout">
|
||||
<div
|
||||
className={`glist-item-image ${item.item_image ? "has-image" : ""}`}
|
||||
onClick={handleImageClick}
|
||||
style={{ cursor: "pointer" }}
|
||||
style={{ cursor: onImageAdded || (item.item_image && onOpenBuyModal) ? "pointer" : "default" }}
|
||||
>
|
||||
{item.item_image ? (
|
||||
<img src={imageUrl} alt={item.item_name} />
|
||||
) : (
|
||||
<span>📦</span>
|
||||
<span className="glist-item-image-placeholder">Img</span>
|
||||
)}
|
||||
<span className="glist-item-quantity">x{item.quantity}</span>
|
||||
</div>
|
||||
@ -139,12 +215,55 @@ function GroceryListItem({
|
||||
</div>
|
||||
{addedByUsers.length > 0 && (
|
||||
<div className="glist-item-users">
|
||||
{item.last_added_on && `${getTimeAgo(item.last_added_on)} -- `}
|
||||
{item.last_added_on && `${getTimeAgo(item.last_added_on)} - `}
|
||||
{addedByUsers.join(" | ")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{hasActions && (
|
||||
<button
|
||||
type="button"
|
||||
className="glist-item-action-toggle"
|
||||
aria-label={`Actions for ${item.item_name}`}
|
||||
aria-expanded={actionsOpen}
|
||||
onClick={handleActionToggle}
|
||||
onMouseDown={stopActionEvent}
|
||||
onTouchStart={stopActionEvent}
|
||||
>
|
||||
...
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{actionsOpen && (
|
||||
<div
|
||||
className="glist-item-action-tray"
|
||||
onClick={stopActionEvent}
|
||||
onMouseDown={stopActionEvent}
|
||||
onTouchStart={stopActionEvent}
|
||||
>
|
||||
{onClick && (
|
||||
<button type="button" className="glist-item-action" onClick={handleBoughtAction}>
|
||||
Bought
|
||||
</button>
|
||||
)}
|
||||
{onLongPress && (
|
||||
<button type="button" className="glist-item-action" onClick={handleEditAction}>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{onImageAdded && (
|
||||
<button type="button" className="glist-item-action" onClick={handleImageAction}>
|
||||
{item.item_image ? "Image" : "Add image"}
|
||||
</button>
|
||||
)}
|
||||
{onSkip && (
|
||||
<button type="button" className="glist-item-action secondary" onClick={handleSkipAction}>
|
||||
Skip
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
|
||||
{showAddImageModal && (
|
||||
@ -158,22 +277,19 @@ function GroceryListItem({
|
||||
);
|
||||
}
|
||||
|
||||
// Memoize component to prevent re-renders when props haven't changed
|
||||
export default memo(GroceryListItem, (prevProps, nextProps) => {
|
||||
// Only re-render if the item data or handlers have changed
|
||||
return (
|
||||
prevProps.item.id === nextProps.item.id &&
|
||||
prevProps.item.item_name === nextProps.item.item_name &&
|
||||
prevProps.item.quantity === nextProps.item.quantity &&
|
||||
prevProps.item.item_image === nextProps.item.item_image &&
|
||||
prevProps.item.bought === nextProps.item.bought &&
|
||||
prevProps.item.last_added_on === nextProps.item.last_added_on &&
|
||||
prevProps.item.zone === nextProps.item.zone &&
|
||||
prevProps.item.added_by_users?.join(',') === nextProps.item.added_by_users?.join(',') &&
|
||||
prevProps.onClick === nextProps.onClick &&
|
||||
prevProps.onOpenBuyModal === nextProps.onOpenBuyModal &&
|
||||
prevProps.onImageAdded === nextProps.onImageAdded &&
|
||||
prevProps.onLongPress === nextProps.onLongPress &&
|
||||
prevProps.compact === nextProps.compact
|
||||
);
|
||||
});
|
||||
export default memo(GroceryListItem, (prevProps, nextProps) => (
|
||||
prevProps.item.id === nextProps.item.id &&
|
||||
prevProps.item.item_name === nextProps.item.item_name &&
|
||||
prevProps.item.quantity === nextProps.item.quantity &&
|
||||
prevProps.item.item_image === nextProps.item.item_image &&
|
||||
prevProps.item.bought === nextProps.item.bought &&
|
||||
prevProps.item.last_added_on === nextProps.item.last_added_on &&
|
||||
prevProps.item.zone === nextProps.item.zone &&
|
||||
prevProps.item.added_by_users?.join(",") === nextProps.item.added_by_users?.join(",") &&
|
||||
prevProps.onClick === nextProps.onClick &&
|
||||
prevProps.onOpenBuyModal === nextProps.onOpenBuyModal &&
|
||||
prevProps.onImageAdded === nextProps.onImageAdded &&
|
||||
prevProps.onLongPress === nextProps.onLongPress &&
|
||||
prevProps.onSkip === nextProps.onSkip &&
|
||||
prevProps.compact === nextProps.compact
|
||||
));
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
import { useState } from "react";
|
||||
import "../../styles/components/AddItemWithDetailsModal.css";
|
||||
import ClassificationSection from "../forms/ClassificationSection";
|
||||
import useActionToast from "../../hooks/useActionToast";
|
||||
import { getZoneValues } from "../../constants/classifications";
|
||||
import ImageUploadSection from "../forms/ImageUploadSection";
|
||||
|
||||
export default function AddItemWithDetailsModal({ itemName, zones = [], onConfirm, onCancel }) {
|
||||
const toast = useActionToast();
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const [imagePreview, setImagePreview] = useState(null);
|
||||
const [itemType, setItemType] = useState("");
|
||||
const [itemGroup, setItemGroup] = useState("");
|
||||
const [zone, setZone] = useState("");
|
||||
const zoneOptions = Array.isArray(zones) && zones.length > 0
|
||||
? zones.map((candidateZone) => candidateZone.name || candidateZone).filter(Boolean)
|
||||
: getZoneValues();
|
||||
|
||||
const handleImageChange = (file) => {
|
||||
setSelectedImage(file);
|
||||
@ -26,22 +25,12 @@ export default function AddItemWithDetailsModal({ itemName, zones = [], onConfir
|
||||
setImagePreview(null);
|
||||
};
|
||||
|
||||
const handleItemTypeChange = (newType) => {
|
||||
setItemType(newType);
|
||||
setItemGroup(""); // Reset group when type changes
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (itemType && !itemGroup) {
|
||||
toast.error("Add item failed", `Add item failed: Select an item group for ${itemName}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const hasClassificationDetails = Boolean(itemType || itemGroup || zone);
|
||||
const hasClassificationDetails = Boolean(zone);
|
||||
const classification = hasClassificationDetails ? {
|
||||
item_type: itemType,
|
||||
item_group: itemGroup || null,
|
||||
zone: zone || null
|
||||
item_type: null,
|
||||
item_group: null,
|
||||
zone
|
||||
} : null;
|
||||
|
||||
onConfirm(selectedImage, classification);
|
||||
@ -68,18 +57,22 @@ export default function AddItemWithDetailsModal({ itemName, zones = [], onConfir
|
||||
|
||||
{/* Classification Section */}
|
||||
<div className="add-item-details-section">
|
||||
<ClassificationSection
|
||||
itemType={itemType}
|
||||
itemGroup={itemGroup}
|
||||
zone={zone}
|
||||
onItemTypeChange={handleItemTypeChange}
|
||||
onItemGroupChange={setItemGroup}
|
||||
onZoneChange={setZone}
|
||||
zones={zones}
|
||||
title={null}
|
||||
fieldClass="add-item-details-field"
|
||||
selectClass="add-item-details-select"
|
||||
/>
|
||||
<div className="add-item-details-field add-item-details-zone-field">
|
||||
<label htmlFor="add-item-zone">Store Zone</label>
|
||||
<select
|
||||
id="add-item-zone"
|
||||
value={zone}
|
||||
onChange={(event) => setZone(event.target.value)}
|
||||
className="add-item-details-select"
|
||||
>
|
||||
<option value="">No zone yet</option>
|
||||
{zoneOptions.map((candidateZone) => (
|
||||
<option key={candidateZone} value={candidateZone}>
|
||||
{candidateZone}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
|
||||
@ -85,15 +85,16 @@ export default function ConfirmBuyModal({
|
||||
onClick={handlePrev}
|
||||
style={{ visibility: hasPrev ? "visible" : "hidden" }}
|
||||
disabled={!hasPrev || isSubmitting}
|
||||
aria-label="Previous item"
|
||||
>
|
||||
{"<"}
|
||||
</button>
|
||||
|
||||
<div className="confirm-buy-image-container">
|
||||
<div className={`confirm-buy-image-container ${imageUrl ? "has-image" : "no-image"}`}>
|
||||
{imageUrl ? (
|
||||
<img src={imageUrl} alt={item.item_name} className="confirm-buy-image" />
|
||||
) : (
|
||||
<div className="confirm-buy-image-placeholder">[ ]</div>
|
||||
<div className="confirm-buy-image-placeholder">No image</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -102,6 +103,7 @@ export default function ConfirmBuyModal({
|
||||
onClick={handleNext}
|
||||
style={{ visibility: hasNext ? "visible" : "hidden" }}
|
||||
disabled={!hasNext || isSubmitting}
|
||||
aria-label="Next item"
|
||||
>
|
||||
{">"}
|
||||
</button>
|
||||
|
||||
@ -133,40 +133,6 @@ export default function EditItemModal({ item, zones = [], onSave, onCancel, onIm
|
||||
|
||||
<div className="edit-modal-divider" />
|
||||
|
||||
<div className="edit-modal-inline-field">
|
||||
<label>Type</label>
|
||||
<select
|
||||
value={itemType}
|
||||
onChange={(e) => handleItemTypeChange(e.target.value)}
|
||||
className="edit-modal-select"
|
||||
>
|
||||
<option value="">-- Select Type --</option>
|
||||
{Object.values(ITEM_TYPES).map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{getItemTypeLabel(type)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{itemType && (
|
||||
<div className="edit-modal-inline-field">
|
||||
<label>Group</label>
|
||||
<select
|
||||
value={itemGroup}
|
||||
onChange={(e) => setItemGroup(e.target.value)}
|
||||
className="edit-modal-select"
|
||||
>
|
||||
<option value="">-- Select Group --</option>
|
||||
{availableGroups.map((group) => (
|
||||
<option key={group} value={group}>
|
||||
{group}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="edit-modal-inline-field">
|
||||
<label>Zone</label>
|
||||
<select
|
||||
@ -174,7 +140,7 @@ export default function EditItemModal({ item, zones = [], onSave, onCancel, onIm
|
||||
onChange={(e) => setZone(e.target.value)}
|
||||
className="edit-modal-select"
|
||||
>
|
||||
<option value="">-- Select Zone --</option>
|
||||
<option value="">No zone yet</option>
|
||||
{zoneOptions.map((candidateZone) => (
|
||||
<option key={candidateZone} value={candidateZone}>
|
||||
{candidateZone}
|
||||
@ -183,6 +149,43 @@ export default function EditItemModal({ item, zones = [], onSave, onCancel, onIm
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<details className="edit-modal-advanced" open={Boolean(itemType || itemGroup)}>
|
||||
<summary>More classification options</summary>
|
||||
<div className="edit-modal-inline-field">
|
||||
<label>Type</label>
|
||||
<select
|
||||
value={itemType}
|
||||
onChange={(e) => handleItemTypeChange(e.target.value)}
|
||||
className="edit-modal-select"
|
||||
>
|
||||
<option value="">No type</option>
|
||||
{Object.values(ITEM_TYPES).map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{getItemTypeLabel(type)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{itemType && (
|
||||
<div className="edit-modal-inline-field">
|
||||
<label>Group</label>
|
||||
<select
|
||||
value={itemGroup}
|
||||
onChange={(e) => setItemGroup(e.target.value)}
|
||||
className="edit-modal-select"
|
||||
>
|
||||
<option value="">No group</option>
|
||||
{availableGroups.map((group) => (
|
||||
<option key={group} value={group}>
|
||||
{group}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</details>
|
||||
|
||||
<div className="edit-modal-divider" />
|
||||
|
||||
<button
|
||||
|
||||
@ -91,6 +91,21 @@ function getNextModalItem(sortedItems, currentIndex, excludedItemId) {
|
||||
return remainingItems[currentIndex] || remainingItems[0];
|
||||
}
|
||||
|
||||
function getListItemStorageId(item) {
|
||||
return String(item?.id ?? item?.item_id ?? item?.item_name ?? "");
|
||||
}
|
||||
|
||||
function readSkippedItemIds(storageKey) {
|
||||
if (!storageKey || typeof window === "undefined") return [];
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(window.localStorage.getItem(storageKey) || "[]");
|
||||
return Array.isArray(parsed) ? parsed.map(String).filter(Boolean) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default function GroceryList() {
|
||||
const { userId } = useContext(AuthContext);
|
||||
@ -103,13 +118,16 @@ export default function GroceryList() {
|
||||
const { activeStore, stores, zones, loading: storeLoading } = useContext(StoreContext);
|
||||
const { settings } = useContext(SettingsContext);
|
||||
const toast = useActionToast();
|
||||
const { enqueueImageUpload } = useUploadQueue();
|
||||
const { enqueueImageUpload, isOnline } = useUploadQueue();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Get household role for permissions
|
||||
const householdRole = activeHousehold?.role;
|
||||
const isHouseholdAdmin = ["owner", "admin"].includes(householdRole);
|
||||
const canEditList = Boolean(householdRole && householdRole !== "viewer");
|
||||
const skippedStorageKey = activeHousehold?.id && activeStore?.id
|
||||
? `fiddy:grocery-skipped:${activeHousehold.id}:${activeStore.id}`
|
||||
: null;
|
||||
|
||||
// === State === //
|
||||
const [items, setItems] = useState([]);
|
||||
@ -131,6 +149,8 @@ export default function GroceryList() {
|
||||
const [showConfirmAddExisting, setShowConfirmAddExisting] = useState(false);
|
||||
const [confirmAddExistingData, setConfirmAddExistingData] = useState(null);
|
||||
const [buyModalState, setBuyModalState] = useState(null);
|
||||
const [skippedItemIds, setSkippedItemIds] = useState([]);
|
||||
const [loadedSkippedStorageKey, setLoadedSkippedStorageKey] = useState(null);
|
||||
|
||||
|
||||
// === Data Loading ===
|
||||
@ -175,6 +195,16 @@ export default function GroceryList() {
|
||||
setBuyModalState(null);
|
||||
}, [activeHousehold?.id, activeStore?.id]);
|
||||
|
||||
useEffect(() => {
|
||||
setSkippedItemIds(readSkippedItemIds(skippedStorageKey));
|
||||
setLoadedSkippedStorageKey(skippedStorageKey);
|
||||
}, [skippedStorageKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!skippedStorageKey || loadedSkippedStorageKey !== skippedStorageKey) return;
|
||||
window.localStorage.setItem(skippedStorageKey, JSON.stringify(skippedItemIds));
|
||||
}, [loadedSkippedStorageKey, skippedItemIds, skippedStorageKey]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadHouseholdMembers = async () => {
|
||||
if (!activeHousehold?.id) {
|
||||
@ -254,10 +284,21 @@ export default function GroceryList() {
|
||||
// === Visible Items Computation ===
|
||||
const normalizedListSearchQuery = listSearchQuery.trim().toLowerCase();
|
||||
const isListSearchActive = normalizedListSearchQuery.length > 0;
|
||||
const skippedItemIdSet = useMemo(() => (
|
||||
canEditList ? new Set(skippedItemIds) : new Set()
|
||||
), [canEditList, skippedItemIds]);
|
||||
const activeItems = useMemo(() => {
|
||||
if (skippedItemIdSet.size === 0) return items;
|
||||
return items.filter((item) => !skippedItemIdSet.has(getListItemStorageId(item)));
|
||||
}, [items, skippedItemIdSet]);
|
||||
const skippedItems = useMemo(() => {
|
||||
if (!canEditList || skippedItemIdSet.size === 0) return [];
|
||||
return items.filter((item) => skippedItemIdSet.has(getListItemStorageId(item)));
|
||||
}, [canEditList, items, skippedItemIdSet]);
|
||||
|
||||
const sortedItems = useMemo(() => {
|
||||
return sortItemsByZone(filterItemsForSearch(items, normalizedListSearchQuery));
|
||||
}, [items, normalizedListSearchQuery]);
|
||||
return sortItemsByZone(filterItemsForSearch(activeItems, normalizedListSearchQuery));
|
||||
}, [activeItems, normalizedListSearchQuery]);
|
||||
|
||||
const visibleRecentlyBoughtItems = useMemo(
|
||||
() => recentlyBoughtItems.slice(0, recentlyBoughtDisplayCount),
|
||||
@ -286,6 +327,10 @@ export default function GroceryList() {
|
||||
return { ...prev, item: refreshedItem };
|
||||
});
|
||||
}, [buyModalItems, buyModalState]);
|
||||
|
||||
const showOfflineMutationToast = useCallback((actionLabel) => {
|
||||
toast.error("Offline", `${actionLabel} needs a connection. Try again when you are back online.`);
|
||||
}, [toast]);
|
||||
|
||||
|
||||
// === Suggestion Handler ===
|
||||
@ -325,6 +370,10 @@ export default function GroceryList() {
|
||||
const normalizedItemName = itemName.trim().toLowerCase();
|
||||
if (!normalizedItemName) return;
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
if (!isOnline) {
|
||||
showOfflineMutationToast("Adding items");
|
||||
return;
|
||||
}
|
||||
|
||||
const allItems = [...items, ...recentlyBoughtItems];
|
||||
const existingLocalItem = allItems.find(
|
||||
@ -359,11 +408,23 @@ export default function GroceryList() {
|
||||
} catch (error) {
|
||||
console.error("Failed to process add item flow:", error);
|
||||
}
|
||||
}, [activeHousehold?.id, activeStore?.id, items, recentlyBoughtItems, buttonText]);
|
||||
}, [
|
||||
activeHousehold?.id,
|
||||
activeStore?.id,
|
||||
buttonText,
|
||||
isOnline,
|
||||
items,
|
||||
recentlyBoughtItems,
|
||||
showOfflineMutationToast
|
||||
]);
|
||||
|
||||
|
||||
const processItemAddition = useCallback(async (itemName, quantity, options = {}) => {
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
if (!isOnline) {
|
||||
showOfflineMutationToast("Adding items");
|
||||
return;
|
||||
}
|
||||
const {
|
||||
existingItem: providedItem = null,
|
||||
skipLookup = false,
|
||||
@ -421,7 +482,15 @@ export default function GroceryList() {
|
||||
setPendingItem({ itemName, quantity, addedForUserId });
|
||||
setShowAddDetailsModal(true);
|
||||
}
|
||||
}, [activeHousehold?.id, activeStore?.id, loadItems, loadRecentlyBought, toast]);
|
||||
}, [
|
||||
activeHousehold?.id,
|
||||
activeStore?.id,
|
||||
isOnline,
|
||||
loadItems,
|
||||
loadRecentlyBought,
|
||||
showOfflineMutationToast,
|
||||
toast
|
||||
]);
|
||||
|
||||
|
||||
// === Similar Item Modal Handlers ===
|
||||
@ -453,10 +522,14 @@ export default function GroceryList() {
|
||||
|
||||
|
||||
// === Confirm Add Existing Modal Handlers ===
|
||||
const handleConfirmAddExisting = useCallback(async () => {
|
||||
if (!confirmAddExistingData) return;
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
|
||||
const handleConfirmAddExisting = useCallback(async () => {
|
||||
if (!confirmAddExistingData) return;
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
if (!isOnline) {
|
||||
showOfflineMutationToast("Updating item quantities");
|
||||
return;
|
||||
}
|
||||
|
||||
const { itemName, newQuantity, existingItem, addedForUserId } = confirmAddExistingData;
|
||||
|
||||
setShowConfirmAddExisting(false);
|
||||
@ -484,6 +557,9 @@ export default function GroceryList() {
|
||||
|
||||
setSuggestions([]);
|
||||
setButtonText("Add Item");
|
||||
setSkippedItemIds((prev) =>
|
||||
prev.filter((id) => id !== getListItemStorageId(existingItem))
|
||||
);
|
||||
toast.success("Updated item quantity", `Updated item ${itemName}`);
|
||||
} catch (error) {
|
||||
console.error("Failed to update item:", error);
|
||||
@ -491,13 +567,25 @@ export default function GroceryList() {
|
||||
toast.error("Update item failed", `Update item failed: ${message}`);
|
||||
await loadItems();
|
||||
}
|
||||
}, [activeHousehold?.id, activeStore?.id, confirmAddExistingData, loadItems, toast]);
|
||||
}, [
|
||||
activeHousehold?.id,
|
||||
activeStore?.id,
|
||||
confirmAddExistingData,
|
||||
isOnline,
|
||||
loadItems,
|
||||
showOfflineMutationToast,
|
||||
toast
|
||||
]);
|
||||
|
||||
|
||||
// === Add Details Modal Handlers ===
|
||||
const handleAddWithDetails = useCallback(async (imageFile, classification) => {
|
||||
if (!pendingItem) return;
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
if (!isOnline) {
|
||||
showOfflineMutationToast("Adding items");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Create the list item first, upload image separately in background.
|
||||
@ -552,7 +640,15 @@ export default function GroceryList() {
|
||||
const message = getApiErrorMessage(error, "Failed to add item");
|
||||
toast.error("Add item failed", `Add item failed: ${message}`);
|
||||
}
|
||||
}, [activeHousehold?.id, activeStore?.id, pendingItem, enqueueImageUpload, toast]);
|
||||
}, [
|
||||
activeHousehold?.id,
|
||||
activeStore?.id,
|
||||
enqueueImageUpload,
|
||||
isOnline,
|
||||
pendingItem,
|
||||
showOfflineMutationToast,
|
||||
toast
|
||||
]);
|
||||
|
||||
const handleAddDetailsCancel = useCallback(() => {
|
||||
setShowAddDetailsModal(false);
|
||||
@ -565,6 +661,11 @@ export default function GroceryList() {
|
||||
// === Item Action Handlers ===
|
||||
const handleBought = useCallback(async (quantity) => {
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
if (!isOnline) {
|
||||
showOfflineMutationToast("Marking items bought");
|
||||
setBuyModalState(null);
|
||||
return;
|
||||
}
|
||||
if (!buyModalState || buyModalState.source !== "active") {
|
||||
setBuyModalState(null);
|
||||
return;
|
||||
@ -615,7 +716,17 @@ export default function GroceryList() {
|
||||
const message = getApiErrorMessage(error, "Failed to mark item as bought");
|
||||
toast.error("Mark item bought failed", `Mark item bought failed: ${message}`);
|
||||
}
|
||||
}, [activeHousehold?.id, activeStore?.id, buyModalState, items, normalizedListSearchQuery, sortedItems, toast]);
|
||||
}, [
|
||||
activeHousehold?.id,
|
||||
activeStore?.id,
|
||||
buyModalState,
|
||||
isOnline,
|
||||
items,
|
||||
normalizedListSearchQuery,
|
||||
showOfflineMutationToast,
|
||||
sortedItems,
|
||||
toast
|
||||
]);
|
||||
|
||||
const openActiveBuyModal = useCallback((item) => {
|
||||
setBuyModalState({
|
||||
@ -649,7 +760,28 @@ export default function GroceryList() {
|
||||
|
||||
await handleBought(quantity);
|
||||
}, [buyModalState?.canConfirm, handleBought]);
|
||||
|
||||
|
||||
const handleSkipItem = useCallback((item) => {
|
||||
const itemId = getListItemStorageId(item);
|
||||
if (!itemId) return;
|
||||
|
||||
setSkippedItemIds((prev) => (
|
||||
prev.includes(itemId) ? prev : [...prev, itemId]
|
||||
));
|
||||
setBuyModalState((prev) => (
|
||||
prev?.item && getListItemStorageId(prev.item) === itemId ? null : prev
|
||||
));
|
||||
toast.info("Moved to Skipped", `${item.item_name} is hidden locally for this store.`);
|
||||
}, [toast]);
|
||||
|
||||
const handleRestoreSkippedItem = useCallback((item) => {
|
||||
const itemId = getListItemStorageId(item);
|
||||
if (!itemId) return;
|
||||
|
||||
setSkippedItemIds((prev) => prev.filter((id) => id !== itemId));
|
||||
toast.info("Restored item", `${item.item_name} is back in the active list.`);
|
||||
}, [toast]);
|
||||
|
||||
const handleImageAdded = useCallback(async (id, itemName, quantity, imageFile, source = "add_image_modal") => {
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
if (!imageFile) return;
|
||||
@ -696,10 +828,14 @@ export default function GroceryList() {
|
||||
|
||||
|
||||
// === Edit Modal Handlers ===
|
||||
const handleEditSave = useCallback(async (id, itemName, quantity, classification) => {
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
|
||||
try {
|
||||
const handleEditSave = useCallback(async (id, itemName, quantity, classification) => {
|
||||
if (!activeHousehold?.id || !activeStore?.id) return;
|
||||
if (!isOnline) {
|
||||
showOfflineMutationToast("Saving item changes");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await updateItemWithClassification(activeHousehold.id, activeStore.id, itemName, quantity, classification);
|
||||
|
||||
// Fetch the updated item
|
||||
@ -727,7 +863,7 @@ export default function GroceryList() {
|
||||
toast.error("Update item failed", `Update item failed: ${message}`);
|
||||
throw error;
|
||||
}
|
||||
}, [activeHousehold?.id, activeStore?.id, toast]);
|
||||
}, [activeHousehold?.id, activeStore?.id, isOnline, showOfflineMutationToast, toast]);
|
||||
|
||||
|
||||
const handleEditCancel = useCallback(() => {
|
||||
@ -838,9 +974,15 @@ export default function GroceryList() {
|
||||
|
||||
return (
|
||||
<div className="glist-body">
|
||||
<div className="glist-container">
|
||||
<div className="glist-container">
|
||||
<StoreTabs />
|
||||
|
||||
|
||||
{!isOnline && (
|
||||
<div className="glist-offline-banner" role="status">
|
||||
Offline. Server-backed list changes are paused; local skipped items can still be restored.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{canEditList && (
|
||||
<AddItemForm
|
||||
onAdd={handleAdd}
|
||||
@ -856,14 +998,16 @@ export default function GroceryList() {
|
||||
value={listSearchQuery}
|
||||
onChange={setListSearchQuery}
|
||||
resultCount={sortedItems.length}
|
||||
totalCount={items.length}
|
||||
totalCount={activeItems.length}
|
||||
/>
|
||||
|
||||
{sortedItems.length === 0 ? (
|
||||
<p className="glist-empty-search">
|
||||
{isListSearchActive
|
||||
? `No list items match "${listSearchQuery.trim()}".`
|
||||
: "No items in this store yet."}
|
||||
: skippedItems.length > 0
|
||||
? "No active items in this store. Check Skipped below."
|
||||
: "No items in this store yet."}
|
||||
</p>
|
||||
) : (
|
||||
(() => {
|
||||
@ -900,17 +1044,48 @@ export default function GroceryList() {
|
||||
onLongPress={
|
||||
canEditList ? handleLongPress : null
|
||||
}
|
||||
onSkip={
|
||||
canEditList ? handleSkipItem : null
|
||||
}
|
||||
/>
|
||||
))}
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
})()
|
||||
})()
|
||||
)}
|
||||
|
||||
{recentlyBoughtItems.length > 0 && settings.showRecentlyBought && (
|
||||
|
||||
{skippedItems.length > 0 && (
|
||||
<section className="glist-skipped-section" aria-label="Skipped items">
|
||||
<div className="glist-skipped-header">
|
||||
<div>
|
||||
<h2 className="glist-skipped-title">Skipped / Not Found ({skippedItems.length})</h2>
|
||||
<p className="glist-skipped-note">Local to this device and hidden from the active list.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="glist-ul glist-skipped-ul">
|
||||
{skippedItems.map((item) => (
|
||||
<li key={item.id} className="glist-li glist-skipped-li">
|
||||
<div className="glist-skipped-item-main">
|
||||
<span className="glist-item-name">{item.item_name}</span>
|
||||
<span className="glist-skipped-quantity">x{item.quantity}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="glist-restore-btn"
|
||||
onClick={() => handleRestoreSkippedItem(item)}
|
||||
>
|
||||
Restore
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{recentlyBoughtItems.length > 0 && settings.showRecentlyBought && (
|
||||
<>
|
||||
<h2
|
||||
className="glist-section-title clickable"
|
||||
@ -938,6 +1113,7 @@ export default function GroceryList() {
|
||||
onLongPress={
|
||||
canEditList ? handleLongPress : null
|
||||
}
|
||||
onSkip={null}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
.confirm-buy-modal {
|
||||
background: var(--modal-bg);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-xl);
|
||||
border-radius: var(--border-radius-lg);
|
||||
max-width: 450px;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-xl);
|
||||
@ -93,6 +93,13 @@
|
||||
background: var(--color-gray-100);
|
||||
}
|
||||
|
||||
.confirm-buy-image-container.no-image {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
height: 76px;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.confirm-buy-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
@ -100,8 +107,9 @@
|
||||
}
|
||||
|
||||
.confirm-buy-image-placeholder {
|
||||
font-size: 4em;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-border-medium);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.confirm-buy-quantity-section {
|
||||
@ -222,8 +230,17 @@
|
||||
|
||||
/* Mobile optimizations */
|
||||
@media (max-width: 480px) {
|
||||
.confirm-buy-modal-overlay {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.confirm-buy-modal {
|
||||
padding: 0.8em;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
|
||||
max-height: 92vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.confirm-buy-header {
|
||||
@ -255,13 +272,18 @@
|
||||
}
|
||||
|
||||
.confirm-buy-image-container {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
width: min(220px, 62vw);
|
||||
height: min(220px, 62vw);
|
||||
}
|
||||
|
||||
.confirm-buy-image-container.no-image {
|
||||
width: min(220px, 62vw);
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.confirm-buy-nav-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
@ -284,7 +306,7 @@
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.confirm-buy-modal {
|
||||
padding: 0.7em;
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.confirm-buy-cancel,
|
||||
@ -294,13 +316,11 @@
|
||||
}
|
||||
|
||||
.confirm-buy-image-container {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
width: min(180px, 58vw);
|
||||
height: min(180px, 58vw);
|
||||
}
|
||||
|
||||
.confirm-buy-nav-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 1.4em;
|
||||
.confirm-buy-image-container.no-image {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
background: var(--color-bg-surface);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
border: var(--border-width-thin) solid var(--color-border-light);
|
||||
}
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
font-family: var(--font-family-base);
|
||||
transition: var(--transition-base);
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
@ -73,6 +74,8 @@
|
||||
right: 0;
|
||||
margin-top: var(--spacing-xs);
|
||||
z-index: var(--z-dropdown);
|
||||
max-height: min(260px, 45vh);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* Actions Row */
|
||||
@ -81,7 +84,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-sm);
|
||||
min-height: 40px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Quantity Control */
|
||||
@ -89,11 +92,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
height: 40px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 40px;
|
||||
width: 44px;
|
||||
height: 100%;
|
||||
border: var(--border-width-thin) solid var(--color-border-medium);
|
||||
background: var(--color-bg-surface);
|
||||
@ -128,8 +131,8 @@
|
||||
}
|
||||
|
||||
.add-item-form-quantity-input {
|
||||
width: 40px;
|
||||
max-width: 40px;
|
||||
width: 44px;
|
||||
max-width: 44px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: var(--input-padding-y) var(--input-padding-x);
|
||||
@ -159,7 +162,7 @@
|
||||
|
||||
/* Submit Button */
|
||||
.add-item-form-submit {
|
||||
height: 40px;
|
||||
min-height: 44px;
|
||||
padding: 0 var(--spacing-lg);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
@ -197,25 +200,39 @@
|
||||
/* Responsive */
|
||||
@media (max-width: 480px) {
|
||||
.add-item-form-container {
|
||||
padding: var(--spacing-md);
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.add-item-form-input-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.add-item-form-assignee-toggle {
|
||||
width: 100px;
|
||||
width: 104px;
|
||||
}
|
||||
|
||||
.add-item-form-quantity-control {
|
||||
height: 36px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 36px;
|
||||
width: 44px;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.add-item-form-quantity-input,
|
||||
.add-item-form-submit {
|
||||
height: 36px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.add-item-form-actions {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.add-item-form-submit {
|
||||
min-width: 0;
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,6 +209,10 @@
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.add-item-details-zone-field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.add-item-details-field label {
|
||||
display: block;
|
||||
margin: 0;
|
||||
@ -328,9 +332,17 @@
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.add-item-details-overlay {
|
||||
align-items: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.add-item-details-modal {
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 92vh;
|
||||
}
|
||||
|
||||
.add-item-details-title {
|
||||
@ -357,4 +369,8 @@
|
||||
.add-item-details-field label {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.add-item-details-field {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -118,6 +118,36 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.edit-modal-advanced {
|
||||
margin-top: var(--spacing-sm);
|
||||
border: var(--border-width-thin) solid var(--color-border-light);
|
||||
border-radius: var(--border-radius-md);
|
||||
background: var(--color-bg-surface);
|
||||
}
|
||||
|
||||
.edit-modal-advanced summary {
|
||||
min-height: 40px;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
cursor: pointer;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.edit-modal-advanced[open] {
|
||||
padding-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.edit-modal-advanced[open] summary {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.edit-modal-advanced .edit-modal-inline-field {
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.edit-modal-divider {
|
||||
height: 1px;
|
||||
background: var(--color-border-light);
|
||||
@ -235,6 +265,10 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit-modal-advanced .edit-modal-inline-field {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.edit-modal-actions {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
@ -247,10 +281,16 @@
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.edit-modal-overlay {
|
||||
align-items: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.edit-modal-content {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
|
||||
max-height: 92vh;
|
||||
}
|
||||
|
||||
.edit-modal-title {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
font-family: var(--font-family-base);
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--color-bg-body);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.glist-container {
|
||||
@ -14,6 +15,31 @@
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.glist-offline-banner {
|
||||
margin: var(--spacing-sm) 0;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: var(--border-width-thin) solid var(--color-warning, #b7791f);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--color-warning-light, #fff8dc);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.glist-container .store-tabs {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.glist-container .store-tabs-container {
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.glist-container .store-selector-trigger,
|
||||
.glist-container .store-map-button {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.glist-section-title {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-xl);
|
||||
@ -239,7 +265,7 @@
|
||||
.glist-li {
|
||||
background: var(--color-bg-surface);
|
||||
border: var(--border-width-thin) solid var(--color-border-light);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border-radius: var(--border-radius-md);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
cursor: pointer;
|
||||
transition: box-shadow var(--transition-base), transform var(--transition-base);
|
||||
@ -251,6 +277,17 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.glist-li:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px var(--color-primary-light);
|
||||
}
|
||||
|
||||
.glist-li.actions-open {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.glist-classification-group .glist-li {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
@ -261,9 +298,10 @@
|
||||
|
||||
.glist-item-layout {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
padding: 0em;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-xs);
|
||||
align-items: center;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.glist-item-image {
|
||||
@ -282,6 +320,13 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glist-item-image-placeholder {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.glist-item-image.has-image {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-bg-surface);
|
||||
@ -310,8 +355,9 @@
|
||||
|
||||
.glist-item-name {
|
||||
font-weight: 800;
|
||||
font-size: 0.8em;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-primary);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.glist-item-quantity {
|
||||
@ -333,6 +379,140 @@
|
||||
font-size: 0.7em;
|
||||
color: var(--color-text-secondary);
|
||||
font-style: italic;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.glist-item-action-toggle {
|
||||
flex: 0 0 auto;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
border: var(--border-width-thin) solid var(--color-border-light);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.glist-item-action-toggle:hover,
|
||||
.glist-item-action-toggle:focus-visible,
|
||||
.glist-li.actions-open .glist-item-action-toggle {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.glist-item-action-tray {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
padding: 0 var(--spacing-xs) var(--spacing-xs);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.glist-item-action {
|
||||
flex: 1 1 5rem;
|
||||
min-height: 40px;
|
||||
border: var(--border-width-thin) solid var(--color-border-medium);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--button-font-weight);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.glist-item-action:hover,
|
||||
.glist-item-action:focus-visible {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.glist-item-action.secondary:hover,
|
||||
.glist-item-action.secondary:focus-visible {
|
||||
border-color: var(--color-warning, #b7791f);
|
||||
color: var(--color-warning, #b7791f);
|
||||
}
|
||||
|
||||
.glist-skipped-section {
|
||||
margin-top: var(--spacing-lg);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: var(--border-width-medium) solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.glist-skipped-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.glist-skipped-title {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.glist-skipped-note {
|
||||
margin: 0.2rem 0 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.glist-skipped-ul {
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.glist-skipped-li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
cursor: default;
|
||||
background: var(--color-bg-hover);
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.glist-skipped-li:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.glist-skipped-item-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--spacing-xs);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glist-skipped-quantity {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.glist-restore-btn {
|
||||
flex: 0 0 auto;
|
||||
min-height: 40px;
|
||||
padding: 0 var(--spacing-md);
|
||||
border: var(--border-width-thin) solid var(--color-primary);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--button-font-weight);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.glist-restore-btn:hover,
|
||||
.glist-restore-btn:focus-visible {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Compact View */
|
||||
@ -514,8 +694,51 @@
|
||||
|
||||
/* Mobile tweaks */
|
||||
@media (max-width: 480px) {
|
||||
.glist-body {
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.glist-container {
|
||||
padding: 1em 0.8em;
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.glist-classification-header,
|
||||
.glist-section-title.clickable {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.glist-container .store-tabs-container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.glist-container .store-map-button {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.glist-item-layout {
|
||||
min-height: 60px;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.glist-item-image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.glist-item-name {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.glist-item-action-tray {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.glist-skipped-li {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.glist-fab {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { expect, test, type Route } from "@playwright/test";
|
||||
|
||||
function seedAuthStorage(page: import("@playwright/test").Page) {
|
||||
return page.addInitScript(() => {
|
||||
@ -55,13 +55,32 @@ async function setupGroceryListRoutes(page: import("@playwright/test").Page) {
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/stores/household/1", async (route) => {
|
||||
const stores = [
|
||||
{ id: 10, name: "Costco", location: "Warehouse", is_default: true },
|
||||
];
|
||||
|
||||
const fulfillStores = async (route: Route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify([
|
||||
{ id: 10, name: "Costco", location: "Warehouse", is_default: true },
|
||||
]),
|
||||
body: JSON.stringify(stores),
|
||||
});
|
||||
};
|
||||
|
||||
await page.route("**/stores/household/1", fulfillStores);
|
||||
await page.route("**/households/1/stores", fulfillStores);
|
||||
|
||||
await page.route("**/households/1/locations/10/zones", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
zones: [
|
||||
{ id: 1, name: "Dairy & Refrigerated" },
|
||||
{ id: 2, name: "Checkout Area" },
|
||||
{ id: 3, name: "Bakery" },
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
@ -75,7 +94,7 @@ async function setupGroceryListRoutes(page: import("@playwright/test").Page) {
|
||||
});
|
||||
});
|
||||
|
||||
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({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
@ -83,7 +102,7 @@ async function setupGroceryListRoutes(page: import("@playwright/test").Page) {
|
||||
});
|
||||
});
|
||||
|
||||
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({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
@ -91,7 +110,7 @@ async function setupGroceryListRoutes(page: import("@playwright/test").Page) {
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/stores/10/list/classification**", async (route) => {
|
||||
await page.route("**/households/1/locations/10/list/classification**", async (route) => {
|
||||
const request = route.request();
|
||||
|
||||
if (request.method() === "GET") {
|
||||
@ -146,7 +165,7 @@ async function setupGroceryListRoutes(page: import("@playwright/test").Page) {
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/stores/10/list/item**", async (route) => {
|
||||
await page.route("**/households/1/locations/10/list/item**", async (route) => {
|
||||
const request = route.request();
|
||||
|
||||
if (request.method() === "PUT") {
|
||||
@ -185,7 +204,7 @@ async function setupGroceryListRoutes(page: import("@playwright/test").Page) {
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/stores/10/list/add", async (route) => {
|
||||
await page.route("**/households/1/locations/10/list/add", async (route) => {
|
||||
currentItem = {
|
||||
id: 201,
|
||||
item_id: 501,
|
||||
@ -216,7 +235,7 @@ async function setupGroceryListRoutes(page: import("@playwright/test").Page) {
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/stores/10/list", async (route) => {
|
||||
await page.route("**/households/1/locations/10/list", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
@ -240,17 +259,11 @@ async function openEditModal(itemRow: ReturnType<import("@playwright/test").Page
|
||||
await expect(page.locator(".edit-modal-content")).toBeVisible();
|
||||
}
|
||||
|
||||
test("add-details modal validates with toasts and persists classification details", async ({ page }) => {
|
||||
test("add-details modal persists zone-first classification details", async ({ page }) => {
|
||||
await seedAuthStorage(page);
|
||||
await mockConfig(page);
|
||||
await setupGroceryListRoutes(page);
|
||||
|
||||
let dialogSeen = false;
|
||||
page.on("dialog", async (dialog) => {
|
||||
dialogSeen = true;
|
||||
await dialog.dismiss();
|
||||
});
|
||||
|
||||
await page.goto("/");
|
||||
|
||||
await page.getByPlaceholder("Enter item name").fill("yogurt");
|
||||
@ -259,14 +272,7 @@ test("add-details modal validates with toasts and persists classification detail
|
||||
const addDetailsModal = page.locator(".add-item-details-modal");
|
||||
await expect(addDetailsModal).toBeVisible();
|
||||
|
||||
await addDetailsModal.locator(".add-item-details-select").nth(0).selectOption("dairy");
|
||||
await addDetailsModal.getByRole("button", { name: "Add Item" }).click();
|
||||
|
||||
await expect(page.locator(".action-toast.action-toast-error")).toContainText("Select an item group");
|
||||
expect(dialogSeen).toBe(false);
|
||||
|
||||
await addDetailsModal.locator(".add-item-details-select").nth(1).selectOption("Milk");
|
||||
await addDetailsModal.locator(".add-item-details-select").nth(2).selectOption("Dairy & Refrigerated");
|
||||
await addDetailsModal.locator(".add-item-details-select").selectOption("Dairy & Refrigerated");
|
||||
await addDetailsModal.getByRole("button", { name: "Add Item" }).click();
|
||||
|
||||
const yogurtRow = page.locator(".glist-li").filter({ hasText: "yogurt" });
|
||||
@ -278,9 +284,10 @@ test("add-details modal validates with toasts and persists classification detail
|
||||
await openEditModal(yogurtRow, page);
|
||||
|
||||
const editModal = page.locator(".edit-modal-content");
|
||||
await expect(editModal.locator(".edit-modal-select").nth(0)).toHaveValue("dairy");
|
||||
await expect(editModal.locator(".edit-modal-select").nth(1)).toHaveValue("Milk");
|
||||
await expect(editModal.locator(".edit-modal-select").nth(2)).toHaveValue("Dairy & Refrigerated");
|
||||
await expect(
|
||||
editModal.locator(".edit-modal-inline-field", { hasText: "Zone" }).locator("select")
|
||||
).toHaveValue("Dairy & Refrigerated");
|
||||
await expect(editModal.locator(".edit-modal-advanced")).toBeVisible();
|
||||
});
|
||||
|
||||
test("edit modal supports zone-only updates and shows API error toasts", async ({ page }) => {
|
||||
@ -292,7 +299,7 @@ test("edit modal supports zone-only updates and shows API error toasts", async (
|
||||
|
||||
await page.getByPlaceholder("Enter item name").fill("yogurt");
|
||||
await page.getByRole("button", { name: "Create + Add" }).click();
|
||||
await page.locator(".add-item-details-modal").getByRole("button", { name: "Skip All" }).click();
|
||||
await page.locator(".add-item-details-modal").getByRole("button", { name: "Add Item" }).click();
|
||||
|
||||
const yogurtRow = page.locator(".glist-li").filter({ hasText: "yogurt" });
|
||||
await expect(yogurtRow).toBeVisible();
|
||||
@ -300,8 +307,8 @@ test("edit modal supports zone-only updates and shows API error toasts", async (
|
||||
await openEditModal(yogurtRow, page);
|
||||
|
||||
let editModal = page.locator(".edit-modal-content");
|
||||
await editModal.locator(".edit-modal-select").nth(0).selectOption("");
|
||||
await editModal.locator(".edit-modal-select").nth(1).selectOption("Checkout Area");
|
||||
const zoneSelect = editModal.locator(".edit-modal-inline-field", { hasText: "Zone" }).locator("select");
|
||||
await zoneSelect.selectOption("Checkout Area");
|
||||
await editModal.getByRole("button", { name: "Save Changes" }).click();
|
||||
|
||||
await expect(
|
||||
@ -311,11 +318,12 @@ test("edit modal supports zone-only updates and shows API error toasts", async (
|
||||
|
||||
await openEditModal(yogurtRow, page);
|
||||
editModal = page.locator(".edit-modal-content");
|
||||
await expect(editModal.locator(".edit-modal-select").nth(0)).toHaveValue("");
|
||||
await expect(editModal.locator(".edit-modal-select").nth(1)).toHaveValue("Checkout Area");
|
||||
await expect(
|
||||
editModal.locator(".edit-modal-inline-field", { hasText: "Zone" }).locator("select")
|
||||
).toHaveValue("Checkout Area");
|
||||
|
||||
routes.setClassificationRequestMode("error");
|
||||
await editModal.locator(".edit-modal-select").nth(1).selectOption("Bakery");
|
||||
await editModal.locator(".edit-modal-inline-field", { hasText: "Zone" }).locator("select").selectOption("Bakery");
|
||||
await editModal.getByRole("button", { name: "Save Changes" }).click();
|
||||
|
||||
await expect(page.locator(".action-toast.action-toast-error")).toContainText("Invalid zone");
|
||||
|
||||
174
frontend/tests/grocery-list-actions.spec.ts
Normal file
174
frontend/tests/grocery-list-actions.spec.ts
Normal file
@ -0,0 +1,174 @@
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
import {
|
||||
mockConfig,
|
||||
mockHouseholdAndStoreShell,
|
||||
seedAuthStorage,
|
||||
} from "./helpers/e2e";
|
||||
|
||||
type MockItem = {
|
||||
id: number;
|
||||
item_id: number;
|
||||
item_name: string;
|
||||
quantity: number;
|
||||
bought: boolean;
|
||||
item_image: string | null;
|
||||
image_mime_type: string | null;
|
||||
added_by_users: string[];
|
||||
last_added_on: string;
|
||||
item_type: string | null;
|
||||
item_group: string | null;
|
||||
zone: string | null;
|
||||
};
|
||||
|
||||
function makeItem(id: number, itemName: string, quantity = 1): MockItem {
|
||||
return {
|
||||
id,
|
||||
item_id: id + 500,
|
||||
item_name: itemName,
|
||||
quantity,
|
||||
bought: false,
|
||||
item_image: null,
|
||||
image_mime_type: null,
|
||||
added_by_users: ["Owner User"],
|
||||
last_added_on: "2026-03-28T12:00:00.000Z",
|
||||
item_type: null,
|
||||
item_group: null,
|
||||
zone: "Produce",
|
||||
};
|
||||
}
|
||||
|
||||
async function setupGroceryRoutes(
|
||||
page: Page,
|
||||
options: {
|
||||
householdRole?: string;
|
||||
items?: MockItem[];
|
||||
} = {}
|
||||
) {
|
||||
const items = options.items || [
|
||||
makeItem(1, "milk", 2),
|
||||
makeItem(2, "bread", 1),
|
||||
];
|
||||
|
||||
await mockConfig(page);
|
||||
await mockHouseholdAndStoreShell(page, {
|
||||
household: {
|
||||
name: "Grocery Actions House",
|
||||
role: options.householdRole || "admin",
|
||||
},
|
||||
stores: [
|
||||
{
|
||||
id: 10,
|
||||
name: "Costco",
|
||||
location: "Warehouse",
|
||||
is_default: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await page.route("**/households/1/members", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify([
|
||||
{ id: 1, username: "owner", name: "Owner User", display_name: "Owner User", role: "owner" },
|
||||
]),
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/locations/10/zones", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ zones: [{ id: 1, name: "Produce" }] }),
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/locations/10/list/recent", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify([]),
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/locations/10/list/suggestions**", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify([]),
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/locations/10/list/item**", async (route) => {
|
||||
const url = new URL(route.request().url());
|
||||
const itemName = (url.searchParams.get("item_name") || "").toLowerCase();
|
||||
const item = items.find((candidate) => candidate.item_name === itemName);
|
||||
|
||||
await route.fulfill({
|
||||
status: item ? 200 : 404,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify(item || { message: "Item not found" }),
|
||||
});
|
||||
});
|
||||
|
||||
await page.route("**/households/1/locations/10/list", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ items }),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
test("item actions expose bought flow and local skipped restore", async ({ page }) => {
|
||||
await seedAuthStorage(page, { username: "grocery-actions-user" });
|
||||
await setupGroceryRoutes(page);
|
||||
|
||||
await page.goto("/");
|
||||
|
||||
const milkRow = page.locator(".glist-classification-group .glist-li").filter({ hasText: "milk" });
|
||||
await expect(milkRow).toBeVisible();
|
||||
|
||||
await milkRow.getByRole("button", { name: "Actions for milk" }).click();
|
||||
await milkRow.getByRole("button", { name: "Bought" }).click();
|
||||
await expect(page.locator(".confirm-buy-modal")).toBeVisible();
|
||||
await page.getByRole("button", { name: "Cancel" }).click();
|
||||
|
||||
await milkRow.getByRole("button", { name: "Actions for milk" }).click();
|
||||
await milkRow.getByRole("button", { name: "Skip" }).click();
|
||||
|
||||
await expect(milkRow).toHaveCount(0);
|
||||
await expect(page.locator(".glist-skipped-section")).toContainText("milk");
|
||||
|
||||
await page.reload();
|
||||
await expect(page.locator(".glist-skipped-section")).toContainText("milk");
|
||||
|
||||
await page.locator(".glist-skipped-section").getByRole("button", { name: "Restore" }).click();
|
||||
await expect(page.locator(".glist-classification-group .glist-li").filter({ hasText: "milk" })).toBeVisible();
|
||||
});
|
||||
|
||||
test("viewer role cannot see mutation controls", async ({ page }) => {
|
||||
await seedAuthStorage(page, { username: "grocery-viewer-user" });
|
||||
await setupGroceryRoutes(page, { householdRole: "viewer" });
|
||||
|
||||
await page.goto("/");
|
||||
|
||||
await expect(page.getByPlaceholder("Enter item name")).toHaveCount(0);
|
||||
await expect(page.getByRole("button", { name: "Actions for milk" })).toHaveCount(0);
|
||||
await expect(page.getByLabel("Search list")).toBeVisible();
|
||||
});
|
||||
|
||||
test("offline banner blocks server-backed add flow with a clear toast", async ({ page }) => {
|
||||
await seedAuthStorage(page, { username: "grocery-offline-user" });
|
||||
await setupGroceryRoutes(page);
|
||||
|
||||
await page.goto("/");
|
||||
await page.evaluate(() => window.dispatchEvent(new Event("offline")));
|
||||
|
||||
await expect(page.locator(".glist-offline-banner")).toContainText("Offline");
|
||||
await page.getByPlaceholder("Enter item name").fill("bananas");
|
||||
await page.getByRole("button", { name: "Create + Add" }).click();
|
||||
|
||||
await expect(page.locator(".add-item-details-modal")).toHaveCount(0);
|
||||
await expect(page.locator(".action-toast.action-toast-error")).toContainText("Adding items needs a connection");
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
import { expect, type Page } from "@playwright/test";
|
||||
import { expect, type Page, type Route } from "@playwright/test";
|
||||
|
||||
type AuthSeed = {
|
||||
token?: string;
|
||||
@ -69,13 +69,16 @@ export async function mockHouseholdAndStoreShell(
|
||||
});
|
||||
});
|
||||
|
||||
await page.route(`**/stores/household/${household.id}`, async (route) => {
|
||||
const fulfillStores = async (route: Route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify(stores),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
await page.route(`**/stores/household/${household.id}`, fulfillStores);
|
||||
await page.route(`**/households/${household.id}/stores`, fulfillStores);
|
||||
}
|
||||
|
||||
export async function confirmSlide(page: Page) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user