dotCMS/core#21558 Edit Template Properties Modal makes changes get lost

apps/dotcms-ui/src/app/portlets/dot-edit-page/layout/dot-edit-layout/dot-edit-layout.component.html

@@ -2,7 +2,6 @@
 <dot-edit-layout-designer
     (save)="onSave($event)"
     (updateTemplate)="nextUpdateTemplate($event)"
-    [didTemplateChanged]="didTemplateChanged"
     [layout]="pageState.layout"
     [title]="pageState.page.title"
     [theme]="pageState.template.theme"

apps/dotcms-ui/src/app/portlets/dot-edit-page/layout/dot-edit-layout/dot-edit-layout.component.ts

@@ -55,29 +55,7 @@ export class DotEditLayoutComponent implements OnInit, OnDestroy {
                 this.templateContainersCacheService.set(mappedContainers);
             });
 
-        this.updateTemplate
-            .pipe(
-                takeUntil(this.destroy$),
-                debounceTime(10000),
-                filter(() => this.didTemplateChanged),
-                switchMap((layout: DotLayout) => {
-                    this.dotGlobalMessageService.loading(
-                        this.dotMessageService.get('dot.common.message.saving')
-                    );
-
-                    return this.dotPageLayoutService.save(this.pageState.page.identifier, {
-                        ...layout,
-                        title: null
-                    });
-                })
-            )
-            .subscribe(
-                (updatedPage: DotPageRender) => this.handleSuccessSaveTemplate(updatedPage),
-                (err: ResponseView) => this.handleErrorSaveTemplate(err),
-                // On Complete
-                () => (this.didTemplateChanged = false)
-            );
-
+        this.saveTemplateDebounce();
         this.apiLink = `api/v1/page/render${this.pageState.page.pageURI}?language_id=${this.pageState.page.languageId}`;
     }
 
@@ -115,7 +93,43 @@ export class DotEditLayoutComponent implements OnInit, OnDestroy {
             .subscribe(
                 (updatedPage: DotPageRender) => this.handleSuccessSaveTemplate(updatedPage),
                 (err: ResponseView) => this.handleErrorSaveTemplate(err),
-                () => (this.didTemplateChanged = false)
+                () => this.canRouteBeDesativated(true)
+            );
+    }
+
+    /**
+     *  The reason why we are using a Subject [updateTemplate] here is
+     *  because we can not just simply add a debounceTime to the HTTP Request
+     *  we need to reset the time everytime the observable is called.
+     *
+     *  More Information Here:
+     *          - https://stackoverflow.com/questions/35991867/angular-2-using-observable-debounce-with-http-get
+     *          - https://blog.bitsrc.io/3-ways-to-debounce-http-requests-in-angular-c407eb165ada
+     *
+     * @memberof DotEditLayoutComponent
+     */
+    saveTemplateDebounce() {
+        this.updateTemplate
+            .pipe(
+                takeUntil(this.destroy$),
+                debounceTime(10000),
+                filter(() => this.didTemplateChanged),
+                switchMap((layout: DotLayout) => {
+                    this.dotGlobalMessageService.loading(
+                        this.dotMessageService.get('dot.common.message.saving')
+                    );
+
+                    return this.dotPageLayoutService.save(this.pageState.page.identifier, {
+                        ...layout,
+                        title: null
+                    });
+                })
+            )
+            .subscribe(
+                (updatedPage: DotPageRender) => this.handleSuccessSaveTemplate(updatedPage),
+                (err: ResponseView) => this.handleErrorSaveTemplate(err),
+                // On Complete
+                () => this.canRouteBeDesativated(true)
             );
     }
 
