128 lines
3.6 KiB
TypeScript
128 lines
3.6 KiB
TypeScript
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',
|
|
imports: [
|
|
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));
|
|
}
|
|
});
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|