@etsoo/materialui 1.4.36 → 1.4.38

package/lib/DataGridEx.js

@@ -91,7 +91,7 @@ export function DataGridEx(props) {
                     });
                 }
                 else if (sortable && field != null) {
-                    const active = orderBy != null && orderBy[field] != null;
+                    const active = orderBy?.some((o) => o.field.toUpperCase() === field.toUpperCase());
                     sortLabel = (_jsx(TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
                             if (active)
                                 column.sortAsc = !sortAsc;
@@ -165,7 +165,7 @@ export function DataGridEx(props) {
     });
     // New sort
     const handleSort = (field, asc) => {
-        reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
+        reset({ queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] } });
     };
     // Reset
     const reset = (add) => {

package/lib/MUUtils.d.ts

@@ -1,3 +1,5 @@
+import { QueryRQ } from "@etsoo/appscript";
+import { IdType } from "@etsoo/shared";
 import { GridApiCommunity } from "@mui/x-data-grid/models/api/gridApiCommunity";
 /**
  * MU utilities
@@ -10,4 +12,11 @@ export declare namespace MUUtils {
      * @returns Results
      */
     function getGridData<T>(grid: GridApiCommunity, checkField: keyof T | ((item: T) => boolean)): T[];
+    /**
+     * Setup paging keysets
+     * @param data Paging data
+     * @param lastItem Last item of the query
+     * @param idField Id field
+     */
+    function setupPagingKeysets<T, K extends IdType = number>(data: QueryRQ<K>, lastItem: T | undefined, idField: keyof T & string): void;
 }

package/lib/MUUtils.js

@@ -26,4 +26,26 @@ export var MUUtils;
         return items;
     }
     MUUtils.getGridData = getGridData;
+    /**
+     * Setup paging keysets
+     * @param data Paging data
+     * @param lastItem Last item of the query
+     * @param idField Id field
+     */
+    function setupPagingKeysets(data, lastItem, idField) {
+        // If the id field is not set for ordering, add it with descending
+        if (typeof data.queryPaging === "object") {
+            const orderBy = (data.queryPaging.orderBy ??= []);
+            const idUpper = idField.toUpperCase();
+            if (!orderBy.find((o) => o.field.toUpperCase() === idUpper)) {
+                orderBy.push({ field: idField, desc: true, unique: true });
+            }
+            // Set the paging keysets
+            if (lastItem) {
+                const keysets = orderBy.map((o) => Reflect.get(lastItem, o.field));
+                data.queryPaging.keysets = keysets;
+            }
+        }
+    }
+    MUUtils.setupPagingKeysets = setupPagingKeysets;
 })(MUUtils || (MUUtils = {}));

package/lib/ResponsibleContainer.d.ts

@@ -61,7 +61,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
     /**
      * Methods
      */

package/lib/ResponsibleContainer.js

