Folding lists and opened variables

This commit is contained in:
2023-03-27 01:29:56 +02:00
parent 95b17947b2
commit 5c276faf78
2 changed files with 36 additions and 28 deletions

View File

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

View File

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