Merge pull request #6 from beatz174-bit/codex/add-controls-to-edit-or-delete-items
Add edit and delete controls for areas and products
This commit is contained in:
beatz174-bit
+155
-20
@@ -1,26 +1,161 @@
|
||||
import { Card, CardContent, Stack, Typography } from '@mui/material';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardContent,
|
||||
IconButton,
|
||||
MenuItem,
|
||||
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';
|
||||
|
||||
interface ProductRowProps {
|
||||
product: Product;
|
||||
categories: string[];
|
||||
onSave: (
|
||||
productId: string,
|
||||
updates: {
|
||||
name: string;
|
||||
category: string;
|
||||
unit_type: string;
|
||||
bulk_name?: string;
|
||||
units_per_bulk?: number;
|
||||
},
|
||||
) => Promise<void> | void;
|
||||
onDelete: (productId: string) => Promise<void> | void;
|
||||
}
|
||||
|
||||
export const ProductRow = ({ product }: ProductRowProps) => (
|
||||
<Card variant="outlined" sx={{ mb: 1 }}>
|
||||
<CardContent>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<div>
|
||||
<Typography variant="subtitle1">{product.name}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{product.category} • {product.unit_type}
|
||||
</Typography>
|
||||
</div>
|
||||
{product.bulk_name && product.units_per_bulk ? (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{product.units_per_bulk} per {product.bulk_name}
|
||||
</Typography>
|
||||
) : null}
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
interface ProductFormState {
|
||||
name: string;
|
||||
category: string;
|
||||
unitType: string;
|
||||
bulkName: string;
|
||||
unitsPerBulk: string;
|
||||
}
|
||||
|
||||
const getInitialFormState = (product: Product): ProductFormState => ({
|
||||
name: product.name,
|
||||
category: product.category,
|
||||
unitType: product.unit_type,
|
||||
bulkName: product.bulk_name ?? '',
|
||||
unitsPerBulk: product.units_per_bulk?.toString() ?? '',
|
||||
});
|
||||
|
||||
export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRowProps) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [formState, setFormState] = useState<ProductFormState>(() => getInitialFormState(product));
|
||||
|
||||
useEffect(() => {
|
||||
setFormState(getInitialFormState(product));
|
||||
}, [product]);
|
||||
|
||||
const handleChange = (field: keyof ProductFormState) => (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setFormState((prev) => ({ ...prev, [field]: event.target.value }));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formState.name) return;
|
||||
await onSave(product.id, {
|
||||
name: formState.name,
|
||||
category: formState.category,
|
||||
unit_type: formState.unitType,
|
||||
bulk_name: formState.bulkName || undefined,
|
||||
units_per_bulk: formState.unitsPerBulk ? Number(formState.unitsPerBulk) : undefined,
|
||||
});
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsEditing(false);
|
||||
setFormState(getInitialFormState(product));
|
||||
};
|
||||
|
||||
return (
|
||||
<Card variant="outlined" sx={{ mb: 1 }}>
|
||||
<CardContent>
|
||||
{isEditing ? (
|
||||
<Stack spacing={1}>
|
||||
<TextField label="Name" value={formState.name} onChange={handleChange('name')} size="small" />
|
||||
<TextField
|
||||
select
|
||||
label="Category"
|
||||
value={formState.category}
|
||||
onChange={handleChange('category')}
|
||||
size="small"
|
||||
>
|
||||
{categories.map((cat) => (
|
||||
<MenuItem key={cat} value={cat}>
|
||||
{cat}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<TextField
|
||||
label="Unit Type"
|
||||
value={formState.unitType}
|
||||
onChange={handleChange('unitType')}
|
||||
size="small"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Units per Bulk"
|
||||
type="number"
|
||||
value={formState.unitsPerBulk}
|
||||
onChange={handleChange('unitsPerBulk')}
|
||||
size="small"
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
<TextField
|
||||
label="Bulk Name"
|
||||
value={formState.bulkName}
|
||||
onChange={handleChange('bulkName')}
|
||||
size="small"
|
||||
/>
|
||||
</Stack>
|
||||
) : (
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<div>
|
||||
<Typography variant="subtitle1">{product.name}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{product.category} • {product.unit_type}
|
||||
</Typography>
|
||||
</div>
|
||||
{product.bulk_name && product.units_per_bulk ? (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{product.units_per_bulk} per {product.bulk_name}
|
||||
</Typography>
|
||||
) : null}
|
||||
</Stack>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'flex-end', pt: 0 }}>
|
||||
{isEditing ? (
|
||||
<>
|
||||
<IconButton aria-label="Save product" onClick={handleSave} disabled={!formState.name} color="primary">
|
||||
<CheckIcon />
|
||||
</IconButton>
|
||||
<IconButton aria-label="Cancel edit" onClick={handleCancel}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<IconButton aria-label={`Edit ${product.name}`} onClick={() => setIsEditing(true)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton aria-label={`Delete ${product.name}`} onClick={() => onDelete(product.id)}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
)}
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,18 @@
|
||||
import { Button, Container, List, ListItem, ListItemText, Stack, TextField, Typography } from '@mui/material';
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
IconButton,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
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 { useState } from 'react';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { useAreas } from '../hooks/dataHooks';
|
||||
@@ -8,6 +22,8 @@ export const ManageAreasScreen = () => {
|
||||
const db = useDatabase();
|
||||
const areas = useAreas();
|
||||
const [name, setName] = useState('');
|
||||
const [editingAreaId, setEditingAreaId] = useState<string | null>(null);
|
||||
const [editName, setEditName] = useState('');
|
||||
|
||||
const addArea = async () => {
|
||||
if (!name) return;
|
||||
@@ -15,6 +31,30 @@ export const ManageAreasScreen = () => {
|
||||
setName('');
|
||||
};
|
||||
|
||||
const startEditing = (areaId: string, currentName: string) => {
|
||||
setEditingAreaId(areaId);
|
||||
setEditName(currentName);
|
||||
};
|
||||
|
||||
const saveArea = async () => {
|
||||
if (!editingAreaId || !editName) return;
|
||||
await db.areas.update(editingAreaId, { name: editName, updated_at: Date.now() });
|
||||
setEditingAreaId(null);
|
||||
setEditName('');
|
||||
};
|
||||
|
||||
const cancelEditing = () => {
|
||||
setEditingAreaId(null);
|
||||
setEditName('');
|
||||
};
|
||||
|
||||
const deleteArea = async (areaId: string) => {
|
||||
await db.areas.delete(areaId);
|
||||
if (editingAreaId === areaId) {
|
||||
cancelEditing();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container sx={{ py: 4 }}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
@@ -30,7 +70,42 @@ export const ManageAreasScreen = () => {
|
||||
<List>
|
||||
{areas.map((area) => (
|
||||
<ListItem key={area.id} divider>
|
||||
<ListItemText primary={area.name} />
|
||||
{editingAreaId === area.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={saveArea} disabled={!editName} aria-label="Save area">
|
||||
<CheckIcon />
|
||||
</IconButton>
|
||||
<IconButton onClick={cancelEditing} aria-label="Cancel editing">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
) : (
|
||||
<Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
|
||||
<ListItemText primary={area.name} />
|
||||
<Stack direction="row" spacing={0.5}>
|
||||
<IconButton
|
||||
onClick={() => startEditing(area.id, area.name)}
|
||||
aria-label={`Edit ${area.name}`}
|
||||
size="small"
|
||||
>
|
||||
<EditIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={() => deleteArea(area.id)}
|
||||
aria-label={`Delete ${area.name}`}
|
||||
size="small"
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
|
||||
@@ -50,6 +50,23 @@ export const ManageProductsScreen = () => {
|
||||
setName('');
|
||||
};
|
||||
|
||||
const updateProduct = async (
|
||||
productId: string,
|
||||
updates: {
|
||||
name: string;
|
||||
category: string;
|
||||
unit_type: string;
|
||||
bulk_name?: string;
|
||||
units_per_bulk?: number;
|
||||
},
|
||||
) => {
|
||||
await db.products.update(productId, { ...updates, updated_at: Date.now() });
|
||||
};
|
||||
|
||||
const deleteProduct = async (productId: string) => {
|
||||
await db.products.delete(productId);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container sx={{ py: 4 }}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
@@ -85,7 +102,13 @@ export const ManageProductsScreen = () => {
|
||||
</Button>
|
||||
</Stack>
|
||||
{filtered.map((product) => (
|
||||
<ProductRow key={product.id} product={product} />
|
||||
<ProductRow
|
||||
key={product.id}
|
||||
product={product}
|
||||
categories={categories}
|
||||
onSave={updateProduct}
|
||||
onDelete={deleteProduct}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user