refactor(lists): use shared RecordList from dashgui

Replace duplicated table/list markup in the Kunde list page and Manifest
list with the shared dashgui RecordList component, and document dashgui/lists
in the README.

src/components/manifest/ManifestList.jsx

@@ -1,21 +1,7 @@
 import { PureComponent } from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import CircularProgress from '@mui/material/CircularProgress';
-import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Typography from '@mui/material/Typography';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from '../BackendError';
-import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import { RecordList } from 'dashgui/lists';
 import { StorageManagerContext } from '../../api/storageManagerContext';
 import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
@@ -133,98 +119,43 @@ class ManifestList extends PureComponent {
     const cfg = this.cfg;
     const partyField = cfg.partyField;
 
-    if (status === 'loading') {
-      return (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-          <CircularProgress />
-        </Box>
-      );
-    }
-
-    if (status === 'failed') {
-      return <BackendError error={error} onRetry={this.handleRetry} />;
+    const columns = [{ key: 'number', label: 'Nummer' }];
+    if (cfg.externalNumber) {
+      columns.push({
+        key: 'externalNumber',
+        label: 'Referenz',
+        render: (row) => numberDisplay(row.externalNumber),
+      });
     }
+    columns.push(
+      {
+        key: 'date',
+        label: cfg.dateLabel,
+        render: (row) => formatDate(row.date),
+      },
+      {
+        key: partyField,
+        label: cfg.partyLabel,
+        render: (row) => this.partyName(row[partyField]),
+      },
+    );
 
     return (
-      <PanelTileGrid>
-        <PanelTile wide={3} minHeight={240} color={cfg.listColor}>
-          <Stack spacing={2}>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-              <Button
-                type="button"
-                variant="contained"
-                size="small"
-                onClick={this.handleCreate}
-              >
-                {cfg.createButton}
-              </Button>
-            </Box>
-
-            {docs.length === 0 ? (
-              <Typography variant="body2" color="text.secondary">
-                {cfg.emptyList}
-              </Typography>
-            ) : (
-              <TableContainer>
-                <Table size="small">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Nummer</TableCell>
-                      {cfg.externalNumber ? (
-                        <TableCell>Referenz</TableCell>
-                      ) : null}
-                      <TableCell>{cfg.dateLabel}</TableCell>
-                      <TableCell>{cfg.partyLabel}</TableCell>
-                      <TableCell padding="checkbox" />
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {docs.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        hover
-                        sx={{ cursor: 'pointer' }}
-                        onClick={() => this.handleEdit(row)}
-                      >
-                        <TableCell>{row.number}</TableCell>
-                        {cfg.externalNumber ? (
-                          <TableCell>
-                            {numberDisplay(row.externalNumber)}
-                          </TableCell>
-                        ) : null}
-                        <TableCell>{formatDate(row.date)}</TableCell>
-                        <TableCell>{this.partyName(row[partyField])}</TableCell>
-                        <TableCell
-                          padding="checkbox"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <IconButton
-                            type="button"
-                            size="small"
-                            aria-label={`„${row.number}“ bearbeiten`}
-                            onClick={() => this.handleEdit(row)}
-                          >
-                            <EditOutlinedIcon fontSize="small" />
-                          </IconButton>
-                          <IconButton
-                            type="button"
-                            size="small"
-                            aria-label={`„${row.number}“ löschen`}
-                            disabled={busyId != null}
-                            onClick={() => void this.handleDelete(row)}
-                          >
-                            <DeleteOutlinedIcon fontSize="small" />
-                          </IconButton>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-          </Stack>
-        </PanelTile>
-      </PanelTileGrid>
+      <RecordList
+        status={status}
+        error={<BackendError error={error} onRetry={this.handleRetry} />}
+        rows={docs}
+        columns={columns}
+        createLabel={cfg.createButton}
+        onCreate={this.handleCreate}
+        onEdit={this.handleEdit}
+        onDelete={this.handleDelete}
+        deleteDisabled={busyId != null}
+        emptyMessage={cfg.emptyList}
+        color={cfg.listColor}
+        getEditLabel={(row) => `„${row.number}“ bearbeiten`}
+        getDeleteLabel={(row) => `„${row.number}“ löschen`}
+      />
     );
   }
 }