u

src/components/article/tabs/ArticleHistoryTab.jsx

@@ -5,6 +5,9 @@ import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { StorageManagerContext } from '../../../api/storageManagerContext';
+import ResultsPagination from '../../../pages/artikel/ResultsPagination';
+
+const PAGE_SIZE = 20;
 
 function formatDate(iso) {
   return new Date(iso).toLocaleString('de-DE');
@@ -15,25 +18,46 @@ export default class ArticleHistoryTab extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { history: null };
+    this.state = {
+      history: null,
+      total: null,
+      skip: 0,
+    };
     this.unwatchHistory = null;
+    this.setSkipAndOffset = null;
+    this.handlePageChange = this.handlePageChange.bind(this);
   }
 
   componentDidMount() {
-    this.unwatchHistory = this.context.article.historyWatch(
+    const { unwatch, setSkipAndOffset } = this.context.article.historyWatch(
       this.props.sku,
-      (history) => this.setState({ history }),
+      (history, total) => this.setState({ history, total }),
     );
+    this.unwatchHistory = unwatch;
+    this.setSkipAndOffset = setSkipAndOffset;
+    setSkipAndOffset(0, PAGE_SIZE);
   }
 
   componentWillUnmount() {
     this.unwatchHistory?.();
     this.unwatchHistory = null;
+    this.setSkipAndOffset = null;
+  }
+
+  handlePageChange(_event, page) {
+    const skip = (page - 1) * PAGE_SIZE;
+    this.setSkipAndOffset?.(skip, PAGE_SIZE);
+    this.setState({ skip });
   }
 
   render() {
-    const { history } = this.state;
-    if (history == null) return null;
+    const { history, total, skip } = this.state;
+    if (history == null || total == null) return null;
+
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const currentPage = Math.floor(skip / PAGE_SIZE) + 1;
+    const showPagination = total > PAGE_SIZE;
+
     return (
       <Table
         size="small"
@@ -49,13 +73,28 @@ export default class ArticleHistoryTab extends Component {
                 borderBottom: '1px solid rgba(0, 0, 0, 0.35)',
                 width: '1%',
                 whiteSpace: 'nowrap',
+                verticalAlign: 'middle',
               }}
             >
               Datum
             </TableCell>
             <TableCell
-              sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.35)' }}
-            />
+              sx={{
+                borderBottom: '1px solid rgba(0, 0, 0, 0.35)',
+                verticalAlign: 'middle',
+              }}
+            >
+              {showPagination ? (
+                <ResultsPagination
+                  offset={skip}
+                  totalCount={total}
+                  pageSize={PAGE_SIZE}
+                  pageCount={pageCount}
+                  currentPage={currentPage}
+                  onPageChange={this.handlePageChange}
+                />
+              ) : null}
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>