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 { import {
Box,
Button,
Card, Card,
CardActions,
CardContent, CardContent,
Dialog, Dialog,
DialogContent, DialogContent,
@@ -10,7 +11,6 @@ import {
Stack, Stack,
TextField, TextField,
Typography, Typography,
Button,
} from '@mui/material'; } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete'; import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
@@ -89,7 +89,7 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
return ( return (
<Card variant="outlined" sx={{ mb: 1 }}> <Card variant="outlined" sx={{ mb: 1 }}>
<CardContent> <CardContent sx={{ p: 1.25, '&:last-child': { pb: 1.25 } }}>
{isEditing ? ( {isEditing ? (
<Stack spacing={1}> <Stack spacing={1}>
<TextField label="Name" value={formState.name} onChange={handleChange('name')} size="small" /> <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 Scan Barcode
</Button> </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>
) : ( ) : (
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
<div> <Stack direction="row" spacing={1.5} alignItems="center" sx={{ flex: 1, minWidth: 0 }}>
<Typography variant="subtitle1">{product.name}</Typography> <Stack spacing={0.25} sx={{ minWidth: 0 }}>
<Typography variant="caption" color="text.secondary"> <Typography variant="subtitle1" noWrap>
{product.category} • {product.unit_type || DEFAULT_UNIT_TYPE} {product.name}
</Typography> </Typography>
</div> <Typography variant="caption" color="text.secondary" noWrap>
{product.barcode ? ( {product.category} • {product.unit_type || DEFAULT_UNIT_TYPE}
<Typography variant="caption" color="text.secondary"> </Typography>
Barcode: {product.barcode} </Stack>
</Typography> {product.barcode ? (
) : null} <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> </Stack>
)} )}
</CardContent> </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> <Dialog open={isScannerOpen} onClose={() => setIsScannerOpen(false)} fullWidth>
<DialogTitle>Scan Barcode</DialogTitle> <DialogTitle>Scan Barcode</DialogTitle>
<DialogContent> <DialogContent>