fix #8716 and pagination

2 files changed, 26 insertions, 2 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
index 292974e89..9d5701fa7 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
@@ -45,6 +45,8 @@ interface Props {
   ) => Promise<void>;
   onCreate: () => void;
   selected?: boolean;
+  onLoadMoreBefore?: () => void;
+  onLoadMoreAfter?: () => void;
 }
 
 export function CardTable({
@@ -53,6 +55,8 @@ export function CardTable({
   onSelect,
   onUpdate,
   onDelete,
+  onLoadMoreAfter,
+  onLoadMoreBefore
 }: Props): VNode {
   const [rowSelection, rowSelectionHandler] = useState<string | undefined>(
     undefined,
@@ -89,6 +93,8 @@ export function CardTable({
                 onSelect={onSelect}
                 onDelete={onDelete}
                 onUpdate={onUpdate}
+                onLoadMoreAfter={onLoadMoreAfter}
+                onLoadMoreBefore={onLoadMoreBefore}
                 rowSelection={rowSelection}
                 rowSelectionHandler={rowSelectionHandler}
               />
@@ -111,6 +117,8 @@ interface TableProps {
   ) => Promise<void>;
   onDelete: (id: Entity) => void;
   rowSelectionHandler: StateUpdater<string | undefined>;
+  onLoadMoreBefore?: () => void;
+  onLoadMoreAfter?: () => void;
 }
 
 function Table({
@@ -120,11 +128,18 @@ function Table({
   onSelect,
   onUpdate,
   onDelete,
+  onLoadMoreAfter,
+  onLoadMoreBefore
 }: TableProps): VNode {
   const { i18n } = useTranslationContext();
   const [settings] = usePreference();
   return (
     <div class="table-container">
+      {onLoadMoreBefore && (
+        <button class="button is-fullwidth" onClick={onLoadMoreBefore}>
+          <i18n.Translate>load first page</i18n.Translate>
+        </button>
+      )}
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
@@ -283,7 +298,7 @@ function Table({
                       <FastProductUpdateForm
                         product={i}
                         onUpdate={(prod) =>
-                          onUpdate(i.id, prod).then((r) =>
+                          onUpdate(i.id, prod).then(() =>
                             rowSelectionHandler(undefined),
                           )
                         }
@@ -297,6 +312,13 @@ function Table({
           })}
         </tbody>
       </table>
+      {onLoadMoreAfter && (
+        <button class="button is-fullwidth" 
+        data-tooltip={i18n.str`load more products after the last one`}
+        onClick={onLoadMoreAfter}>
+          <i18n.Translate>load next page</i18n.Translate>
+        </button>
+      )}
     </div>
   );
 }
@@ -390,7 +412,7 @@ function FastProductWithManagedStockUpdateForm({
   };
 
   const hasErrors = Object.keys(errors).some(
-    (k) => (errors as any)[k] !== undefined,
+    (k) => (errors as Record<string,unknown>)[k] !== undefined,
   );
   const { i18n } = useTranslationContext();
 
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
index dfd633150..db6cf5376 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
@@ -91,6 +91,8 @@ export default function ProductList({
 
       <CardTable
         instances={result.body}
+        onLoadMoreBefore={result.isFirstPage ? undefined : result.loadFirst}
+        onLoadMoreAfter={result.isLastPage ? undefined : result.loadNext}
         onCreate={onCreate}
         onUpdate={async (id, prod) => {
           try {