Folding lists and opened variables
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
Reference in New Issue
Block a user