fix(edit-content): Adding multiple binary fields in Content Type brea…

…ks the model #27523 (#27533) * dev: fix registered dojo id error * dev: fix DotContentletThumbnail Web Component * clean up --------- Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com>
dotCMS · Feb 7, 2024 · 93e976d · 93e976d
1 parent 961dfb7
commit 93e976d
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 25 deletions.
diff --git a/core-web/libs/dotcms-webcomponents/src/components.d.ts b/core-web/libs/dotcms-webcomponents/src/components.d.ts
@@ -350,6 +350,7 @@ export namespace Components {
         "alt": string;
         "contentlet": DotContentletItem;
         "cover": boolean;
+        "fieldVariable": string;
         "height": string;
         "iconSize": string;
         "playableVideo": boolean;
@@ -1126,6 +1127,11 @@ export namespace Components {
           * @memberof DotVideoThumbnail
          */
         "playable": boolean;
+        /**
+          * @type {string}
+          * @memberof variable
+         */
+        "variable": string;
     }
     interface KeyValueForm {
         /**
@@ -2001,6 +2007,7 @@ declare namespace LocalJSX {
         "alt"?: string;
         "contentlet"?: DotContentletItem;
         "cover"?: boolean;
+        "fieldVariable"?: string;
         "height"?: string;
         "iconSize"?: string;
         "playableVideo"?: boolean;
@@ -2758,6 +2765,11 @@ declare namespace LocalJSX {
           * @memberof DotVideoThumbnail
          */
         "playable"?: boolean;
+        /**
+          * @type {string}
+          * @memberof variable
+         */
+        "variable"?: string;
     }
     interface KeyValueForm {
         /**

diff --git a/...s/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx b/...s/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx
@@ -30,6 +30,9 @@ export class DotContentletThumbnail {
     @Prop()
     contentlet: DotContentletItem;
 
+    @Prop({ reflect: true })
+    fieldVariable = '';
+
     @State() renderImage: boolean;
 
     componentWillLoad() {
@@ -54,6 +57,7 @@ export class DotContentletThumbnail {
                 {this.shouldShowVideoThumbnail() ? (
                     <dot-video-thumbnail
                         contentlet={this.contentlet}
+                        variable={this.fieldVariable}
                         cover={this.cover}
                         playable={this.playableVideo}
                     />
@@ -79,12 +83,22 @@ export class DotContentletThumbnail {
 
     private getImageURL(): string {
         return this.contentlet.mimeType === 'application/pdf'
-            ? `/contentAsset/image/${this.contentlet.inode}/${this.contentlet.titleImage}/pdf_page/1/resize_w/250/quality_q/45`
-            : `/dA/${this.contentlet.inode}/500w/50q?r=${
+            ? `/contentAsset/image/${this.contentlet.inode}/${
+                  this.fieldVariable || this.contentlet.titleImage
+              }/pdf_page/1/resize_w/250/quality_q/45`
+            : `/dA/${this.contentlet.inode}/${this.fieldVariablePath()}500w/50q?r=${
                   this.contentlet.modDateMilis || this.contentlet.modDate
               }`;
     }
 
+    private fieldVariablePath(): string {
+        if (!this.fieldVariable) {
+            return '';
+        }
+
+        return `${this.fieldVariable || this.contentlet.titleImage}/`;
+    }
+
     private switchToIcon(): any {
         this.renderImage = false;
     }

diff --git a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md
@@ -2,33 +2,33 @@
 
 <!-- Auto Generated Below -->
 
-
 ## Properties
 
 | Property             | Attribute              | Description | Type                | Default     |
 | -------------------- | ---------------------- | ----------- | ------------------- | ----------- |
 | `alt`                | `alt`                  |             | `string`            | `''`        |
 | `contentlet`         | --                     |             | `DotContentletItem` | `undefined` |
 | `cover`              | `cover`                |             | `boolean`           | `true`      |
+| `fieldVariable`      | `field-variable`       |             | `string`            | `''`        |
 | `height`             | `height`               |             | `string`            | `''`        |
 | `iconSize`           | `icon-size`            |             | `string`            | `''`        |
 | `playableVideo`      | `playable-video`       |             | `boolean`           | `false`     |
 | `showVideoThumbnail` | `show-video-thumbnail` |             | `boolean`           | `true`      |
 | `width`              | `width`                |             | `string`            | `''`        |
 
-
 ## Dependencies
 
 ### Used by
 
- - [dot-card-contentlet](../../components/dot-card-contentlet)
+-   [dot-card-contentlet](../../components/dot-card-contentlet)
 
 ### Depends on
 
-- [dot-video-thumbnail](../dot-video-thumbnail)
-- [dot-contentlet-icon](../dot-contentlet-icon)
+-   [dot-video-thumbnail](../dot-video-thumbnail)
+-   [dot-contentlet-icon](../dot-contentlet-icon)
 
 ### Graph
+
 ```mermaid
 graph TD;
   dot-contentlet-thumbnail --> dot-video-thumbnail
@@ -37,6 +37,6 @@ graph TD;
   style dot-contentlet-thumbnail fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
-----------------------------------------------
+---
 
-*Built with [StencilJS](https://stenciljs.com/)*
+_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/core-web/libs/dotcms-webcomponents/src/elements/dot-video-thumbnail/dot-video-thumbnail.tsx b/core-web/libs/dotcms-webcomponents/src/elements/dot-video-thumbnail/dot-video-thumbnail.tsx
@@ -16,6 +16,14 @@ export class DotVideoThumbnail {
      */
     @Prop() contentlet: DotContentletItem;
 
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof variable
+     */
+    @Prop() variable: string;
+
     /**
      * If the video is playable or not.
      *
@@ -40,7 +48,11 @@ export class DotVideoThumbnail {
         return (
             <Host>
                 {this.playable ? (
-                    <video src={`/dA/${this.contentlet.inode}`} controls></video>
+                    <video
+                        src={`/dA/${this.contentlet.inode}/${
+                            this.variable || this.contentlet.titleImage
+                        }`}
+                        controls></video>
                 ) : (
                     this.src && (
                         <div class={`thumbnail ${cssClass}`} style={bgImage}>

diff --git a/core-web/libs/dotcms-webcomponents/src/elements/dot-video-thumbnail/readme.md b/core-web/libs/dotcms-webcomponents/src/elements/dot-video-thumbnail/readme.md
@@ -2,29 +2,29 @@
 
 <!-- Auto Generated Below -->
 
-
 ## Properties
 
 | Property     | Attribute  | Description                      | Type                | Default     |
 | ------------ | ---------- | -------------------------------- | ------------------- | ----------- |
 | `contentlet` | --         |                                  | `DotContentletItem` | `undefined` |
 | `cover`      | `cover`    |                                  | `boolean`           | `true`      |
 | `playable`   | `playable` | If the video is playable or not. | `boolean`           | `false`     |
-
+| `variable`   | `variable` |                                  | `string`            | `undefined` |
 
 ## Dependencies
 
 ### Used by
 
- - [dot-contentlet-thumbnail](../dot-contentlet-thumbnail)
+-   [dot-contentlet-thumbnail](../dot-contentlet-thumbnail)
 
 ### Graph
+
 ```mermaid
 graph TD;
   dot-contentlet-thumbnail --> dot-video-thumbnail
   style dot-video-thumbnail fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
-----------------------------------------------
+---
 
-*Built with [StencilJS](https://stenciljs.com/)*
+_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/...-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.html b/...-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.html
@@ -17,6 +17,7 @@
 
             <ng-template #contentletThumbnail>
                 <dot-contentlet-thumbnail
+                    [fieldVariable]="contentlet.fieldVariable"
                     [iconSize]="'48px'"
                     [cover]="false"
                     [contentlet]="contentlet"

diff --git a/...nary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.spec.ts b/...nary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.spec.ts
@@ -42,7 +42,10 @@ describe('DotBinaryFieldPreviewComponent', () => {
 
     it('should show contentlet thumbnail', () => {
         spectator.detectChanges();
-        expect(spectator.query(byTestId('contentlet-thumbnail'))).toBeTruthy();
+        const thumbnail = spectator.query(byTestId('contentlet-thumbnail')) as Element;
+        expect(thumbnail).toBeTruthy();
+        expect(thumbnail['fieldVariable']).toBe(CONTENTLET_MOCK.fieldVariable);
+        expect(thumbnail['contentlet']).toEqual(CONTENTLET_MOCK);
     });
 
     it('should show temp file thumbnail', () => {

diff --git a/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp b/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp
@@ -734,13 +734,13 @@
                 %>
 
 
-            <div id="confirmReplaceNameDialog" dojoType="dijit.Dialog" >
-                <div dojoType="dijit.layout.ContentPane" style="text-align:center;height:auto;" class="box" hasShadow="true" id="confirmReplaceNameDialogCP">
+            <div id="confirmReplaceNameDialog-<%=field.getVelocityVarName()%>" dojoType="dijit.Dialog" >
+                <div dojoType="dijit.layout.ContentPane" style="text-align:center;height:auto;" class="box" hasShadow="true" id="confirmReplaceNameDialog-<%=field.getVelocityVarName()%>CP">
                     <p style="margin:0;max-width:600px;word-wrap: break-word">
                         <%= LanguageUtil.get(pageContext, "Do-you-want-to-replace-the-existing-asset-name") %> 
-                        "<span id="confirmReplaceNameDialog-oldValue"> </span>" 
+                        "<span id="confirmReplaceNameDialog-<%=field.getVelocityVarName()%>-oldValue"> </span>" 
                         <%= LanguageUtil.get(pageContext, "with") %>  
-                        "<span id="confirmReplaceNameDialog-newValue"></span>""
+                        "<span id="confirmReplaceNameDialog-<%=field.getVelocityVarName()%>-newValue"></span>""
                         <br>&nbsp;<br>
                     </p>
                     <div class="buttonRow">
@@ -765,11 +765,11 @@
 
                     titleField?.setValue(newFileName);
                     fileNameField?.setValue(newFileName);
-                    dijit.byId("confirmReplaceNameDialog").hide();
+                    dijit.byId("confirmReplaceNameDialog-<%=field.getVelocityVarName()%>").hide();
                 }
                 
                 function closeConfirmReplaceName(){
-                    dijit.byId("confirmReplaceNameDialog").hide();
+                    dijit.byId("confirmReplaceNameDialog-<%=field.getVelocityVarName()%>").hide();
                 }
             </script>
             <script>
@@ -837,9 +837,9 @@
                                 }
     
                                 if(fileNameField.value && fileName && fileNameField.value !== fileName) {
-                                    document.getElementById("confirmReplaceNameDialog-oldValue").innerHTML = fileNameField.value;
-                                    document.getElementById("confirmReplaceNameDialog-newValue").innerHTML = fileName;
-                                    dijit.byId("confirmReplaceNameDialog").show();
+                                    document.getElementById("confirmReplaceNameDialog-<%=field.getVelocityVarName()%>-oldValue").innerHTML = fileNameField.value;
+                                    document.getElementById("confirmReplaceNameDialog-<%=field.getVelocityVarName()%>-newValue").innerHTML = fileName;
+                                    dijit.byId("confirmReplaceNameDialog-<%=field.getVelocityVarName()%>").show();
                                 }
 
                                 if(!fileNameField.value){