u

2026-10-08 19:08:39 +02:00 · 2026-10-08 18:48:28 +02:00
15 changed files with 344 additions and 153 deletions
--- a/.agents/skills/backend/SKILL.md
+++ b/.agents/skills/backend/SKILL.md
@@ -7,7 +7,7 @@ description: >-

 # Dash API Routes Overview (All)

-Overview of all 191 API endpoints across all modules.
+Overview of all 192 API endpoints across all modules.

 ### Notation

@@ -239,7 +239,7 @@ _none_
 _none_
 - Returns: `200 { languageId: int, tree: { id: int, sort: int, posterminalIds: int[], parentId?: int|null, name?: str|null, slug?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }[], articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T28|null }[] }`
 #### Delete category — `DELETE /category/{id}`
- Params: `id: int`
+- Params: `id: int, query: recursive?: bool`
 - Returns: `204 void`
 #### Update category (rename or move) — `PATCH /category/{id}`
 - Params: `id: int, body: { name?: str, parentId?: int }`
@@ -517,6 +517,9 @@ _none_
 #### Update property name — `PATCH /propertyname/{id}`
 - Params: `id: int, body: { name?: str, sort?: int, exclusive?: bool }`
 - Returns: `200 { propertyname: T41 }`
+#### Receipt crash dump — `POST /public/telemetry/crash`
+- Params: `body: { content: any }`
+- Returns: `200 { ok: bool, filename: str }`
 #### List public articles — `GET /public/{companyId}/articles`
 - Params: `companyId: int, query: categoryId?: int, search?: str, limit?: int, offset?: int`
 - Returns: `200 { articles: { id: int, sku: str, name: str, slug: str, net: num|null, taxRate: num|null, gross: num|null, trackStock: bool, brand: { id: int|null, name: str }, fullHash: str|null, thumbW: int|null, thumbH: int|null, thumbHash: str|null }[] }`
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -285,8 +285,9 @@ export const article = {
   * DELETE /api/article/:sku → 204
   * Errors: 400 Article has children, 401, 403, 404 Article not found
   */
-  delete(sku) {
-    return http(`/api/article/${encodeURIComponent(sku)}`, {
+  delete(sku, { cascade = false } = {}) {
+    const qs = cascade ? '?cascade=true' : '';
+    return http(`/api/article/${encodeURIComponent(sku)}${qs}`, {
      method: 'DELETE',
    });
  },
@@ -744,9 +745,13 @@ export const category = {
    });
  },

-  /** DELETE /api/category/:id → 204 */
-  delete(categoryId) {
-    return http(`/api/category/${categoryId}`, { method: 'DELETE' });
+  /**
+   * DELETE /api/category/:id → 204
+   * Query: ?recursive=true (cascades deletion of subcategories and articles)
+   */
+  delete(categoryId, { recursive = false } = {}) {
+    const qs = recursive ? '?recursive=true' : '';
+    return http(`/api/category/${categoryId}${qs}`, { method: 'DELETE' });
  },

  /**
--- a/src/automats/categoryAutomat.js
+++ b/src/automats/categoryAutomat.js
@@ -44,6 +44,8 @@ import {
  parseCategoryTreeResponse,
  normalizeCategoryNode,
  cleanCategorySlugPath,
+  getCategoryChildren,
+  getCategoryDescendantIds,
 } from '../utils/categoryUtils';

 /**
@@ -307,6 +309,35 @@ const actions = {
    return categoryId;
  },

+  /**
+   * Delete a category and all its descendants recursively.
+   * Calls DELETE /api/category/:id?recursive=true.
+   *
+   * @param {number|string} categoryId
+   */
+  async deleteCategoryRecursive(categoryId) {
+    const { categories, rootCategoryId } = categoryAutomat.state;
+
+    if (rootCategoryId != null && String(categoryId) === String(rootCategoryId)) {
+      throw new Error('Root-Kategorie kann nicht gelöscht werden');
+    }
+
+    const removedIds = getCategoryDescendantIds(categories, categoryId);
+
+    await categoryApi.delete(categoryId, { recursive: true });
+
+    if (categories) {
+      const next = { ...categories };
+      for (const id of removedIds) {
+        delete next[String(id)];
+      }
+      categoryAutomat.setState({ categories: next });
+      refreshCategoryViewChildren(next);
+    }
+
+    return categoryId;
+  },
+
  /**
   * Toggle the POS flag on a category.
   * @param {{ categoryId: number|string, pos: boolean }} param0
--- a/src/components/CompanySetupDialog.jsx
+++ b/src/components/CompanySetupDialog.jsx
@@ -22,7 +22,7 @@ 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 TextField from '@mui/material/TextField';
+import TextInput from './TextInput';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
@@ -331,7 +331,7 @@ class CompanySetupDialog extends Component {
                    <Typography variant="subtitle2">Neues Unternehmen anlegen</Typography>
                  ) : null}

-                  <TextField
+                  <TextInput
                    fullWidth
                    required
                    size="small"
@@ -339,7 +339,6 @@ class CompanySetupDialog extends Component {
                    value={name}
                    disabled={busy}
                    onChange={(e) => this.setState({ name: e.target.value })}
-                    autoComplete="organization"
                    autoFocus={!hasCompanies}
                  />

@@ -361,7 +360,7 @@ class CompanySetupDialog extends Component {
                  </FormControl>

                  <Stack direction="row" spacing={2}>
-                    <TextField
+                    <TextInput
                      fullWidth
                      required
                      size="small"
@@ -378,7 +377,7 @@ class CompanySetupDialog extends Component {
                        htmlInput: { min: 0, max: 100, step: 0.01, required: true },
                      }}
                    />
-                    <TextField
+                    <TextInput
                      fullWidth
                      required
                      size="small"
@@ -460,7 +459,7 @@ class CompanySetupDialog extends Component {
                                  </Box>
                                </TableCell>
                                <TableCell>
-                                  <TextField
+                                  <TextInput
                                    size="small"
                                    value={cfg.prefix}
                                    disabled={busy}
@@ -470,7 +469,7 @@ class CompanySetupDialog extends Component {
                                  />
                                </TableCell>
                                <TableCell>
-                                  <TextField
+                                  <TextInput
                                    size="small"
                                    type="number"
                                    value={cfg.padding}
@@ -480,7 +479,7 @@ class CompanySetupDialog extends Component {
                                  />
                                </TableCell>
                                <TableCell>
-                                  <TextField
+                                  <TextInput
                                    size="small"
                                    type="number"
                                    value={cfg.next}
--- a/src/components/brand/ArtikelMarke.jsx
+++ b/src/components/brand/ArtikelMarke.jsx
@@ -0,0 +1,124 @@
+import { PureComponent } from 'react';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import CopyrightIcon from '@mui/icons-material/Copyright';
+import ImageSearchIcon from '@mui/icons-material/ImageSearch';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import BrandThumb from './BrandThumb';
+
+class ArtikelMarke extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      draft: props.brand?.name ?? '',
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.brand?.name !== this.props.brand?.name) {
+      this.setState({ draft: this.props.brand?.name ?? '' });
+    } else if (prevProps.disabled && !this.props.disabled) {
+      if (this.state.draft !== this.props.brand?.name) {
+        this.setState({ draft: this.props.brand?.name ?? '' });
+      }
+    }
+  }
+
+  handleChange = (next) => {
+    this.setState({ draft: next });
+    this.props.onChange?.(next, this.props.brand);
+  };
+
+  handleBlur = () => {
+    const { onRename, brand } = this.props;
+    const draft = this.state.draft.trim();
+    if (!draft) {
+      this.setState({ draft: brand?.name ?? '' });
+      return;
+    }
+    if (draft !== brand?.name) {
+      onRename?.(brand, draft);
+    }
+  };
+
+  handleKeyDown = (event) => {
+    const { brand } = this.props;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.setState({ draft: brand?.name ?? '' });
+      event.target.blur();
+    }
+  };
+
+  handleSearchLogo = () => {
+    const { onSearchLogo, brand } = this.props;
+    onSearchLogo?.(brand);
+  };
+
+  handleDelete = () => {
+    const { onDelete, brand } = this.props;
+    onDelete?.(brand);
+  };
+
+  render() {
+    const { brand, disabled, sx } = this.props;
+    const { draft } = this.state;
+    const name = brand?.name ?? '';
+
+    return (
+      <ListItem
+        disableGutters
+        sx={{ gap: 1, py: 0.75, alignItems: 'center', ...sx }}
+      >
+        <BrandThumb
+          brand={brand}
+          size={22}
+          fallback={<CopyrightIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />}
+        />
+        <SingleLineTextEdit
+          size="small"
+          label=""
+          value={draft}
+          disabled={disabled}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          sx={{ flex: 1 }}
+        />
+        <Tooltip title="Logo suchen">
+          <span>
+            <IconButton
+              size="small"
+              aria-label={`Logo für „${name}" suchen`}
+              disabled={disabled}
+              onClick={this.handleSearchLogo}
+            >
+              <ImageSearchIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <Tooltip title="Löschen">
+          <span>
+            <IconButton
+              edge="end"
+              size="small"
+              aria-label={`„${name}" löschen`}
+              disabled={disabled}
+              onClick={this.handleDelete}
+            >
+              <DeleteOutlinedIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </ListItem>
+    );
+  }
+}
+
+export default ArtikelMarke;
--- a/src/components/brand/ArtikelMarkenTable.jsx
+++ b/src/components/brand/ArtikelMarkenTable.jsx
@@ -0,0 +1,44 @@
+import { PureComponent } from 'react';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import ArtikelMarke from './ArtikelMarke';
+
+class ArtikelMarkenTable extends PureComponent {
+  render() {
+    const {
+      brands = [],
+      busyKey,
+      disabled,
+      onRename,
+      onSearchLogo,
+      onDelete,
+      emptyMessage = 'Noch keine Marken angelegt.',
+      sx,
+    } = this.props;
+
+    const isBusy = disabled || busyKey != null;
+
+    return (
+      <List dense disablePadding sx={sx}>
+        {brands.length === 0 ? (
+          <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+            {emptyMessage}
+          </Typography>
+        ) : (
+          brands.map((b) => (
+            <ArtikelMarke
+              key={b.id}
+              brand={b}
+              disabled={isBusy}
+              onRename={onRename}
+              onSearchLogo={onSearchLogo}
+              onDelete={onDelete}
+            />
+          ))
+        )}
+      </List>
+    );
+  }
+}
+
+export default ArtikelMarkenTable;
--- a/src/components/brand/index.js
+++ b/src/components/brand/index.js
@@ -1,3 +1,5 @@
 export { default as BrandThumb, extractBrandThumbInfo } from './BrandThumb';
 export { default as BrandLabel } from './BrandLabel';
 export { default as BrandImageSearchDialog } from './BrandImageSearchDialog';
+export { default as ArtikelMarke } from './ArtikelMarke';
+export { default as ArtikelMarkenTable } from './ArtikelMarkenTable';
--- a/src/components/category/CategoryTree.jsx
+++ b/src/components/category/CategoryTree.jsx
@@ -515,7 +515,11 @@ export default class CategoryTree extends PureComponent {
    if (!deleteNode) return;
    this.setState({ isSubmitting: true });
    try {
-      await categoryAutomat.actions.deleteCategory(deleteNode.id);
+      if (getCategoryChildren(this.state.categories, deleteNode.id).length > 0) {
+        await categoryAutomat.actions.deleteCategoryRecursive(deleteNode.id);
+      } else {
+        await categoryAutomat.actions.deleteCategory(deleteNode.id);
+      }
      enqueueSnackbar(`Kategorie „${deleteNode.name}“ gelöscht.`, { variant: 'success' });
      if (this.props.selectedId != null && String(this.props.selectedId) === String(deleteNode.id)) {
        this.props.onSelect?.(deleteNode.parentId ?? rootCategoryId);
--- a/src/components/settings/CompanySettingsPanel.jsx
+++ b/src/components/settings/CompanySettingsPanel.jsx
@@ -7,7 +7,7 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import InputAdornment from '@mui/material/InputAdornment';
 import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import TextInput from '../TextInput';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { enqueueSnackbar } from 'notistack';
@@ -178,7 +178,7 @@ export default class CompanySettingsPanel extends Component {
          </FormControl>

          <Stack direction="row" spacing={2}>
-            <TextField
+            <TextInput
              fullWidth
              required
              size="small"
@@ -195,7 +195,7 @@ export default class CompanySettingsPanel extends Component {
                htmlInput: { min: 0, max: 100, step: 0.01, required: true },
              }}
            />
-            <TextField
+            <TextInput
              fullWidth
              required
              size="small"
--- a/src/components/settings/ImportExportSettingsPanel.jsx
+++ b/src/components/settings/ImportExportSettingsPanel.jsx
@@ -23,6 +23,7 @@ import { company } from '../../api';
 import categoryAutomat from '../../automats/categoryAutomat';
 import articleIndexAutomat from '../../automats/articleIndexAutomat';
 import brandAutomat from '../../automats/brandAutomat';
+import { orderAutomat } from '../../automats/orderAutomat';

 function formatBytes(bytes) {
  if (bytes == null || isNaN(bytes) || bytes === 0) return '0 B';
@@ -47,6 +48,7 @@ const PHASE_LABELS = {
  articles: 'Artikel werden abgeglichen…',
  variants: 'Varianten werden verknüpft…',
  images: 'Bilder werden optimiert…',
+  orders: 'Aufträge werden importiert…',
 };

 const EXPORT_OPTIONS = [
@@ -299,6 +301,9 @@ export default class ImportExportSettingsPanel extends Component {
            void categoryAutomat.actions.loadTree();
            void articleIndexAutomat.actions.reload?.();
            void brandAutomat.actions.load?.();
+            if (stats?.ordersImported) {
+              void orderAutomat.actions.reload?.();
+            }
          },
          onError: (message) => {
            this.setState({
@@ -628,6 +633,27 @@ export default class ImportExportSettingsPanel extends Component {
                      </Typography>
                    </Box>
                  )}
+                  {importStats.ordersImported != null && (
+                    <Box
+                      sx={{
+                        p: 1.5,
+                        bgcolor: 'background.paper',
+                        borderRadius: 1.5,
+                        border: '1px solid',
+                        borderColor: 'divider',
+                      }}
+                    >
+                      <Typography variant="caption" color="text.secondary">
+                        Aufträge
+                      </Typography>
+                      <Typography variant="h6" fontWeight={700}>
+                        {importStats.ordersImported}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary" display="block">
+                        {importStats.ordersSkipped ? `+${importStats.ordersSkipped} übersprungen` : 'importiert'}
+                      </Typography>
+                    </Box>
+                  )}
                </Box>
              </Box>
            )}
--- a/src/components/settings/NumberSettingsPanel.jsx
+++ b/src/components/settings/NumberSettingsPanel.jsx
@@ -10,7 +10,7 @@ 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 TextField from '@mui/material/TextField';
+import TextInput from '../TextInput';
 import Typography from '@mui/material/Typography';
 import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import { enqueueSnackbar } from 'notistack';
@@ -212,16 +212,15 @@ export default class NumberSettingsPanel extends Component {
                    <Typography variant="body2">{row.type}</Typography>
                  </TableCell>
                  <TableCell>
-                    <TextField
+                    <TextInput
                      size="small"
                      value={draft.prefix}
                      disabled={draft.busy}
                      onChange={(e) => this.handleChange(row.id, 'prefix', e.target.value)}
-                      autoComplete="off"
                    />
                  </TableCell>
                  <TableCell>
-                    <TextField
+                    <TextInput
                      size="small"
                      type="number"
                      value={draft.padding}
@@ -231,7 +230,7 @@ export default class NumberSettingsPanel extends Component {
                    />
                  </TableCell>
                  <TableCell>
-                    <TextField
+                    <TextInput
                      size="small"
                      type="number"
                      value={draft.next}
--- a/src/components/tiles/ArticleTile.jsx
+++ b/src/components/tiles/ArticleTile.jsx
@@ -22,7 +22,7 @@ import {
  SCRIM_LABEL,
  SCRIM_TILE,
  TEXT_GLOW_DARK,
-  VEIL_MUTED,
+  VEIL_SUBTLE,
  WHITE,
 } from '../../colors';

@@ -447,21 +447,19 @@ export class ArticleTile extends Tile {
              px: 1,
              py: '2px',
              my: 0.25,
-              bgcolor: VEIL_MUTED,
-              backdropFilter: 'blur(4px)',
-              WebkitBackdropFilter: 'blur(4px)',
+              bgcolor: VEIL_SUBTLE,
+              backdropFilter: 'blur(2px)',
+              WebkitBackdropFilter: 'blur(2px)',
            }}
          >
            <Typography
              variant="body2"
              fontWeight={650}
              sx={{
-                color: INK_STRONG,
                lineHeight: 1.2,
                height: '2.4em',
                px: '4px',
                mx: '-4px',
-                textShadow: '0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7)',
                display: '-webkit-box',
                WebkitLineClamp: 2,
                WebkitBoxOrient: 'vertical',
--- a/src/components/tiles/CategoryTile.jsx
+++ b/src/components/tiles/CategoryTile.jsx
@@ -9,6 +9,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import DeleteForeverOutlinedIcon from '@mui/icons-material/DeleteForeverOutlined';
 import { getThumbHashDataUrl, isImageLoaded, markImageLoaded } from '../article/ThumbHashImage';
 import { thumb } from '../../api';
 import { tileBaseSx } from 'dashgui/tiles';
@@ -28,6 +29,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
  const isTerminalMode = settingsTab >= 0 && settingsTab < terminalCount;
  const isPhotoMode = settingsTab === -2;
  const isDeleteMode = settingsTab === -3;
+  const isRecursiveDeleteMode = settingsTab === -4;

  const handleSx = {
    position: 'absolute',
@@ -69,7 +71,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
          ...handleSx,
          left: '50%',
          transform: 'translate(-50%, -50%)',
-          color: isDeleteMode
+          color: isDeleteMode || isRecursiveDeleteMode
            ? 'error.main'
            : isTerminalMode || isPhotoMode
              ? 'primary.main'
@@ -82,6 +84,8 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
          <PhotoCameraIcon sx={{ fontSize: 28 }} />
        ) : isDeleteMode ? (
          <DeleteOutlinedIcon sx={{ fontSize: 28 }} />
+        ) : isRecursiveDeleteMode ? (
+          <DeleteForeverOutlinedIcon sx={{ fontSize: 28 }} />
        ) : (
          <SettingsIcon sx={{ fontSize: 28 }} />
        )}
@@ -109,7 +113,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
 * Middle row (1/3): gray band — TextField or terminal toggle.
 */
 function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, onTerminalToggle, fullHash }) {
-  const isActionTab = settingsTab === -2 || settingsTab === -3;
+  const isActionTab = settingsTab === -2 || settingsTab === -3 || settingsTab === -4;
  const fillSx = {
    width: '100%',
    height: '100%',
@@ -121,7 +125,7 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
    ...(isActionTab
      ? {
        '&:hover': {
-          bgcolor: settingsTab === -3 ? RED_TINT : 'grey.400',
+          bgcolor: (settingsTab === -3 || settingsTab === -4) ? RED_TINT : 'grey.400',
        },
      }
      : {}),
@@ -188,6 +192,24 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
    );
  }

+  // Show recursive category deletion UI when on recursive delete tab
+  if (settingsTab === -4) {
+    return (
+      <Box sx={fillSx}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <DeleteForeverOutlinedIcon sx={{ fontSize: 20, color: 'error.main' }} />
+          <Typography
+            variant="caption"
+            noWrap
+            sx={{ maxWidth: 120, color: 'error.main', fontWeight: 600 }}
+          >
+            Rekursiv löschen
+          </Typography>
+        </Box>
+      </Box>
+    );
+  }
+
  return (
    <Box sx={fillSx}>
      {nameInput}
@@ -277,7 +299,7 @@ class CategoryBackdrop extends PureComponent {
 *               lower half = gray band with chevrons + delete
 */
 export class CategoryTile extends Component {
-  state = { settingsTab: -1 }; // -1 = rename, -2 = photo, -3 = delete, 0..n-1 = terminal index
+  state = { settingsTab: -1 }; // -1 = rename, -2 = photo, -3 = delete, -4 = delete recursive, 0..n-1 = terminal index

  handleClick = () => {
    this.props.onClick?.();
@@ -303,6 +325,8 @@ export class CategoryTile extends Component {
        nextTab = -2;
      } else if (prev.settingsTab === -2) {
        nextTab = -3;
+      } else if (prev.settingsTab === -3) {
+        nextTab = -4;
      } else {
        nextTab = -1;
      }
@@ -312,7 +336,7 @@ export class CategoryTile extends Component {

  handleMiddleBandClick = () => {
    const { settingsTab } = this.state;
-    const { onPhotoUpload, onPhotoDelete, fullHash, onDelete } = this.props;
+    const { onPhotoUpload, onPhotoDelete, fullHash, onDelete, onDeleteRecursive } = this.props;
    if (settingsTab === -2) {
      if (fullHash) {
        onPhotoDelete?.();
@@ -321,6 +345,8 @@ export class CategoryTile extends Component {
      }
    } else if (settingsTab === -3) {
      onDelete?.();
+    } else if (settingsTab === -4) {
+      onDeleteRecursive?.();
    }
  };

@@ -373,6 +399,7 @@ export class CategoryTile extends Component {
      onPlacementClick,
      onOpen,
      onDelete,
+      onDeleteRecursive,
      ...rest
    } = this.props;
    const { settingsTab } = this.state;
@@ -399,7 +426,10 @@ export class CategoryTile extends Component {
            bottom: '33.33%',
            left: 0,
            right: 0,
-            cursor: settingsTab === -2 || settingsTab === -3 ? 'pointer' : 'default',
+            cursor:
+              settingsTab === -2 || settingsTab === -3 || settingsTab === -4
+                ? 'pointer'
+                : 'default',
          }}
        >
          <MiddleBand
--- a/src/routes/artikel/kategorien.jsx
+++ b/src/routes/artikel/kategorien.jsx
@@ -352,6 +352,17 @@ class ArtikelKategorienPage extends PureComponent {
    }
  };

+  handleDeleteCategoryRecursive = async (cat) => {
+    const name = cat.name || `Kategorie #${cat.id}`;
+    if (!window.confirm(`Kategorie „${name}“ und alle Unterkategorien wirklich rekursiv löschen?`)) return;
+    try {
+      await categoryAutomat.actions.deleteCategoryRecursive(cat.id);
+      enqueueSnackbar(`Kategorie „${name}“ und alle Unterkategorien gelöscht.`, { variant: 'success' });
+    } catch (err) {
+      notifyError(err);
+    }
+  };
+
  render() {
    const {
      companyId,
@@ -495,6 +506,7 @@ class ArtikelKategorienPage extends PureComponent {
                      .catch(notifyError);
                  },
                  onDelete: () => this.handleDeleteCategory(item),
+                  onDeleteRecursive: () => this.handleDeleteCategoryRecursive(item),
                  nameInput: (
                    <TextField
                      value={draftName}
--- a/src/routes/artikel/marken.jsx
+++ b/src/routes/artikel/marken.jsx
@@ -2,14 +2,6 @@ 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 List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import CopyrightIcon from '@mui/icons-material/Copyright';
-import ImageSearchIcon from '@mui/icons-material/ImageSearch';
 import BackendError from '../../components/BackendError';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
@@ -18,24 +10,22 @@ import { notifyError } from '../../utils/notify';
 import { setLastArticleSku } from '../../automats';
 import brandAutomat from '../../automats/brandAutomat';
 import { enqueueSnackbar } from 'notistack';
-import { BrandThumb, BrandImageSearchDialog } from '../../components/brand';
+import {
+  BrandImageSearchDialog,
+  ArtikelMarke,
+  ArtikelMarkenTable,
+} from '../../components/brand';
 import {
  PURPLE_PANEL,
 } from '../../colors';

-function draftsFrom(brands) {
-  return Object.fromEntries(brands.map((b) => [b.id, b.name]));
-}
-
 class ArtikelMarkenPage extends PureComponent {
  constructor(props) {
    super(props);
-    const initialBrands = brandAutomat.state.brands || [];
    this.state = {
      status: brandAutomat.state.status === 'succeeded' ? 'ready' : 'loading',
      error: brandAutomat.state.error ? backendErrorFrom({ message: brandAutomat.state.error }) : null,
-      brands: initialBrands,
-      drafts: draftsFrom(initialBrands),
+      brands: brandAutomat.state.brands || [],
      newName: '',
      busyKey: null,
      searchBrand: null,
@@ -44,6 +34,9 @@ class ArtikelMarkenPage extends PureComponent {
    this.handleCreate = this.handleCreate.bind(this);
    this.handleRetry = this.handleRetry.bind(this);
    this.loadBrands = this.loadBrands.bind(this);
+    this.handleRename = this.handleRename.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleSearchLogo = this.handleSearchLogo.bind(this);
  }

  componentDidMount() {
@@ -70,20 +63,10 @@ class ArtikelMarkenPage extends PureComponent {
  }

  applyBrands(brands) {
-    this.setState((prev) => {
-      const currentDrafts = prev.drafts || {};
-      const nextDrafts = { ...draftsFrom(brands) };
-      for (const b of brands) {
-        if (prev.busyKey !== b.id && currentDrafts[b.id] !== undefined) {
-          nextDrafts[b.id] = currentDrafts[b.id];
-        }
-      }
-      return {
-        status: 'ready',
-        error: null,
-        brands,
-        drafts: nextDrafts,
-      };
+    this.setState({
+      status: 'ready',
+      error: null,
+      brands,
    });
  }

@@ -105,6 +88,10 @@ class ArtikelMarkenPage extends PureComponent {
    void this.loadBrands();
  }

+  handleSearchLogo(brand) {
+    this.setState({ searchBrand: brand });
+  }
+
  async handleCreate() {
    const name = this.state.newName.trim();
    if (!name || this.state.busyKey != null) return;
@@ -122,29 +109,20 @@ class ArtikelMarkenPage extends PureComponent {
    }
  }

-  async handleRename(brand) {
-    const draft = String(this.state.drafts[brand.id] ?? '').trim();
-    if (!draft) {
-      this.setState((prev) => ({
-        drafts: { ...prev.drafts, [brand.id]: brand.name },
-      }));
-      return;
-    }
-    if (draft === brand.name || this.state.busyKey != null) return;
+  async handleRename(brand, draft) {
+    const nextName = String(draft ?? '').trim();
+    if (!nextName || nextName === brand.name || this.state.busyKey != null) return;

    this.setState({ busyKey: brand.id });
    try {
-      await brandAutomat.actions.upsert({ name: draft });
+      await brandAutomat.actions.upsert({ name: nextName });
      if (this._cancelled) return;
      this.setState({ busyKey: null });
      enqueueSnackbar('Marke gespeichert.', { variant: 'success' });
    } catch (err) {
      if (this._cancelled) return;
      notifyError(err);
-      this.setState((prev) => ({
-        busyKey: null,
-        drafts: { ...prev.drafts, [brand.id]: brand.name },
-      }));
+      this.setState({ busyKey: null });
    }
  }

@@ -166,7 +144,7 @@ class ArtikelMarkenPage extends PureComponent {
  }

  render() {
-    const { status, error, brands, drafts, newName, busyKey } = this.state;
+    const { status, error, brands, newName, busyKey } = this.state;
    const busy = busyKey != null;

    if (status === 'loading') {
@@ -184,78 +162,13 @@ class ArtikelMarkenPage extends PureComponent {
    return (
      <PanelTileGrid>
        <PanelTile wide={2} minHeight={280} color={PURPLE_PANEL}>
-          <List dense disablePadding>
-            {brands.length === 0 ? (
-              <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                Noch keine Marken angelegt.
-              </Typography>
-            ) : (
-              brands.map((b) => (
-                <ListItem
-                  key={b.id}
-                  disableGutters
-                  sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
-                >
-                  <BrandThumb
-                    brand={b}
-                    size={22}
-                    fallback={<CopyrightIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />}
-                  />
-                  <SingleLineTextEdit
-                    size="small"
-                    label=""
-                    value={drafts[b.id] ?? ''}
-                    disabled={busy}
-                    onChange={(next) =>
-                      this.setState((prev) => ({
-                        drafts: { ...prev.drafts, [b.id]: next },
-                      }))
-                    }
-                    onBlur={() => void this.handleRename(b)}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
-                        event.preventDefault();
-                        event.target.blur();
-                      }
-                      if (event.key === 'Escape') {
-                        event.preventDefault();
-                        this.setState((prev) => ({
-                          drafts: { ...prev.drafts, [b.id]: b.name },
-                        }));
-                        event.target.blur();
-                      }
-                    }}
-                    sx={{ flex: 1 }}
-                  />
-                  <Tooltip title="Logo suchen">
-                    <span>
-                      <IconButton
-                        size="small"
-                        aria-label={`Logo für „${b.name}" suchen`}
-                        disabled={busy}
-                        onClick={() => this.setState({ searchBrand: b })}
-                      >
-                        <ImageSearchIcon fontSize="small" />
-                      </IconButton>
-                    </span>
-                  </Tooltip>
-                  <Tooltip title="Löschen">
-                    <span>
-                      <IconButton
-                        edge="end"
-                        size="small"
-                        aria-label={`„${b.name}" löschen`}
-                        disabled={busy}
-                        onClick={() => void this.handleDelete(b)}
-                      >
-                        <DeleteOutlinedIcon fontSize="small" />
-                      </IconButton>
-                    </span>
-                  </Tooltip>
-                </ListItem>
-              ))
-            )}
-          </List>
+          <ArtikelMarkenTable
+            brands={brands}
+            busyKey={busyKey}
+            onRename={this.handleRename}
+            onSearchLogo={this.handleSearchLogo}
+            onDelete={this.handleDelete}
+          />

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2 }}>
            <SingleLineTextEdit
@@ -293,4 +206,5 @@ class ArtikelMarkenPage extends PureComponent {
  }
 }

+export { ArtikelMarke, ArtikelMarkenTable };
 export default ArtikelMarkenPage;
Author	SHA1	Message	Date
seb	e93e61cfcf	u	2026-10-08 19:08:39 +02:00
seb	b165f86811	u	2026-10-08 18:48:28 +02:00