@firecms/collection_editor 3.0.0-rc.1 → 3.0.0-rc.3

package/dist/types/collection_inference.d.ts

@@ -2,4 +2,4 @@ import { EntityCollection } from "@firecms/core";
 /**
  * This function is used to infer the configuration of a collection given its path.
  */
-export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[]) => Promise<Partial<EntityCollection> | null>;
+export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[], databaseId?: string) => Promise<Partial<EntityCollection> | null>;

package/dist/ui/collection_editor/properties/StringPropertyField.d.ts

@@ -1,5 +1,5 @@
 export declare function StringPropertyField({ widgetId, disabled, showErrors }: {
-    widgetId: "text_field" | "multiline" | "email";
+    widgetId: "text_field" | "multiline" | "email" | "user_select";
     disabled: boolean;
     showErrors: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/utils/entities.d.ts

@@ -1,3 +1,3 @@
 import { Properties, PropertiesOrBuilders, PropertyOrBuilder } from "@firecms/core";
-export declare function editableProperty(property: PropertyOrBuilder | PropertyOrBuilder): boolean;
+export declare function editableProperty(property: PropertyOrBuilder): boolean;
 export declare function removeNonEditableProperties(properties: PropertiesOrBuilders<any>): Properties;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.3",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-rc.1",
-    "@firecms/data_import": "^3.0.0-rc.1",
-    "@firecms/data_import_export": "^3.0.0-rc.1",
-    "@firecms/formex": "^3.0.0-rc.1",
-    "@firecms/schema_inference": "^3.0.0-rc.1",
-    "@firecms/ui": "^3.0.0-rc.1",
+    "@firecms/data_export": "^3.0.0-rc.3",
+    "@firecms/data_import": "^3.0.0-rc.3",
+    "@firecms/data_import_export": "^3.0.0-rc.3",
+    "@firecms/formex": "^3.0.0-rc.3",
+    "@firecms/schema_inference": "^3.0.0-rc.3",
+    "@firecms/ui": "^3.0.0-rc.3",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.1"
   },
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e91ae67d24262a9b944550abaae626f182688aa1"
+  "gitHead": "213f4c106eb3e6639eb1ad23c7d94282ef54d444"
 }

package/src/ConfigControllerProvider.tsx

@@ -49,7 +49,7 @@ export interface ConfigControllerProviderProps {
         icon: React.ReactNode
     };
 
-    getUser?: (uid: string) => User | null
+    getUser?: (uid: string) => User | null;
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
 
@@ -174,7 +174,7 @@ export const ConfigControllerProvider = React.memo(
                 currentPropertiesOrder,
                 editedCollectionId,
                 parentCollectionIds,
-                collectionEditable: collection?.editable ?? false,
+                collectionEditable: collection?.editable === undefined || collection?.editable === true,
                 existingEntities
             });
         };

package/src/types/collection_inference.ts

@@ -3,4 +3,4 @@ import { EntityCollection } from "@firecms/core";
 /**
  * This function is used to infer the configuration of a collection given its path.
  */
