@firecms/core 3.0.0-canary.168 → 3.0.0-canary.169

package/src/components/common/{useDataSourceEntityCollectionTableController.tsx → useDataSourceTableController.tsx}

@@ -9,14 +9,15 @@ import {
     FilterValues,
     FireCMSContext,
     SelectedCellProps,
-    User
+    User,
+    WhereFilterOp
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
-import equal from "react-fast-compare"
+import { ScrollRestorationController } from "./useScrollRestoration";
 
 const DEFAULT_PAGE_SIZE = 50;
 
-export type DataSourceEntityCollectionTableControllerProps<M extends Record<string, any> = any> = {
+export type DataSourceTableControllerProps<M extends Record<string, any> = any> = {
     /**
      * Full path where the data of this table is located
      */
@@ -37,6 +38,14 @@ export type DataSourceEntityCollectionTableControllerProps<M extends Record<stri
      * Force filter to be applied to the table.
      */
     forceFilter?: FilterValues<string>;
+
+    scrollRestoration?: ScrollRestorationController;
+
+    /**
+     * When set to true the filters and sort will be updated in the URL
+     */
+    updateUrl?: boolean;
+
 }
 
 /**
@@ -48,18 +57,22 @@ export type DataSourceEntityCollectionTableControllerProps<M extends Record<stri
  *
  * @param fullPath
  * @param collection
+ * @param scrollRestoration
  * @param entitiesDisplayedFirst
  * @param lastDeleteTimestamp
  * @param forceFilterFromProps
+ * @param updateUrl
  */
-export function useDataSourceEntityCollectionTableController<M extends Record<string, any> = any, USER extends User = User>(
+export function useDataSourceTableController<M extends Record<string, any> = any, USER extends User = User>(
     {
         fullPath,
         collection,
+        scrollRestoration,
         entitiesDisplayedFirst,
         lastDeleteTimestamp,
         forceFilter: forceFilterFromProps,
-    }: DataSourceEntityCollectionTableControllerProps<M>)
+        updateUrl
+    }: DataSourceTableControllerProps<M>)
     : EntityTableController<M> {
 
     const {
@@ -71,14 +84,13 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
     const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
     const navigation = useNavigationController();
     const dataSource = useDataSource(collection);
-    const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
+    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath), [fullPath, navigation.resolveIdsFrom]);
 
     const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
     const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
     const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
 
     const [searchString, setSearchString] = React.useState<string | undefined>();
-    const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? pageSize : undefined);
 
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
                                                 sortBy?: [string, "asc" | "desc"]) => {
@@ -92,6 +104,21 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
         })
     }, []);
 
+    const onScroll = ({
+                          scrollOffset
+                      }: {
+        scrollOffset: number
+    }) => {
+        if (scrollRestoration) {
+            scrollRestoration.updateCollectionScroll({
+                fullPath: resolvedPath,
+                scrollOffset,
+                data: rawData,
+                filters: filterValues
+            });
+        }
+    }
+
     const initialSortInternal = useMemo(() => {
         if (initialSort && forceFilter && !checkFilterCombination(forceFilter, initialSort)) {
             console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
@@ -100,21 +127,38 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
         return initialSort;
     }, [initialSort, forceFilter]);
 
+    const {
+        filterValues: initialFilteUrl,
+        sortBy: initialSortUrl,
+    } = parseFilterAndSort(window.location.search);
+
+    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilteUrl ?? initialFilter ?? undefined);
+    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortUrl ?? initialSortInternal);
+
+    useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
+
+    const collectionScroll = scrollRestoration?.getCollectionScroll(fullPath, filterValues);
+    const initialItemCount = collectionScroll?.data.length ?? pageSize;
+
     useEffect(() => {
-        if (!equal(forceFilter, filterValues)) {
-            setFilterValues(forceFilter)
+        if (scrollRestoration) {
+            scrollRestoration.updateCollectionScroll({
+                fullPath: resolvedPath,
+                scrollOffset: collectionScroll?.scrollOffset ?? 0,
+                data: rawData,
+                filters: filterValues
+            });
         }
-    }, [forceFilter]);
+    }, []);
 
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
-    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
+    const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? initialItemCount : undefined);
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
 
     const context: FireCMSContext<USER> = useFireCMSContext();
 
-    const [rawData, setRawData] = useState<Entity<M>[]>([]);
+    const [rawData, setRawData] = useState<Entity<M>[]>(collectionScroll?.data ?? []);
 
     const [dataLoading, setDataLoading] = useState<boolean>(false);
     const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
@@ -227,6 +271,8 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
         clearFilter,
         itemCount,
         setItemCount,
+        initialScroll: collectionScroll?.scrollOffset,
+        onScroll,
         paginationEnabled,
         pageSize,
         checkFilterCombination,
