@firecms/collection_editor 3.3.0-canary.d3242eb → 3.4.0-canary.00f9be5

package/src/ui/collection_editor/DisplaySettingsForm.tsx

@@ -72,6 +72,34 @@ export function DisplaySettingsForm({
         return result;
     }, [resolvedCollection.properties]);
 
+    // Get image properties (for imageProperty), used as the thumbnail in Cards/Kanban views
+    const imageProperties = useMemo(() => {
+        const result: { key: string; label: string; property: Property; }[] = [];
+        if (!resolvedCollection.properties) return result;
+
+        const isImageProperty = (prop: any): boolean => {
+            if (!prop || !("dataType" in prop)) return false;
+            if (prop.dataType === "string") {
+                return Boolean(prop.storage?.acceptedFiles?.includes("image/*")) || prop.url === "image";
+            }
+            if (prop.dataType === "array" && prop.of) {
+                return isImageProperty(prop.of);
+            }
+            return false;
+        };
+
+        Object.entries(resolvedCollection.properties).forEach(([key, prop]) => {
+            if (isImageProperty(prop)) {
+                result.push({
+                    key,
+                    label: (prop as Property).name || key,
+                    property: prop as Property
+                });
+            }
+        });
+        return result;
+    }, [resolvedCollection.properties]);
+
     const showErrors = submitCount > 0;
 
     // Document ID generation value
@@ -246,6 +274,83 @@ export function DisplaySettingsForm({
                         })()}
                     </div>
 
