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

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.2",
+  "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.2",
-    "@firecms/data_import": "^3.0.0-rc.2",
-    "@firecms/data_import_export": "^3.0.0-rc.2",
-    "@firecms/formex": "^3.0.0-rc.2",
-    "@firecms/schema_inference": "^3.0.0-rc.2",
-    "@firecms/ui": "^3.0.0-rc.2",
+    "@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": "6295de2d801a3d2cddaa958fd66cb041dd2c240e"
+  "gitHead": "213f4c106eb3e6639eb1ad23c7d94282ef54d444"
 }

package/src/ConfigControllerProvider.tsx

@@ -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/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/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,
@@ -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>}
 

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -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}
@@ -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/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/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/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);
     }
 }