-export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[]) => Promise<Partial<EntityCollection> | null>;
+export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[], databaseId?:string) => Promise<Partial<EntityCollection> | null>;

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -356,6 +356,19 @@ export function CollectionDetailsForm({
                                     </FieldCaption>
                                 </div>
 
+                                <div className={"col-span-12"}>
+                                    <BooleanSwitchWithLabel
+                                        position={"start"}
+                                        size={"large"}
+                                        label={values.inlineEditing === undefined || values.inlineEditing ? "Data can be edited directly in the table view" : "Data can be edited only  in the form view"}
+                                        onValueChange={(v) => setFieldValue("inlineEditing", v)}
+                                        value={values.inlineEditing === undefined ? true : values.inlineEditing}
+                                    />
+                                    <FieldCaption>
+                                        Allow editing data directly in the table view, without opening the form view.
+                                    </FieldCaption>
+                                </div>
+
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -329,7 +329,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
     const doCollectionInference = collectionInference ? (collection: PersistedCollection<any>) => {
         if (!collectionInference) return undefined;
-        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentPaths ?? []);
+        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentPaths ?? [], collection.databaseId);
     } : undefined;
 
     const inferCollectionFromData = async (newCollection: PersistedCollection<M>) => {

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -255,14 +255,6 @@ export function CollectionPropertiesEditorForm({
             setFieldTouched(previousPropertyPath, false, false);
         }
 
-        console.debug("onPropertyChanged", {
-            id,
-            property,
-            previousId,
-            namespace,
-            propertyPath
-        })
-
         if (propertyPath) {
             setFieldValue(propertyPath, property, false);
             setFieldTouched(propertyPath, true, false);

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -119,7 +119,7 @@ export const PropertyForm = React.memo(
             name: ""
         } as PropertyWithId;
 
-        const disabled = (Boolean(property && !editableProperty(property)) && !collectionEditable);
+        const disabled = (Boolean(property && !editableProperty(property)) || !collectionEditable);
 
         const lastSubmittedProperty = useRef<OnPropertyChangedParams | undefined>(property ? {
             id: propertyKey,
@@ -150,7 +150,6 @@ export const PropertyForm = React.memo(
             validateOnChange: true,
             validateOnInitialRender: true,
             onSubmit: (newPropertyWithId, controller) => {
-                console.debug("onSubmit", newPropertyWithId);
                 const {
                     id,
                     ...property
@@ -401,6 +400,7 @@ function PropertyEditFormFields({
     let childComponent;
     if (selectedFieldConfigId === "text_field" ||
         selectedFieldConfigId === "multiline" ||
+        selectedFieldConfigId === "user_select" ||
         selectedFieldConfigId === "email") {
         childComponent =
             <StringPropertyField widgetId={selectedFieldConfigId}
@@ -499,7 +499,7 @@ function PropertyEditFormFields({
                 <Typography>This property can&apos;t be edited</Typography>
                 <Typography variant={"caption"}>
                     You may not have permission to
-                    edit it or it is defined in code with no <code>editable</code> flag
+                    edit it or it is defined in code with the <code>editable</code> flag set to <code>false</code>.
                 </Typography>
             </InfoLabel>}
 
@@ -605,6 +605,7 @@ const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
     url: "Text",
     email: "Text",
     switch: "Boolean",
+    user_select: "Users",
     select: "Select",
     multi_select: "Select",
     number_input: "Number",
@@ -786,6 +787,7 @@ export function WidgetSelectViewItem({
                         <WarningIcon size="smallest" className={"w-4"}/>
                     </Tooltip>}
                     <Typography
+                        variant={"label"}
                         color={shouldWarnChangingDataType ? "secondary" : undefined}>{propertyConfig.name}</Typography>
                 </div>
 

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -69,7 +69,7 @@ export function PropertyFieldPreview({
 
                     {includeName &&
                         <ErrorBoundary>
-                            <Typography variant="body1"
+                            <Typography variant="label"
                                         component="span"
                                         className="flex-grow pr-2">
                                 {property.name
@@ -82,7 +82,7 @@ export function PropertyFieldPreview({
                     <div className="flex flex-row items-center">
                         <ErrorBoundary>
                             <Typography className="flex-grow pr-2"
-                                        variant={includeName ? "body2" : "subtitle1"}
+                                        variant={includeName ? "body2" : "label"}
                                         component="span"
                                         color="secondary">
                                 {propertyConfig?.name}
@@ -131,8 +131,8 @@ export function NonEditablePropertyPreview({
             <div className={"relative m-4"}>
                 {propertyConfig && <PropertyConfigBadge propertyConfig={propertyConfig}/>}
                 {!propertyConfig && <div
-                    className={"h-8 w-8 p-1 rounded-full shadow text-white bg-surface-500"}>
-                    <FunctionsIcon color={"inherit"} size={"medium"}/>
+                    className={"h-8 w-8 flex items-center justify-center rounded-full shadow text-white bg-surface-500"}>
+                    <FunctionsIcon color={"inherit"} size={"small"}/>
                 </div>}
                 <DoNotDisturbOnIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
             </div>
@@ -147,7 +147,7 @@ export function NonEditablePropertyPreview({
             >
 
                 <div className="w-full flex flex-col">
-                    <Typography variant="body1"
+                    <Typography variant="label"
                                 component="span"
                                 className="flex-grow pr-2">
                         {property?.name

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -26,7 +26,7 @@ export function UnsavedChangesDialog({
         >
 
             <DialogTitle>{title ?? "Unsaved changes"}</DialogTitle>
-            <DialogContent>
+            <DialogContent className={"mt-4"}>
                 {body && <Typography>
                     {body}
                 </Typography>}

package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx

@@ -4,6 +4,7 @@ import {
     EntityCollectionTable,
     Properties,
     useAuthController,
+    useNavigationController,
     useSelectionController
 } from "@firecms/core";
 import { useEffect, useState } from "react";
@@ -20,11 +21,18 @@ export function CollectionEditorImportDataPreview({
 }) {
 
     const authController = useAuthController();
+    const navigation = useNavigationController();
     const [loading, setLoading] = useState<boolean>(false);
 
     async function loadEntities() {
-        // const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties, importConfig.headersMapping);
-        const mappedData = importConfig.importData.map(d => convertDataToEntity(authController, d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(authController,
+            navigation,
+            d,
+            importConfig.idColumn,
+            importConfig.headersMapping,
+            properties,
+            "TEMP_PATH",
+            importConfig.defaultValues));
         importConfig.setEntities(mappedData);
     }
 

package/src/ui/collection_editor/properties/MarkdownPropertyField.tsx

@@ -57,7 +57,7 @@ export function MarkdownPropertyField({
                         <div className="flex flex-row text-surface-500">
                             <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
-                                        className="ml-2">
+                                        className="ml-4">
                                 File upload config
                             </Typography>
                         </div>

package/src/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -6,6 +6,8 @@ import {
     ExpandablePanel,
     MultiSelect,
     MultiSelectItem,
+    Select,
+    SelectItem,
     Typography
 } from "@firecms/ui";
 
@@ -47,20 +49,31 @@ export function StoragePropertyField({
     const storagePath = `${baseStoragePath}.storagePath`;
     const storeUrl = `${baseStoragePath}.storeUrl`;
 
+    // Image resize config paths
+    const imageResize = `${baseStoragePath}.imageResize`;
+    const imageResizeMaxWidth = `${imageResize}.maxWidth`;
+    const imageResizeMaxHeight = `${imageResize}.maxHeight`;
+    const imageResizeMode = `${imageResize}.mode`;
+    const imageResizeFormat = `${imageResize}.format`;
+    const imageResizeQuality = `${imageResize}.quality`;
+
     const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
     const storagePathValue = getIn(values, storagePath) ?? "/";
     const maxSizeValue = getIn(values, maxSize);
 
+    // Image resize values
+    const imageResizeMaxWidthValue = getIn(values, imageResizeMaxWidth);
+    const imageResizeMaxHeightValue = getIn(values, imageResizeMaxHeight);
+    const imageResizeModeValue = getIn(values, imageResizeMode) ?? "cover";
+    const imageResizeFormatValue = getIn(values, imageResizeFormat) ?? "original";
+    const imageResizeQualityValue = getIn(values, imageResizeQuality);
+
     const storedValue = getIn(values, acceptedFiles);
     const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
     const allFileTypesSelected = !fileTypesValue || fileTypesValue.length === 0;
 
     const handleTypesChange = (value: string[]) => {
         if (!value) setFieldValue(acceptedFiles, undefined);
-        // else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
-        // else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
-        // else if (allFileTypesSelected)
-        //     setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
         else setFieldValue(acceptedFiles, value);
     };
 
@@ -77,7 +90,7 @@ export function StoragePropertyField({
                         <div className="flex flex-row text-surface-500">
                             <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
-                                        className="ml-2">
+                                        className="ml-4">
                                 File upload config
                             </Typography>
                         </div>
@@ -193,6 +206,123 @@ export function StoragePropertyField({
                             />
                         </div>
 
+                        <div className={"col-span-12 mt-4"}>
+                            <Typography variant={"subtitle2"}
+                                        color={"secondary"}
+                                        className={"mb-2 block"}>
+                                Image Resize Configuration
+                            </Typography>
+                            <Typography variant={"caption"} className={"mb-2 block text-xs"}>
+                                Automatically resize and optimize images before upload (JPEG, PNG, WebP only)
+                            </Typography>
+                        </div>
+
+                        <div className={"col-span-6"}>
+                            <DebouncedTextField
+                                name={imageResizeMaxWidth}
+                                type={"number"}
+                                label={"Max width (px)"}
+                                size={"small"}
+                                disabled={disabled}
+                                value={imageResizeMaxWidthValue !== undefined && imageResizeMaxWidthValue !== null ? imageResizeMaxWidthValue.toString() : ""}
+                                onChange={(e) => {
+                                    const value = e.target.value;
+                                    if (value === "") setFieldValue(imageResizeMaxWidth, undefined);
+                                    else setFieldValue(imageResizeMaxWidth, parseInt(value));
+                                }}
+                            />
+                        </div>
+
+                        <div className={"col-span-6"}>
+                            <DebouncedTextField
+                                name={imageResizeMaxHeight}
+                                type={"number"}
+                                label={"Max height (px)"}
+                                size={"small"}
+                                disabled={disabled}
+                                value={imageResizeMaxHeightValue !== undefined && imageResizeMaxHeightValue !== null ? imageResizeMaxHeightValue.toString() : ""}
+                                onChange={(e) => {
+                                    const value = e.target.value;
+                                    if (value === "") setFieldValue(imageResizeMaxHeight, undefined);
+                                    else setFieldValue(imageResizeMaxHeight, parseInt(value));
+                                }}
+                            />
+                        </div>
+
+                        <div className={"col-span-6"}>
+                            <Select
+                                disabled={disabled}
+                                name={imageResizeMode}
+                                fullWidth
+                                size={"medium"}
+                                value={imageResizeModeValue || "cover"}
+                                onValueChange={(value) => setFieldValue(imageResizeMode, value || "cover")}
+                                label={"Resize mode"}
+                                renderValue={(selected) => {
+                                    if (!selected) return "Cover";
+                                    return selected === "contain" ? "Contain (fit within bounds)" : "Cover (fill bounds, may crop)";
+                                }}>
+                                <SelectItem value="contain">
+                                    Contain (fit within bounds)
+                                </SelectItem>
+                                <SelectItem value="cover">
+                                    Cover (fill bounds, may crop)
+                                </SelectItem>
+                            </Select>
+                        </div>
+
+                        <div className={"col-span-6"}>
+                            <Select
+                                disabled={disabled}
+                                size={"medium"}
+                                fullWidth
+                                name={imageResizeFormat}
+                                value={imageResizeFormatValue || "original"}
+                                onValueChange={(value) => setFieldValue(imageResizeFormat, value || "original")}
+                                label={"Output format"}
+                                renderValue={(selected) => {
+                                    if (!selected) return "Original";
+                                    return selected.charAt(0).toUpperCase() + selected.slice(1);
+                                }}>
+                                <SelectItem value="original">
+                                    Original (keep same format)
+                                </SelectItem>
+                                <SelectItem value="jpeg">
+                                    JPEG
+                                </SelectItem>
+                                <SelectItem value="png">
+                                    PNG
+                                </SelectItem>
+                                <SelectItem value="webp">
+                                    WebP (best compression)
+                                </SelectItem>
+                            </Select>
+                        </div>
+
+                        <div className={"col-span-12"}>
+                            <DebouncedTextField
+                                name={imageResizeQuality}
+                                type={"number"}
+                                label={"Quality (0-100)"}
+                                size={"small"}
+                                disabled={disabled}
+                                value={imageResizeQualityValue !== undefined && imageResizeQualityValue !== null ? imageResizeQualityValue.toString() : ""}
+                                onChange={(e) => {
+                                    const value = e.target.value;
+                                    if (value === "") setFieldValue(imageResizeQuality, undefined);
+                                    else {
+                                        const numValue = parseInt(value);
+                                        if (numValue >= 0 && numValue <= 100) {
+                                            setFieldValue(imageResizeQuality, numValue);
+                                        }
+                                    }
+                                }}
+                            />
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                Higher quality = larger file size. Recommended: 80-90 for photos, 90-100 for graphics
+                            </Typography>
+                        </div>
+
                     </div>
                 </ExpandablePanel>
 

package/src/ui/collection_editor/properties/StringPropertyField.tsx

@@ -10,7 +10,7 @@ export function StringPropertyField({
                                         disabled,
                                         showErrors
                                     }: {
-    widgetId: "text_field" | "multiline" | "email";
+    widgetId: "text_field" | "multiline" | "email" | "user_select";
     disabled: boolean;
     showErrors: boolean;
 }) {
@@ -33,6 +33,10 @@ export function StringPropertyField({
                                                   trim={true}
                                                   uppercase={true}
                                                   showErrors={showErrors}/>}
+                    {widgetId === "user_select" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  showErrors={showErrors}/>}
+
                     {widgetId === "multiline" &&
                         <StringPropertyValidation disabled={disabled}
                                                   length={true}

package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -15,7 +15,7 @@ export function ValidationPanel({
                 <div className="flex flex-row text-surface-500">
                     <RuleIcon/>
                     <Typography variant={"subtitle2"}
-                                className="ml-2">
+                                className="ml-4">
                         Validation
                     </Typography>
                 </div>

package/src/ui/collection_editor/utils/supported_fields.tsx

@@ -6,6 +6,7 @@ export const supportedFieldsIds: PropertyConfigId[] = [
     "markdown",
     "url",
     "email",
+    "user_select",
     "select",
     "multi_select",
     "number_input",

package/src/ui/collection_editor/utils/update_property_for_widget.ts

@@ -27,7 +27,24 @@ export function updatePropertyFromWidget(propertyData: any,
                 markdown: undefined,
                 email: undefined,
                 url: undefined,
-                enumValues: undefined
+                enumValues: undefined,
+                userSelect: undefined
+            } satisfies StringProperty
+        );
+    } else if (selectedWidgetId === "user_select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                dataType: "string",
+                propertyConfig: "user_select",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: undefined,
+                enumValues: undefined,
+                userSelect: true
             } satisfies StringProperty
         );
     } else if (selectedWidgetId === "multiline") {
@@ -42,7 +59,8 @@ export function updatePropertyFromWidget(propertyData: any,
                 markdown: undefined,
                 email: undefined,
                 url: undefined,
-                enumValues: undefined
+                enumValues: undefined,
+                userSelect: undefined
             } satisfies StringProperty
         );
     } else if (selectedWidgetId === "markdown") {
@@ -56,7 +74,8 @@ export function updatePropertyFromWidget(propertyData: any,
                 multiline: undefined,
                 markdown: true,
                 email: undefined,
-                url: undefined
+                url: undefined,
+                userSelect: undefined
             } satisfies StringProperty
         );
     } else if (selectedWidgetId === "url") {
@@ -71,7 +90,8 @@ export function updatePropertyFromWidget(propertyData: any,
                 markdown: undefined,
                 email: undefined,
                 url: true,
-                enumValues: undefined
+                enumValues: undefined,
+                userSelect: undefined
             } satisfies StringProperty
         );
     } else if (selectedWidgetId === "email") {
@@ -86,7 +106,8 @@ export function updatePropertyFromWidget(propertyData: any,
                 markdown: undefined,
                 email: true,
                 url: undefined,
-                enumValues: undefined
+                enumValues: undefined,
+                userSelect: undefined
             } satisfies StringProperty
         );
     } else if (selectedWidgetId === "select") {
@@ -101,7 +122,8 @@ export function updatePropertyFromWidget(propertyData: any,
                 markdown: undefined,
                 email: undefined,
                 url: undefined,
-                enumValues: propertyData.enumValues ?? []
+                enumValues: propertyData.enumValues ?? [],
+                userSelect: undefined
             } satisfies StringProperty
         );
     } else if (selectedWidgetId === "multi_select") {

package/src/utils/collections.ts

@@ -1,5 +1,4 @@
 import {
-    EntityCallbacks,
     EntityCollection,
     joinCollectionLists,
     makePropertiesEditable,

package/src/utils/entities.ts

@@ -1,17 +1,14 @@
 import { isPropertyBuilder, Properties, PropertiesOrBuilders, Property, PropertyOrBuilder } from "@firecms/core";
 
-export function editableProperty(property: PropertyOrBuilder | PropertyOrBuilder): boolean {
-    if (isPropertyBuilder(property))
+export function editableProperty(property: PropertyOrBuilder): boolean {
+    if (isPropertyBuilder(property)) {
         return false;
-    if (isPropertyBuilder(property as PropertyOrBuilder))
-        return false;
-    else {
-        const eProperty = property as Property;
-        if (eProperty.dataType === "array" && typeof eProperty.of === "function")
+    } else {
+        if (property.dataType === "array" && typeof property.of === "function")
             return false;
-        else if (eProperty.dataType === "array" && Array.isArray(eProperty.of))
+        else if (property.dataType === "array" && Array.isArray(property.of))
             return false;
-        return Boolean(eProperty.editable);
+        return property.editable === undefined ? true : Boolean(property.editable);
     }
 }