Collapse arrays on deeper levels. (#804)

4 years ago · 9365833898
16 changed files with 47 additions and 11 deletions
--- a/frontend/app/features/content/pages/content/editor/content-editor.component.html
+++ b/frontend/app/features/content/pages/content/editor/content-editor.component.html
@ -23,6 +23,7 @@
            [form]="contentForm"
            [formCompare]="contentFormCompare"
            [formContext]="formContext"
+            [formLevel]="0"
            [formSection]="section"
            [languages]="languages"
            [schema]="schema">
--- a/frontend/app/features/content/pages/content/editor/content-field.component.html
+++ b/frontend/app/features/content/pages/content/editor/content-field.component.html
@ -26,6 +26,7 @@
                        [canUnset]="!formModel.field.isDisabled"
                        [form]="form"
                        [formContext]="formContext"
+                        [formLevel]="formLevel"
                        [formModel]="formModel.get(language)"
                        [language]="language"
                        [languages]="languages"
@ -39,6 +40,7 @@
                    [canUnset]="!formModel.field.isDisabled"
                    [form]="form"
                    [formContext]="formContext"
+                    [formLevel]="formLevel"
                    [formModel]="getControl()"
                    [language]="language"
                    [languages]="languages">
@ -71,6 +73,7 @@
                    <sqx-field-editor
                        [form]="formCompare"
                        [formContext]="formContext"
+                        [formLevel]="formLevel"
                        [formModel]="formModelCompare.get(language)"
                        [language]="language"
                        [languages]="languages"
@ -82,8 +85,9 @@
            <ng-template #singleControlCompare>
                <sqx-field-editor
                    [form]="formCompare"
-                    [formModel]="getControlCompare()!"
                    [formContext]="formContext"
+                    [formLevel]="formLevel"
+                    [formModel]="getControlCompare()!"
                    [language]="language"
                    [languages]="languages">
                </sqx-field-editor>
--- a/frontend/app/features/content/pages/content/editor/content-field.component.ts
+++ b/frontend/app/features/content/pages/content/editor/content-field.component.ts
@ -10,7 +10,7 @@ import { AppLanguageDto, AppsState, changed$, EditContentForm, FieldForm, invali
 import { Observable } from 'rxjs';

@Component({
-    selector: 'sqx-content-field[form][formContext][formModel][language][languages][schema]',
+    selector: 'sqx-content-field[form][formContext][formLevel][formModel][language][languages][schema]',
    styleUrls: ['./content-field.component.scss'],
    templateUrl: './content-field.component.html',
 })
@ -30,6 +30,9 @@ export class ContentFieldComponent implements OnChanges {
    @Input()
    public formContext: any;

+    @Input()
+    public formLevel: number;
+
    @Input()
    public formModel: FieldForm;

--- a/frontend/app/features/content/pages/content/editor/content-section.component.html
+++ b/frontend/app/features/content/pages/content/editor/content-section.component.html
@ -20,12 +20,13 @@
 <div class="row gx-1" [class.hidden]="snapshot.isCollapsed && !formCompare">
    <sqx-content-field *ngFor="let field of formSection.fields; trackBy: trackByField"
        (languageChange)="languageChange.emit($event)"
-        [isCompact]="isCompact"
        [form]="form"
        [formCompare]="formCompare"
        [formContext]="formContext"
+        [formLevel]="formLevel"
        [formModel]="field"
        [formModelCompare]="getFieldFormCompare(field)"
+        [isCompact]="isCompact"
        [language]="language"
        [languages]="languages"
        [schema]="schema">
--- a/frontend/app/features/content/pages/content/editor/content-section.component.ts
+++ b/frontend/app/features/content/pages/content/editor/content-section.component.ts
@ -14,7 +14,7 @@ interface State {
 }

@Component({
-    selector: 'sqx-content-section[form][formContext][formSection][language][languages][schema]',
+    selector: 'sqx-content-section[form][formContext][formLevel][formSection][language][languages][schema]',
    styleUrls: ['./content-section.component.scss'],
    templateUrl: './content-section.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
@ -32,6 +32,9 @@ export class ContentSectionComponent extends StatefulComponent<State> implements
    @Input()
    public formCompare?: EditContentForm | null;

+    @Input()
+    public formLevel: number;
+
    @Input()
    public formContext: any;

--- a/frontend/app/features/content/shared/forms/array-editor.component.html
+++ b/frontend/app/features/content/shared/forms/array-editor.component.html
@ -12,6 +12,7 @@
                    [canUnset]="canUnset"
                    [form]="form"
                    [formContext]="formContext"
+                    [formLevel]="formLevel + 1"
                    [formModel]="itemForm"
                    [index]="i"
                    [isCollapsedInitial]="isCollapsedInitial"
@ -34,6 +35,7 @@
                    [canUnset]="canUnset"
                    [form]="form"
                    [formContext]="formContext"
+                    [formLevel]="formLevel + 1"
                    [formModel]="itemForm"
                    [index]="i"
                    [isCollapsedInitial]="isCollapsedInitial"
--- a/frontend/app/features/content/shared/forms/array-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/array-editor.component.ts
@ -13,7 +13,7 @@ import { map } from 'rxjs/operators';
 import { ArrayItemComponent } from './array-item.component';

@Component({
-    selector: 'sqx-array-editor[form][formContext][formModel][language][languages]',
+    selector: 'sqx-array-editor[form][formContext][formLevel][formModel][language][languages]',
    styleUrls: ['./array-editor.component.scss'],
    templateUrl: './array-editor.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
@ -28,6 +28,9 @@ export class ArrayEditorComponent implements OnChanges {
    @Input()
    public formContext: any;

+    @Input()
+    public formLevel: number;
+
    @Input()
    public formModel: FieldArrayForm;

@ -81,7 +84,7 @@ export class ArrayEditorComponent implements OnChanges {
                return disabled || items.length >= maxItems;
            }));

-            this.isCollapsedInitial = this.localStore.getBoolean(this.expandedKey());
+            this.isCollapsedInitial = this.formLevel > 0 || this.localStore.getBoolean(this.expandedKey());
        }
    }

--- a/frontend/app/features/content/shared/forms/array-item.component.html
+++ b/frontend/app/features/content/shared/forms/array-item.component.html
@ -48,6 +48,7 @@
                [canUnset]="canUnset"
                [form]="form"
                [formContext]="formContext"
+                [formLevel]="formLevel"
                [formSection]="$any(section)"
                [index]="index"
                [language]="language"
--- a/frontend/app/features/content/shared/forms/array-item.component.ts
+++ b/frontend/app/features/content/shared/forms/array-item.component.ts
@ -17,7 +17,7 @@ interface State {
 }

@Component({
-    selector: 'sqx-array-item[form][formContext][language][languages][index]',
+    selector: 'sqx-array-item[form][formContext][formLevel][language][languages][index]',
    styleUrls: ['./array-item.component.scss'],
    templateUrl: './array-item.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
@ -38,6 +38,9 @@ export class ArrayItemComponent extends StatefulComponent<State> implements OnCh
    @Input()
    public formContext: any;

+    @Input()
+    public formLevel: number;
+
    @Input()
    public formModel: ObjectFormBase;

--- a/frontend/app/features/content/shared/forms/component-section.component.html
+++ b/frontend/app/features/content/shared/forms/component-section.component.html
@ -12,6 +12,7 @@
            [canUnset]="canUnset"
            [form]="form"
            [formContext]="formContext"
+            [formLevel]="formLevel"
            [formModel]="child"
            [index]="index"
            [canUnset]="canUnset"
--- a/frontend/app/features/content/shared/forms/component-section.component.ts
+++ b/frontend/app/features/content/shared/forms/component-section.component.ts
@ -10,7 +10,7 @@ import { AbstractContentForm, AppLanguageDto, EditContentForm, FieldDto, FieldSe
 import { FieldEditorComponent } from './field-editor.component';

@Component({
-    selector: 'sqx-component-section[form][formContext][formSection][language][languages]',
+    selector: 'sqx-component-section[form][formContext][formLevel][formSection][language][languages]',
    styleUrls: ['./component-section.component.scss'],
    templateUrl: './component-section.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
@ -22,6 +22,9 @@ export class ComponentSectionComponent {
    @Input()
    public formContext: any;

+    @Input()
+    public formLevel: number;
+
    @Input()
    public formSection: FieldSection<FieldDto, any>;

--- a/frontend/app/features/content/shared/forms/component.component.html
+++ b/frontend/app/features/content/shared/forms/component.component.html
@ -9,6 +9,7 @@
                [canUnset]="canUnset"
                [form]="form"
                [formContext]="formContext"
+                [formLevel]="formLevel + 1"
                [formSection]="$any(section)"
                [language]="language"
                [languages]="languages">
--- a/frontend/app/features/content/shared/forms/component.component.ts
+++ b/frontend/app/features/content/shared/forms/component.component.ts
@ -10,7 +10,7 @@ import { AppLanguageDto, ComponentFieldPropertiesDto, ComponentForm, EditContent
 import { ComponentSectionComponent } from './component-section.component';

@Component({
-    selector: 'sqx-component[form][formContext][formModel][language][languages]',
+    selector: 'sqx-component[form][formContext][formLevel][formModel][language][languages]',
    styleUrls: ['./component.component.scss'],
    templateUrl: './component.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
@ -28,6 +28,9 @@ export class ComponentComponent extends ResourceOwner implements OnChanges {
    @Input()
    public formContext: any;

+    @Input()
+    public formLevel: number;
+
    @Input()
    public formModel: ComponentForm;

--- a/frontend/app/features/content/shared/forms/field-editor.component.html
+++ b/frontend/app/features/content/shared/forms/field-editor.component.html
@ -24,6 +24,7 @@
                    <sqx-array-editor
                        [canUnset]="canUnset"
                        [form]="form"
+                        [formLevel]="formLevel"
                        [formModel]="$any(formModel)"
                        [formContext]="formContext"
                        [language]="language"
@ -50,8 +51,9 @@
                    <sqx-component
                        [canUnset]="canUnset"
                        [form]="form"
-                        [formModel]="$any(formModel)"
                        [formContext]="formContext"
+                        [formLevel]="formLevel"
+                        [formModel]="$any(formModel)"
                        [language]="language"
                        [languages]="languages">
                    </sqx-component>
@ -60,6 +62,7 @@
                    <sqx-array-editor
                        [canUnset]="canUnset"
                        [form]="form"
+                        [formLevel]="formLevel"
                        [formModel]="$any(formModel)"
                        [formContext]="formContext"
                        [language]="language"
--- a/frontend/app/features/content/shared/forms/field-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/field-editor.component.ts
@ -11,7 +11,7 @@ import { AbstractContentForm, AppLanguageDto, EditContentForm, FieldDto, hasNoVa
 import { Observable } from 'rxjs';

@Component({
-    selector: 'sqx-field-editor[form][formContext][formModel][language][languages]',
+    selector: 'sqx-field-editor[form][formContext][formLevel][formModel][language][languages]',
    styleUrls: ['./field-editor.component.scss'],
    templateUrl: './field-editor.component.html',
 })
@ -24,6 +24,9 @@ export class FieldEditorComponent implements OnChanges {
    @Input()
    public formContext: any;

+    @Input()
+    public formLevel: number;
+
    @Input()
    public formModel: AbstractContentForm<FieldDto, AbstractControl>;

--- a/frontend/app/features/content/shared/references/content-creator.component.html
+++ b/frontend/app/features/content/shared/references/content-creator.component.html
@ -36,6 +36,7 @@
                    [(language)]="language"
                    [form]="contentForm"
                    [formContext]="formContext"
+                    [formLevel]="0"
                    [formSection]="section"
                    [isCompact]="true"
                    [languages]="languages"