Add map field, refine directory structure

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