@etsoo/materialui 1.2.41 → 1.2.43

package/src/ResponsibleContainer.tsx

@@ -1,14 +1,21 @@
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
 import { Box, Stack, SxProps, Theme } from "@mui/material";
 import React from "react";
-import { ListChildComponentProps } from "react-window";
+import {
+  GridOnScrollProps,
+  ListChildComponentProps,
+  ListOnScrollProps,
+  VariableSizeGrid
+} from "react-window";
 import {
   GridColumn,
   GridDataGet,
   GridJsonData,
   GridLoadDataProps,
+  GridLoaderStates,
   GridMethodRef,
   ReactUtils,
+  ScrollerListRef,
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
@@ -26,6 +33,7 @@ import {
 } from "./ScrollerListEx";
 import { SearchBar } from "./SearchBar";
 import { Labels } from "./app/Labels";
+import { GridDataCacheType } from "./GridDataCacheType";
 
 /**
  * ResponsibleContainer props
@@ -36,7 +44,14 @@ export type ResponsibleContainerProps<
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 > = Omit<
   DataGridExProps<T, D>,
-  "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered"
+  | "height"
+  | "itemKey"
+  | "loadData"
+  | "mRef"
+  | "onScroll"
+  | "onItemsRendered"
+  | "onInitLoad"
+  | "onUpdateRows"
 > & {
   /**
    * Height will be deducted
@@ -75,7 +90,9 @@ export type ResponsibleContainerProps<
   /**
    * Search fields
    */
-  fields?: React.ReactElement[];
+  fields?:
+    | React.ReactElement[]
+    | ((data: DataTypes.BasicTemplateType<F>) => React.ReactElement[]);
 
   /**
    * Search field template
@@ -151,6 +168,7 @@ interface LocalRefs<T> {
   rect?: DOMRect;
   ref?: GridMethodRef<T>;
   mounted?: boolean;
+  initLoaded?: boolean;
 }
 
 function defaultContainerBoxSx(
@@ -180,6 +198,8 @@ export function ResponsibleContainer<
   const {
     adjustHeight,
     adjustFabHeight,
+    cacheKey,
+    cacheMinutes = 120,
     columns,
     containerBoxSx = defaultContainerBoxSx,
     dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
@@ -223,6 +243,10 @@ export function ResponsibleContainer<
   const localLoadData = (props: GridLoadDataProps) => {
     state.mounted = true;
     const data = GridDataGet(props, fieldTemplate);
+
+    if (cacheKey)
+      sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
+
     return loadData(data);
   };
 
@@ -260,6 +284,70 @@ export function ResponsibleContainer<
     }
   );
 
+  type DataType = GridDataCacheType<T>;
+
+  const onUpdateRows = (rows: T[], state: GridLoaderStates<T>) => {
+    if (state.currentPage > 0 && cacheKey) {
+      const data: DataType = { rows, state, creation: new Date().valueOf() };
+      sessionStorage.setItem(cacheKey, JSON.stringify(data));
+    }
+  };
+
+  const onInitLoad = (
+    ref: VariableSizeGrid<T> | ScrollerListRef
+  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
+    // Avoid repeatedly load from cache
+    if (refs.current.initLoaded || !cacheKey) return undefined;
+
+    // Cache data
+    const cacheData = sessionStorage.getItem(cacheKey);
+    if (cacheData) {
+      const { rows, state, creation } = JSON.parse(cacheData) as DataType;
+
+      // 120 minutes
+      if (new Date().valueOf() - creation > cacheMinutes * 60000) {
+        sessionStorage.removeItem(cacheKey);
+        return undefined;
+      }
+
+      // Scroll position
+      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+      if (scrollData) {
+        if ("resetAfterColumnIndex" in ref) {
+          const { scrollLeft, scrollTop } = JSON.parse(
+            scrollData
+          ) as GridOnScrollProps;
+
+          globalThis.setTimeout(
+            () => ref.scrollTo({ scrollLeft, scrollTop }),
+            0
+          );
+        } else {
+          const { scrollOffset } = JSON.parse(scrollData) as ListOnScrollProps;
+
+          globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
+        }
+      }
+
+      // Update flag value
+      refs.current.initLoaded = true;
+
+      // Return cached rows and state
+      return [rows, state];
+    }
+
+    return undefined;
+  };
+
+  const onListScroll = (props: ListOnScrollProps) => {
+    if (!cacheKey || !refs.current.initLoaded) return;
+    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+  };
+  const onGridScroll = (props: GridOnScrollProps) => {
+    if (!cacheKey || !refs.current.initLoaded) return;
+    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+  };
+
   // Rect
   const rect = dimensions[0][2];
 
@@ -309,7 +397,10 @@ export function ResponsibleContainer<
             outerRef={(element?: HTMLDivElement) => {
               if (element != null && elementReady) elementReady(element, true);
             }}
+            onScroll={onGridScroll}
             columns={columns}
+            onUpdateRows={onUpdateRows}
+            onInitLoad={onInitLoad}
             {...rest}
           />
         </Box>,
@@ -333,6 +424,8 @@ export function ResponsibleContainer<
           autoLoad={!hasFields}
           height={heightLocal}
           loadData={localLoadData}
+          onUpdateRows={onUpdateRows}
+          onInitLoad={onInitLoad}
           mRef={mRefs}
           onClick={(event, data) =>
             quickAction && ReactUtils.isSafeClick(event) && quickAction(data)
@@ -340,6 +433,7 @@ export function ResponsibleContainer<
           oRef={(element) => {
             if (element != null && elementReady) elementReady(element, false);
           }}
+          onScroll={onListScroll}
           {...rest}
         />
       </Box>,
@@ -349,9 +443,19 @@ export function ResponsibleContainer<
 
   const searchBar = React.useMemo(() => {
     if (!hasFields || showDataGrid == null) return;
+
+    const f =
+      typeof fields == "function"
+        ? fields(
+            JSON.parse(
+              sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
+            ) as DataTypes.BasicTemplateType<F>
+          )
+        : fields;
+
     return (
       <SearchBar
-        fields={fields}
+        fields={f}
         onSubmit={onSubmit}
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
       />

package/src/pages/DataGridPage.tsx

@@ -1,7 +1,10 @@
 import {
   GridDataGet,
   GridLoadDataProps,
+  GridLoaderStates,
+  GridOnScrollProps,
   ScrollerGridForwardRef,
+  VariableSizeGrid,
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
@@ -13,6 +16,7 @@ import { MUGlobal } from "../MUGlobal";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { DataGridPageProps } from "./DataGridPageProps";
+import { GridDataCacheType } from "../GridDataCacheType";
 
 interface LocalStates<T> {
   data?: FormData;
@@ -41,6 +45,8 @@ export function DataGridPage<
     mRef,
     sizeReadyMiliseconds = 100,
     pageProps = {},
+    cacheKey,
+    cacheMinutes = 120,
     ...rest
   } = props;
 
@@ -65,6 +71,8 @@ export function DataGridPage<
     }
   );
 
+  const initLoadedRef = React.useRef<boolean>();
+
   // On submit callback
   const onSubmit = (data: FormData, _reset: boolean) => {
     setStates({ data });
@@ -72,9 +80,64 @@ export function DataGridPage<
 
   const localLoadData = (props: GridLoadDataProps) => {
     const data = GridDataGet(props, fieldTemplate);
+
+    if (cacheKey)
+      sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
+
     return loadData(data);
   };
 
+  type DataType = GridDataCacheType<T>;
+
+  const onUpdateRows = (rows: T[], state: GridLoaderStates<T>) => {
+    if (state.currentPage > 0 && cacheKey) {
+      const data: DataType = { rows, state, creation: new Date().valueOf() };
+      sessionStorage.setItem(cacheKey, JSON.stringify(data));
+    }
+  };
+
+  const onInitLoad = (
+    ref: VariableSizeGrid<T>
+  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
+    // Avoid repeatedly load from cache
+    if (initLoadedRef.current || !cacheKey) return undefined;
+
+    // Cache data
+    const cacheData = sessionStorage.getItem(cacheKey);
+    if (cacheData) {
+      const { rows, state, creation } = JSON.parse(cacheData) as DataType;
+
+      // 120 minutes
+      if (new Date().valueOf() - creation > cacheMinutes * 60000) {
+        sessionStorage.removeItem(cacheKey);
+        return undefined;
+      }
+
+      // Scroll position
+      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+      if (scrollData) {
+        const { scrollLeft, scrollTop } = JSON.parse(
+          scrollData
+        ) as GridOnScrollProps;
+
+        globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
+      }
+
+      // Update flag value
+      initLoadedRef.current = true;
+
+      // Return cached rows and state
+      return [rows, state];
+    }
+
+    return undefined;
+  };
+
+  const onGridScroll = (props: GridOnScrollProps) => {
+    if (!cacheKey || !initLoadedRef.current) return;
+    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+  };
+
   // Watch container
   const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
   const rect = dimensions[0][2];
@@ -105,6 +168,9 @@ export function DataGridPage<
         height={gridHeight}
         loadData={localLoadData}
         mRef={refs}
+        onUpdateRows={onUpdateRows}
+        onInitLoad={onInitLoad}
+        onScroll={onGridScroll}
         outerRef={(element?: HTMLDivElement) => {
           if (element != null) setStates({ element });
         }}
@@ -119,6 +185,15 @@ export function DataGridPage<
     ref.reset({ data });
   }, [ref, data]);
 
+  const f =
+    typeof fields == "function"
+      ? fields(
+          JSON.parse(
+            sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
+          ) as DataTypes.BasicTemplateType<F>
+        )
+      : fields;
+
   // Layout
   return (
     <CommonPage {...pageProps} scrollContainer={states.element}>
@@ -129,7 +204,7 @@ export function DataGridPage<
             paddingBottom: pageProps.paddings
           }}
         >
-          <SearchBar fields={fields} onSubmit={onSubmit} />
+          <SearchBar fields={f} onSubmit={onSubmit} />
         </Box>
         {list}
       </Stack>

package/src/pages/FixedListPage.tsx

@@ -1,7 +1,10 @@
 import {
   GridDataGet,
   GridLoadDataProps,
+  GridLoaderStates,
+  ListOnScrollProps,
   ScrollerListForwardRef,
+  ScrollerListRef,
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
@@ -13,6 +16,7 @@ import { ScrollerListEx } from "../ScrollerListEx";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { ListPageProps } from "./ListPageProps";
+import { GridDataCacheType } from "../GridDataCacheType";
 
 /**
  * Fixed height list page
@@ -42,6 +46,8 @@ export function FixedListPage<
     mRef,
     sizeReadyMiliseconds = 0,
     pageProps = {},
+    cacheKey,
+    cacheMinutes = 120,
     ...rest
   } = props;
 
@@ -53,6 +59,8 @@ export function FixedListPage<
     ref?: ScrollerListForwardRef<T>;
   }>({});
 
+  const initLoadedRef = React.useRef<boolean>();
+
   // Scroll container
   const [scrollContainer, updateScrollContainer] = React.useState<
     HTMLElement | undefined
@@ -84,9 +92,61 @@ export function FixedListPage<
 
   const localLoadData = (props: GridLoadDataProps) => {
     const data = GridDataGet(props, fieldTemplate);
+
+    if (cacheKey)
+      sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
+
     return loadData(data);
   };
 
+  type DataType = GridDataCacheType<T>;
+
+  const onUpdateRows = (rows: T[], state: GridLoaderStates<T>) => {
+    if (state.currentPage > 0 && cacheKey) {
+      const data: DataType = { rows, state, creation: new Date().valueOf() };
+      sessionStorage.setItem(cacheKey, JSON.stringify(data));
+    }
+  };
+
+  const onInitLoad = (
+    ref: ScrollerListRef
+  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
+    // Avoid repeatedly load from cache
+    if (initLoadedRef.current || !cacheKey) return undefined;
+
+    // Cache data
+    const cacheData = sessionStorage.getItem(cacheKey);
+    if (cacheData) {
+      const { rows, state, creation } = JSON.parse(cacheData) as DataType;
+
+      // 120 minutes
+      if (new Date().valueOf() - creation > cacheMinutes * 60000) {
+        sessionStorage.removeItem(cacheKey);
+        return undefined;
+      }
+
+      // Scroll position
+      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+      if (scrollData) {
+        const { scrollOffset } = JSON.parse(scrollData) as ListOnScrollProps;
+        globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
+      }
+
+      // Update flag value
+      initLoadedRef.current = true;
+
+      // Return cached rows and state
+      return [rows, state];
+    }
+
+    return undefined;
+  };
+
+  const onListScroll = (props: ListOnScrollProps) => {
+    if (!cacheKey || !initLoadedRef.current) return;
+    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+  };
+
   // Watch container
   const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
   const rect = dimensions[0][2];
@@ -110,6 +170,9 @@ export function FixedListPage<
             height={height}
             loadData={localLoadData}
             mRef={refs}
+            onUpdateRows={onUpdateRows}
+            onInitLoad={onInitLoad}
+            onScroll={onListScroll}
             oRef={(element) => {
               if (element != null) updateScrollContainer(element);
             }}
@@ -120,6 +183,15 @@ export function FixedListPage<
     }
   }, [rect]);
 
+  const f =
+    typeof fields == "function"
+      ? fields(
+          JSON.parse(
+            sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
+          ) as DataTypes.BasicTemplateType<F>
+        )
+      : fields;
+
   const { paddings, ...pageRest } = pageProps;
 
   // Layout
@@ -127,7 +199,7 @@ export function FixedListPage<
     <CommonPage {...pageRest} paddings={{}} scrollContainer={scrollContainer}>
       <Stack>
         <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>
-          <SearchBar fields={fields} onSubmit={onSubmit} />
+          <SearchBar fields={f} onSubmit={onSubmit} />
         </Box>
         {list}
       </Stack>