seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2026-10-05 15:11:49 +02:00
parent 26bee398a6
commit 81620521e7
1 changed files with 157 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/components/article/tabs/ArticleSupplierTab.jsx
View File

@@ -254,20 +254,11 @@ export default class ArticleSupplierTab extends PureComponent {
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'flex-end',
alignItems: 'center', alignItems: 'center',
mb: 2, mb: 2,
}} }}
> >
<Box>
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
Zugeordnete Lieferanten ({assignedSuppliers.length})
</Typography>
<Typography variant="caption" color="text.secondary">
Bezugsquellen, Lieferanten-Artikelnr. und Konditionen für diesen Artikel
</Typography>
</Box>
<Button <Button
size="small" size="small"
variant="contained" variant="contained"
@@ -279,200 +270,166 @@ export default class ArticleSupplierTab extends PureComponent {
</Button> </Button>
</Box> </Box>
{/* Content Table or Empty State */} {/* Content Table */}
{assignedSuppliers.length === 0 ? ( <Table
<Box size="small"
sx={{ sx={{
display: 'flex', '& td': { verticalAlign: 'middle' },
flexDirection: 'column', '& th': { fontWeight: 600, color: 'text.secondary', fontSize: '0.8rem' },
alignItems: 'center', }}
justifyContent: 'center', >
py: 6, <TableHead>
px: 2, <TableRow>
borderRadius: 2, <TableCell sx={{ width: 60, pl: 1 }}>Reihe</TableCell>
border: `1px dashed ${SORT_GHOST_BG}`, <TableCell>Lieferant</TableCell>
bgcolor: TINT_FAINT, <TableCell>Lief.-Art.-Nr.</TableCell>
textAlign: 'center', <TableCell align="right">VPE (PU)</TableCell>
}} <TableCell align="right">Lagerbestand</TableCell>
> <TableCell align="right">Einkaufspreis</TableCell>
<LocalShippingOutlinedIcon sx={{ fontSize: 48, mb: 1.5, color: 'text.secondary', opacity: 0.6 }} /> <TableCell align="right" sx={{ width: 100, pr: 1 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}> Aktionen
Noch keine Lieferanten zugewiesen </TableCell>
</Typography> </TableRow>
<Typography variant="body2" color="text.secondary" sx={{ maxWidth: 380, mb: 2 }}> </TableHead>
Weise diesem Artikel Lieferanten zu, um Einkaufspreise, VPE und Artikelnummern für Wareneingänge zu hinterlegen. <TableBody>
</Typography> {assignedSuppliers.map((row, index) => {
<Button const isBusy = busyId === row.id;
variant="outlined" const netPrice = row.price?.net;
startIcon={<AddIcon />} const taxRate = row.price?.taxRate;
onClick={this.handleOpenAdd}
size="small"
sx={{ textTransform: 'none' }}
>
Jetzt Lieferant zuweisen
</Button>
</Box>
) : (
<Table
size="small"
sx={{
'& td': { verticalAlign: 'middle' },
'& th': { fontWeight: 600, color: 'text.secondary', fontSize: '0.8rem' },
}}
>
<TableHead>
<TableRow>
<TableCell sx={{ width: 60, pl: 1 }}>Reihe</TableCell>
<TableCell>Lieferant</TableCell>
<TableCell>Lief.-Art.-Nr.</TableCell>
<TableCell align="right">VPE (PU)</TableCell>
<TableCell align="right">Lagerbestand</TableCell>
<TableCell align="right">Einkaufspreis</TableCell>
<TableCell align="right" sx={{ width: 100, pr: 1 }}>
Aktionen
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{assignedSuppliers.map((row, index) => {
const isBusy = busyId === row.id;
const netPrice = row.price?.net;
const taxRate = row.price?.taxRate;
return ( return (
<TableRow <TableRow
key={row.id} key={row.id}
hover hover
sx={{ sx={{
opacity: isBusy ? 0.5 : 1, opacity: isBusy ? 0.5 : 1,
transition: 'opacity 0.2s', transition: 'opacity 0.2s',
}} }}
> >
{/* Sort Order & Reorder Controls */} {/* Sort Order & Reorder Controls */}
<TableCell sx={{ pl: 1 }}> <TableCell sx={{ pl: 1 }}>
<Stack direction="row" spacing={0.5} alignItems="center"> <Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="caption" sx={{ minWidth: 16, fontWeight: 700, color: 'text.secondary' }}> <Typography variant="caption" sx={{ minWidth: 16, fontWeight: 700, color: 'text.secondary' }}>
{index + 1} {index + 1}
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Tooltip title="Nach oben">
<span>
<IconButton
size="small"
disabled={index === 0 || isBusy}
onClick={() => this.handleMove(index, -1)}
sx={{ p: 0.2 }}
>
<ArrowUpwardIcon sx={{ fontSize: 13 }} />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Nach unten">
<span>
<IconButton
size="small"
disabled={index === assignedSuppliers.length - 1 || isBusy}
onClick={() => this.handleMove(index, 1)}
sx={{ p: 0.2 }}
>
<ArrowDownwardIcon sx={{ fontSize: 13 }} />
</IconButton>
</span>
</Tooltip>
</Box>
</Stack>
</TableCell>
{/* Supplier Name */}
<TableCell sx={{ fontWeight: 600 }}>
{row.supplierName ?? `Lieferant #${row.entityId}`}
</TableCell>
{/* Supplier SKU */}
<TableCell>
{row.sku ? (
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontWeight: 500 }}>
{row.sku}
</Typography>
) : (
<Typography variant="body2" color="text.secondary">
—
</Typography>
)}
</TableCell>
{/* PU / VPE */}
<TableCell align="right">
<Typography variant="body2">{row.pu ?? 1}</Typography>
</TableCell>
{/* Stock */}
<TableCell align="right">
{row.stock != null ? (
<Chip
size="small"
label={`${row.stock} Stk`}
color={row.stock > 0 ? 'success' : 'default'}
variant="outlined"
sx={{ fontWeight: 500, height: 22, fontSize: '0.75rem' }}
/>
) : (
<Typography variant="body2" color="text.secondary">
—
</Typography>
)}
</TableCell>
{/* Purchase Price Net & Tax */}
<TableCell align="right">
{netPrice != null ? (
<Box>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
{formatPrice(netPrice)}
</Typography> </Typography>
<Box sx={{ display: 'flex', flexDirection: 'column' }}> {taxRate != null ? (
<Tooltip title="Nach oben"> <Typography variant="caption" color="text.secondary">
<span> zzgl. {taxRate} % MwSt.
<IconButton
size="small"
disabled={index === 0 || isBusy}
onClick={() => this.handleMove(index, -1)}
sx={{ p: 0.2 }}
>
<ArrowUpwardIcon sx={{ fontSize: 13 }} />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Nach unten">
<span>
<IconButton
size="small"
disabled={index === assignedSuppliers.length - 1 || isBusy}
onClick={() => this.handleMove(index, 1)}
sx={{ p: 0.2 }}
>
<ArrowDownwardIcon sx={{ fontSize: 13 }} />
</IconButton>
</span>
</Tooltip>
</Box>
</Stack>
</TableCell>
{/* Supplier Name */}
<TableCell sx={{ fontWeight: 600 }}>
{row.supplierName ?? `Lieferant #${row.entityId}`}
</TableCell>
{/* Supplier SKU */}
<TableCell>
{row.sku ? (
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontWeight: 500 }}>
{row.sku}
</Typography>
) : (
<Typography variant="body2" color="text.secondary">
—
</Typography>
)}
</TableCell>
{/* PU / VPE */}
<TableCell align="right">
<Typography variant="body2">{row.pu ?? 1}</Typography>
</TableCell>
{/* Stock */}
<TableCell align="right">
{row.stock != null ? (
<Chip
size="small"
label={`${row.stock} Stk`}
color={row.stock > 0 ? 'success' : 'default'}
variant="outlined"
sx={{ fontWeight: 500, height: 22, fontSize: '0.75rem' }}
/>
) : (
<Typography variant="body2" color="text.secondary">
—
</Typography>
)}
</TableCell>
{/* Purchase Price Net & Tax */}
<TableCell align="right">
{netPrice != null ? (
<Box>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
{formatPrice(netPrice)}
</Typography> </Typography>
{taxRate != null ? ( ) : null}
<Typography variant="caption" color="text.secondary"> </Box>
zzgl. {taxRate} % MwSt. ) : (
</Typography> <Typography variant="body2" color="text.secondary">
) : null} —
</Box> </Typography>
) : ( )}
<Typography variant="body2" color="text.secondary"> </TableCell>
—
</Typography>
)}
</TableCell>
{/* Actions */} {/* Actions */}
<TableCell align="right" sx={{ pr: 1 }}> <TableCell align="right" sx={{ pr: 1 }}>
<Stack direction="row" spacing={0.5} justifyContent="flex-end"> <Stack direction="row" spacing={0.5} justifyContent="flex-end">
<Tooltip title="Bearbeiten"> <Tooltip title="Bearbeiten">
<IconButton <IconButton
size="small" size="small"
onClick={() => this.handleOpenEdit(row)} onClick={() => this.handleOpenEdit(row)}
disabled={isBusy} disabled={isBusy}
> >
<EditOutlinedIcon fontSize="small" /> <EditOutlinedIcon fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip title="Entfernen"> <Tooltip title="Entfernen">
<IconButton <IconButton
size="small" size="small"
color="error" color="error"
onClick={() => this.handleDelete(row)} onClick={() => this.handleDelete(row)}
disabled={isBusy} disabled={isBusy}
> >
<DeleteOutlineOutlinedIcon fontSize="small" /> <DeleteOutlineOutlinedIcon fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Stack> </Stack>
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
})} })}
</TableBody> </TableBody>
</Table> </Table>
)}
{/* Add / Edit Dialog */} {/* Add / Edit Dialog */}
<ArticleSupplierDialog <ArticleSupplierDialog