Add map field, refine directory structure

src/app/editor/proto-field/proto-field.component.ts

@@ -0,0 +1,96 @@
+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,
+} from '../../model/proto-message.model';
+import { ListFieldComponent } from '../list-field/list-field.component';
+import { MapFieldComponent } from '../map-field/map-field.component';
+
+@Component({
+  selector: 'app-proto-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ListFieldComponent,
+    MapFieldComponent,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+  ],
+  template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
+    <mat-form-field>
+      <mat-label>{{ label() }}</mat-label>
+      <input matInput [(ngModel)]="value" />
+    </mat-form-field>
+    } @case (MessageTypeEnum.Numeric) {
+    <mat-form-field>
+      <mat-label>{{ label() }}</mat-label>
+      <input matInput type="number" [(ngModel)]="value" />
+    </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) {} @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 enumConfiguration = computed(
+    () => this.configuration() as EnumMessage
+  );
+
+  protected listConfiguration = computed(
+    () => this.configuration() as ListMessage
+  );
+
+  protected mapConfiguration = computed(
+    () => this.configuration() as MapMessage
+  );
+
+  protected readonly MessageTypeEnum = MessageTypeEnum;
+}