137 lines
4.0 KiB
TypeScript
137 lines
4.0 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
computed,
|
|
input,
|
|
model,
|
|
} from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatSelectModule } from '@angular/material/select';
|
|
import {
|
|
EnumMessage,
|
|
ListMessage,
|
|
MapMessage,
|
|
MessageConfiguration,
|
|
MessageTypeEnum,
|
|
NumericMessage,
|
|
ObjectMessage,
|
|
StringMessage,
|
|
} from '../../model/proto-message.model';
|
|
import { ListFieldComponent } from '../list-field/list-field.component';
|
|
import { MapFieldComponent } from '../map-field/map-field.component';
|
|
import { ObjectFieldComponent } from '../object-field/object-field.component';
|
|
import { StringFieldComponent } from '../string-field/string-field.component';
|
|
|
|
@Component({
|
|
selector: 'app-proto-field',
|
|
imports: [
|
|
CommonModule,
|
|
FormsModule,
|
|
ListFieldComponent,
|
|
MapFieldComponent,
|
|
MatCheckboxModule,
|
|
MatFormFieldModule,
|
|
MatSelectModule,
|
|
MatInputModule,
|
|
ObjectFieldComponent,
|
|
StringFieldComponent,
|
|
],
|
|
template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
|
|
<app-string-field
|
|
[label]="label()"
|
|
[configuration]="stringConfiguration()"
|
|
[(value)]="value"
|
|
></app-string-field>
|
|
} @case (MessageTypeEnum.Numeric) {
|
|
<mat-form-field>
|
|
<mat-label>{{ label() }}</mat-label>
|
|
<input
|
|
#number="ngModel"
|
|
matInput
|
|
type="number"
|
|
[(ngModel)]="value"
|
|
[min]="numericConfiguration().min ?? null"
|
|
[max]="numericConfiguration().max ?? null"
|
|
/>
|
|
<mat-hint *ngIf="number.hasError('min')"
|
|
>Number should not be less than
|
|
{{ numericConfiguration().min }}</mat-hint
|
|
>
|
|
<mat-hint *ngIf="number.hasError('max')"
|
|
>Number should not greater than
|
|
{{ numericConfiguration().max }}</mat-hint
|
|
>
|
|
</mat-form-field>
|
|
} @case (MessageTypeEnum.Boolean) {
|
|
<p>
|
|
<mat-checkbox [(ngModel)]="value">{{ label() }}</mat-checkbox>
|
|
</p>
|
|
} @case(MessageTypeEnum.Enum) {
|
|
<mat-form-field>
|
|
<mat-label>{{ label() }}</mat-label>
|
|
<mat-select [(value)]="value">
|
|
@for(option of enumConfiguration().options; track
|
|
enumConfiguration()!.options) {
|
|
<mat-option>None</mat-option>
|
|
<mat-option [value]="option">{{ option }}</mat-option>
|
|
}
|
|
</mat-select>
|
|
</mat-form-field>
|
|
} @case (MessageTypeEnum.List) {
|
|
<app-list-field
|
|
[label]="label()"
|
|
[configuration]="listConfiguration()"
|
|
[(values)]="value"
|
|
></app-list-field>
|
|
} @case (MessageTypeEnum.Map){
|
|
<app-map-field
|
|
[label]="label()"
|
|
[(values)]="value"
|
|
[configuration]="mapConfiguration()"
|
|
></app-map-field>
|
|
} @case (MessageTypeEnum.Object) {
|
|
<app-object-field
|
|
[label]="label()"
|
|
[(values)]="value"
|
|
[configuration]="objectConfiguration()"
|
|
></app-object-field>
|
|
} @case (MessageTypeEnum.Raw) {}}`,
|
|
styleUrl: './proto-field.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class ProtoFieldComponent {
|
|
label = input<string>();
|
|
configuration = input.required<MessageConfiguration>();
|
|
value = model<any>();
|
|
|
|
protected stringConfiguration = computed(
|
|
() => this.configuration() as StringMessage
|
|
);
|
|
|
|
protected numericConfiguration = computed(
|
|
() => this.configuration() as NumericMessage
|
|
);
|
|
|
|
protected enumConfiguration = computed(
|
|
() => this.configuration() as EnumMessage
|
|
);
|
|
|
|
protected listConfiguration = computed(
|
|
() => this.configuration() as ListMessage
|
|
);
|
|
|
|
protected mapConfiguration = computed(
|
|
() => this.configuration() as MapMessage
|
|
);
|
|
|
|
protected objectConfiguration = computed(
|
|
() => this.configuration() as ObjectMessage
|
|
);
|
|
|
|
protected readonly MessageTypeEnum = MessageTypeEnum;
|
|
}
|