u

src/routes/artikel/marken.jsx

@@ -1,14 +1,16 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import BackendError from '../../components/BackendError';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
 import { setLastArticleSku } from '../../automats';
 import brandAutomat from '../../automats/brandAutomat';
+import ResultsPagination from '../../components/article/ResultsPagination';
 import { enqueueSnackbar } from 'notistack';
 import {
   BrandImageSearchDialog,
@@ -19,6 +21,15 @@ import {
   PURPLE_PANEL,
 } from '../../colors';
 
+function BrandRowMeasureSample() {
+  // Same component as real rows so the measured height matches exactly.
+  return (
+    <Box sx={{ pointerEvents: 'none', userSelect: 'none', opacity: 0.2 }}>
+      <ArtikelMarke brand={{ id: 'measure', name: ' ' }} disabled />
+    </Box>
+  );
+}
+
 class ArtikelMarkenPage extends PureComponent {
   constructor(props) {
     super(props);
@@ -26,17 +37,24 @@ class ArtikelMarkenPage extends PureComponent {
       status: brandAutomat.state.status === 'succeeded' ? 'ready' : 'loading',
       error: brandAutomat.state.error ? backendErrorFrom({ message: brandAutomat.state.error }) : null,
       brands: brandAutomat.state.brands || [],
+      pageSize: 10,
+      currentPage: 1,
       newName: '',
       busyKey: null,
       searchBrand: null,
     };
     this._cancelled = false;
+    this.fillSpaceRef = createRef();
+    this.paginationRef = createRef();
+    this.createRowRef = createRef();
     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);
+    this.handleMeasurement = this.handleMeasurement.bind(this);
+    this.handlePageChange = this.handlePageChange.bind(this);
   }
 
   componentDidMount() {
@@ -63,10 +81,15 @@ class ArtikelMarkenPage extends PureComponent {
   }
 
   applyBrands(brands) {
-    this.setState({
-      status: 'ready',
-      error: null,
-      brands,
+    this.setState((state) => {
+      const total = brands.length;
+      const pageCount = Math.max(1, Math.ceil(total / Math.max(1, state.pageSize)));
+      return {
+        status: 'ready',
+        error: null,
+        brands,
+        currentPage: Math.min(state.currentPage, pageCount),
+      };
     });
   }
 
@@ -84,6 +107,20 @@ class ArtikelMarkenPage extends PureComponent {
     }
   }
 
+  // FillSpace measures how many rows fit; page size is purely local —
+  // no fetch, the automat already holds the full list.
+  handleMeasurement(count) {
+    if (!count || count <= 0 || count === this.state.pageSize) return;
+    this.setState((state) => {
+      const pageCount = Math.max(1, Math.ceil(state.brands.length / count));
+      return { pageSize: count, currentPage: Math.min(state.currentPage, pageCount) };
+    });
+  }
+
+  handlePageChange(_event, page) {
+    this.setState({ currentPage: Math.max(1, Number(page) || 1) });
+  }
+
   handleRetry() {
     void this.loadBrands();
   }
@@ -144,8 +181,14 @@ class ArtikelMarkenPage extends PureComponent {
   }
 
   render() {
-    const { status, error, brands, newName, busyKey } = this.state;
+    const { status, error, brands, pageSize, currentPage, newName, busyKey } = this.state;
     const busy = busyKey != null;
+    const total = brands.length;
+    const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+    const safePage = Math.min(Math.max(1, currentPage), pageCount);
+    const offset = (safePage - 1) * pageSize;
+    const pageBrands = brands.slice(offset, offset + pageSize);
+    const showPagination = total > pageSize;
 
     if (status === 'loading') {
       return (
@@ -161,16 +204,39 @@ class ArtikelMarkenPage extends PureComponent {
 
     return (
       <PanelTileGrid>
-        <PanelTile wide={2} minHeight={280} color={PURPLE_PANEL}>
-          <ArtikelMarkenTable
-            brands={brands}
-            busyKey={busyKey}
-            onRename={this.handleRename}
-            onSearchLogo={this.handleSearchLogo}
-            onDelete={this.handleDelete}
-          />
+        <PanelTile wide={2} minHeight={0} color={PURPLE_PANEL} sx={{ pb: 0 }}>
+          <Box ref={this.paginationRef} sx={{ mb: 1 }}>
+            <ResultsPagination
+              invisible={!showPagination}
+              offset={showPagination ? offset : 0}
+              totalCount={showPagination ? total : pageSize + 1}
+              pageSize={pageSize}
+              pageCount={showPagination ? pageCount : 1}
+              currentPage={showPagination ? safePage : 1}
+              onPageChange={this.handlePageChange}
+            />
+          </Box>
+          <FillSpace
+            ref={this.fillSpaceRef}
+            aboveRef={this.paginationRef}
+            belowRef={this.createRowRef}
+            reserveBottom={32}
+            onMeasurement={this.handleMeasurement}
+            measureElement={<BrandRowMeasureSample />}
+            minHeight={0}
+            sx={{ overflowX: 'hidden', overflowY: 'auto', width: '100%' }}
+          >
+            <ArtikelMarkenTable
+              brands={pageBrands}
+              busyKey={busyKey}
+              onRename={this.handleRename}
+              onSearchLogo={this.handleSearchLogo}
+              onDelete={this.handleDelete}
+              sx={{ width: '100%' }}
+            />
+          </FillSpace>
 
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2 }}>
+          <Box ref={this.createRowRef} sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, pb: 2 }}> 
             <SingleLineTextEdit
               size="small"
               label="Neue Marke"