u

src/components/manifest/ShipmentList.jsx

@@ -22,7 +22,7 @@ import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import BackendError from '../BackendError';
 import AppDialog from '../AppDialog';
-import shipmentAutomat from '../../automats/shipmentAutomat';
+import shipmentAutomat, { CHUNK_SIZE } from '../../automats/shipmentAutomat';
 import orderAutomat from '../../automats/orderAutomat';
 import numberAutomat from '../../automats/numberAutomat';
 import { shipment as shipmentApi } from '../../api';
@@ -841,6 +841,7 @@ export class ShipmentList extends PureComponent {
     this.headerItem = createDummyTestShipment();
     this.state = {
       items: shipmentAutomat.getItems(),
+      total: shipmentAutomat.state.total ?? 0,
       unfilteredTotal: shipmentAutomat.state.unfilteredTotal ?? 0,
       filterKey: shipmentAutomat.getFilterKey?.() ?? '',
       orders: orderAutomat.state?.items || [],
@@ -855,12 +856,14 @@ export class ShipmentList extends PureComponent {
     this.handleOpenShipment = this.handleOpenShipment.bind(this);
     this.handleCloseShipment = this.handleCloseShipment.bind(this);
     this.handleDeleteShipment = this.handleDeleteShipment.bind(this);
+    this.handlePageChange = this.handlePageChange.bind(this);
   }
 
   componentDidMount() {
     this._cancelled = false;
     this.unsub = shipmentAutomat.subscribe(this, (state) => ({
       items: state.items,
+      total: state.total ?? 0,
       unfilteredTotal: state.unfilteredTotal ?? 0,
       filterKey: shipmentAutomat.getFilterKey(state),
     }));
@@ -917,8 +920,21 @@ export class ShipmentList extends PureComponent {
     }
   }
 
+  handlePageChange(page, meta) {
+    const pageSize = meta?.pageSize ?? 10;
+    const startIndex = (page - 1) * pageSize;
+    const items = this.state.items;
+    const maxIndex = items ? items.length - 1 : startIndex;
+    const endIndex = Math.min(maxIndex, startIndex + pageSize - 1);
+
+    const startChunk = Math.floor(startIndex / CHUNK_SIZE);
+    const endChunk = Math.floor(endIndex / CHUNK_SIZE);
+
+    shipmentAutomat.requireChunk(startChunk, endChunk);
+  }
+
   handleRetry() {
-    void shipmentAutomat.actions.load().catch(() => {});
+    void shipmentAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
   }
 
   handleOpenShipment(shipment) {
@@ -946,6 +962,7 @@ export class ShipmentList extends PureComponent {
   render() {
     const {
       items,
+      total,
       unfilteredTotal,
       filterKey,
       orders,
@@ -1017,6 +1034,7 @@ export class ShipmentList extends PureComponent {
                   <Box sx={{ gridColumn: 8, gridRow: 2, ...headerCellSx }} />
                 </Box>
               }
+              onPageChange={this.handlePageChange}
             />
             {items === null && (
               <Box