@@ -234,3 +280,66 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
         setPopupCell
     }
 }
+
+function useUpdateUrl<M extends Record<string, any> = any>(
+    filterValues: FilterValues<Extract<keyof M, string>> | undefined,
+    sortBy: [Extract<keyof M, string>, "asc" | "desc"] | undefined,
+    searchString: string | undefined,
+    updateUrl: boolean | undefined
+) {
+
+    useEffect(() => {
+        if (updateUrl) {
+            const newUrl = encodeFilterAndSort(filterValues, sortBy);
+            const search = searchString ? `&search=${encodeURIComponent(searchString)}` : "";
+            const state = `${newUrl}${search}`;
+            const hash = window.location.hash;
+            if (state === "")
+                window.history.replaceState({}, "", `${window.location.pathname}${hash}`);
+            else
+                window.history.replaceState({}, "", `?${state}${hash}`);
+        }
+    }, [filterValues, sortBy, searchString, updateUrl]);
+}
+
+function encodeFilterAndSort(filterValues?: FilterValues<string> | undefined, sortBy?: [string, "asc" | "desc"] | undefined) {
+    const entries: Record<string, string> = {};
+    if (sortBy) {
+        entries["__sort"] = encodeURIComponent(sortBy[0]);
+        entries["__sort_order"] = encodeURIComponent(sortBy[1]);
+    }
+    if (filterValues) {
+        Object.entries(filterValues).forEach(([key, value]) => {
+            if (value) {
+                entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(value[0]);
+                entries[encodeURIComponent(`${key}_value`)] = encodeURIComponent(value[1]);
+            }
+        });
+    }
+    if (!Object.keys(entries).length) {
+        return "";
+    }
+    return Object.entries(entries).map(([key, value]) => `${key}=${value}`).join("&");
+}
+
+function parseFilterAndSort<M>(search: string): {
+    filterValues: FilterValues<string> | undefined,
+    sortBy?: [Extract<keyof M, string>, "asc" | "desc"]
+} {
+    const entries = new URLSearchParams(search);
+    const filterValues: FilterValues<string> = {};
+    let sortBy: [string, "asc" | "desc"] | undefined = undefined;
+    entries.forEach((value, key) => {
+        if (key === "__sort") {
+            sortBy = [value, entries.get("__sort_order") as "asc" | "desc"];
+        } else if (key.endsWith("_op")) {
+            const filterValue = entries.get(`${key.replace("_op", "_value")}`);
+            filterValues[key.replace("_op", "")] = [value as WhereFilterOp, filterValue as string];
+        }
+    });
+
+    return {
+        filterValues: Object.keys(filterValues).length ? filterValues : undefined,
+        sortBy
+    }
+}

package/src/components/common/useDebouncedCallback.tsx

@@ -0,0 +1,20 @@
+import { useCallback, useRef } from "react";
+
+export function useDebounceCallback<T extends (...args: any[]) => any>(
+    callback?: T,
+    delay?: number
+): T {
+    const timeoutRef = useRef<number | null>(null);
+
+    const debouncedCallback = useCallback((...args: Parameters<T>) => {
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = window.setTimeout(() => {
+            callback?.(...args);
+        }, delay ?? 200);
+    }, [callback, delay]);
+
+    return debouncedCallback as T;
+}

package/src/components/common/useScrollRestoration.tsx

@@ -0,0 +1,68 @@
+import { Entity, FilterValues } from "../../types";
+
+const collectionScrollCache = new Map<string, { scrollOffset: number, data: Entity<any>[] }>();
+
+export type ScrollRestorationController = {
+
+    getCollectionScroll: (fullPath: string,
+                          filters?: FilterValues<any>) => {
+        scrollOffset: number,
+        data: Entity<any>[]
+    } | undefined;
+
+    updateCollectionScroll: (props: {
+        fullPath: string,
+        scrollOffset: number,
+        filters?: FilterValues<any>;
+        data: Entity<any>[]
+    }) => void;
+
+}
+
+export function useScrollRestoration(): ScrollRestorationController {
+
+    const updateCollectionScroll = ({
+                                        fullPath,
+                                        filters,
+                                        scrollOffset,
+                                        data
+                                    }: {
+        fullPath: string;
+        filters?: FilterValues<any>;
+        sort?: [string, "asc" | "desc"];
+        scrollOffset: number;
+        data: Entity<any>[]
+    }) => {
+        collectionScrollCache.set(
+            createCacheKey(fullPath, filters),
+            {
+                scrollOffset,
+                data
+            })
+    }
+
+    const getCollectionScroll = (fullPath: string,
+                                 filters?: FilterValues<any>) => {
+        return collectionScrollCache.get(createCacheKey(fullPath, filters));
+    }
+
+    return {
+        getCollectionScroll,
+        updateCollectionScroll
+    }
+}
+
+function createCacheKey(fullPath: string, filters?: FilterValues<any>) {
+
+    if (!filters) {
+        return fullPath;
+    }
+
+    // codify the filters into a url friendly string
+    const filtersString = filters ? Object.keys(filters).map(key => {
+        const value = JSON.stringify(filters[key]);
+        return `${key}=${value}`;
+    }).join("&") : "";
+
+    return `${fullPath}?${filtersString}`;
+}

