From 4dc0783e1e7f5929528b2111ba2f42371aed345a Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 13 Oct 2021 16:40:23 +0200 Subject: [PATCH] Persist collapsed for array editor. --- .../editor/content-section.component.ts | 6 +++--- .../shared/forms/array-editor.component.html | 2 ++ .../shared/forms/array-editor.component.ts | 18 +++++++++++++++++- .../shared/forms/array-item.component.ts | 11 +++++++++-- frontend/app/shared/state/contents.forms.ts | 7 +++++-- 5 files changed, 36 insertions(+), 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 index 4b6a7696ab..0f336ea688 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 @@ -56,14 +56,14 @@ export class ContentSectionComponent extends StatefulComponent 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 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 index 2bf728b0dd..bcbcaca12a 100644 --- 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 index ce2d1ef516..aa83e44cbb 100644 --- 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,6 +49,7 @@ export class ArrayEditorComponent implements OnChanges { public schemasList: ReadonlyArray; public isDisabled: Observable; + public isCollapsedInitial = false; public isFull: Observable; @@ -56,6 +57,11 @@ export class ArrayEditorComponent implements OnChanges { 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,12 +121,16 @@ 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() { @@ -126,4 +138,8 @@ export class ArrayEditorComponent implements OnChanges { 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 index f953301f17..d5e2a0af3b 100644 --- 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 implements OnChanges { +export class ArrayItemComponent extends StatefulComponent implements OnChanges, OnInit { @Output() public itemRemove = new EventEmitter(); @@ -44,6 +44,9 @@ export class ArrayItemComponent extends StatefulComponent 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 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 index a30d880bbc..6cb512b507 100644 --- 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 { return this.valueChange$.value; } - constructor(languages: ReadonlyArray, schema: SchemaDto, schemas: { [id: string ]: SchemaDto }, - private context: any, debounce = 100, + constructor( + public readonly languages: ReadonlyArray, + public readonly schema: SchemaDto, schemas: { [id: string ]: SchemaDto }, + public context: any, + debounce = 100, ) { super(new FormGroup({}));