reorder

src/pages/kunde/gruppen.jsx

@@ -9,25 +9,39 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import GroupsIcon from '@mui/icons-material/Groups';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from '../../components/BackendError';
 import SingleLineTextEdit from '../../components/SingleLineTextEdit';
 import { PanelTile, PanelTileGrid } from '../../components/panels';
 import { StorageManagerContext } from '../../api/storageManagerContext';
-import { requireDefined, requireObject } from '../../utils/apiShape';
+import { requireArray, requireDefined, requireObject } from '../../utils/apiShape';
 import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
 
 function sortGroups(groups) {
-  return [...groups].sort((a, b) =>
-    String(a.name).localeCompare(String(b.name), 'de'),
-  );
+  return [...groups].sort((a, b) => {
+    const bySort = a.sort - b.sort;
+    if (bySort !== 0) return bySort;
+    const byName = String(a.name).localeCompare(String(b.name), 'de');
+    if (byName !== 0) return byName;
+    return a.id - b.id;
+  });
 }
 
 function draftsFrom(groups) {
   return Object.fromEntries(groups.map((row) => [row.id, row.name]));
 }
 
+function requireGroupListItem(row, path) {
+  requireObject(row, path);
+  requireDefined(row.id, `${path}.id`);
+  requireDefined(row.name, `${path}.name`);
+  requireDefined(row.sort, `${path}.sort`);
+  requireDefined(row.editable, `${path}.editable`);
+}
+
 class KundeGruppenPage extends PureComponent {
   static contextType = StorageManagerContext;
 
@@ -56,6 +70,9 @@ class KundeGruppenPage extends PureComponent {
   }
 
   applyGroups(groups) {
+    groups.forEach((row, index) => {
+      requireGroupListItem(row, `customergroups[${index}]`);
+    });
     const sorted = sortGroups(groups);
     this.setState({
       status: 'ready',
@@ -99,6 +116,7 @@ class KundeGruppenPage extends PureComponent {
       requireObject(data, 'POST /api/customergroup');
       requireObject(data.customergroup, 'customergroup');
       requireDefined(data.customergroup.id, 'customergroup.id');
+      requireDefined(data.customergroup.sort, 'customergroup.sort');
       await this.refreshFromServer();
       if (this._cancelled) return;
       this.setState({ newName: '', busyKey: null });
@@ -111,6 +129,7 @@ class KundeGruppenPage extends PureComponent {
   }
 
   async handleRename(group) {
+    if (!group.editable) return;
     const draft = String(this.state.drafts[group.id] ?? '').trim();
     if (!draft) {
       this.setState((prev) => ({
@@ -128,6 +147,7 @@ class KundeGruppenPage extends PureComponent {
       requireObject(data, 'PATCH /api/customergroup/:id');
       requireObject(data.customergroup, 'customergroup');
       requireDefined(data.customergroup.id, 'customergroup.id');
+      requireDefined(data.customergroup.sort, 'customergroup.sort');
       await this.refreshFromServer();
       if (this._cancelled) return;
       this.setState({ busyKey: null });
@@ -142,8 +162,42 @@ class KundeGruppenPage extends PureComponent {
     }
   }
 
+  async handleMove(group, delta) {
+    const { groups, busyKey } = this.state;
+    if (busyKey != null) return;
+
+    const index = groups.findIndex((row) => row.id === group.id);
+    const targetIndex = index + delta;
+    if (index < 0 || targetIndex < 0 || targetIndex >= groups.length) return;
+
+    const next = [...groups];
+    const [row] = next.splice(index, 1);
+    next.splice(targetIndex, 0, row);
+    const customergroupIds = next.map((item) => item.id);
+
+    this.setState({ busyKey: group.id });
+    try {
+      const data = await this.context.customergroup.order({ customergroupIds });
+      requireObject(data, 'PUT /api/customergroup/order');
+      requireArray(data.customergroupIds, 'customergroupIds');
+      await this.refreshFromServer();
+      if (this._cancelled) return;
+      this.setState({ busyKey: null });
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      try {
+        await this.refreshFromServer();
+      } catch (refreshErr) {
+        notifyError(refreshErr);
+      }
+      if (this._cancelled) return;
+      this.setState({ busyKey: null });
+    }
+  }
+
   async handleDelete(group) {
-    if (this.state.busyKey != null) return;
+    if (!group.editable || this.state.busyKey != null) return;
     if (!window.confirm(`Kundengruppe „${group.name}“ wirklich löschen?`)) {
       return;
     }
@@ -182,65 +236,81 @@ class KundeGruppenPage extends PureComponent {
       <PanelTileGrid>
         <PanelTile wide={2} minHeight={280} color="#e9d5ff">
           <Stack spacing={2}>
-            <Typography variant="body2" color="text.secondary">
-              Kundengruppen der ausgewählten Firma.
-            </Typography>
-
             <List dense disablePadding>
               {groups.length === 0 ? (
                 <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
                   Noch keine Kundengruppen.
                 </Typography>
               ) : (
-                groups.map((group) => (
-                  <ListItem
-                    key={group.id}
-                    disableGutters
-                    sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
-                  >
-                    <GroupsIcon
-                      sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }}
-                    />
-                    <SingleLineTextEdit
-                      size="small"
-                      label=""
-                      value={drafts[group.id] ?? ''}
-                      disabled={busy}
-                      onChange={(next) =>
-                        this.setState((prev) => ({
-                          drafts: { ...prev.drafts, [group.id]: next },
-                        }))
-                      }
-                      onBlur={() => void this.handleRename(group)}
-                      onKeyDown={(event) => {
-                        if (event.key === 'Enter') {
-                          event.preventDefault();
-                          event.target.blur();
-                        }
-                        if (event.key === 'Escape') {
-                          event.preventDefault();
-                          this.setState((prev) => ({
-                            drafts: {
-                              ...prev.drafts,
-                              [group.id]: group.name,
-                            },
-                          }));
-                          event.target.blur();
-                        }
-                      }}
-                      sx={{ flex: 1 }}
-                    />
-                    <IconButton
-                      edge="end"
-                      size="small"
-                      aria-label={`„${group.name}“ löschen`}
-                      disabled={busy}
-                      onClick={() => void this.handleDelete(group)}
+                groups.map((group, index) => {
+                  const editable = group.editable === true;
+                  return (
+                    <ListItem
+                      key={group.id}
+                      disableGutters
+                      sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
                     >
-                      <DeleteOutlinedIcon fontSize="small" />
-                    </IconButton>
-                  </ListItem>
-                ))
+                      <GroupsIcon
+                        sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }}
+                      />
+                      <SingleLineTextEdit
+                        size="small"
+                        label=""
+                        value={drafts[group.id] ?? ''}
+                        disabled={busy || !editable}
+                        onChange={(next) =>
+                          this.setState((prev) => ({
+                            drafts: { ...prev.drafts, [group.id]: next },
+                          }))
+                        }
+                        onBlur={() => void this.handleRename(group)}
+                        onKeyDown={(event) => {
+                          if (!editable) return;
+                          if (event.key === 'Enter') {
+                            event.preventDefault();
+                            event.target.blur();
+                          }
+                          if (event.key === 'Escape') {
+                            event.preventDefault();
+                            this.setState((prev) => ({
+                              drafts: {
+                                ...prev.drafts,
+                                [group.id]: group.name,
+                              },
+                            }));
+                            event.target.blur();
+                          }
+                        }}
+                        sx={{ flex: 1 }}
+                      />
+                      <IconButton
+                        size="small"
+                        aria-label={`„${group.name}“ nach oben`}
+                        disabled={busy || index === 0}
+                        onClick={() => void this.handleMove(group, -1)}
+                      >
+                        <KeyboardArrowUpIcon fontSize="small" />
+                      </IconButton>
+                      <IconButton
+                        size="small"
+                        aria-label={`„${group.name}“ nach unten`}
+                        disabled={busy || index >= groups.length - 1}
+                        onClick={() => void this.handleMove(group, 1)}
+                      >
+                        <KeyboardArrowDownIcon fontSize="small" />
+                      </IconButton>
+                      <IconButton
+                        edge="end"
+                        size="small"
+                        aria-label={`„${group.name}“ löschen`}
+                        disabled={busy || !editable}
+                        onClick={() => void this.handleDelete(group)}
+                      >
+                        <DeleteOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </ListItem>
+                  );
+                })
               )}
             </List>