Fix #25341 Template Builder error when loading a template (#25359)

* fix form console error * fix ngOnChanges error * fix tests
dotCMS · Jun 27, 2023 · 84216b2 · 84216b2
1 parent fa3ab0c
commit 84216b2
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 25 deletions.
diff --git a/...mplates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.html b/...mplates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.html
@@ -7,7 +7,7 @@
             <dot-template-advanced
                 [didTemplateChanged]="didTemplateChanged"
                 [body]="item.body"
-                (updateTemplate)="updateTemplate.emit($event)"
+                (updateTemplate)="onTemplateItemChange($event)"
                 (save)="save.emit($event)"
                 (cancel)="cancel.emit()"
             ></dot-template-advanced>
@@ -37,7 +37,7 @@
                     [disablePublish]="item.live"
                     [layout]="item.layout"
                     (saveAndPublish)="saveAndPublish.emit($event)"
-                    (updateTemplate)="updateTemplate.emit($event)"
+                    (updateTemplate)="onTemplateItemChange($event)"
                     (save)="save.emit($event)"
                 ></dot-edit-layout-designer>
             </ng-template>

diff --git a/...ates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.spec.ts b/...ates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.spec.ts
@@ -178,6 +178,7 @@ describe('DotTemplateBuilderComponent', () => {
         fixture = TestBed.createComponent(DotTemplateBuilderComponent);
         de = fixture.debugElement;
         component = fixture.componentInstance;
+
         dotPropertiesService = TestBed.inject(DotPropertiesService);
         spyOn(component.save, 'emit');
         spyOn(component.updateTemplate, 'emit');
@@ -347,6 +348,9 @@ describe('DotTemplateBuilderComponent', () => {
                 theme: '123'
             };
             hostFixture.detectChanges();
+            const builder = hostFixture.debugElement.query(
+                By.css('dot-edit-layout-designer')
+            ).componentInstance;
             dotTestHostComponent.builder.historyIframe = {
                 iframeElement: {
                     nativeElement: {
@@ -362,6 +366,9 @@ describe('DotTemplateBuilderComponent', () => {
                 ...EMPTY_TEMPLATE_DESIGN,
                 theme: 'dotcms-123'
             };
+
+            builder.updateTemplate.emit(dotTestHostComponent.item);
+
             hostFixture.detectChanges();
             expect(
                 dotTestHostComponent.builder.historyIframe.iframeElement.nativeElement.contentWindow

diff --git a/...templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.ts b/...templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.ts
@@ -1,12 +1,4 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    ViewChild
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 
 import { IframeComponent } from '@components/_common/iframe/iframe-component';
 import { DotLayout, FeaturedFlags } from '@dotcms/dotcms-models';
@@ -18,7 +10,7 @@ import { DotTemplateItem } from '../store/dot-template.store';
     templateUrl: './dot-template-builder.component.html',
     styleUrls: ['./dot-template-builder.component.scss']
 })
-export class DotTemplateBuilderComponent implements OnInit, OnChanges {
+export class DotTemplateBuilderComponent implements OnInit {
     @Input() item: DotTemplateItem;
     @Input() didTemplateChanged: boolean;
     @Output() saveAndPublish = new EventEmitter<DotTemplateItem>();
@@ -36,12 +28,6 @@ export class DotTemplateBuilderComponent implements OnInit, OnChanges {
         this.historyUrl = `/html/templates/push_history.jsp?templateId=${this.item.identifier}&popup=true`;
     }
 
-    ngOnChanges(): void {
-        if (this.historyIframe) {
-            this.historyIframe.iframeElement.nativeElement.contentWindow.location.reload();
-        }
-    }
-
     /**
      * Update template and publish it
      *
@@ -53,5 +39,22 @@ export class DotTemplateBuilderComponent implements OnInit, OnChanges {
             ...this.item,
             layout
         } as DotTemplateItem);
+
+        if (this.historyIframe) {
+            this.historyIframe.iframeElement.nativeElement.contentWindow.location.reload();
+        }
+    }
+
+    /**
+     * Update template and publish it
+     *
+     * @param {DotTemplateItem} item
+     * @memberof DotTemplateBuilderComponent
+     */
+    onTemplateItemChange(item: DotTemplateItem) {
+        this.updateTemplate.emit(item);
+        if (this.historyIframe) {
+            this.historyIframe.iframeElement.nativeElement.contentWindow.location.reload();
+        }
     }
 }
diff --git a/...s/template-builder/src/lib/components/template-builder/template-builder.component.spec.ts b/...s/template-builder/src/lib/components/template-builder/template-builder.component.spec.ts
@@ -77,7 +77,9 @@ describe('TemplateBuilderComponent', () => {
                             location: 'left',
                             width: 'small',
                             containers: []
-                        }
+                        },
+                        width: 'Mobile',
+                        title: 'Test Title'
                     },
                     containerMap: CONTAINER_MAP_MOCK
                 }
@@ -208,11 +210,9 @@ describe('TemplateBuilderComponent', () => {
                     body: FULL_DATA_MOCK,
                     header: true,
                     footer: true,
-                    sidebar: {
-                        location: 'left',
-                        width: 'small',
-                        containers: []
-                    }
+                    sidebar: null,
+                    width: 'Mobile',
+                    title: 'Test Title'
                 });
                 done();
             });

diff --git a/...b/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts b/...b/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts
@@ -126,7 +126,9 @@ export class TemplateBuilderComponent implements OnInit, AfterViewInit, OnDestro
                         sidebar: layoutProperties?.sidebar?.location?.length // Make it null if it's empty so it doesn't get saved
                             ? layoutProperties.sidebar
                             : null,
-                        body: items as DotLayoutBody
+                        body: items as DotLayoutBody,
+                        title: this.templateLayout?.title ?? '',
+                        width: this.templateLayout?.width ?? ''
                     });
                 })
             )