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-15 03:32:41 +02:00
parent 954f276404
commit 9817d4abda
1 changed files with 62 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/manifest/QuoteList.jsx
View File

@@ -50,7 +50,7 @@ export function createDummyTestQuote() {
id: 999999, id: 999999,
number: maxNumber, number: maxNumber,
date: '2030-10-30T12:00:00Z', date: '2030-10-30T12:00:00Z',
customerName: 'Testkunde (Mustermann GmbH)', customerName: 'Kunde',
positions: 999, positions: 999,
grossTotal: 30000.90, grossTotal: 30000.90,
files: [ files: [
@@ -76,17 +76,6 @@ export function createDummyTestQuote() {
thumby: 200, thumby: 200,
skeledash: '6w5VujjmxhSpoO8VSwebe2yXU3Tj4108PysbXPqoHmyYcs9oXH8z6npbrjwK90StUBOXY0LLPiDgZy9qjYjkFDVKSjUp3dcWQ', skeledash: '6w5VujjmxhSpoO8VSwebe2yXU3Tj4108PysbXPqoHmyYcs9oXH8z6npbrjwK90StUBOXY0LLPiDgZy9qjYjkFDVKSjUp3dcWQ',
}, },
{
id: 99993,
manifestId: 999999,
fileId: 99993,
name: 'skizze-entwurf.pdf',
mimetype: 'application/pdf',
size: 8900,
thumbx: 141,
thumby: 200,
skeledash: '6w5VujjmxhSpoO8VSwebe2yXU3Tj4108PysbXPqoHmyYcs9oXH8z6npbrjwK90StUBOXY0LLPiDgZy9qjYjkFDVKSjUp3dcWQ',
}
], ],
}; };
} }
@@ -102,33 +91,51 @@ const rowGridSx = {
const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }; const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
const measuringCellSx = {
border: '1px dashed #1976d2',
opacity: 0.55,
boxSizing: 'border-box',
pointerEvents: 'none',
textTransform: 'none',
letterSpacing: 'normal',
};
const headerCellSx = {
color: 'text.secondary',
typography: 'caption',
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.04em',
userSelect: 'none',
};
function renderInvisibleDummyRow(dummy) { function renderInvisibleDummyRow(dummy) {
if (!dummy) return null; const d = dummy || createDummyTestQuote();
return ( return (
<> <>
<Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', whiteSpace: 'nowrap', pointerEvents: 'none' }}> <Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body1" sx={{ fontWeight: 600 }}>{dummy.number}</Typography> <Typography variant="body1" sx={{ fontWeight: 600 }}>{d.number}</Typography>
</Box> </Box>
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', whiteSpace: 'nowrap', pointerEvents: 'none' }}> <Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{dummy.date ? formatDate(dummy.date) : '–'}</Typography> <Typography variant="body2">{d.date ? formatDate(d.date) : '–'}</Typography>
</Box> </Box>
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', whiteSpace: 'nowrap', pointerEvents: 'none' }}> <Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body1">{dummy.customerName}</Typography> <Typography variant="body1">{d.customerName}</Typography>
</Box> </Box>
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', pointerEvents: 'none' }}> <Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
<Chip size="small" label={dummy.positions} sx={{ height: 24, '& .MuiChip-label': { px: 0.5 } }} /> <Chip size="small" label={d.positions} sx={{ height: 24, '& .MuiChip-label': { px: 0.5 } }} />
</Box> </Box>
<Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', display: 'flex', gap: '3px', pointerEvents: 'none' }}> <Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, display: 'flex', gap: '3px', alignItems: 'center', whiteSpace: 'nowrap', ...measuringCellSx }}>
{[0, 1, 2, 3].map((i) => ( {(d.files || []).map((file, i) => (
<Box key={i} sx={{ width: 15, height: 20, flexShrink: 0 }} /> <Box key={file.id ?? file.fileId ?? i} sx={{ width: 15, height: 20, flexShrink: 0, bgcolor: 'primary.light', borderRadius: 0.5 }} />
))} ))}
</Box> </Box>
<Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', whiteSpace: 'nowrap', pointerEvents: 'none' }}> <Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, whiteSpace: 'nowrap', display: 'flex', justifyContent: 'flex-end', ...measuringCellSx }}>
<Typography variant="body2" sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}> <Typography variant="body2" sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
{formatPrice(dummy.grossTotal)} {formatPrice(d.grossTotal)}
</Typography> </Typography>
</Box> </Box>
<Box aria-hidden sx={{ gridColumn: 7, gridRow: 1, visibility: 'hidden', height: 0, overflow: 'hidden', pointerEvents: 'none' }}> <Box aria-hidden sx={{ gridColumn: 7, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
<IconButton sx={{ width: 40, height: 40 }} /> <IconButton sx={{ width: 40, height: 40 }} />
</Box> </Box>
</> </>
@@ -169,15 +176,15 @@ class QuoteRow extends PureComponent {
); );
} }
return ( return (
<ListItemButton disabled divider sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0 }}> <ListItemButton disabled divider sx={{ ...rowGridSx, minHeight: 64, px: 2, py: 0.5 }}>
{renderInvisibleDummyRow(dummy)} {renderInvisibleDummyRow(dummy)}
<Box sx={{ gridColumn: 1, gridRow: 2 }}><Skeleton variant="text" width="90%" height={20} /></Box> <Box sx={{ gridColumn: 1, gridRow: 2, border: '1px solid red' }}><Skeleton variant="text" width="90%" height={20} /></Box>
<Box sx={{ gridColumn: 2, gridRow: 2 }}><Skeleton variant="text" width="90%" height={20} /></Box> <Box sx={{ gridColumn: 2, gridRow: 2, border: '1px solid red' }}><Skeleton variant="text" width="90%" height={20} /></Box>
<Box sx={{ gridColumn: 3, gridRow: 2 }}><Skeleton variant="text" width="60%" height={20} /></Box> <Box sx={{ gridColumn: 3, gridRow: 2, border: '1px solid red' }}><Skeleton variant="text" width="60%" height={20} /></Box>
<Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="rounded" width={28} height={20} /></Box> <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center', border: '1px solid red' }}><Skeleton variant="rounded" width={28} height={20} /></Box>
<Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', alignItems: 'center', gap: '3px' }}><Skeleton variant="rounded" width={15} height={20} /></Box> <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', alignItems: 'center', gap: '3px', border: '1px solid red' }}><Skeleton variant="rounded" width={15} height={20} /></Box>
<Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}><Skeleton variant="text" width="80%" height={20} /></Box> <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'flex-end', border: '1px solid red' }}><Skeleton variant="text" width="80%" height={20} /></Box>
<Box sx={{ gridColumn: 7, gridRow: 2 }} /> <Box sx={{ gridColumn: 7, gridRow: 2, border: '1px solid red' }} />
</ListItemButton> </ListItemButton>
); );
} }
@@ -192,31 +199,31 @@ class QuoteRow extends PureComponent {
return ( return (
<ListItemButton <ListItemButton
divider divider
sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0 }} sx={{ ...rowGridSx, minHeight: 64, px: 2, py: 0.5 }}
onClick={disabled ? undefined : () => onOpen?.(quote)} onClick={disabled ? undefined : () => onOpen?.(quote)}
disabled={disabled} disabled={disabled}
> >
{renderInvisibleDummyRow(dummy)} {renderInvisibleDummyRow(dummy)}
<Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> <Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', border: '1px solid red' }}>
<Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}> <Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
{quote.number} {quote.number}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> <Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', border: '1px solid red' }}>
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}> <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
{quote.date ? formatDate(quote.date) : '–'} {quote.date ? formatDate(quote.date) : '–'}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> <Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', border: '1px solid red' }}>
<Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}> <Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}>
{customer} {customer}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}> <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center', border: '1px solid red' }}>
<Chip <Chip
size="small" size="small"
label={posCount} label={posCount}
@@ -233,7 +240,7 @@ class QuoteRow extends PureComponent {
/> />
</Box> </Box>
{/* Files / Attachments column after Pos.: space for 4 per row, 2 lines max */} {/* Files / Attachments column after Pos.: space for 2 per row, 2 lines max (up to 4 thumbnails) */}
<Box <Box
sx={{ sx={{
gridColumn: 5, gridColumn: 5,
@@ -244,9 +251,12 @@ class QuoteRow extends PureComponent {
gap: '3px', gap: '3px',
maxHeight: 44, maxHeight: 44,
overflow: 'hidden', overflow: 'hidden',
width: 0,
minWidth: '100%',
border: '1px solid red',
}} }}
> >
{files.slice(0, 8).map((file, index) => { {files.slice(0, 4).map((file, index) => {
const fileId = file.fileId ?? file.id; const fileId = file.fileId ?? file.id;
const title = file.name ? `${file.name} (Öffnen)` : 'Datei öffnen'; const title = file.name ? `${file.name} (Öffnen)` : 'Datei öffnen';
return ( return (
@@ -305,7 +315,7 @@ class QuoteRow extends PureComponent {
})} })}
</Box> </Box>
<Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}> <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'flex-end', border: '1px solid red' }}>
<Typography <Typography
variant="body2" variant="body2"
sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', textAlign: 'right', whiteSpace: 'nowrap' }} sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', textAlign: 'right', whiteSpace: 'nowrap' }}
@@ -314,7 +324,7 @@ class QuoteRow extends PureComponent {
</Typography> </Typography>
</Box> </Box>
<Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'center' }}> <Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'center', border: '1px solid red' }}>
<IconButton <IconButton
aria-label={`„${quote.number}“ löschen`} aria-label={`„${quote.number}“ löschen`}
disabled={busyId != null || disabled} disabled={busyId != null || disabled}
@@ -673,27 +683,21 @@ export class QuoteList extends PureComponent {
<Box <Box
sx={{ sx={{
...rowGridSx, ...rowGridSx,
height: 36,
minHeight: 36, minHeight: 36,
px: 2, px: 2,
py: 0.5,
borderBottom: '1px solid', borderBottom: '1px solid',
borderColor: 'divider', borderColor: 'divider',
color: 'text.secondary',
typography: 'caption',
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.04em',
userSelect: 'none',
}} }}
> >
{renderInvisibleDummyRow(this.headerItem)} {renderInvisibleDummyRow(this.headerItem)}
<Box sx={{ gridColumn: 1, gridRow: 2 }}>Nr.</Box> <Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx, border: '1px solid red' }}>Nr.</Box>
<Box sx={{ gridColumn: 2, gridRow: 2 }}>Datum</Box> <Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx, border: '1px solid red' }}>Datum</Box>
<Box sx={{ gridColumn: 3, gridRow: 2 }}>Kunde</Box> <Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx, border: '1px solid red' }}>Kunde</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, textAlign: 'center' }}>Pos.</Box> <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center', textAlign: 'center', ...headerCellSx, border: '1px solid red' }}>Pos.</Box>
<Box sx={{ gridColumn: 5, gridRow: 2, textAlign: 'center' }}>Dateien</Box> <Box sx={{ gridColumn: 5, gridRow: 2, textAlign: 'left', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', ...headerCellSx, border: '1px solid red' }}></Box>
<Box sx={{ gridColumn: 6, gridRow: 2, textAlign: 'right' }}>Gesamt</Box> <Box sx={{ gridColumn: 6, gridRow: 2, textAlign: 'right', ...headerCellSx, border: '1px solid red' }}>Gesamt</Box>
<Box sx={{ gridColumn: 7, gridRow: 2 }} /> <Box sx={{ gridColumn: 7, gridRow: 2, ...headerCellSx, border: '1px solid red' }} />
</Box> </Box>
} }
onPageChange={this.handlePageChange} onPageChange={this.handlePageChange}