- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 | - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - | import { useEffect } from 'react';
-import { Alert, Card, CardContent, Typography } from '@mui/material';
-import { useBarcodeScanner } from '../hooks/useBarcodeScanner';
-
-interface BarcodeScannerViewProps {
- onDetected?: (code: string) => void;
-}
-
-export const BarcodeScannerView = ({ onDetected }: BarcodeScannerViewProps) => {
- const { videoRef, result } = useBarcodeScanner();
-
- useEffect(() => {
- if (result.code && onDetected) {
- onDetected(result.code);
- }
- }, [onDetected, result.code]);
-
- return (
- <Card variant="outlined">
- <CardContent>
- <Typography variant="subtitle1" gutterBottom>
- Scan Barcode
- </Typography>
- <video ref={videoRef} style={{ width: '100%', borderRadius: 8 }} />
- {result.code ? <Alert severity="success">Detected {result.code}</Alert> : null}
- {result.error ? <Alert severity="error">{result.error}</Alert> : null}
- </CardContent>
- </Card>
- );
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -24x - - - - - -2x -102x -102x -102x -102x - -102x -12x -12x - - -131x -34x -34x - - -102x -5x -5x -5x - - - - -1x -1x - -4x -2x -2x - -2x -2x -2x - - - - - -102x - - - - - -102x - - - - - - - - - - - - - - - - - - - - - -82x - - - - - - - - - - - - - - - - - -1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -5x - - -1x - - - - - - - - - - - - - - - - - - - - - | import {
- Box,
- Button,
- Card,
- CardContent,
- Dialog,
- DialogContent,
- DialogTitle,
- IconButton,
- Stack,
- TextField,
- Typography,
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import { ChangeEvent, useEffect, useState } from 'react';
-import { Product } from '../models/Product';
-import { BarcodeScannerView } from './BarcodeScannerView';
-
-interface ProductRowProps {
- product: Product;
- categories: string[];
- onSave: (
- productId: string,
- updates: {
- name: string;
- category: string;
- barcode?: string;
- },
- ) => Promise<void> | void;
- onDelete: (productId: string) => Promise<void> | void;
-}
-
-interface ProductFormState {
- name: string;
- category: string;
- barcode: string;
-}
-
-const getInitialFormState = (product: Product): ProductFormState => ({
- name: product.name,
- category: product.category,
- barcode: product.barcode ?? '',
-});
-
-export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRowProps) => {
- const [isEditing, setIsEditing] = useState(false);
- const [formState, setFormState] = useState<ProductFormState>(() => getInitialFormState(product));
- const [isScannerOpen, setIsScannerOpen] = useState(false);
- const [fieldErrors, setFieldErrors] = useState<{ name?: string; barcode?: string }>({});
-
- useEffect(() => {
- setFormState(getInitialFormState(product));
- setFieldErrors({});
- }, [product]);
-
- const handleChange = (field: keyof ProductFormState) => (event: ChangeEvent<HTMLInputElement>) => {
- setFormState((prev) => ({ ...prev, [field]: event.target.value }));
- setFieldErrors((prev) => ({ ...prev, [field]: undefined }));
- };
-
- const handleSave = async () => {
- Iif (!formState.name) return;
- try {
- await onSave(product.id, {
- name: formState.name,
- category: formState.category,
- barcode: formState.barcode || undefined,
- });
- setIsEditing(false);
- setFieldErrors({});
- } catch (error) {
- if (error instanceof Error && error.name === 'DuplicateNameError') {
- setFieldErrors({ name: 'A product with this name already exists.' });
- return;
- }
- Eif (error instanceof Error && error.name === 'DuplicateBarcodeError') {
- setFieldErrors({ barcode: 'This barcode is already assigned to another product.' });
- return;
- }
- throw error;
- }
- };
-
- const handleCancel = () => {
- setIsEditing(false);
- setFormState(getInitialFormState(product));
- setFieldErrors({});
- };
-
- return (
- <Card variant="outlined" sx={{ mb: 1 }}>
- <CardContent sx={{ p: 1.25, '&:last-child': { pb: 1.25 } }}>
- {isEditing ? (
- <Stack spacing={1}>
- <TextField
- label="Name"
- value={formState.name}
- onChange={handleChange('name')}
- size="small"
- error={Boolean(fieldErrors.name)}
- helperText={fieldErrors.name || undefined}
- />
- <TextField
- select
- SelectProps={{ native: true }}
- label="Category"
- value={formState.category}
- onChange={handleChange('category')}
- size="small"
- >
- {categories.map((cat) => (
- <option key={cat} value={cat}>
- {cat}
- </option>
- ))}
- </TextField>
- {formState.barcode ? (
- <TextField
- label="Barcode"
- value={formState.barcode}
- onChange={handleChange('barcode')}
- size="small"
- error={Boolean(fieldErrors.barcode)}
- helperText={fieldErrors.barcode || undefined}
- InputProps={{
- endAdornment: (
- <Button
- size="small"
- onClick={() => {
- setFormState((prev) => ({ ...prev, barcode: '' }));
- setFieldErrors((prev) => ({ ...prev, barcode: undefined }));
- }}
- >
- Clear
- </Button>
- ),
- }}
- />
- ) : (
- <Button variant="outlined" onClick={() => setIsScannerOpen(true)}>
- Scan Barcode
- </Button>
- )}
- <Stack direction="row" spacing={0.5} justifyContent="flex-end" alignItems="center">
- <IconButton
- aria-label={`Delete ${product.name}`}
- onClick={() => onDelete(product.id)}
- size="small"
- color="error"
- >
- <DeleteIcon fontSize="small" />
- </IconButton>
- <IconButton aria-label="Save product" onClick={handleSave} disabled={!formState.name} color="primary">
- <CheckIcon />
- </IconButton>
- <IconButton aria-label="Cancel edit" onClick={handleCancel}>
- <CloseIcon />
- </IconButton>
- </Stack>
- </Stack>
- ) : (
- <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
- <Stack direction="row" spacing={1.5} alignItems="center" sx={{ flex: 1, minWidth: 0 }}>
- <Stack spacing={0.25} sx={{ minWidth: 0 }}>
- <Typography variant="subtitle1" noWrap>
- {product.name}
- </Typography>
- <Typography variant="caption" color="text.secondary" noWrap>
- {product.category}
- </Typography>
- </Stack>
- {product.barcode ? (
- <Typography variant="caption" color="text.secondary" noWrap>
- Barcode: {product.barcode}
- </Typography>
- ) : null}
- </Stack>
- <Box display="flex" alignItems="center" gap={0.5} sx={{ ml: 1 }}>
- <IconButton aria-label={`Edit ${product.name}`} onClick={() => setIsEditing(true)} size="small">
- <EditIcon fontSize="small" />
- </IconButton>
- <IconButton aria-label={`Delete ${product.name}`} onClick={() => onDelete(product.id)} size="small">
- <DeleteIcon fontSize="small" />
- </IconButton>
- </Box>
- </Stack>
- )}
- </CardContent>
- <Dialog open={isScannerOpen} onClose={() => setIsScannerOpen(false)} fullWidth>
- <DialogTitle>Scan Barcode</DialogTitle>
- <DialogContent>
- <BarcodeScannerView
- onDetected={(code) => {
- setFormState((prev) => ({ ...prev, barcode: code }));
- setIsScannerOpen(false);
- }}
- />
- </DialogContent>
- </Dialog>
- </Card>
- );
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| BarcodeScannerView.tsx | -
-
- |
- 16.66% | -1/6 | -0% | -0/8 | -0% | -0/2 | -16.66% | -1/6 | -
| ProductRow.tsx | -
-
- |
- 77.55% | -38/49 | -87.5% | -21/24 | -71.42% | -15/21 | -77.5% | -31/40 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| useBarcodeScanner.ts | -
-
- |
- 2.27% | -1/44 | -0% | -0/20 | -0% | -0/8 | -2.5% | -1/40 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 | - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useEffect, useRef, useState } from 'react';
-import { BrowserMultiFormatReader } from '@zxing/browser';
-
-type BarcodeDetection = { rawValue: string };
-type BarcodeDetectorClass = new () => { detect: (source: ImageBitmapSource) => Promise<BarcodeDetection[]> };
-
-export interface BarcodeResult {
- code?: string;
- error?: string;
-}
-
-export const useBarcodeScanner = () => {
- const videoRef = useRef<HTMLVideoElement | null>(null);
- const [result, setResult] = useState<BarcodeResult>({});
-
- useEffect(() => {
- const reader = new BrowserMultiFormatReader();
- let active = true;
- let stop: (() => void) | undefined;
- let currentVideoElement: HTMLVideoElement | null = null;
-
- const start = async () => {
- try {
- const detectorClass = (
- window as typeof window & { BarcodeDetector?: BarcodeDetectorClass }
- ).BarcodeDetector;
- if (detectorClass) {
- const detector = new detectorClass();
- const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
- if (videoRef.current) {
- videoRef.current.srcObject = stream;
- await videoRef.current.play();
- currentVideoElement = videoRef.current;
- }
- const scan = async () => {
- if (!active || !videoRef.current) return;
- const tracks = (videoRef.current.srcObject as MediaStream | null)?.getVideoTracks();
- if (!tracks || tracks.length === 0) return;
- const frame = await createImageBitmap(videoRef.current);
- const codes = await detector.detect(frame);
- if (codes.length > 0) {
- setResult({ code: codes[0].rawValue });
- } else {
- requestAnimationFrame(scan);
- }
- };
- void scan();
- } else {
- const controls = await reader.decodeFromVideoDevice(
- undefined,
- videoRef.current ?? undefined,
- (decoded) => {
- if (decoded) {
- setResult({ code: decoded.getText() });
- }
- },
- );
- stop = () => controls.stop();
- }
- } catch (error) {
- setResult({ error: (error as Error).message });
- }
- };
-
- void start();
- return () => {
- active = false;
- stop?.();
- const stream = currentVideoElement?.srcObject as MediaStream | null;
- if (stream) {
- stream.getTracks().forEach((track) => track.stop());
- }
- };
- }, []);
-
- return { videoRef, result };
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| components | -
-
- |
- 70.9% | -39/55 | -65.62% | -21/32 | -65.21% | -15/23 | -69.56% | -32/46 | -
| hooks | -
-
- |
- 2.27% | -1/44 | -0% | -0/20 | -0% | -0/8 | -2.5% | -1/40 | -
| models | -
-
- |
- 100% | -2/2 | -100% | -0/0 | -100% | -0/0 | -100% | -2/2 | -
| modules | -
-
- |
- 80% | -16/20 | -86.36% | -19/22 | -66.66% | -2/3 | -88.23% | -15/17 | -
| screens | -
-
- |
- 83.33% | -240/288 | -72.72% | -112/154 | -88.31% | -68/77 | -87.07% | -229/263 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 | - - - - - - - - - - - -1x -1x - | export interface Product {
- id: string;
- name: string;
- category: string;
- unit_type: string;
- bulk_name?: string;
- barcode?: string;
- archived: boolean;
- created_at: number;
- updated_at: number;
-}
-
-export const DEFAULT_UNIT_TYPE = 'unit';
-export const DEFAULT_BULK_NAME = 'carton';
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Product.ts | -
-
- |
- 100% | -2/2 | -100% | -0/0 | -100% | -0/0 | -100% | -2/2 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| openFoodFacts.ts | -
-
- |
- 80% | -16/20 | -86.36% | -19/22 | -66.66% | -2/3 | -88.23% | -15/17 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 | - - - - - - - -1x -1x - -2x - -1x -2x - - - -2x -2x - -2x -2x -2x - -2x - - - - - - - - - -2x -1x - - -1x - - - - - - - - - -2x - - - - | export interface ExternalProductInfo {
- name: string | null;
- brand?: string | null;
- quantity?: string | null;
- image?: string | null;
- source: 'openfoodfacts';
-}
-
-const BASE_URL = 'https://world.openfoodfacts.org/api/v2/product';
-const REQUEST_TIMEOUT_MS = 5000;
-
-const isOffline = () => typeof navigator !== 'undefined' && 'onLine' in navigator && !navigator.onLine;
-
-export const fetchProductFromOFF = async (barcode: string): Promise<ExternalProductInfo | null> => {
- Iif (!barcode || isOffline()) {
- return null;
- }
-
- const controller = new AbortController();
- const timeout = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
-
- try {
- const response = await fetch(`${BASE_URL}/${barcode}.json`, { signal: controller.signal });
- Iif (!response.ok) return null;
-
- const data = (await response.json()) as {
- status?: number;
- product?: {
- product_name?: string | null;
- brands?: string | null;
- quantity?: string | null;
- image_url?: string | null;
- };
- };
-
- if (data?.status !== 1 || !data.product || !data.product.product_name) {
- return null;
- }
-
- return {
- name: data.product.product_name ?? null,
- brand: data.product.brands ?? null,
- quantity: data.product.quantity ?? null,
- image: data.product.image_url ?? null,
- source: 'openfoodfacts',
- } satisfies ExternalProductInfo;
- } catch {
- return null;
- } finally {
- clearTimeout(timeout);
- }
-};
-
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 | - - - - - - - - - - - - - - - - - - - - - -1x -28x -28x -28x -28x -28x -28x -28x - -28x -4x -4x -4x - - - -28x -2x -2x -2x -2x -1x -1x - -1x -1x -1x - - -28x -1x -1x -1x - - -28x -1x -1x -1x - -1x -1x - -1x -1x - -1x - - - - -1x -1x -1x - - - - - -1x -1x -1x - - -28x - - - - - -28x -1x -1x -1x - - - -1x - - - - - - - - -28x - - - - - - - - - - - -12x - - - - - - - -28x - - - - - - -7x - - - - - - - - - - - - - -1x - - - - - - -1x - - - - - - - - - - - - - - - - | import {
- Alert,
- AlertColor,
- Button,
- Container,
- IconButton,
- List,
- ListItem,
- ListItemText,
- Stack,
- TextField,
- Typography,
-} from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import { useMemo, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { useDatabase } from '../context/DBProvider';
-import { useCategories, useProducts } from '../hooks/dataHooks';
-
-export const ManageCategoriesScreen = () => {
- const db = useDatabase();
- const categories = useCategories();
- const products = useProducts();
- const [name, setName] = useState('');
- const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null);
- const [editName, setEditName] = useState('');
- const [feedback, setFeedback] = useState<{ text: string; severity: AlertColor } | null>(null);
-
- const usageByCategory = useMemo(() => {
- return products.reduce<Record<string, number>>((acc, product) => {
- acc[product.category] = (acc[product.category] ?? 0) + 1;
- return acc;
- }, {});
- }, [products]);
-
- const addCategory = async () => {
- const trimmed = name.trim();
- Iif (!trimmed) return;
- const exists = categories.some((category) => category.name.toLowerCase() === trimmed.toLowerCase());
- if (exists) {
- setFeedback({ text: 'A category with this name already exists.', severity: 'error' });
- return;
- }
- await db.categories.add({ id: uuidv4(), name: trimmed, created_at: Date.now(), updated_at: Date.now() });
- setName('');
- setFeedback({ text: 'Category added.', severity: 'success' });
- };
-
- const startEditing = (categoryId: string, currentName: string) => {
- setEditingCategoryId(categoryId);
- setEditName(currentName);
- setFeedback(null);
- };
-
- const saveCategory = async () => {
- Iif (!editingCategoryId) return;
- const trimmed = editName.trim();
- Iif (!trimmed) return;
-
- const category = categories.find((item) => item.id === editingCategoryId);
- Iif (!category) return;
-
- const nameExists = categories.some(
- (item) => item.id !== editingCategoryId && item.name.toLowerCase() === trimmed.toLowerCase(),
- );
- Iif (nameExists) {
- setFeedback({ text: 'A category with this name already exists.', severity: 'error' });
- return;
- }
-
- await db.transaction('rw', db.categories, db.products, async () => {
- await db.categories.update(editingCategoryId, { name: trimmed, updated_at: Date.now() });
- await db.products
- .where('category')
- .equals(category.name)
- .modify({ category: trimmed, updated_at: Date.now() });
- });
-
- setEditingCategoryId(null);
- setEditName('');
- setFeedback({ text: 'Category updated. Linked products were refreshed.', severity: 'success' });
- };
-
- const cancelEditing = () => {
- setEditingCategoryId(null);
- setEditName('');
- setFeedback(null);
- };
-
- const deleteCategory = async (categoryId: string, categoryName: string) => {
- const usageCount = usageByCategory[categoryName] ?? 0;
- Eif (usageCount > 0) {
- setFeedback({
- text: `Cannot delete '${categoryName}' while ${usageCount} product(s) use it. Update those products first.`,
- severity: 'error',
- });
- return;
- }
- await db.categories.delete(categoryId);
- if (editingCategoryId === categoryId) {
- cancelEditing();
- }
- setFeedback({ text: 'Category deleted.', severity: 'success' });
- };
-
- return (
- <Container sx={{ py: 4 }}>
- <Typography variant="h5" gutterBottom>
- Manage Categories
- </Typography>
- <Stack spacing={2}>
- {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
- <Stack direction="row" spacing={1}>
- <TextField
- fullWidth
- label="Category name"
- value={name}
- onChange={(event) => setName(event.target.value)}
- />
- <Button variant="contained" onClick={addCategory} disabled={!name.trim()}>
- Add
- </Button>
- </Stack>
- <List>
- {categories.map((category) => (
- <ListItem key={category.id} divider>
- {editingCategoryId === category.id ? (
- <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
- <TextField
- size="small"
- fullWidth
- value={editName}
- onChange={(event) => setEditName(event.target.value)}
- />
- <IconButton color="primary" onClick={saveCategory} disabled={!editName.trim()} aria-label="Save category">
- <CheckIcon />
- </IconButton>
- <IconButton onClick={cancelEditing} aria-label="Cancel editing">
- <CloseIcon />
- </IconButton>
- </Stack>
- ) : (
- <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
- <ListItemText primary={category.name} secondary={`Used by ${usageByCategory[category.name] ?? 0} product(s)`} />
- <Stack direction="row" spacing={0.5}>
- <IconButton
- onClick={() => startEditing(category.id, category.name)}
- aria-label={`Edit ${category.name}`}
- size="small"
- >
- <EditIcon fontSize="small" />
- </IconButton>
- <IconButton
- onClick={() => deleteCategory(category.id, category.name)}
- aria-label={`Delete ${category.name}`}
- size="small"
- >
- <DeleteIcon fontSize="small" />
- </IconButton>
- </Stack>
- </Stack>
- )}
- </ListItem>
- ))}
- </List>
- </Stack>
- </Container>
- );
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 | - - - - - - - - - - - - - - - - - - - - - - - - - -1x -75x -75x -75x -75x -75x -75x -75x -75x -75x -75x -75x -75x -75x - - -75x -75x - -75x -3x - -3x -1x -1x -1x - - -2x -2x - -2x -1x -1x -1x -1x - - -1x -1x - - - -75x -10x -9x -9x - - -75x - -2x -3x - - - - -75x - -5x - -5x - -5x -5x - - - - - -75x - -3x - - -2x - - -2x -2x -2x - - - - - -75x - -5x -5x - -5x - -5x -2x -2x -2x - - - - - -75x - -1x -1x - -1x - - - - -1x - -1x - -1x - - - - - -1x - -1x - - - - - - - - - - - - - - - -75x -18x -18x -9x - - - -75x -10x - - - - -75x - -14x -13x - - -13x -13x - - - - -75x -14x - - - -75x -9x -9x - - - - - -75x -12x -9x -9x - -12x - - -75x -3x - -3x -3x -2x - -2x -1x -1x - -1x -1x -1x - - - -1x -1x -1x - - - - - - - - - - - -3x -1x -1x - -1x -1x -1x -1x - - -75x - - - - - - - -2x -1x - - - - - - - - - - - - - - - - - - - - - - -75x -1x -1x -1x - - - -1x - - - - - -75x - - - - - - - - - - - - - - - - - - - - -4x - - - - - - - -1x - - - - - -82x - - - - - - - - - - - -38x -38x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -82x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -3x - - - - - - - - - - - - - -50x - - - - - - - - - - - - - - -3x -3x -3x - - - - - - - - | import {
- Alert,
- AlertColor,
- Button,
- Container,
- Dialog,
- DialogContent,
- DialogTitle,
- InputAdornment,
- MenuItem,
- Snackbar,
- Stack,
- TextField,
- Typography,
-} from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
-import { Link as RouterLink, useLocation } from 'react-router-dom';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { ProductRow } from '../components/ProductRow';
-import { useCategories, useProducts } from '../hooks/dataHooks';
-import { useDatabase } from '../context/DBProvider';
-import { BarcodeScannerView } from '../components/BarcodeScannerView';
-import { ExternalProductInfo, fetchProductFromOFF } from '../modules/openFoodFacts';
-import { DEFAULT_BULK_NAME, DEFAULT_UNIT_TYPE, Product } from '../models/Product';
-
-export const ManageProductsScreen = () => {
- const db = useDatabase();
- const products = useProducts();
- const categories = useCategories();
- const location = useLocation();
- const [search, setSearch] = useState('');
- const [selectedCategory, setSelectedCategory] = useState<string>('all');
- const [name, setName] = useState('');
- const [category, setCategory] = useState('');
- const [barcode, setBarcode] = useState('');
- const [barcodeError, setBarcodeError] = useState('');
- const [nameError, setNameError] = useState('');
- const [scannerOpen, setScannerOpen] = useState(false);
- const [lookupStatus, setLookupStatus] = useState<'idle' | 'loading' | 'found' | 'notfound' | 'offline'>(
- 'idle',
- );
- const [externalProduct, setExternalProduct] = useState<ExternalProductInfo | null>(null);
- const [feedback, setFeedback] = useState<{ text: string; severity: AlertColor } | null>(null);
-
- const lookupBarcode = useCallback(async (code: string) => {
- Iif (!code) return;
-
- if (typeof navigator !== 'undefined' && 'onLine' in navigator && !navigator.onLine) {
- setLookupStatus('offline');
- setExternalProduct(null);
- return;
- }
-
- setLookupStatus('loading');
- const result = await fetchProductFromOFF(code);
-
- if (result) {
- setExternalProduct(result);
- setLookupStatus('found');
- Eif (result.name) {
- setName((prev) => prev || result.name || '');
- }
- } else {
- setExternalProduct(null);
- setLookupStatus('notfound');
- }
- }, []);
-
- const categoryOptions = useMemo(() => {
- const categoryNames = categories.map((item) => item.name);
- const productCategories = products.map((product) => product.category);
- return Array.from(new Set([...categoryNames, ...productCategories]));
- }, [categories, products]);
-
- const findBarcodeConflict = useCallback(
- (value?: string, productId?: string) =>
- value
- ? products.find((product) => product.barcode === value && product.id !== productId)
- : undefined,
- [products],
- );
-
- const findNameConflict = useCallback(
- (value?: string, productId?: string) => {
- Iif (!value) return undefined;
-
- const normalizedValue = value.trim().toLowerCase();
-
- return products.find(
- (product) => product.id !== productId && product.name.trim().toLowerCase() === normalizedValue,
- );
- },
- [products],
- );
-
- const assertUniqueBarcode = useCallback(
- async (value?: string, productId?: string) => {
- if (!value) return;
-
- const conflict =
- findBarcodeConflict(value, productId) ?? (await db.products.where('barcode').equals(value).first());
-
- if (conflict && conflict.id !== productId) {
- const error = new Error('This barcode is already assigned to another product.');
- error.name = 'DuplicateBarcodeError';
- throw error;
- }
- },
- [db.products, findBarcodeConflict],
- );
-
- const assertUniqueName = useCallback(
- async (value: string, productId?: string) => {
- const normalized = value.trim().toLowerCase();
- Iif (!normalized) return;
-
- const conflict = findNameConflict(value, productId);
-
- if (conflict) {
- const error = new Error('A product with this name already exists.');
- error.name = 'DuplicateNameError';
- throw error;
- }
- },
- [findNameConflict],
- );
-
- const addProductToAutoLists = useCallback(
- async (product: Product, timestamp: number) => {
- const pickLists = await db.pickLists.toArray();
- const eligibleLists = pickLists.filter(
- (pickList) =>
- pickList.auto_add_new_products && Array.isArray(pickList.categories)
- ? pickList.categories.includes(product.category)
- : false,
- );
-
- Iif (eligibleLists.length === 0) return;
-
- await Promise.all(
- eligibleLists.map(async (pickList) => {
- const existing = await db.pickItems
- .where('pick_list_id')
- .equals(pickList.id)
- .filter((item) => item.product_id === product.id)
- .first();
-
- Iif (existing) return undefined;
-
- return db.pickItems.add({
- id: uuidv4(),
- pick_list_id: pickList.id,
- product_id: product.id,
- quantity: 1,
- is_carton: false,
- status: 'pending',
- created_at: timestamp,
- updated_at: timestamp,
- });
- }),
- );
- },
- [db.pickItems, db.pickLists],
- );
-
- useEffect(() => {
- Iif (categoryOptions.length === 0) return;
- if (!categoryOptions.includes(category)) {
- setCategory(categoryOptions[0]);
- }
- }, [category, categoryOptions]);
-
- useEffect(() => {
- Iif (selectedCategory !== 'all' && !categoryOptions.includes(selectedCategory)) {
- setSelectedCategory('all');
- }
- }, [categoryOptions, selectedCategory]);
-
- const filtered = useMemo(
- () =>
- products.filter((p) => {
- const matchesSearch = `${p.name} ${p.category}`
- .toLowerCase()
- .includes(search.toLowerCase());
- const matchesCategory = selectedCategory === 'all' || p.category === selectedCategory;
- return matchesSearch && matchesCategory;
- }),
- [products, search, selectedCategory],
- );
-
- const sortedFiltered = useMemo(
- () => filtered.slice().sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())),
- [filtered],
- );
-
- useEffect(() => {
- const state = location.state as { newBarcode?: string } | null;
- Iif (state?.newBarcode) {
- setBarcode(state.newBarcode);
- void lookupBarcode(state.newBarcode);
- }
- }, [location.state, lookupBarcode]);
-
- useEffect(() => {
- if (!barcode) {
- setLookupStatus('idle');
- setExternalProduct(null);
- }
- setBarcodeError('');
- }, [barcode]);
-
- const addProduct = async () => {
- Iif (!name || !category) return;
-
- try {
- await assertUniqueName(name);
- await assertUniqueBarcode(barcode || undefined);
- } catch (error) {
- if (error instanceof Error && error.name === 'DuplicateNameError') {
- setNameError(error.message);
- return;
- }
- Eif (error instanceof Error && error.name === 'DuplicateBarcodeError') {
- setBarcodeError(error.message);
- return;
- }
- throw error;
- }
- const timestamp = Date.now();
- const productId = uuidv4();
- const newProduct: Product = {
- id: productId,
- name,
- category,
- unit_type: DEFAULT_UNIT_TYPE,
- bulk_name: DEFAULT_BULK_NAME,
- barcode: barcode || undefined,
- archived: false,
- created_at: timestamp,
- updated_at: timestamp,
- };
-
- await db.transaction('rw', db.products, db.pickLists, db.pickItems, async () => {
- await db.products.add(newProduct);
- await addProductToAutoLists(newProduct, timestamp);
- });
- setName('');
- setBarcode('');
- setNameError('');
- setFeedback({ text: 'Product added.', severity: 'success' });
- };
-
- const updateProduct = async (
- productId: string,
- updates: {
- name: string;
- category: string;
- barcode?: string;
- },
- ) => {
- await assertUniqueName(updates.name, productId);
- await assertUniqueBarcode(updates.barcode, productId);
-
- const existing = await db.products.get(productId);
- if (!existing) return;
-
- const normalizedName = updates.name.trim();
- const oldNameKey = existing.name.trim().toLowerCase();
- const updatedProduct: Product = {
- ...existing,
- ...updates,
- name: normalizedName,
- unit_type: DEFAULT_UNIT_TYPE,
- bulk_name: DEFAULT_BULK_NAME,
- updated_at: Date.now(),
- };
-
- await db.products.put(updatedProduct);
- await db.products
- .filter((product) => product.id !== productId && product.name.trim().toLowerCase() === oldNameKey)
- .delete();
- setFeedback({ text: 'Product updated.', severity: 'success' });
- };
-
- const deleteProduct = async (productId: string) => {
- const usageCount = await db.pickItems.where('product_id').equals(productId).count();
- Eif (usageCount > 0) {
- setFeedback({
- text: `Cannot delete this product while ${usageCount} pick item(s) reference it. Remove those items first.`,
- severity: 'error',
- });
- return;
- }
- await db.products.delete(productId);
- setFeedback({ text: 'Product deleted.', severity: 'success' });
- };
-
- return (
- <Container sx={{ py: 4 }}>
- <Typography variant="h5" gutterBottom>
- Manage Products
- </Typography>
- <Stack spacing={2}>
- <Snackbar
- open={Boolean(feedback)}
- autoHideDuration={4000}
- onClose={() => setFeedback(null)}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
- </Snackbar>
- <Button component={RouterLink} to="/categories" variant="outlined" sx={{ alignSelf: 'flex-start' }}>
- Edit Categories
- </Button>
- <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
- <TextField
- placeholder="Search"
- value={search}
- onChange={(event) => setSearch(event.target.value)}
- InputProps={{ startAdornment: <InputAdornment position="start">{<SearchIcon />}</InputAdornment> }}
- fullWidth
- />
- <TextField
- select
- label="Filter by category"
- value={selectedCategory}
- onChange={(event) => setSelectedCategory(event.target.value)}
- sx={{ minWidth: { sm: 180 } }}
- inputProps={{ 'aria-label': 'Category filter' }}
- >
- <MenuItem value="all">All categories</MenuItem>
- {categoryOptions.map((cat) => (
- <MenuItem key={cat} value={cat}>
- {cat}
- </MenuItem>
- ))}
- </TextField>
- </Stack>
- <Stack spacing={1}>
- <Typography variant="subtitle1">Add Product</Typography>
- <TextField
- label="Name"
- value={name}
- onChange={(event) => {
- setName(event.target.value);
- setNameError('');
- }}
- error={Boolean(nameError)}
- helperText={nameError || undefined}
- InputProps={
- name
- ? {
- endAdornment: (
- <Button
- onClick={() => {
- setName('');
- setNameError('');
- }}
- size="small"
- >
- Clear
- </Button>
- ),
- }
- : undefined
- }
- />
- <TextField
- select
- label="Add product category"
- value={category}
- onChange={(event) => setCategory(event.target.value)}
- disabled={categoryOptions.length === 0}
- >
- {categoryOptions.map((cat) => (
- <MenuItem key={cat} value={cat}>
- {cat}
- </MenuItem>
- ))}
- </TextField>
- {barcode ? (
- <Stack spacing={1}>
- <TextField
- label="Barcode"
- value={barcode}
- onChange={(event) => setBarcode(event.target.value)}
- error={Boolean(barcodeError)}
- helperText={barcodeError || undefined}
- InputProps={{
- endAdornment: (
- <Button onClick={() => setBarcode('')} size="small">
- Clear
- </Button>
- ),
- }}
- />
- {lookupStatus === 'loading' ? <Typography variant="body2">Looking up product…</Typography> : null}
- {lookupStatus === 'found' && externalProduct ? (
- <Typography variant="body2" color="text.secondary">
- Found {externalProduct.name ?? 'product'} via Open Food Facts. Please confirm details.
- </Typography>
- ) : null}
- {lookupStatus === 'notfound' ? (
- <Typography variant="body2" color="text.secondary">
- Product not found. Add it manually.
- </Typography>
- ) : null}
- {lookupStatus === 'offline' ? (
- <Typography variant="body2" color="text.secondary">
- You are offline. Enter details manually.
- </Typography>
- ) : null}
- </Stack>
- ) : (
- <Button variant="outlined" onClick={() => setScannerOpen(true)}>
- Scan Barcode
- </Button>
- )}
- <Button variant="contained" onClick={addProduct} disabled={!name || !category}>
- Save Product
- </Button>
- </Stack>
- {sortedFiltered.length === 0 ? (
- <Typography variant="body2" color="text.secondary">
- No products match your search and category filter.
- </Typography>
- ) : (
- sortedFiltered.map((product) => (
- <ProductRow
- key={product.id}
- product={product}
- categories={categoryOptions}
- onSave={updateProduct}
- onDelete={deleteProduct}
- />
- ))
- )}
- </Stack>
- <Dialog open={scannerOpen} onClose={() => setScannerOpen(false)} fullWidth>
- <DialogTitle>Scan Barcode</DialogTitle>
- <DialogContent>
- <BarcodeScannerView
- onDetected={(code) => {
- setBarcode(code);
- void lookupBarcode(code);
- setScannerOpen(false);
- }}
- />
- </DialogContent>
- </Dialog>
- </Container>
- );
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 | - - - - - - - - - - - - - - - - - - - - - - - -1x -22x -22x -22x -22x -22x -22x - -22x -4x -12x -4x - - -22x -4x -16x - - -4x -8x - - - -8x - - - - -66x - -22x -1x -1x -1x - - -22x -1x -1x -1x - - -22x -1x -1x -1x -1x -1x - - - - - -22x -1x -1x -1x -1x - - -22x - - - - - - - - - -66x - - - - - -1x -1x -1x - - - - - - - - -1x -1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - -51x - - - - - - - -15x - - - - - - - - - - - - - - - - - | import {
- Button,
- Container,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- IconButton,
- List,
- ListItem,
- ListItemButton,
- ListItemText,
- Stack,
- TextField,
- Typography,
-} from '@mui/material';
-import { Delete, Edit } from '@mui/icons-material';
-import { format } from 'date-fns';
-import { useMemo, useState } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { usePickLists, useAreas } from '../hooks/dataHooks';
-import { useDatabase } from '../context/DBProvider';
-import { PickList } from '../models/PickList';
-
-export const PickListsScreen = () => {
- const lists = usePickLists();
- const areas = useAreas();
- const db = useDatabase();
- const [editingList, setEditingList] = useState<PickList | null>(null);
- const [areaId, setAreaId] = useState('');
- const [notes, setNotes] = useState('');
-
- const areaNameById = useMemo(() => {
- const map = new Map<string, string>();
- areas.forEach((area) => map.set(area.id, area.name));
- return map;
- }, [areas]);
-
- const sortedLists = useMemo(() => {
- const locale = new Intl.Collator(undefined, { sensitivity: 'base' });
- const normalizeAreaName = (areaId: string) =>
- (areaNameById.get(areaId) ?? 'Unknown area').trim();
-
- return [...lists].sort((a, b) => {
- const nameComparison = locale.compare(
- normalizeAreaName(a.area_id),
- normalizeAreaName(b.area_id),
- );
- Eif (nameComparison !== 0) return nameComparison;
- return a.created_at - b.created_at;
- });
- }, [areaNameById, lists]);
-
- const getAreaName = (areaId: string) => areaNameById.get(areaId) ?? 'Unknown area';
-
- const openEdit = (list: PickList) => {
- setEditingList(list);
- setAreaId(list.area_id);
- setNotes(list.notes ?? '');
- };
-
- const closeEdit = () => {
- setEditingList(null);
- setAreaId('');
- setNotes('');
- };
-
- const saveEdit = async () => {
- Iif (!editingList || !areaId) return;
- const listId = editingList.id;
- const trimmedNotes = notes.trim() || undefined;
- closeEdit();
- await db.pickLists.update(listId, {
- area_id: areaId,
- notes: trimmedNotes,
- });
- };
-
- const deleteList = async (list: PickList) => {
- const confirmed = window.confirm('Remove this pick list and its items?');
- Iif (!confirmed) return;
- await db.pickItems.where('pick_list_id').equals(list.id).delete();
- await db.pickLists.delete(list.id);
- };
-
- return (
- <Container sx={{ py: 4 }}>
- <Typography variant="h5" gutterBottom>
- Pick Lists
- </Typography>
- <Button component={RouterLink} to="/start" variant="contained" sx={{ mb: 2 }}>
- Add Pick List
- </Button>
- <List>
- {sortedLists.map((list) => (
- <ListItem key={list.id} divider secondaryAction={
- <Stack direction="row" spacing={1}>
- <IconButton
- edge="end"
- aria-label="Edit"
- onClick={(event) => {
- event.stopPropagation();
- event.preventDefault();
- openEdit(list);
- }}
- >
- <Edit />
- </IconButton>
- <IconButton
- edge="end"
- aria-label="Delete"
- onClick={(event) => {
- event.stopPropagation();
- event.preventDefault();
- deleteList(list);
- }}
- >
- <Delete />
- </IconButton>
- </Stack>
- }>
- <ListItemButton component={RouterLink} to={`/pick-lists/${list.id}`}>
- <ListItemText
- primary={getAreaName(list.area_id)}
- secondary={
- <Stack spacing={0.5}>
- {list.notes ? <span>{list.notes}</span> : null}
- <Typography variant="caption" color="text.secondary">
- Created {format(list.created_at, 'PPpp')}
- </Typography>
- </Stack>
- }
- secondaryTypographyProps={{ component: 'div' }}
- />
- </ListItemButton>
- </ListItem>
- ))}
- </List>
-
- {editingList ? (
- <Dialog open onClose={closeEdit} fullWidth>
- <DialogTitle>Edit Pick List</DialogTitle>
- <DialogContent sx={{ pt: 1 }}>
- <Stack spacing={2} mt={1}>
- <TextField
- select
- SelectProps={{ native: true }}
- fullWidth
- label="Area"
- value={areaId}
- onChange={(event) => setAreaId(event.target.value)}
- >
- {areas.map((area) => (
- <option key={area.id} value={area.id}>
- {area.name}
- </option>
- ))}
- </TextField>
- <TextField
- label="Notes"
- value={notes}
- onChange={(event) => setNotes(event.target.value)}
- multiline
- minRows={2}
- />
- </Stack>
- </DialogContent>
- <DialogActions>
- <Button onClick={closeEdit}>Cancel</Button>
- <Button variant="contained" onClick={saveEdit} disabled={!areaId}>
- Save Changes
- </Button>
- </DialogActions>
- </Dialog>
- ) : null}
- </Container>
- );
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| ManageCategoriesScreen.tsx | -
-
- |
- 80.88% | -55/68 | -60.71% | -17/28 | -94.11% | -16/17 | -85.48% | -53/62 | -
| ManageProductsScreen.tsx | -
-
- |
- 80.6% | -133/165 | -77.35% | -82/106 | -81.39% | -35/43 | -84.21% | -128/152 | -
| PickListsScreen.tsx | -
-
- |
- 94.54% | -52/55 | -65% | -13/20 | -100% | -17/17 | -97.95% | -48/49 | -