+                    {/* Image Property (used as thumbnail in Cards/Kanban views) */}
+                    <div className={"col-span-12 mt-4"}>
+                        {(() => {
+                            const imagePropertyMissing = Boolean(values.imageProperty) &&
+                                !imageProperties.some(p => p.key === values.imageProperty);
+
+                            return (
+                                <>
+                                    <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>{t("image_property")}</Typography>
+                                    <Select
+                                        key={`image-select-${imageProperties.length}`}
+                                        name="imageProperty"
+                                        size={"large"}
+                                        fullWidth={true}
+                                        position={"item-aligned"}
+                                        disabled={imageProperties.length === 0}
+                                        error={imagePropertyMissing}
+                                        value={(values.imageProperty as string) ?? ""}
+                                        onValueChange={(v) => {
+                                            setFieldValue("imageProperty", v || undefined);
+                                        }}
+                                        renderValue={(value) => {
+                                            if (imagePropertyMissing) {
+                                                return <span className="text-red-500">{value} ({t("not_found_suffix")})</span>;
+                                            }
+                                            const prop = imageProperties.find(p => p.key === value);
+                                            if (!prop) return t("select_a_property");
+                                            const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                                            return (
+                                                <div className="flex items-center gap-2">
+                                                    <PropertyConfigBadge propertyConfig={fieldConfig} />
+                                                    <span>{prop.label}</span>
+                                                </div>
+                                            );
+                                        }}
+                                        endAdornment={values.imageProperty ? (
+                                            <IconButton
+                                                size="small"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    setFieldValue("imageProperty", undefined);
+                                                }}
+                                            >
+                                                <CloseIcon size="small" />
+                                            </IconButton>
+                                        ) : undefined}
+                                    >
+                                        {imageProperties.map((prop) => {
+                                            const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                                            return (
+                                                <SelectItem key={prop.key} value={prop.key}>
+                                                    <div className="flex items-center gap-3">
+                                                        <PropertyConfigBadge propertyConfig={fieldConfig} />
+                                                        <div>
+                                                            <div>{prop.label}</div>
+                                                            <Typography variant="caption" color="secondary">
+                                                                {fieldConfig?.name || prop.label}
+                                                            </Typography>
+                                                        </div>
+                                                    </div>
+                                                </SelectItem>
+                                            );
+                                        })}
+                                    </Select>
+                                    <FieldCaption error={imagePropertyMissing}>
+                                        {imagePropertyMissing
+                                            ? t("image_property_not_found", { property: values.imageProperty as string ?? "" })
+                                            : imageProperties.length === 0
+                                                ? t("no_image_properties")
+                                                : t("image_property_description")
+                                        }
+                                    </FieldCaption>
+                                </>
+                            );
+                        })()}
+                    </div>
+
                     {/* Default row size */}
                     <div className={"col-span-12"}>
                         <Select

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -498,13 +498,11 @@ function PropertyEditFormFields({
             showErrors={showErrors} />;
     } else if (selectedFieldConfigId === "file_upload") {
         childComponent =
-            <StoragePropertyField existing={existing}
-                multiple={false}
+            <StoragePropertyField multiple={false}
                 disabled={disabled} />;
     } else if (selectedFieldConfigId === "multi_file_upload") {
         childComponent =
-            <StoragePropertyField existing={existing}
-                multiple={true}
+            <StoragePropertyField multiple={true}
                 disabled={disabled} />;
     } else if (selectedFieldConfigId === "switch") {
         childComponent = <BooleanPropertyField disabled={disabled} />;

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

@@ -20,11 +20,9 @@ import { useTranslation } from "@firecms/core";
 
 export function StoragePropertyField({
                                          multiple,
-                                         existing,
                                          disabled
                                      }: {
     multiple: boolean;
-    existing: boolean;
     disabled: boolean;
 }) {
 
@@ -179,7 +177,7 @@ export function StoragePropertyField({
                                   }: FormexFieldProps) => {
                                     return <SwitchControl
                                         label={t("include_bucket_url")}
-                                        disabled={existing || disabled}
+                                        disabled={disabled}
                                         form={form}
                                         field={field}/>;
                                 }}
@@ -197,7 +195,7 @@ export function StoragePropertyField({
                                   }: FormexFieldProps) => {
                                     return <SwitchControl
                                         label={t("save_url_instead_of_path")}
-                                        disabled={existing || disabled}
+                                        disabled={disabled}
                                         form={form}
                                         field={field}/>;
                                 }}

package/src/useCollectionEditorPlugin.tsx

@@ -19,12 +19,6 @@ import { EditorEntityAction } from "./ui/EditorEntityAction";
 import { KanbanSetupAction } from "./ui/KanbanSetupAction";
 import { AddKanbanColumnAction } from "./ui/AddKanbanColumnAction";
 import { collectionEditorTranslationsEn } from "./locales/en";
-import { collectionEditorTranslationsEs } from "./locales/es";
-import { collectionEditorTranslationsDe } from "./locales/de";
-import { collectionEditorTranslationsFr } from "./locales/fr";
-import { collectionEditorTranslationsIt } from "./locales/it";
-import { collectionEditorTranslationsHi } from "./locales/hi";
-import { collectionEditorTranslationsPt } from "./locales/pt";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
 
@@ -139,13 +133,16 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
             ActionsTop: EditorEntityAction,
         },
         i18n: {
+        // Only English is bundled; the rest load when that language is selected.
+        // Seven languages of strings in every plugin bundle is dead weight for
+        // the six nobody is reading.
             en: collectionEditorTranslationsEn,
-            es: collectionEditorTranslationsEs,
-            de: collectionEditorTranslationsDe,
-            fr: collectionEditorTranslationsFr,
-            it: collectionEditorTranslationsIt,
-            hi: collectionEditorTranslationsHi,
-            pt: collectionEditorTranslationsPt
+            es: () => import("./locales/es").then((m) => m.collectionEditorTranslationsEs),
+            de: () => import("./locales/de").then((m) => m.collectionEditorTranslationsDe),
+            fr: () => import("./locales/fr").then((m) => m.collectionEditorTranslationsFr),
+            it: () => import("./locales/it").then((m) => m.collectionEditorTranslationsIt),
+            hi: () => import("./locales/hi").then((m) => m.collectionEditorTranslationsHi),
+            pt: () => import("./locales/pt").then((m) => m.collectionEditorTranslationsPt)
         }
     };
 }