beatzaplenty/stockfill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore product edit and delete controls

Browse Source
This commit is contained in:
beatz174-bit
2025-11-24 07:44:19 +10:00
parent b01fc87403
commit f753d68ab2
1 changed files with 43 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProductRow.tsx
+43 -36
View File
@@ -1,6 +1,7 @@
import {
Box,
Button,
Card,
CardActions,
CardContent,
Dialog,
DialogContent,
@@ -10,7 +11,6 @@ import {
Stack,
TextField,
Typography,
Button,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
@@ -89,7 +89,7 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
return (
<Card variant="outlined" sx={{ mb: 1 }}>
<CardContent>
<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" />
@@ -133,44 +133,51 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
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" justifyContent="space-between" alignItems="center">
<div>
<Typography variant="subtitle1">{product.name}</Typography>
<Typography variant="caption" color="text.secondary">
{product.category} • {product.unit_type || DEFAULT_UNIT_TYPE}
</Typography>
</div>
{product.barcode ? (
<Typography variant="caption" color="text.secondary">
Barcode: {product.barcode}
</Typography>
) : null}
<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} • {product.unit_type || DEFAULT_UNIT_TYPE}
</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>
<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>
<Dialog open={isScannerOpen} onClose={() => setIsScannerOpen(false)} fullWidth>
<DialogTitle>Scan Barcode</DialogTitle>
<DialogContent>