@firecms/core 3.0.0-canary.170 → 3.0.0-canary.172

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.170",
+  "version": "3.0.0-canary.172",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.170",
-    "@firecms/formex": "^3.0.0-canary.170",
-    "@firecms/ui": "^3.0.0-canary.170",
+    "@firecms/editor": "^3.0.0-canary.172",
+    "@firecms/formex": "^3.0.0-canary.172",
+    "@firecms/ui": "^3.0.0-canary.172",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.2",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "21c8b5f6236a1824f5896b69bb4810c05326c5c7",
+  "gitHead": "538f682b9f89bfd08db9891b57cb71f618f4764b",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ArrayContainer.tsx

@@ -239,7 +239,7 @@ export function ArrayContainer<T>({
                                     variant={"text"}
                                     size={size === "small" ? "small" : "medium"}
                                     color="primary"
-                                    disabled={disabled || value.length >= max}
+                                    disabled={disabled || value?.length >= max}
                                     startIcon={<AddIcon/>}
                                     onClick={insertInEnd}>
                                     {addLabel ?? "Add"}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -262,7 +262,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         fullPath,
         collection,
         entitiesDisplayedFirst,
-        forceFilter
+        forceFilter,
+        updateUrl: false,
     });
 
     const {

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -35,12 +35,10 @@ const operationLabels = {
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
 export function ReferenceFilterField({
-                                         name,
                                          value,
                                          setValue,
                                          isArray,
                                          path,
-                                         title,
                                          includeId = true,
                                          previewProperties,
                                          setHidden
@@ -50,9 +48,11 @@ export function ReferenceFilterField({
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
-    isArray
-        ? possibleOperations.push("array-contains-any")
-        : possibleOperations.push("in", "not-in");
+    if (isArray) {
+        possibleOperations.push("array-contains-any");
+    } else {
+        possibleOperations.push("in", "not-in");
+    }
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
@@ -144,7 +144,7 @@ export function ReferenceFilterField({
 
     return (
 
-        <div className="flex w-[440px] flex-row">
+        <div className="flex w-[480px] flex-row">
             <div className="w-[140px]">
                 <Select value={operation}
                         size={"large"}
@@ -161,7 +161,7 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full gap-2 flex flex-col">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col w-[340px]">
 
                 {internalValue && Array.isArray(internalValue) && <div>
                     {internalValue.map((ref, index) => buildEntry(ref))}

package/src/components/common/useDataSourceTableController.tsx

@@ -5,6 +5,7 @@ import { useDataOrder } from "../../hooks/data/useDataOrder";
 import {
     Entity,
     EntityCollection,
+    EntityReference,
     EntityTableController,
     FilterValues,
     FireCMSContext,
@@ -128,11 +129,11 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     }, [initialSort, forceFilter]);
 
     const {
-        filterValues: initialFilteUrl,
+        filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
     } = parseFilterAndSort(window.location.search);
 
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilteUrl ?? initialFilter ?? undefined);
+    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortUrl ?? initialSortInternal);
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
@@ -302,7 +303,7 @@ function useUpdateUrl<M extends Record<string, any> = any>(
     }, [filterValues, sortBy, searchString, updateUrl]);
 }
 
-function encodeFilterAndSort(filterValues?: FilterValues<string> | undefined, sortBy?: [string, "asc" | "desc"] | undefined) {
+function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [string, "asc" | "desc"] | undefined) {
     const entries: Record<string, string> = {};
     if (sortBy) {
         entries["__sort"] = encodeURIComponent(sortBy[0]);
@@ -311,8 +312,30 @@ function encodeFilterAndSort(filterValues?: FilterValues<string> | undefined, so
     if (filterValues) {
         Object.entries(filterValues).forEach(([key, value]) => {
             if (value) {
-                entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(value[0]);
-                entries[encodeURIComponent(`${key}_value`)] = encodeURIComponent(value[1]);
+                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, (key, value) => {
+                                if (value instanceof EntityReference) {
+                                    return encodeRef(value);
+                                }
+                                return value;
+                            });
+                        } else if (val instanceof EntityReference) {
+                            encodedValue = encodeRef(val);
+                        }
+                    }
+                } catch (e) {
+                    encodedValue = val;
+                }
+                if (encodedValue !== undefined) {
+                    entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
+                    entries[encodeURIComponent(`${key}_value`)] = encodeURIComponent(encodedValue.toString());
+                }
             }
         });
     }
@@ -331,10 +354,14 @@ function parseFilterAndSort<M>(search: string): {
     let sortBy: [string, "asc" | "desc"] | undefined = undefined;
     entries.forEach((value, key) => {
         if (key === "__sort") {
-            sortBy = [value, entries.get("__sort_order") as "asc" | "desc"];
+            sortBy = [decodeURIComponent(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];
+            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)];
+            }
         }
     });
 
@@ -343,3 +370,51 @@ function parseFilterAndSort<M>(search: string): {
         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 encodeRef(val: EntityReference) {
+    return `ref::${val.path}/${val.id}`;
+}
+
+function decodeString(val: string): EntityReference | 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" && value.startsWith("ref::")) {
+                    const [path, id] = value.substring(5).split("/");
+                    return new EntityReference(id, path);
+                }
+                return value;
+            });
+        } catch (e) {
+            // ignore
+        }
+    }
+
+    if (typeof parsedFilterVal === "string" && parsedFilterVal.startsWith("ref::")) {
+        const [path, id] = parsedFilterVal.substring(5).split("/");
+        return new EntityReference(id, path);
+    }
+    return parsedFilterVal;
+}

package/src/routes/FireCMSRoute.tsx

@@ -211,9 +211,11 @@ function EntityFullScreenRoute({
             selectedTab={selectedTab ?? undefined}
             onValuesModified={(modified) => blocked.current = modified}
             onSaved={(params) => {
+                console.log("EntityEditView Saved", params);
                 updateUrl(params.entityId, params.selectedTab, true, params.path, isNew);
             }}
             onTabChange={(params) => {
+                console.log("EntityEditView onTabChange", params);
                 updateUrl(params.entityId, params.selectedTab, !isNew, params.path, isNew);
                 setSelectedTab(params.selectedTab);
             }}