Folding lists and opened variables

back/app/contract/print/templates/styles.css

@@ -117,6 +117,10 @@ p {
     text-align: justify;
 }
 
+li {
+    margin: 16px 0;
+}
+
 .footer {
     margin-top: 30px;
     page-break-inside: avoid;

front/app/src/app/views/contracts/contracts.component.ts

@@ -78,23 +78,12 @@ export class ContractsCardComponent extends BaseContractsComponent{
 
 @Component({
     template: `
-        <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-1">
-            <ngb-panel>
-                <ng-template ngbPanelTitle>
-                    <span i18n>Preview</span>
-                </ng-template>
-                <ng-template ngbPanelContent>
+        <div>
             <iframe width="100%" 
                     [src]="getPreview()" 
-                            onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";o.style.width=o.contentWindow.document.body.scrollWidth+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
-                </ng-template>
-            </ngb-panel>
-            <ngb-panel>
-                <ng-template ngbPanelTitle>
-                    <span i18n>Signature</span>
-                </ng-template>
-                <ng-template ngbPanelContent>
-                    <ng-container *ngIf="this.affixed"><ng-container i18n>This Contract has already been signed by</ng-container> {{ this.signatory }}</ng-container>
+                    onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";o.style.width=o.contentWindow.document.body.scrollWidth+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;">
+            </iframe>
+        </div>
         <div class="row" *ngIf="!this.affixed">
             <signature-drawer class="col-7"
              (signatureDrawn$)="postSignature($event)"></signature-drawer>
@@ -104,11 +93,7 @@ export class ContractsCardComponent extends BaseContractsComponent{
                 <p>En vous maintenant et/ou en interagissant avec cette page, vous enfreignez l'article L.229 du code pénal de l'Etat de San Andreas pour <strong>usurpation d'identité</strong> et vous vous exposez ainsi à une amende de 20 000$ ainsi qu'à des poursuites civiles.</p>
                 <p>Le cabinet Cooper, Hillman & Toshi LLC</p>
             </div>
-                    </div>
-                </ng-template>
-            </ngb-panel>
-        </ngb-accordion>
-    `
+        </div>`
 })
 export class ContractsSignatureComponent implements OnInit {
     signature_id: string | null = null;

front/app/src/common/crud/types/array.type.ts

@@ -4,12 +4,17 @@ import { FieldArrayType } from '@ngx-formly/core';
 @Component({
     selector: 'formly-array-type',
     template: `
-    <div>
+        <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>
+                    </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">
@@ -29,7 +34,10 @@ import { FieldArrayType } from '@ngx-formly/core';
                                 </div>
                             </div>
                         </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>
+                        <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>
     `,
 })

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