From 5c276faf786a68340fdf3c96a0e8960d8152b67b Mon Sep 17 00:00:00 2001
From: ewandor <ewandor@dorfsvald.net>
Date: Mon, 27 Mar 2023 01:29:56 +0200
Subject: [PATCH] Folding lists and opened variables

---
 front/app/src/common/crud/types/array.type.ts | 62 +++++++++++--------
 .../src/common/crud/types/dictionary.type.ts  |  2 +-
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/front/app/src/common/crud/types/array.type.ts b/front/app/src/common/crud/types/array.type.ts
index b94511b1..c7e86937 100644
--- a/front/app/src/common/crud/types/array.type.ts
+++ b/front/app/src/common/crud/types/array.type.ts
@@ -2,36 +2,44 @@ import {Component, OnInit} from '@angular/core';
 import { FieldArrayType } from '@ngx-formly/core';
 
 @Component({
-  selector: 'formly-array-type',
-  template: `
-    <div>
-      <label *ngIf="props.label" class="form-label">{{ props.label }}</label>
-      <p *ngIf="props.description">{{ props.description }}</p>
-      <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
-        <formly-validation-message [field]="field"></formly-validation-message>
-      </div>
-      <div class="row row-cols-1 row-cols-md-{{this.itemsPerRow}} g-1">
-          <div *ngFor="let entry of field.fieldGroup; let i = index" class="col">
-                <div class="card">
-                    <div class="card-header">
-                        <div *ngIf="props['numbered']" class="float-start">
-                            <strong>{{ i + 1 }}</strong>
+    selector: 'formly-array-type',
+    template: `
+        <div class="mb-3">
+            <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
+                <ngb-panel id="ngb-panel-0">
+                    <ng-template ngbPanelTitle>
+                        <label *ngIf="props.label" class="form-label">{{ props.label }}</label>
+                        <p *ngIf="props.description">{{ props.description }}</p>
+                        <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
+                            <formly-validation-message [field]="field"></formly-validation-message>
                         </div>
-                        <div *ngIf="! this.field.props.readonly" class="btn-group float-end">
-                            <button class="btn btn-primary btn-sm" [attr.disabled]="i == 0 ? 'disabled' : null" type="button" (click)="move(i, i-1)"><i-bs name="caret-up-fill"></i-bs></button>
-                            <button class="btn btn-primary btn-sm" [attr.disabled]="i == this.field.fieldGroup!.length-1 ? 'disabled' : null" type="button" (click)="move(i, i+1)"><i-bs name="caret-down-fill"></i-bs></button>
-                            <button class="btn btn-danger btn-sm" [attr.disabled]="field.props!['removable'] === false ? 'disabled' : null" type="button" (click)="remove(i)"><i-bs name="x-octagon-fill"></i-bs></button>
+                    </ng-template>
+                    <ng-template ngbPanelContent>
+                        <div class="row row-cols-1 row-cols-md-{{this.itemsPerRow}} g-1">
+                            <div *ngFor="let entry of field.fieldGroup; let i = index" class="col">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <div *ngIf="props['numbered']" class="float-start">
+                                            <strong>{{ i + 1 }}</strong>
+                                        </div>
+                                        <div *ngIf="! this.field.props.readonly" class="btn-group float-end">
+                                            <button class="btn btn-primary btn-sm" [attr.disabled]="i == 0 ? 'disabled' : null" type="button" (click)="move(i, i-1)"><i-bs name="caret-up-fill"></i-bs></button>
+                                            <button class="btn btn-primary btn-sm" [attr.disabled]="i == this.field.fieldGroup!.length-1 ? 'disabled' : null" type="button" (click)="move(i, i+1)"><i-bs name="caret-down-fill"></i-bs></button>
+                                            <button class="btn btn-danger btn-sm" [attr.disabled]="field.props!['removable'] === false ? 'disabled' : null" type="button" (click)="remove(i)"><i-bs name="x-octagon-fill"></i-bs></button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <formly-field class="col" [field]="entry"></formly-field>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="card-body">
-                        <formly-field class="col" [field]="entry"></formly-field>
-                    </div>
-                </div>
-            </div>
+                        <button *ngIf="! this.field.props.readonly" class="btn btn-success col-sm-12 gap-3" type="button" (click)="add()"><i-bs name="plus-square-fill"></i-bs></button>
+                    </ng-template>
+                </ngb-panel>
+            </ngb-accordion>
         </div>
-        <button *ngIf="! this.field.props.readonly" class="btn btn-success col-sm-12" type="button" (click)="add()"><i-bs name="plus-square-fill"></i-bs></button>
-    </div>
-  `,
+    `,
 })
 export class ArrayTypeComponent extends FieldArrayType implements OnInit {
     colSm: string = "col-sm-6"
diff --git a/front/app/src/common/crud/types/dictionary.type.ts b/front/app/src/common/crud/types/dictionary.type.ts
index 9b49bcec..f64873f3 100644
--- a/front/app/src/common/crud/types/dictionary.type.ts
+++ b/front/app/src/common/crud/types/dictionary.type.ts
@@ -10,7 +10,7 @@ import {FormlyJsonschema} from "@ngx-formly/core/json-schema";
     template: `
         <div class="mb-3">
             <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
-                <ngb-panel>
+                <ngb-panel id="ngb-panel-0">
                     <ng-template ngbPanelTitle>
                         <label *ngIf="props.label && props['hideLabel'] !== true" [attr.for]="id"
                                class="form-label">{{ props.label }}