package/src/contexts/BreacrumbsContext.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { BreadcrumbEntry, BreadcrumbsController } from "../hooks/useBreadcrumbsController";
+
+const DEFAULT_BREADCRUMBS_CONTROLLER = {
+    breadcrumbs: [],
+    set: (props: {
+        breadcrumbs: BreadcrumbEntry[];
+    }) => {
+    }
+};
+
+export const BreadcrumbContext = React.createContext<BreadcrumbsController>(DEFAULT_BREADCRUMBS_CONTROLLER);
+
+interface BreadcrumbsProviderProps {
+    children: React.ReactNode;
+}
+
+export const BreadcrumbsProvider: React.FC<BreadcrumbsProviderProps> = ({ children }) => {
+
+    const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbEntry[]>([]);
+
+    const set = (props: {
+        breadcrumbs: BreadcrumbEntry[];
+    }) => {
+        setBreadcrumbs(props.breadcrumbs);
+    };
+
+    return (
+        <BreadcrumbContext.Provider
+            value={{
+                breadcrumbs,
+                set
+            }}
+        >
+            {children}
+        </BreadcrumbContext.Provider>
+    );
+};

package/src/contexts/DialogsProvider.tsx

@@ -8,7 +8,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
     const [dialogEntries, setDialogEntries] = useState<DialogControllerEntryProps[]>([]);
     const dialogEntriesRef = useRef<DialogControllerEntryProps[]>(dialogEntries);
 
-    const updateDialogEntries = (newPanels: DialogControllerEntryProps<any>[]) => {
+    const updateDialogEntries = (newPanels: DialogControllerEntryProps[]) => {
         dialogEntriesRef.current = newPanels;
         setDialogEntries(newPanels);
     };
@@ -23,7 +23,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
 
     }, [dialogEntries]);
 
-    const open = useCallback(<T extends object = object>(dialogEntry: DialogControllerEntryProps<T>) => {
+    const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
 
         const updatedPanels = [...dialogEntriesRef.current, dialogEntry];
         updateDialogEntries(updatedPanels);
@@ -46,7 +46,6 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
                 key={`dialog_${i}`}
                 open={true}
                 closeDialog={close}
-                {...entry.props}
             />)}
         </DialogsControllerContext.Provider>
     );

package/src/core/DefaultAppBar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Link as ReactLink, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
@@ -17,6 +17,7 @@ import {
 import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
 import { User } from "../types";
 import { useApp } from "../app/useApp";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
@@ -65,6 +66,8 @@ export const DefaultAppBar = function DefaultAppBar({
     } = useApp();
     const navigation = useNavigationController();
 
+    const breadcrumbs = useBreadcrumbsController();
+
     const authController = useAuthController();
     const {
         mode,
@@ -108,8 +111,8 @@ export const DefaultAppBar = function DefaultAppBar({
                 className)}>
 
 
-            {navigation && <div className="mr-8 hidden lg:block">
-                <ReactLink
+            {navigation && <div className="mr-2 hidden lg:block">
+                <Link
                     className="visited:text-inherit visited:dark:text-inherit block"
                     to={navigation?.basePath ?? "/"}
                 >
@@ -127,7 +130,28 @@ export const DefaultAppBar = function DefaultAppBar({
                             </Typography>
                             : title}
                     </div>
-                </ReactLink>
+                </Link>
+            </div>}
+
+            {breadcrumbs.breadcrumbs && <div className="mr-8 hidden lg:block">
+                <div className={"flex flex-row gap-2"}>
+                    {breadcrumbs.breadcrumbs.map((breadcrumb, index) => {
+                        return <React.Fragment key={breadcrumb.url + "_" + index}>
+                            <Typography variant={"caption"} color={"secondary"}>
+                                /
+                            </Typography>
+                            <Link
+                                key={index}
+                                className="visited:text-inherit visited:dark:text-inherit block"
+                                to={breadcrumb.url}
+                            >
+                                <Typography variant={"caption"} color={"secondary"}>
+                                    {breadcrumb.title}
+                                </Typography>
+                            </Link>
+                        </React.Fragment>;
+                    })}
+                </div>
             </div>}
 
             {startAdornment}