@etsoo/materialui 1.4.37 → 1.4.39

package/lib/DataGridEx.js

@@ -91,7 +91,7 @@ export function DataGridEx(props) {
                     });
                 }
                 else if (sortable && field != null) {
-                    const active = orderBy?.has(field);
+                    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,9 @@ export function DataGridEx(props) {
     });
     // New sort
     const handleSort = (field, asc) => {
-        reset({ queryPaging: { orderBy: new Map([[field, !(asc ?? true)]]) } });
+        reset({
+            queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] }
+        });
     };
     // Reset
     const reset = (add) => {

package/lib/GridUtils.d.ts

@@ -1,7 +1,6 @@
 import { GridLoadDataProps, GridLoaderStates } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
 import { GridDataCacheType } from "./GridDataCacheType";
-import { QueryPagingData } from "@etsoo/appscript";
 /**
  * Grid utilities
  */
@@ -14,7 +13,7 @@ export declare namespace GridUtils {
      * @returns Request data
      */
     function createLoader<F extends DataTypes.BasicTemplate>(props: GridLoadDataProps, template?: F, cacheKey?: string): DataTypes.BasicTemplateType<F> & {
-        queryPaging: QueryPagingData;
+        queryPaging: import("@etsoo/appscript").QueryPagingData;
     };
     /**
      * Get cache data
@@ -41,11 +40,4 @@ export declare namespace GridUtils {
      * @param searchData Search data
      */
     function mergeSearchData<T, F extends DataTypes.BasicTemplate>(state: GridLoaderStates<T>, searchData?: DataTypes.BasicTemplateType<F>): void;
-    /**
-     * Setup paging keysets
-     * @param data Paging data
-     * @param lastItem Last item of the query
-     * @param idField Id field
-     */
-    function setupPagingKeysets<T>(data: QueryPagingData, lastItem: T | undefined, idField: keyof T & string): void;
 }

package/lib/GridUtils.js

@@ -83,26 +83,4 @@ export var GridUtils;
         Object.assign(state.data, searchData);
     }
     GridUtils.mergeSearchData = mergeSearchData;
-    /**
-     * 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 (data.orderBy == null) {
-            data.orderBy = new Map([[idField, true]]);
-        }
-        else if (!data.orderBy.has(idField)) {
-            data.orderBy.set(idField, true);
-        }
-        // Set the paging keysets
-        if (lastItem) {
-            const keysets = [];
-            data.orderBy.forEach((_value, key) => keysets.push(Reflect.get(lastItem, key)));
-            data.keysets = keysets;
-        }
-    }
-    GridUtils.setupPagingKeysets = setupPagingKeysets;
 })(GridUtils || (GridUtils = {}));

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): QueryRQ<K>;
 }

package/lib/MUUtils.js

@@ -26,4 +26,27 @@ 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;
+            }
+        }
+        return data;
+    }
+    MUUtils.setupPagingKeysets = setupPagingKeysets;
 })(MUUtils || (MUUtils = {}));

package/lib/TableEx.js

@@ -63,6 +63,7 @@ export function TableEx(props) {
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
+            lastItem: undefined,
             ...rest
         };
         Object.assign(state, resetState);
@@ -171,7 +172,7 @@ export function TableEx(props) {
     };
     // New sort
     const handleSort = (field, asc) => {
-        reset({ queryPaging: { orderBy: new Map([[field, !(asc ?? true)]]) } });
+        reset({ queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] } });
     };
     // Set items for rerenderer
     const setItems = (callback) => {
@@ -218,7 +219,7 @@ export function TableEx(props) {
                                         // Sortable
                                         let sortLabel;
                                         if (sortable && field != null) {
-                                            const active = queryPaging.orderBy?.has(field);
+                                            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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.37",
+  "version": "1.4.39",
   "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.77",
+    "@etsoo/appscript": "^1.5.78",
     "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.6",
+    "@etsoo/react": "^1.8.8",
     "@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?.has(field);
+            const active = orderBy?.some(
+              (o) => o.field.toUpperCase() === field.toUpperCase()
+            );
 
             sortLabel = (
               <TableSortLabel
@@ -438,7 +440,9 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
 
   // New sort
   const handleSort = (field: string, asc?: boolean) => {
-    reset({ queryPaging: { orderBy: new Map([[field, !(asc ?? true)]]) } });
+    reset({
+      queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] }
+    });
   };
 
   // Reset

package/src/GridUtils.ts

@@ -5,7 +5,6 @@ import {
 } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
 import { GridDataCacheType } from "./GridDataCacheType";
-import { QueryPagingData } from "@etsoo/appscript";
 
 /**
  * Grid utilities
@@ -99,32 +98,4 @@ export namespace GridUtils {
     state.data ??= {};
     Object.assign(state.data, searchData);
   }
-
-  /**
-   * Setup paging keysets
-   * @param data Paging data
-   * @param lastItem Last item of the query
-   * @param idField Id field
-   */
-  export function setupPagingKeysets<T>(
-    data: QueryPagingData,
-    lastItem: T | undefined,
-    idField: keyof T & string
-  ) {
-    // If the id field is not set for ordering, add it with descending
-    if (data.orderBy == null) {
-      data.orderBy = new Map<string, boolean>([[idField, true]]);
-    } else if (!data.orderBy.has(idField)) {
-      data.orderBy.set(idField, true);
-    }
-
-    // Set the paging keysets
-    if (lastItem) {
-      const keysets: unknown[] = [];
-      data.orderBy.forEach((_value, key) =>
-        keysets.push(Reflect.get(lastItem, key))
-      );
-      data.keysets = keysets;
-    }
-  }
 }

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,33 @@ 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;
+      }
+    }
+
+    return data;
+  }
 }

package/src/TableEx.tsx

@@ -174,6 +174,7 @@ export function TableEx<
       hasNextPage: true,
       isNextPageLoading: false,
       lastLoadedItems: undefined,
+      lastItem: undefined,
       ...rest
     };
     Object.assign(state, resetState);
@@ -306,7 +307,7 @@ export function TableEx<
 
   // New sort
   const handleSort = (field: string, asc?: boolean) => {
-    reset({ queryPaging: { orderBy: new Map([[field, !(asc ?? true)]]) } });
+    reset({ queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] } });
   };
 
   // Set items for rerenderer
@@ -400,7 +401,9 @@ export function TableEx<
                 // Sortable
                 let sortLabel: React.ReactNode;
                 if (sortable && field != null) {
-                  const active = queryPaging.orderBy?.has(field);
+                  const active = queryPaging.orderBy?.some(
+                    (o) => o.field.toLowerCase() === field.toLowerCase()
+                  );
 
                   sortLabel = (
                     <TableSortLabel