62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import {
|
|
AfterViewInit,
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
OnInit,
|
|
forwardRef,
|
|
input,
|
|
model,
|
|
} from '@angular/core';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { ListMessage } from '../model/proto-message.model';
|
|
import { ProtoFieldComponent } from '../proto-field/proto-field.component';
|
|
|
|
@Component({
|
|
selector: 'app-list-field',
|
|
standalone: true,
|
|
imports: [
|
|
CommonModule,
|
|
MatButtonModule,
|
|
MatIconModule,
|
|
forwardRef(() => ProtoFieldComponent),
|
|
],
|
|
template: ` <h3>{{ label() }}</h3>
|
|
@if(values()) { @for(value of values(); track $index) {
|
|
<div class="row-wrapper">
|
|
<app-proto-field
|
|
[configuration]="configuration().subConfiguration"
|
|
[value]="value"
|
|
></app-proto-field>
|
|
<button mat-icon-button (click)="remove($index)">
|
|
<mat-icon>remove</mat-icon>
|
|
</button>
|
|
</div>
|
|
} }
|
|
<button mat-icon-button (click)="add()"><mat-icon>add</mat-icon></button>`,
|
|
styleUrl: './list-field.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class ListFieldComponent {
|
|
label = input<string>();
|
|
configuration = input.required<ListMessage>();
|
|
values = model<any[]>();
|
|
|
|
add() {
|
|
const newValues = this.values();
|
|
if (newValues) {
|
|
newValues.push(null);
|
|
this.values.set(newValues);
|
|
} else {
|
|
this.values.set([null]);
|
|
}
|
|
}
|
|
|
|
remove(index: number) {
|
|
const newValues = this.values();
|
|
newValues?.splice(index, 1);
|
|
this.values.set(newValues);
|
|
}
|
|
}
|