@rebasepro/core 0.0.1-canary.0

package/src/components/common/useColumnsIds.tsx

@@ -0,0 +1,210 @@
+import { useMemo } from "react";
+import { EntityCollection, Property } from "@rebasepro/types";
+import { getPropertyInPath } from "../../util";
+import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
+import { PropertyColumnConfig } from "../EntityCollectionTable/EntityCollectionTableProps";
+import { getSubcollections } from "@rebasepro/common";
+
+export const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
+
+export function useColumnIds<M extends Record<string, any>>(collection: EntityCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
+    return useMemo(() => {
+        if (collection.propertiesOrder) {
+            return hideAndExpandKeys(collection, collection.propertiesOrder);
+        }
+        return getDefaultColumnKeys(collection, includeSubcollections);
+    }, [collection, includeSubcollections]);
+}
+
+function hideAndExpandKeys<M extends Record<string, any>>(collection: EntityCollection<M>, keys: string[]): PropertyColumnConfig[] {
+
+    // First, figure out which spread map roots have individual child keys in the order
+    // If so, we should NOT auto-expand them - just use the explicit child keys
+    const rootsWithExplicitChildren = new Set<string>();
+    for (const key of keys) {
+        if (key.includes(".")) {
+            const rootKey = key.split(".")[0];
+            const rootProperty = collection.properties[rootKey];
+            if (rootProperty && rootProperty.type === "map" && rootProperty.spreadChildren && rootProperty.properties) {
+                rootsWithExplicitChildren.add(rootKey);
+            }
+        }
+    }
+
+    // Track processed keys to avoid duplicates
+    const processedPropertyKeys = new Set<string>();
+
+    const result = keys.flatMap((key) => {
+        // Skip if already processed (handles duplicates in propertiesOrder)
+        if (processedPropertyKeys.has(key)) return [null];
+
+        // Check if it's a top-level property
+        const property = collection.properties[key];
+        if (property) {
+            processedPropertyKeys.add(key);
+            if (property.hideFromCollection)
+                return [null];
+            if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden)
+                return [null];
+
+            if (property.type === "map" && property.spreadChildren && property.properties) {
+                // Check if this spread map has explicit child keys in propertiesOrder
+                if (rootsWithExplicitChildren.has(key)) {
+                    // DON'T auto-expand - the children are explicitly listed elsewhere
+                    return [null];
+                }
+                // Auto-expand all children
+                const childConfigs = getColumnKeysForProperty(property, key);
+                childConfigs.forEach(c => processedPropertyKeys.add(c.key));
+                return childConfigs;
+            }
+            return [{
+                key,
+                disabled: Boolean(property.disabled) || Boolean(property.readOnly)
+            }];
+        }
+
+        // Check if it's a nested key like "data.mode" (for spread map properties)
+        if (key.includes(".")) {
+            const rootKey = key.split(".")[0];
+            const rootProperty = collection.properties[rootKey];
+
+            if (rootProperty && rootProperty.type === "map" && rootProperty.properties) {
+                const nestedProperty = getPropertyInPath(collection.properties, key) as Property | undefined;
+                if (nestedProperty) {
+                    processedPropertyKeys.add(key);
+                    // Mark root as seen
+                    processedPropertyKeys.add(rootKey);
+
+                    if (nestedProperty.hideFromCollection)
+                        return [null];
+                    if (nestedProperty.disabled && typeof nestedProperty.disabled === "object" && nestedProperty.disabled.hidden)
+                        return [null];
+
+                    return [{
+                        key,
+                        disabled: Boolean(rootProperty.disabled) || Boolean(rootProperty.readOnly) ||
+                            Boolean(nestedProperty.disabled) || Boolean(nestedProperty.readOnly)
+                    }];
+                }
+            }
+        }
+
+        // Check additional fields
+        const additionalField = collection.additionalFields?.find(field => field.key === key);
+        if (additionalField) {
+            return [{
+                key,
+                disabled: true
+            }];
+        }
+
+        // Check subcollections
+        const subcollections = getSubcollections(collection);
+        if (subcollections) {
+            const subCollection = subcollections
+                .find(subCol => getSubcollectionColumnId(subCol) === key);
+            if (subCollection) {
+                return [{
+                    key,
+                    disabled: true
+                }];
+            }
+        }
+
+        // Check collection group parent
+        if (collection.collectionGroup && key === COLLECTION_GROUP_PARENT_ID) {
+            return [{
+                key,
+                disabled: true
+            }];
+        }
+
+        return [null];
+    }).filter(Boolean) as PropertyColumnConfig[];
+
+    // Add any missing properties that weren't in propertiesOrder
+    // This ensures properties NEVER disappear
+    for (const propKey of Object.keys(collection.properties)) {
+        // Skip if already processed
+        if (processedPropertyKeys.has(propKey)) continue;
+
+        const property = collection.properties[propKey];
+        if (!property) continue;
+        if (property.hideFromCollection) continue;
+        if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden) continue;
+
+        if (property.type === "map" && property.spreadChildren && property.properties) {
+            // For spread maps, add all children that weren't already added
+            const allChildConfigs = getColumnKeysForProperty(property, propKey);
+            for (const childConfig of allChildConfigs) {
+                if (!processedPropertyKeys.has(childConfig.key)) {
+                    result.push(childConfig);
+                    processedPropertyKeys.add(childConfig.key);
+                }
+            }
+        } else {
+            result.push({
+                key: propKey,
+                disabled: Boolean(property.disabled) || Boolean(property.readOnly)
+            });
+            processedPropertyKeys.add(propKey);
+        }
+    }
+
+    return result;
+}
+
+function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: EntityCollection<M>, includeSubCollections: boolean) {
+    const propertyKeys = Object.keys(collection.properties);
+
+    const additionalFields = collection.additionalFields ?? [];
+    const subCollections: EntityCollection[] = getSubcollections(collection) ?? [];
+
+    const columnIds: string[] = [
+        ...propertyKeys,
+        // Filter out additional fields whose key already exists in propertyKeys to avoid duplicate column keys
+        ...additionalFields.filter((field) => !propertyKeys.includes(field.key)).map((field) => field.key)
+    ];
+
+    if (includeSubCollections) {
+        const subCollectionIds = subCollections
+            .map((collection) => getSubcollectionColumnId(collection));
+        columnIds.push(...subCollectionIds.filter((subColId) => !columnIds.includes(subColId)));
+    }
+
+    if (collection.collectionGroup) {
+        columnIds.push(COLLECTION_GROUP_PARENT_ID);
+    }
+
+    return hideAndExpandKeys(collection, columnIds);
+}
+
+export function getColumnKeysForProperty(property: Property, key: string, disabled?: boolean): PropertyColumnConfig[] {
+    if (property.type === "map" && property.spreadChildren && property.properties) {
+        return Object.entries(property.properties)
+            .flatMap(([childKey, childProperty]) => getColumnKeysForProperty(
+                childProperty,
+                `${key}.${childKey}`,
+                disabled || Boolean(property.disabled) || Boolean(property.readOnly))
+            );
+    }
+    return [{
+        key,
+        disabled: disabled || Boolean(property.disabled) || Boolean(property.readOnly)
+    }];
+}
+
+export function getFormFieldKeys(collection: EntityCollection): string[] {
+    const propertyKeys = Object.keys(collection.properties);
+    const additionalFields = collection.additionalFields ?? [];
+    const allKeys = [
+        ...propertyKeys,
+        ...additionalFields.map((field) => field.key)
+    ];
+
+    if (collection.propertiesOrder) {
+        return collection.propertiesOrder.filter(key => allKeys.includes(key));
+    }
+    return allKeys;
+}

