diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.html index ba5cd49e0571..1713ac204c36 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.html +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.html @@ -7,7 +7,7 @@ @@ -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)" > diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.spec.ts index 8a9df53a11ff..cc6b207cdd5a 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.spec.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/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/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.ts index f27778631592..e4af4ec3e658 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-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(); @@ -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/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.spec.ts b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.spec.ts index cd0b6fced356..b4b1ad9ffb69 100644 --- a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.spec.ts +++ b/core-web/libs/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/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts index f89f14f04149..e830ff2c6234 100644 --- a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.ts +++ b/core-web/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 ?? '' }); }) )