Add map field, refine directory structure

src/app/editor/editor.component.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import hljs from 'highlight.js/lib/core';
 import { ProtoMessage } from '../model/proto-message.model';
-import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { ProtoFieldComponent } from './proto-field/proto-field.component';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({

src/app/editor/list-field/list-field.component.scss

@@ -0,0 +1,17 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+.row-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+
+app-proto-field {
+  flex: 1;
+}
+
+.add-button {
+  align-self: flex-end;
+}

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

@@ -0,0 +1,71 @@
+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"
+        (valueChange)="updateValue($index, $event)"
+      ></app-proto-field>
+      <button mat-icon-button (click)="remove($index)">
+        <mat-icon>remove</mat-icon>
+      </button>
+    </div>
+    } }
+    <button mat-icon-button class="add-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 existingValues = this.values();
+    if (existingValues) {
+      const newValues = [...existingValues];
+      newValues.push(undefined);
+      this.values.set(newValues);
+    } else {
+      this.values.set([undefined]);
+    }
+  }
+
+  remove(index: number) {
+    const newValues = [...this.values()!];
+    newValues.splice(index, 1);
+    this.values.set(newValues);
+  }
+
+  updateValue(index: number, value: any) {
+    let existing = [...this.values()!];
+    existing[index] = value;
+    this.values.set(existing);
+  }
+}

src/app/editor/map-field/map-field.component.scss

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+.row-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+
+app-proto-field {
+  flex: 1;
+
+  &:first-child {
+    margin-right: 10px;
+  }
+}
+
+.add-button {
+  align-self: flex-end;
+}

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

@@ -0,0 +1,133 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MapMessage } from '../../model/proto-message.model';
+import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+
+const keyIsEmpty = (key: string | number) => key == null || key === '';
+
+@Component({
+  selector: 'app-map-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    forwardRef(() => ProtoFieldComponent),
+    MatIconModule,
+    MatButtonModule,
+  ],
+  template: `<h3>{{ label() }}</h3>
+    @if(valuePairs()) { @for(value of valuePairs(); track $index) {
+    <div class="row-wrapper">
+      <app-proto-field
+        [configuration]="configuration().keyConfiguration"
+        [value]="value[0]"
+        (valueChange)="updateKey($index, $event)"
+      ></app-proto-field>
+      <app-proto-field
+        [configuration]="configuration().valueConfiguration"
+        [value]="value[1]"
+        (valueChange)="updateValue($index, $event)"
+      ></app-proto-field>
+      <button mat-icon-button (click)="remove($index)">
+        <mat-icon>remove</mat-icon>
+      </button>
+    </div>
+    } }
+    <button mat-icon-button class="add-button" (click)="add()">
+      <mat-icon>add</mat-icon>
+    </button>`,
+  styleUrl: './map-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MapFieldComponent {
+  label = input<string>();
+  configuration = input.required<MapMessage>();
+  values = model<Record<number | string, any>>();
+
+  valuePairs = signal<any[][]>([]);
+
+  private changedInternal = false;
+
+  constructor() {
+    effect(
+      () => {
+        // TODO: Super hacky but can't really think of another way to keep these in sync
+        //    without removing an entry when the key gets blanked. Would need an alternate
+        //    design that updated on blur only perhaps
+        if (this.changedInternal) {
+          this.changedInternal = false;
+          return;
+        }
+        const values = this.values();
+        if (values) {
+          this.valuePairs.set(Object.entries(values));
+        }
+      },
+      { allowSignalWrites: true }
+    );
+  }
+
+  add() {
+    const existingValues = this.valuePairs();
+    if (existingValues) {
+      const newValues = [...existingValues];
+      newValues.push([undefined, undefined]);
+      this.valuePairs.set(newValues);
+    } else {
+      this.valuePairs.set([[undefined, undefined]]);
+    }
+  }
+
+  remove(index: number) {
+    const newValues = { ...this.values()! };
+    const key = this.valuePairs()[index][0];
+    delete newValues[key];
+    this.changedInternal = true;
+    this.values.set(newValues);
+
+    const newValuePairs = [...this.valuePairs()];
+    newValuePairs.splice(index, 1);
+    this.valuePairs.set(newValuePairs);
+  }
+
+  updateKey(index: number, key: string | number) {
+    const values = { ...this.values() };
+    const valuePairs = [...this.valuePairs()];
+    const pair = [...valuePairs[index]];
+    if (!keyIsEmpty(pair[0])) {
+      delete values[pair[0]];
+    }
+    if (!keyIsEmpty(key)) {
+      values[key] = pair[1];
+    }
+    this.changedInternal = true;
+    this.values.set(values);
+
+    pair[0] = key;
+    valuePairs[index] = pair;
+    this.valuePairs.set(valuePairs);
+  }
+
+  updateValue(index: number, value: any) {
+    const valuePairs = [...this.valuePairs()];
+    const pair = [...valuePairs[index]];
+    if (!keyIsEmpty(pair[0])) {
+      let existing = { ...this.values()! };
+      existing[pair[0]] = value;
+      this.changedInternal = true;
+      this.values.set(existing);
+    }
+    pair[1] = value;
+    valuePairs[index] = pair;
+    this.valuePairs.set(valuePairs);
+  }
+}

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

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  & > * {
+    width: 100%;
+  }
+}

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;
+}