u

src/routes/artikel/marken.jsx

@@ -10,7 +10,6 @@ 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,
@@ -37,15 +36,11 @@ 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);
@@ -53,8 +48,6 @@ class ArtikelMarkenPage extends PureComponent {
     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() {
@@ -81,16 +74,7 @@ class ArtikelMarkenPage extends PureComponent {
   }
 
   applyBrands(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),
-      };
-    });
+    this.setState({ status: 'ready', error: null, brands });
   }
 
   async loadBrands() {
@@ -107,20 +91,6 @@ 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();
   }
@@ -181,14 +151,8 @@ class ArtikelMarkenPage extends PureComponent {
   }
 
   render() {
-    const { status, error, brands, pageSize, currentPage, newName, busyKey } = this.state;
+    const { status, error, brands, 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 (
@@ -205,36 +169,25 @@ class ArtikelMarkenPage extends PureComponent {
     return (
       <PanelTileGrid>
         <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}
+            aboveRef={[]}
             belowRef={this.createRowRef}
             reserveBottom={32}
-            onMeasurement={this.handleMeasurement}
+            minPageSize={10}
             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>
+            items={brands}
+            renderPage={(pageBrands) => (
+              <ArtikelMarkenTable
+                brands={pageBrands}
+                busyKey={busyKey}
+                onRename={this.handleRename}
+                onSearchLogo={this.handleSearchLogo}
+                onDelete={this.handleDelete}
+                sx={{ width: '100%' }}
+              />
+            )}
+          />
 
           <Box ref={this.createRowRef} sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, pb: 2 }}> 
             <SingleLineTextEdit