Persist collapsed for array editor.

Squidex · Oct 13, 2021 · 4dc0783 · 4dc0783
1 parent 3e56fce
commit 4dc0783
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 8 deletions.
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
@@ -56,14 +56,14 @@ export class ContentSectionComponent extends StatefulComponent<State> implements
 
         this.changes.subscribe(state => {
             if (this.formSection?.separator && this.schema) {
-                this.localStore.setBoolean(this.configKey(), state.isCollapsed);
+                this.localStore.setBoolean(this.expandedKey(), state.isCollapsed);
             }
         });
     }
 
     public ngOnChanges() {
         if (this.formSection?.separator && this.schema) {
-            const isCollapsed = this.localStore.getBoolean(this.configKey());
+            const isCollapsed = this.localStore.getBoolean(this.expandedKey());
 
             this.next({ isCollapsed });
         }
@@ -84,7 +84,7 @@ export class ContentSectionComponent extends StatefulComponent<State> implements
         return formState.field.fieldId;
     }
 
-    private configKey(): string {
+    private expandedKey(): string {
         return Settings.Local.FIELD_COLLAPSED(this.schema?.id, this.formSection?.separator?.fieldId);
     }
 }
diff --git a/frontend/app/features/content/shared/forms/array-editor.component.html b/frontend/app/features/content/shared/forms/array-editor.component.html
@@ -14,6 +14,7 @@
                     [formContext]="formContext"
                     [formModel]="itemForm"
                     [index]="i"
+                    [isCollapsedInitial]="isCollapsedInitial"
                     [isDisabled]="isDisabled | async"
                     [isFirst]="isFirst"
                     [isLast]="isLast"
@@ -35,6 +36,7 @@
                     [formContext]="formContext"
                     [formModel]="itemForm"
                     [index]="i"
+                    [isCollapsedInitial]="isCollapsedInitial"
                     [isDisabled]="isDisabled | async"
                     [isFirst]="isFirst"
                     [isLast]="isLast"

diff --git a/frontend/app/features/content/shared/forms/array-editor.component.ts b/frontend/app/features/content/shared/forms/array-editor.component.ts
@@ -7,7 +7,7 @@
 
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { ChangeDetectionStrategy, Component, Input, OnChanges, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
-import { AppLanguageDto, ComponentsFieldPropertiesDto, disabled$, EditContentForm, fadeAnimation, FieldArrayForm, ModalModel, ObjectForm, SchemaDto, sorted, Types } from '@app/shared';
+import { AppLanguageDto, ComponentsFieldPropertiesDto, disabled$, EditContentForm, fadeAnimation, FieldArrayForm, LocalStoreService, ModalModel, ObjectForm, SchemaDto, Settings, sorted, Types } from '@app/shared';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ArrayItemComponent } from './array-item.component';
@@ -49,13 +49,19 @@ export class ArrayEditorComponent implements OnChanges {
     public schemasList: ReadonlyArray<SchemaDto>;
 
     public isDisabled: Observable<boolean>;
+    public isCollapsedInitial = false;
 
     public isFull: Observable<boolean>;
 
     public get hasField() {
         return this.formModel.field['nested']?.length > 0;
     }
 
+    constructor(
+        private readonly localStore: LocalStoreService,
+    ) {
+    }
+
     public ngOnChanges(changes: SimpleChanges) {
         if (changes['formModel']) {
             const maxItems = this.formModel.field.properties['maxItems'] || Number.MAX_VALUE;
@@ -74,6 +80,8 @@ export class ArrayEditorComponent implements OnChanges {
             ]).pipe(map(([disabled, items]) => {
                 return disabled || items.length >= maxItems;
             }));
+
+            this.isCollapsedInitial = this.localStore.getBoolean(this.expandedKey());
         }
     }
 
@@ -113,17 +121,25 @@ export class ArrayEditorComponent implements OnChanges {
         this.children.forEach(child => {
             child.collapse();
         });
+
+        this.localStore.setBoolean(this.expandedKey(), true);
     }
 
     public expandAll() {
         this.children.forEach(child => {
             child.expand();
         });
+
+        this.localStore.setBoolean(this.expandedKey(), false);
     }
 
     private reset() {
         this.children.forEach(child => {
             child.reset();
         });
     }
+
+    private expandedKey(): string {
+        return Settings.Local.FIELD_COLLAPSED(this.form.schema?.id, this.formModel.field?.fieldId);
+    }
 }
diff --git a/frontend/app/features/content/shared/forms/array-item.component.ts b/frontend/app/features/content/shared/forms/array-item.component.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
 import { AppLanguageDto, ComponentForm, EditContentForm, FieldDto, FieldFormatter, FieldSection, invalid$, ObjectForm, RootFieldDto, StatefulComponent, Types, value$ } from '@app/shared';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -22,7 +22,7 @@ interface State {
     templateUrl: './array-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ArrayItemComponent extends StatefulComponent<State> implements OnChanges {
+export class ArrayItemComponent extends StatefulComponent<State> implements OnChanges, OnInit {
     @Output()
     public itemRemove = new EventEmitter();
 
@@ -44,6 +44,9 @@ export class ArrayItemComponent extends StatefulComponent<State> implements OnCh
     @Input()
     public canUnset?: boolean | null;
 
+    @Input()
+    public isCollapsedInitial = false;
+
     @Input()
     public isFirst?: boolean | null;
 
@@ -77,6 +80,10 @@ export class ArrayItemComponent extends StatefulComponent<State> implements OnCh
         });
     }
 
+    public ngOnInit() {
+        this.next({ isCollapsed: this.isCollapsedInitial });
+    }
+
     public ngOnChanges(changes: SimpleChanges) {
         if (changes['formModel']) {
             this.isInvalid = invalid$(this.formModel.form);

diff --git a/frontend/app/shared/state/contents.forms.ts b/frontend/app/shared/state/contents.forms.ts
@@ -86,8 +86,11 @@ export class EditContentForm extends Form<FormGroup, any> {
         return this.valueChange$.value;
     }
 
-    constructor(languages: ReadonlyArray<AppLanguageDto>, schema: SchemaDto, schemas: { [id: string ]: SchemaDto },
-        private context: any, debounce = 100,
+    constructor(
+        public readonly languages: ReadonlyArray<AppLanguageDto>,
+        public readonly schema: SchemaDto, schemas: { [id: string ]: SchemaDto },
+        public context: any,
+        debounce = 100,
     ) {
         super(new FormGroup({}));