From 3e56fce56f122e0ad6301b9f65c01625fd5b5c18 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 13 Oct 2021 14:54:45 +0200
Subject: [PATCH] Autosave improvements.

---
 .../pages/content/content-page.component.ts   | 24 +++++++++----------
 .../editor/content-section.component.ts       | 10 +++++---
 frontend/app/shared/state/contents.forms.ts   |  4 ++--
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/app/features/content/pages/content/content-page.component.ts b/frontend/app/features/content/pages/content/content-page.component.ts
index e049d6dbd..bffd9d048 100644
--- a/frontend/app/features/content/pages/content/content-page.component.ts
+++ b/frontend/app/features/content/pages/content/content-page.component.ts
@@ -7,7 +7,7 @@
 
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ApiUrlConfig, AppLanguageDto, AppsState, AuthService, AutoSaveKey, AutoSaveService, CanComponentDeactivate, ContentDto, ContentsState, defined, DialogService, EditContentForm, fadeAnimation, LanguagesState, ModalModel, ResourceOwner, SchemaDto, SchemasState, TempService, Version } from '@app/shared';
+import { ApiUrlConfig, AppLanguageDto, AppsState, AuthService, AutoSaveKey, AutoSaveService, CanComponentDeactivate, ContentDto, ContentsState, defined, DialogService, EditContentForm, fadeAnimation, LanguagesState, ModalModel, ResourceOwner, SchemaDto, SchemasState, TempService, Types, Version } from '@app/shared';
 import { Observable, of } from 'rxjs';
 import { filter, map, tap } from 'rxjs/operators';
 import { ContentReferencesComponent } from './references/content-references.component';
@@ -21,7 +21,6 @@ import { ContentReferencesComponent } from './references/content-references.comp
     ],
 })
 export class ContentPageComponent extends ResourceOwner implements CanComponentDeactivate, OnInit {
-    private isLoadingContent: boolean;
     private autoSaveKey: AutoSaveKey;
 
     @ViewChild(ContentReferencesComponent)
@@ -126,9 +125,13 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
                 }));
 
         this.own(
-            this.contentForm.valueChanges.pipe(filter(_ => !this.isLoadingContent && this.contentForm.form.enabled))
+            this.contentForm.valueChanges.pipe(filter(_ => this.contentForm.form.enabled))
                 .subscribe(value => {
-                    this.autoSaveService.set(this.autoSaveKey, value);
+                    if (!Types.equals(value, this.content?.data)) {
+                        this.autoSaveService.set(this.autoSaveKey, value);
+                    } else {
+                        this.autoSaveService.remove(this.autoSaveKey);
+                    }
                 }));
     }
 
@@ -279,15 +282,10 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     }
 
     private loadContent(data: any, isInitial: boolean) {
-        this.isLoadingContent = true;
-        try {
-            this.autoSaveService.remove(this.autoSaveKey);
-
-            this.contentForm.load(data, isInitial);
-            this.contentForm.setEnabled(!this.content || this.content.canUpdate);
-        } finally {
-            this.isLoadingContent = false;
-        }
+        this.autoSaveService.remove(this.autoSaveKey);
+
+        this.contentForm.load(data, isInitial);
+        this.contentForm.setEnabled(!this.content || this.content.canUpdate);
     }
 }
 
diff --git a/frontend/app/features/content/pages/content/editor/content-section.component.ts b/frontend/app/features/content/pages/content/editor/content-section.component.ts
index 037f77bcf..4b6a7696a 100644
--- a/frontend/app/features/content/pages/content/editor/content-section.component.ts
+++ b/frontend/app/features/content/pages/content/editor/content-section.component.ts
@@ -55,14 +55,18 @@ export class ContentSectionComponent extends StatefulComponent<State> implements
         });
 
         this.changes.subscribe(state => {
-            this.localStore.setBoolean(this.configKey(), state.isCollapsed);
+            if (this.formSection?.separator && this.schema) {
+                this.localStore.setBoolean(this.configKey(), state.isCollapsed);
+            }
         });
     }
 
     public ngOnChanges() {
-        const isCollapsed = this.localStore.getBoolean(this.configKey());
+        if (this.formSection?.separator && this.schema) {
+            const isCollapsed = this.localStore.getBoolean(this.configKey());
 
-        this.next({ isCollapsed });
+            this.next({ isCollapsed });
+        }
     }
 
     public toggle() {
diff --git a/frontend/app/shared/state/contents.forms.ts b/frontend/app/shared/state/contents.forms.ts
index 1ef072ce2..a30d880bb 100644
--- a/frontend/app/shared/state/contents.forms.ts
+++ b/frontend/app/shared/state/contents.forms.ts
@@ -7,7 +7,7 @@
 
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { debounceTimeSafe, Form, getRawValue, Types, UndefinableFormArray, UndefinableFormGroup, valueAll$ } from '@app/framework';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, Observable } from 'rxjs';
 import { AppLanguageDto } from './../services/app-languages.service';
 import { LanguageDto } from './../services/languages.service';
 import { FieldDto, RootFieldDto, SchemaDto, TableField } from './../services/schemas.service';
@@ -121,7 +121,7 @@ export class EditContentForm extends Form<FormGroup, any> {
             return new FieldSection<RootFieldDto, FieldForm>(separator, forms);
         });
 
-        valueAll$(this.form).pipe(debounceTimeSafe(debounce)).subscribe(value => {
+        valueAll$(this.form).pipe(debounceTimeSafe(debounce), distinctUntilChanged(Types.equals)).subscribe(value => {
             this.valueChange$.next(value);
 
             this.updateState(value);