@firecms/collection_editor 3.3.0 → 3.4.0-canary.2575a08

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

@@ -1,6 +1,5 @@
 import React from "react";
-export declare function StoragePropertyField({ multiple, existing, disabled }: {
+export declare function StoragePropertyField({ multiple, disabled }: {
     multiple: boolean;
-    existing: boolean;
     disabled: boolean;
 }): React.JSX.Element;

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.3.0",
+  "version": "3.4.0-canary.2575a08",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.3.0",
-    "@firecms/data_import": "^3.3.0",
-    "@firecms/data_import_export": "^3.3.0",
-    "@firecms/formex": "^3.3.0",
-    "@firecms/schema_inference": "^3.3.0",
-    "@firecms/ui": "^3.3.0",
+    "@firecms/core": "3.4.0-canary.2575a08",
+    "@firecms/data_export": "3.4.0-canary.2575a08",
+    "@firecms/data_import": "3.4.0-canary.2575a08",
+    "@firecms/data_import_export": "3.4.0-canary.2575a08",
+    "@firecms/formex": "3.4.0-canary.2575a08",
+    "@firecms/schema_inference": "3.4.0-canary.2575a08",
+    "@firecms/ui": "3.4.0-canary.2575a08",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.1"
   },

package/src/locales/de.ts

@@ -19,9 +19,9 @@ export const collectionEditorTranslationsDe = {
     storage_placeholder_path: "{path} - Pfad dieser Entität",
     storage_placeholder_rand: "{rand} - Zufallswert zur Vermeidung von Namenskollisionen",
     include_bucket_url: "Bucket-URL (gs://...) im gespeicherten Wert einschließen",
-    include_bucket_url_description: "Aktivieren Sie diese Einstellung, wenn Sie eine vollqualifizierte Speicher-URL (z. B. gs://mein-bucket/pfad/zur/datei) statt nur des Speicherpfads speichern möchten. Diese Einstellung kann nur bei der Erstellung geändert werden.",
+    include_bucket_url_description: "Aktivieren Sie diese Einstellung, wenn Sie eine vollqualifizierte Speicher-URL (z. B. gs://mein-bucket/pfad/zur/datei) statt nur des Speicherpfads speichern möchten. Eine Änderung wirkt sich nur auf neue Uploads aus: Bereits gespeicherte Werte behalten ihr aktuelles Format.",
     save_url_instead_of_path: "URL statt Speicherpfad speichern",
-    save_url_description: "Aktivieren Sie diese Einstellung, wenn Sie bevorzugen, die Download-URL der hochgeladenen Datei statt des Speicherpfads zu speichern. Diese Einstellung kann nur bei der Erstellung geändert werden.",
+    save_url_description: "Aktivieren Sie diese Einstellung, wenn Sie bevorzugen, die Download-URL der hochgeladenen Datei statt des Speicherpfads zu speichern. Eine Änderung wirkt sich nur auf neue Uploads aus: Bereits gespeicherte Werte behalten ihr aktuelles Format.",
     max_size_bytes: "Maximale Größe (in Bytes)",
     image_resize_configuration: "Bildgrößenanpassungs-Konfiguration",
     image_resize_description: "Bilder vor dem Hochladen automatisch anpassen und optimieren (nur JPEG, PNG, WebP)",

package/src/locales/en.ts

@@ -20,9 +20,9 @@ export const collectionEditorTranslationsEn = {
     storage_placeholder_path: "{path} - Path of this entity",
     storage_placeholder_rand: "{rand} - Random value used to avoid name collisions",
     include_bucket_url: "Include bucket URL (gs://...) in saved value",
-    include_bucket_url_description: "Turn this setting on if you want to save a fully-qualified storage URL (e.g. gs://my-bucket/path/to/file) instead of just the storage path. You can only change this prop upon creation.",
+    include_bucket_url_description: "Turn this setting on if you want to save a fully-qualified storage URL (e.g. gs://my-bucket/path/to/file) instead of just the storage path. Changing it only affects new uploads: values already saved keep their current format.",
     save_url_instead_of_path: "Save URL instead of storage path",
-    save_url_description: "Turn this setting on, if you prefer to save the download URL of the uploaded file instead of the storage path. You can only change this prop upon creation.",
+    save_url_description: "Turn this setting on, if you prefer to save the download URL of the uploaded file instead of the storage path. Changing it only affects new uploads: values already saved keep their current format.",
     max_size_bytes: "Max size (in bytes)",
     image_resize_configuration: "Image Resize Configuration",
     image_resize_description: "Automatically resize and optimize images before upload (JPEG, PNG, WebP only)",

package/src/locales/es.ts

@@ -19,9 +19,9 @@ export const collectionEditorTranslationsEs = {
     storage_placeholder_path: "{path} - Ruta de esta entidad",
     storage_placeholder_rand: "{rand} - Valor aleatorio para evitar colisiones de nombres",
     include_bucket_url: "Incluir URL del bucket (gs://...) en el valor guardado",
-    include_bucket_url_description: "Activa esta opción si deseas guardar una URL de almacenamiento completa (ej. gs://mi-bucket/ruta/al/archivo) en lugar de solo la ruta de almacenamiento. Solo puedes cambiar esta opción al crear.",
+    include_bucket_url_description: "Activa esta opción si deseas guardar una URL de almacenamiento completa (ej. gs://mi-bucket/ruta/al/archivo) en lugar de solo la ruta de almacenamiento. Cambiarla solo afecta a las nuevas subidas: los valores ya guardados mantienen su formato actual.",
     save_url_instead_of_path: "Guardar URL en lugar de ruta de almacenamiento",
-    save_url_description: "Activa esta opción si prefieres guardar la URL de descarga del archivo subido en lugar de la ruta de almacenamiento. Solo puedes cambiar esta opción al crear.",
+    save_url_description: "Activa esta opción si prefieres guardar la URL de descarga del archivo subido en lugar de la ruta de almacenamiento. Cambiarla solo afecta a las nuevas subidas: los valores ya guardados mantienen su formato actual.",
     max_size_bytes: "Tamaño máximo (en bytes)",
     image_resize_configuration: "Configuración de redimensionamiento de imagen",
     image_resize_description: "Redimensionar y optimizar imágenes automáticamente antes de subirlas (solo JPEG, PNG, WebP)",

package/src/locales/fr.ts

@@ -19,9 +19,9 @@ export const collectionEditorTranslationsFr = {
     storage_placeholder_path: "{path} - Chemin de cette entité",
     storage_placeholder_rand: "{rand} - Valeur aléatoire pour éviter les conflits de noms",
     include_bucket_url: "Inclure l'URL du bucket (gs://...) dans la valeur enregistrée",
-    include_bucket_url_description: "Activez ce paramètre si vous souhaitez enregistrer une URL de stockage complète (ex. gs://mon-bucket/chemin/vers/fichier) au lieu du simple chemin de stockage. Vous ne pouvez modifier ce paramètre qu'à la création.",
+    include_bucket_url_description: "Activez ce paramètre si vous souhaitez enregistrer une URL de stockage complète (ex. gs://mon-bucket/chemin/vers/fichier) au lieu du simple chemin de stockage. Sa modification n'affecte que les nouveaux envois : les valeurs déjà enregistrées conservent leur format actuel.",
     save_url_instead_of_path: "Enregistrer l'URL au lieu du chemin de stockage",
-    save_url_description: "Activez ce paramètre si vous préférez enregistrer l'URL de téléchargement du fichier plutôt que le chemin de stockage. Vous ne pouvez modifier ce paramètre qu'à la création.",
+    save_url_description: "Activez ce paramètre si vous préférez enregistrer l'URL de téléchargement du fichier plutôt que le chemin de stockage. Sa modification n'affecte que les nouveaux envois : les valeurs déjà enregistrées conservent leur format actuel.",
     max_size_bytes: "Taille maximale (en octets)",
     image_resize_configuration: "Configuration du redimensionnement d'image",
     image_resize_description: "Redimensionner et optimiser automatiquement les images avant le téléchargement (JPEG, PNG, WebP uniquement)",

package/src/locales/hi.ts

@@ -19,9 +19,9 @@ export const collectionEditorTranslationsHi = {
     storage_placeholder_path: "{path} - इस इकाई का पथ",
     storage_placeholder_rand: "{rand} - नाम टकराव से बचने के लिए यादृच्छिक मूल्य",
     include_bucket_url: "सहेजे गए मान में बकेट URL (gs://...) शामिल करें",
-    include_bucket_url_description: "यदि आप केवल स्टोरेज पथ के बजाय पूरी तरह से योग्य स्टोरेज URL (जैसे gs://my-bucket/path/to/file) सहेजना चाहते हैं तो इस सेटिंग को चालू करें। आप इसे केवल निर्माण के समय बदल सकते हैं।",
+    include_bucket_url_description: "यदि आप केवल स्टोरेज पथ के बजाय पूरी तरह से योग्य स्टोरेज URL (जैसे gs://my-bucket/path/to/file) सहेजना चाहते हैं तो इस सेटिंग को चालू करें। इसे बदलने का असर केवल नए अपलोड पर होता है: पहले से सहेजे गए मान अपने मौजूदा प्रारूप में बने रहते हैं।",
     save_url_instead_of_path: "स्टोरेज पथ के बजाय URL सहेजें",
-    save_url_description: "यदि आप स्टोरेज पथ के बजाय अपलोड की गई फ़ाइल का डाउनलोड URL सहेजना पसंद करते हैं तो इस सेटिंग को चालू करें। आप इसे केवल निर्माण के समय बदल सकते हैं।",
+    save_url_description: "यदि आप स्टोरेज पथ के बजाय अपलोड की गई फ़ाइल का डाउनलोड URL सहेजना पसंद करते हैं तो इस सेटिंग को चालू करें। इसे बदलने का असर केवल नए अपलोड पर होता है: पहले से सहेजे गए मान अपने मौजूदा प्रारूप में बने रहते हैं।",
     max_size_bytes: "अधिकतम आकार (बाइट में)",
     image_resize_configuration: "छवि आकार बदलने का कॉन्फ़िगरेशन",
     image_resize_description: "अपलोड से पहले स्वचालित रूप से छवियों का आकार बदलें और अनुकूलित करें (केवल JPEG, PNG, WebP)",

package/src/locales/it.ts

@@ -19,9 +19,9 @@ export const collectionEditorTranslationsIt = {
     storage_placeholder_path: "{path} - Percorso di questa entità",
     storage_placeholder_rand: "{rand} - Valore casuale per evitare conflitti di nomi",
     include_bucket_url: "Includi URL del bucket (gs://...) nel valore salvato",
-    include_bucket_url_description: "Attiva questa impostazione se desideri salvare un URL di archiviazione completo (es. gs://mio-bucket/percorso/al/file) invece del solo percorso di archiviazione. Puoi modificare questa impostazione solo alla creazione.",
+    include_bucket_url_description: "Attiva questa impostazione se desideri salvare un URL di archiviazione completo (es. gs://mio-bucket/percorso/al/file) invece del solo percorso di archiviazione. La modifica influisce solo sui nuovi caricamenti: i valori già salvati mantengono il loro formato attuale.",
     save_url_instead_of_path: "Salva URL invece del percorso di archiviazione",
-    save_url_description: "Attiva questa impostazione se preferisci salvare l'URL di download del file caricato invece del percorso di archiviazione. Puoi modificare questa impostazione solo alla creazione.",
+    save_url_description: "Attiva questa impostazione se preferisci salvare l'URL di download del file caricato invece del percorso di archiviazione. La modifica influisce solo sui nuovi caricamenti: i valori già salvati mantengono il loro formato attuale.",
     max_size_bytes: "Dimensione massima (in byte)",
     image_resize_configuration: "Configurazione ridimensionamento immagine",
     image_resize_description: "Ridimensiona e ottimizza automaticamente le immagini prima del caricamento (solo JPEG, PNG, WebP)",

package/src/locales/pt.ts

@@ -19,9 +19,9 @@ export const collectionEditorTranslationsPt = {
     storage_placeholder_path: "{path} - Caminho desta entidade",
     storage_placeholder_rand: "{rand} - Valor aleatório para evitar colisões de nomes",
     include_bucket_url: "Incluir URL do bucket (gs://...) no valor salvo",
-    include_bucket_url_description: "Ative esta configuração se deseja salvar uma URL de armazenamento completa (ex. gs://meu-bucket/caminho/para/arquivo) em vez de apenas o caminho de armazenamento. Você só pode alterar esta configuração na criação.",
+    include_bucket_url_description: "Ative esta configuração se deseja salvar uma URL de armazenamento completa (ex. gs://meu-bucket/caminho/para/arquivo) em vez de apenas o caminho de armazenamento. Alterá-la afeta apenas os novos envios: os valores já salvos mantêm o formato atual.",
     save_url_instead_of_path: "Salvar URL em vez do caminho de armazenamento",
-    save_url_description: "Ative esta configuração se preferir salvar a URL de download do arquivo enviado em vez do caminho de armazenamento. Você só pode alterar esta configuração na criação.",
+    save_url_description: "Ative esta configuração se preferir salvar a URL de download do arquivo enviado em vez do caminho de armazenamento. Alterá-la afeta apenas os novos envios: os valores já salvos mantêm o formato atual.",
     max_size_bytes: "Tamanho máximo (em bytes)",
     image_resize_configuration: "Configuração de redimensionamento de imagem",
     image_resize_description: "Redimensionar e otimizar imagens automaticamente antes do upload (apenas JPEG, PNG, WebP)",

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -503,7 +503,7 @@ export function CollectionPropertiesEditorForm({
                             !isPropertyBuilder(selectedProperty) &&
                             <PropertyForm
                                 inArray={false}
-                                key={`edit_view_${selectedPropertyIndex}_${generationCounter}`}
+                                key={`edit_view_${selectedPropertyFullId}_${generationCounter}`}
                                 existingProperty={!isNewCollection}
                                 autoUpdateId={false}
                                 allowDataInference={!isNewCollection}
@@ -547,7 +547,7 @@ export function CollectionPropertiesEditorForm({
             {asDialog && <PropertyFormDialog
                 inArray={false}
                 open={selectedPropertyIndex !== undefined}
-                key={`edit_view_${selectedPropertyIndex}_${generationCounter}`}
+                key={`edit_view_${selectedPropertyFullId}_${generationCounter}`}
                 autoUpdateId={!selectedProperty}
                 allowDataInference={!isNewCollection}
                 existingProperty={true}

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