package/src/components/common/useDataSourceTableController.tsx

@@ -0,0 +1,480 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+import { useDataSource, useRebaseContext } from "../../hooks";
+import { useDataOrder } from "../../hooks/data/useDataOrder";
+import {
+    Entity,
+    EntityCollection,
+    EntityReference,
+    EntityRelation,
+    EntityTableController,
+    FilterValues,
+    RebaseContext,
+    SelectedCellProps,
+    User,
+    WhereFilterOp
+} from "@rebasepro/types";
+import { ScrollRestorationController } from "./useScrollRestoration";
+
+export const DEFAULT_PAGE_SIZE = 50;
+
+export type DataSourceTableControllerProps<M extends Record<string, any> = any> = {
+    /**
+     * Full path where the data of this table is located
+     */
+    path: string;
+    /**
+     * The collection that is represented by this config.
+     */
+    collection: EntityCollection<M>;
+    /**
+     * List of entities that will be displayed on top, no matter the ordering.
+     * This is used for reference fields selection
+     */
+    entitiesDisplayedFirst?: Entity<M>[];
+
+    lastDeleteTimestamp?: number;
+
+    /**
+     * 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;
+
+}
+
+/**
+ * Use this hook to build a controller for the {@link EntityCollectionTable}.
+ * This controller is bound to data in a path in your specified datasource.
+ *
+ * Note that you can build your own hook returning a {@link EntityTableController}
+ * if you would like to display different data.
+ *
+ * @param path
+ * @param collection
+ * @param scrollRestoration
+ * @param entitiesDisplayedFirst
+ * @param lastDeleteTimestamp
+ * @param forceFilterFromProps
+ * @param updateUrl
+ */
+export function useDataSourceTableController<M extends Record<string, any> = any, USER extends User = User>(
+    {
+        path,
+        collection,
+        scrollRestoration,
+        entitiesDisplayedFirst,
+        lastDeleteTimestamp: _lastDeleteTimestamp,
+        forceFilter: forceFilterFromProps,
+        updateUrl
+    }: DataSourceTableControllerProps<M>)
+    : EntityTableController<M> {
+
+    const {
+        filter,
+        sort,
+        forceFilter: forceFilterFromCollection
+    } = collection;
+
+    const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
+    const dataSource = useDataSource(collection);
+
+    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 checkFilterCombination = useCallback((filterValues: FilterValues<any>,
+        sortBy?: [string, "asc" | "desc"]) => {
+        if (!dataSource.isFilterCombinationValid)
+            return true;
+        return dataSource.isFilterCombinationValid({
+            path,
+            filterValues,
+            sortBy
+        })
+    }, []);
+
+    const onScroll = ({
+        scrollOffset
+    }: {
+        scrollOffset: number
+    }) => {
+        if (scrollRestoration) {
+            scrollRestoration.updateCollectionScroll({
+                path,
+                scrollOffset,
+                data: rawData,
+                filters: filterValues
+            });
+        }
+    }
+
+    const sortInternal = useMemo(() => {
+        if (sort && forceFilter && !checkFilterCombination(forceFilter, sort)) {
+            console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
+            return undefined;
+        }
+        return sort;
+    }, [sort, forceFilter]);
+
+    const location = useLocation();
+
+    const {
+        filterValues: filterUrl,
+        sortBy: sortUrl
+    } = parseFilterAndSort(location.search);
+
+    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? filterUrl : undefined) ?? filter ?? undefined);
+    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? sortUrl : undefined) ?? sortInternal);
+
+    // Sync filter/sort state from URL on browser navigation (back/forward).
+    // Skip initial mount since useState initializers already handle URL params + collection defaults.
+    const initialSearchRef = React.useRef<string | null>(location.search);
+    useEffect(() => {
+        if (!updateUrl) return;
+        // Skip the initial mount - useState already set the correct values
+        if (initialSearchRef.current !== null && initialSearchRef.current === location.search) {
+            initialSearchRef.current = null;
+            return;
+        }
+        initialSearchRef.current = null;
+
+        const { filterValues: urlFilterValues, sortBy: urlSortBy } = parseFilterAndSort(location.search);
+        if (!forceFilter) {
+            setFilterValues(urlFilterValues as any);
+        }
+        if (urlSortBy && forceFilter && !checkFilterCombination(forceFilter, urlSortBy)) {
+            console.warn("URL sort is not compatible with the force filter.");
+        } else {
+            setSortBy(urlSortBy as any);
+        }
+    }, [location.search, updateUrl, forceFilter, checkFilterCombination]);
+
+    useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
+
+    const collectionScroll = scrollRestoration?.getCollectionScroll(path, filterValues);
+    const initialItemCount = collectionScroll?.data.length ?? pageSize;
+
+    useEffect(() => {
+        if (scrollRestoration) {
+            scrollRestoration.updateCollectionScroll({
+                path,
+                scrollOffset: collectionScroll?.scrollOffset ?? 0,
+                data: rawData,
+                filters: filterValues
+            });
+        }
+    }, []);
+
+    const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? initialItemCount : undefined);
+
+    const sortByProperty = sortBy ? sortBy[0] : undefined;
+    const currentSort = sortBy ? sortBy[1] : undefined;
+
+    const context: RebaseContext<USER> = useRebaseContext();
+
+    const [rawData, setRawData] = useState<Entity<M>[]>(collectionScroll?.data ?? []);
+
+    const [dataLoading, setDataLoading] = useState<boolean>(false);
+    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
+    const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
+
+    const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
+
+    const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {
+        if (forceFilter) {
+            console.warn("Filter is not compatible with the force filter. Ignoring filter");
+            return;
+        }
+        if (updatedFilter && Object.keys(updatedFilter).length === 0) {
+            setFilterValues(undefined);
+        } else {
+            setFilterValues(updatedFilter);
+        }
+    }, [forceFilter]);
+
+    useEffect(() => {
+
+        setDataLoading(true);
+
+        const onEntitiesUpdate = async (entities: Entity<M>[]) => {
+            if (collection.callbacks?.afterRead) {
+                try {
+                    entities = await Promise.all(
+                        entities.map((entity) =>
+                            collection.callbacks!.afterRead!({
+                                collection,
+                                path,
+                                entity,
+                                context
+                            })));
+                } catch (_e: any) {
+                    console.error(_e);
+                }
+            }
+            setDataLoading(false);
+            setDataLoadingError(undefined);
+            setRawData(entities.map(e => ({
+                ...e,
+                // values: sanitizeData(e.values, resolvedCollection.properties)
+            })));
+            setNoMoreToLoad(!itemCount || entities.length < itemCount);
+        };
+
+        const onError = (error: Error) => {
+            console.error("ERROR", error);
+            setDataLoading(false);
+            setRawData([]);
+            setDataLoadingError(error);
+        };
+
+        if (dataSource.listenCollection) {
+            return dataSource.listenCollection<M>({
+                path,
+                collection,
+                onUpdate: onEntitiesUpdate,
+                onError,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            });
+        } else {
+            dataSource.fetchCollection<M>({
+                path,
+                collection,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            })
+                .then(onEntitiesUpdate)
+                .catch(onError);
+            return () => undefined;
+        }
+    }, [path, itemCount, currentSort, sortByProperty, filterValues, searchString]);
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const orderedData = useDataOrder({
+        data: rawData,
+        entitiesDisplayedFirst
+    });
+
+    // hack to fix Firestore listeners firing with incomplete data
+    // const data = useDebouncedData(orderedData, {
+    //     filterValues,
+    //     sortBy,
+    //     searchString,
+    //     lastDeleteTimestamp
+    // });
+    const data = orderedData;
+
+    return {
+        data,
+        dataLoading,
+        noMoreToLoad,
+        dataLoadingError,
+        filterValues,
+        setFilterValues: updateFilterValues,
+        sortBy,
+        setSortBy,
+        searchString,
+        setSearchString,
+        clearFilter,
+        itemCount,
+        setItemCount,
+        initialScroll: collectionScroll?.scrollOffset,
+        onScroll,
+        paginationEnabled,
+        pageSize,
+        checkFilterCombination,
+        popupCell,
+        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) {
+            // Parse existing URL params to preserve non-filter/sort params like __view
+            const existingParams = new URLSearchParams(window.location.search);
+            const preservedParams = new URLSearchParams();
+
+            // Preserve params that are not filter/sort related
+            existingParams.forEach((value, key) => {
+                if (key.startsWith("__") && key !== "__sort" && key !== "__sort_order") {
+                    preservedParams.set(key, value);
+                }
+            });
+
+            const filterSortState = encodeFilterAndSort(filterValues, sortBy);
+            const search = searchString ? `search=${encodeURIComponent(searchString)}` : "";
+
+            // Combine preserved params with filter/sort state
+            const preservedString = preservedParams.toString();
+            const parts = [preservedString, filterSortState, search].filter(Boolean);
+            const state = parts.join("&");
+
+            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>, 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) {
+                const [op, val] = value;
+                let encodedValue: any = val;
+                try {
+                    if (typeof val === "object") {
+                        if (val instanceof Date) {
+                            encodedValue = val.toISOString();
+                        } else if (Array.isArray(val)) {
+                            encodedValue = JSON.stringify(val, (k, v) => {
+                                if (v instanceof EntityRelation) {
+                                    return encodeRelation(v);
+                                }
+                                if (v instanceof EntityReference) {
+                                    return encodeReference(v);
+                                }
+                                return v;
+                            });
+                        } else if (val instanceof EntityRelation) {
+                            encodedValue = encodeRelation(val);
+                        } else if (val instanceof EntityReference) {
+                            encodedValue = encodeReference(val);
+                        }
+                    }
+                } catch (e) {
+                    encodedValue = val;
+                }
+                if (encodedValue !== undefined) {
+                    entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
+                    entries[encodeURIComponent(`${key}_value`)] = encodedValue ? encodeURIComponent(encodedValue.toString()) : "null";
+                }
+            }
+        });
+    }
+    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 = [decodeURIComponent(value), entries.get("__sort_order") as "asc" | "desc"];
+        } else if (key.endsWith("_op")) {
+            const field = key.replace("_op", "");
+            const filterOp = decodeURIComponent(value) as WhereFilterOp;
+            const filterValStr = entries.get(`${field}_value`);
+            if (filterValStr !== null) {
+                filterValues[field] = [filterOp, decodeString(filterValStr)];
+            }
+        }
+    });
+
+    return {
+        filterValues: Object.keys(filterValues).length ? filterValues : undefined,
+        sortBy
+    }
+}
+
+function isDate(dateString: string): boolean {
+    // Define a regex pattern that matches the exact date format: 2025-01-07T23:00:00.000Z
+    const regexPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
+
+    // Test the dateString against the regex pattern
+    if (!regexPattern.test(dateString)) {
+        return false;
+    }
+
+    // If the regex matches, further validate if it is a valid UTC date
+    const date = new Date(dateString);
+    return date.toISOString() === dateString;
+}
+
+function encodeReference(val: EntityReference) {
+    return `ref::${val.path}/${val.id}`;
+}
+function encodeRelation(val: EntityRelation) {
+    return `rel::${val.path}/${val.id}`;
+}
+
+function decodeString(val: string): EntityReference | EntityRelation | Date | string {
+    let parsedFilterVal: any = val;
+    if (isDate(val)) {
+        try {
+            parsedFilterVal = new Date(val);
+        } catch (_e) {
+            // ignore
+        }
+    }
+    if (typeof parsedFilterVal === "string") {
+        try {
+            parsedFilterVal = JSON.parse(parsedFilterVal, (key, value) => {
+                if (typeof value === "string") {
+                    if (value.startsWith("ref::")) {
+                        const [path, id] = value.substring(5).split("/");
+                        return new EntityReference({ id, path });
+                    }
+                    if (value.startsWith("rel::")) {
+                        const [path, id] = value.substring(5).split("/");
+                        return new EntityRelation(id, path);
+                    }
+                }
+                return value;
+            });
+        } catch (_e) {
+            // ignore
+        }
+    }
+
+    if (typeof parsedFilterVal === "string") {
+        if (parsedFilterVal.startsWith("ref::")) {
+            const [path, id] = parsedFilterVal.substring(5).split("/");
+            return new EntityReference({ id, path });
+        }
+        if (parsedFilterVal.startsWith("rel::")) {
+            const [path, id] = parsedFilterVal.substring(5).split("/");
+            return new EntityRelation(id, path);
+        }
+    }
+    return parsedFilterVal;
+}