ewandor/cht-lawfirm
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

reorderable array item in formly

Browse Source
This commit is contained in:
ewandor
2023-01-31 23:51:36 +01:00
parent 6218245ea8
commit 8430ae0db0
1 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
front/app/src/common/crud/types/array.type.ts
View File

@@ -1,35 +1,50 @@
import { Component } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { FieldArrayType } from '@ngx-formly/core'; import { FieldArrayType } from '@ngx-formly/core';
@Component({ @Component({
selector: 'formly-array-type', selector: 'formly-array-type',
template: ` template: `
<div class="mb-3"> <div>
<label *ngIf="props.label" class="form-label">{{ props.label }}</label> <label *ngIf="props.label" class="form-label">{{ props.label }}</label>
<p *ngIf="props.description">{{ props.description }}</p> <p *ngIf="props.description">{{ props.description }}</p>
<div class="d-flex flex-row-reverse">
<button class="btn btn-primary" type="button" (click)="add()">+</button>
</div>
<div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors"> <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
<formly-validation-message [field]="field"></formly-validation-message> <formly-validation-message [field]="field"></formly-validation-message>
</div> </div>
<div class="row"> <div class="row">
<div *ngFor="let field of field.fieldGroup; let i = index" class="card col-sm-6"> <div *ngFor="let entry of field.fieldGroup; let i = index" class="card {{this.colSm}}">
<div class="card-header">
<div class="float-end">
<button class="btn btn-primary btn-sm" [attr.disabled]="i == 0 ? 'disabled' : null" type="button" (click)="move(i, i-1)">UP</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)">DOWN</button>
<button class="btn btn-danger btn-sm" [attr.disabled]="field.props!['removable'] === false ? 'disabled' : null" type="button" (click)="remove(i)">-</button>
</div>
</div>
<div class="card-body"> <div class="card-body">
<formly-field class="col" [field]="field"></formly-field> <formly-field class="col" [field]="entry"></formly-field>
<div *ngIf="field.props!['removable'] !== false" class="col-2 text-right">
<button class="btn btn-danger" type="button" (click)="remove(i)">-</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<button class="btn btn-success col-sm-12" type="button" (click)="add()">+</button>
</div> </div>
`, `,
}) })
export class ArrayTypeComponent extends FieldArrayType { export class ArrayTypeComponent extends FieldArrayType implements OnInit {
constructor() { colSm: string = "col-sm-6"
super(); ngOnInit() {
if (this.field.props.hasOwnProperty('width')) {
this.colSm = this.field.props['width'];
}
}
move(from: number, to: number) {
let value_list = this.formControl.value;
if (to >= value_list.length) {
throw new Error("to value must be comprised between 0 and n - 1");
}
value_list.splice(to, 0, value_list.splice(from, 1)[0]);
this.formControl.setValue(value_list);
this.field.fieldGroup!.splice(to, 0, this.field.fieldGroup!.splice(from, 1)[0]);
} }
} }