Collapse arrays on deeper levels. (#804)

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">

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>

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;
 

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">

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;
 

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"

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());
         }
     }
 

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"

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;
 

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"

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>;
 

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">

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;
 

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"

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>;
 

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"