@@ -126,7 +140,7 @@ export class DotEditLayoutComponent implements OnInit, OnDestroy {
      * @memberof DotEditLayoutComponent
      */
     nextUpdateTemplate(value: DotLayout) {
-        this.didTemplateChanged = true;
+        this.canRouteBeDesativated(false);
         this.updateTemplate.next(value);
     }
 
@@ -154,11 +168,18 @@ export class DotEditLayoutComponent implements OnInit, OnDestroy {
      */
     private handleErrorSaveTemplate(err: ResponseView) {
         this.dotGlobalMessageService.error(err.response.statusText);
-        this.dotHttpErrorManagerService
-            .handle(new HttpErrorResponse(err.response))
-            .subscribe(() => {
-                this.dotEditLayoutService.changeDesactivateState(true);
-            });
+        this.dotHttpErrorManagerService.handle(new HttpErrorResponse(err.response)).subscribe();
+    }
+
+    /**
+     * Let the user leave the route only when changes have been saved.
+     *
+     * @private
+     * @param {boolean} value
+     * @memberof DotEditLayoutComponent
+     */
+    private canRouteBeDesativated(value: boolean): void {
+        this.dotEditLayoutService.changeDesactivateState(value);
     }
 
     private getRemappedContainers(containers: {

apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.html

@@ -14,7 +14,6 @@
         </ng-container>
         <ng-template #elseBlock>
             <dot-edit-layout-designer
-                [didTemplateChanged]="didTemplateChanged"
                 [theme]="item.theme"
                 [layout]="item.layout"
                 (updateTemplate)="updateTemplate.emit($event)"

apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-builder/dot-template-builder.component.spec.ts

@@ -34,8 +34,6 @@ class DotEditLayoutDesignerMockComponent {
 
     @Input() layout;
 
-    @Input() didTemplateChanged: boolean;
-
     @Output() cancel: EventEmitter<MouseEvent> = new EventEmitter();
 
     @Output() save: EventEmitter<Event> = new EventEmitter();
@@ -147,9 +145,8 @@ describe('DotTemplateBuilderComponent', () => {
         beforeEach(() => {
             component.item = {
                 ...EMPTY_TEMPLATE_DESIGN,
-                theme: '123',
+                theme: '123'
             };
-            component.didTemplateChanged = false;
             fixture.detectChanges();
         });
 
@@ -171,7 +168,6 @@ describe('DotTemplateBuilderComponent', () => {
                 title: '',
                 width: null
             });
-            expect(builder.didTemplateChanged).toBe(false);
         });
 
         it('should not show <dot-template-advanced>', () => {
@@ -194,7 +190,7 @@ describe('DotTemplateBuilderComponent', () => {
         beforeEach(() => {
             component.item = EMPTY_TEMPLATE_ADVANCED;
             component.didTemplateChanged = false;
-           
+
             fixture.detectChanges();
         });
 

apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-create-edit.component.spec.ts

@@ -84,7 +84,7 @@ const messageServiceMock = new MockDotMessageService({
     'templates.edit': 'Edit'
 });
 
-interface templateStoreValueType {
+interface TemplateStoreValueType {
     [key: string]: jasmine.Spy;
 }
 
@@ -121,7 +121,7 @@ describe('DotTemplateCreateEditComponent', () => {
     let component: DotTemplateCreateEditComponent;
     let dialogService: DialogService;
     let store: DotTemplateStore;
-    let templateStoreValue: templateStoreValueType;
+    let templateStoreValue: TemplateStoreValueType;
     const switchSiteSubject = new Subject();
 
     beforeEach(async () => {

apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/store/dot-template.store.ts

@@ -231,6 +231,7 @@ export class DotTemplateStore extends ComponentStore<DotTemplateState> {
                     : this.getDefaultTemplate(isAdvanced);
 
                 if (template.type === 'design') {
+                    this.canRouteBeDesativated();
                     this.templateContainersCacheService.set(template.containers);
                 }
 
@@ -325,6 +326,18 @@ export class DotTemplateStore extends ComponentStore<DotTemplateState> {
         return result;
     }
 
+    /**
+     * Let the user leave the route only when changes have been saved on design template.
+     *
+     * @private
+     * @memberof DotTemplateStore
+     */
+    private canRouteBeDesativated(): void {
+        this.didTemplateChanged$.subscribe((didTemplateChanged: boolean) =>
+            this.dotEditLayoutService.changeDesactivateState(!didTemplateChanged)
+        );
+    }
+
     /**
      *
      * When we save the properties, we do not want to save the body/layout.

apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/dot-edit-layout-designer.component.ts

@@ -19,7 +19,7 @@ import * as _ from 'lodash';
 
 import { Observable } from 'rxjs';
 import { Subject } from 'rxjs';
-import { tap, take, takeUntil, debounceTime } from 'rxjs/operators';
+import { tap, take, takeUntil } from 'rxjs/operators';
 
 import { DotEventsService } from '@services/dot-events/dot-events.service';
 import { DotRouterService } from '@services/dot-router/dot-router.service';
@@ -66,9 +66,6 @@ export class DotEditLayoutDesignerComponent implements OnInit, OnDestroy, OnChan
     @Input()
     url: string;
 
-    @Input()
-    didTemplateChanged: boolean;
-
     @Output()
     save: EventEmitter<DotTemplate> = new EventEmitter();
 
@@ -109,11 +106,6 @@ export class DotEditLayoutDesignerComponent implements OnInit, OnDestroy, OnChan
         if (changes.layout && !changes.layout.firstChange) {
             this.setFormValue(changes.layout.currentValue);
         }
-        if (changes.didTemplateChanged) {
-            this.dotEditLayoutService.changeDesactivateState(
-                !changes.didTemplateChanged.currentValue
-            );
-        }
     }
 
     ngOnDestroy(): void {
@@ -234,7 +226,6 @@ export class DotEditLayoutDesignerComponent implements OnInit, OnDestroy, OnChan
             if (!_.isEqual(this.form.value, this.initialFormValue)) {
                 this.updateTemplate.emit(this.form.value);
             }
-            this.dotEditLayoutService.changeDesactivateState(!this.didTemplateChanged);
         });
         this.updateModel();
     }