@@ -44,9 +44,9 @@ export function ResponsibleContainer(props) {
     // Has fields
     const hasFields = fields != null && fields.length > 0;
     // Load data
-    const localLoadData = (props) => {
+    const localLoadData = (props, lastItem) => {
         state.mounted = true;
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/lib/TableEx.js

@@ -171,7 +171,7 @@ export function TableEx(props) {
     };
     // New sort
     const handleSort = (field, asc) => {
-        reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
+        reset({ queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] } });
     };
     // Set items for rerenderer
     const setItems = (callback) => {
@@ -218,8 +218,7 @@ export function TableEx(props) {
                                         // Sortable
                                         let sortLabel;
                                         if (sortable && field != null) {
-                                            const active = queryPaging.orderBy != null &&
-                                                queryPaging.orderBy[field] != null;
+                                            const active = queryPaging.orderBy?.some((o) => o.field.toLowerCase() === field.toLowerCase());
                                             sortLabel = (_jsx(TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
                                                     if (active)
                                                         column.sortAsc = !sortAsc;

package/lib/pages/DataGridPage.js

@@ -33,8 +33,8 @@ export function DataGridPage(props) {
     const onSubmit = (data, _reset) => {
         setStates({ data });
     };
-    const localLoadData = (props) => {
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/lib/pages/SearchPageProps.d.ts

@@ -24,7 +24,7 @@ export type SearchPageProps<T extends object, F extends DataTypes.BasicTemplate>
     /**
      * Load data callback
      */
-    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>) => PromiseLike<T[] | null | undefined>;
+    loadData: (data: GridJsonData & DataTypes.BasicTemplateType<F>, lastItem?: T) => PromiseLike<T[] | null | undefined>;
     /**
      * Page props
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.36",
+  "version": "1.4.38",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -35,9 +35,9 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@etsoo/appscript": "^1.5.76",
+    "@etsoo/appscript": "^1.5.78",
     "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.3",
+    "@etsoo/react": "^1.8.7",
     "@etsoo/shared": "^1.2.55",
     "@mui/icons-material": "^6.1.9",
     "@mui/material": "^6.1.9",

package/src/DataGridEx.tsx

@@ -258,7 +258,9 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
               states
             });
           } else if (sortable && field != null) {
-            const active = orderBy != null && orderBy[field] != null;
+            const active = orderBy?.some(
+              (o) => o.field.toUpperCase() === field.toUpperCase()
+            );
 
             sortLabel = (
               <TableSortLabel
@@ -438,7 +440,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
 
   // New sort
   const handleSort = (field: string, asc?: boolean) => {
-    reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
+    reset({ queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] } });
   };
 
   // Reset

package/src/MUUtils.ts

@@ -1,3 +1,5 @@
+import { QueryRQ } from "@etsoo/appscript";
+import { IdType } from "@etsoo/shared";
 import { GridApiCommunity } from "@mui/x-data-grid/models/api/gridApiCommunity";
 
 /**
@@ -31,4 +33,31 @@ export namespace MUUtils {
     }
     return items;
   }
+
+  /**
+   * Setup paging keysets
+   * @param data Paging data
+   * @param lastItem Last item of the query
+   * @param idField Id field
+   */
+  export function setupPagingKeysets<T, K extends IdType = number>(
+    data: QueryRQ<K>,
+    lastItem: T | undefined,
+    idField: keyof T & string
+  ) {
+    // If the id field is not set for ordering, add it with descending
+    if (typeof data.queryPaging === "object") {
+      const orderBy = (data.queryPaging.orderBy ??= []);
+      const idUpper = idField.toUpperCase();
+      if (!orderBy.find((o) => o.field.toUpperCase() === idUpper)) {
+        orderBy.push({ field: idField, desc: true, unique: true });
+      }
+
+      // Set the paging keysets
+      if (lastItem) {
+        const keysets = orderBy.map((o) => Reflect.get(lastItem, o.field));
+        data.queryPaging.keysets = keysets;
+      }
+    }
+  }
 }

package/src/ResponsibleContainer.tsx

@@ -123,7 +123,8 @@ export type ResponsibleContainerProps<
    * Load data callback
    */
   loadData: (
-    data: GridJsonData & DataTypes.BasicTemplateType<F>
+    data: GridJsonData & DataTypes.BasicTemplateType<F>,
+    lastItem?: T
   ) => PromiseLike<T[] | null | undefined>;
 
   /**
@@ -238,9 +239,12 @@ export function ResponsibleContainer<
   const hasFields = fields != null && fields.length > 0;
 
   // Load data
-  const localLoadData = (props: GridLoadDataProps) => {
+  const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
     state.mounted = true;
-    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+    return loadData(
+      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      lastItem
+    );
   };
 
   // Search data

package/src/TableEx.tsx

@@ -306,7 +306,7 @@ export function TableEx<
 
   // New sort
   const handleSort = (field: string, asc?: boolean) => {
-    reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
+    reset({ queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] } });
   };
 
   // Set items for rerenderer
@@ -400,9 +400,9 @@ export function TableEx<
                 // Sortable
                 let sortLabel: React.ReactNode;
                 if (sortable && field != null) {
-                  const active =
-                    queryPaging.orderBy != null &&
-                    queryPaging.orderBy[field] != null;
+                  const active = queryPaging.orderBy?.some(
+                    (o) => o.field.toLowerCase() === field.toLowerCase()
+                  );
 
                   sortLabel = (
                     <TableSortLabel

package/src/pages/DataGridPage.tsx

@@ -76,8 +76,11 @@ export function DataGridPage<
     setStates({ data });
   };
 
-  const localLoadData = (props: GridLoadDataProps) => {
-    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+  const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
+    return loadData(
+      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      lastItem
+    );
   };
 
   // Search data

package/src/pages/SearchPageProps.ts

@@ -35,7 +35,8 @@ export type SearchPageProps<
    * Load data callback
    */
   loadData: (
-    data: GridJsonData & DataTypes.BasicTemplateType<F>
+    data: GridJsonData & DataTypes.BasicTemplateType<F>,
+    lastItem?: T
   ) => PromiseLike<T[] | null | undefined>;
 
   /**