From 0f60377e91ec74108715586f3ec558a13e237eb9 Mon Sep 17 00:00:00 2001
From: vato007 <contact@michaelpivato.dev>
Date: Sat, 29 Jun 2024 14:40:25 +0930
Subject: [PATCH] Add buttons to list field

---
 src/app/list-field/list-field.component.scss |  4 +++
 src/app/list-field/list-field.component.ts   | 29 ++++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/app/list-field/list-field.component.scss b/src/app/list-field/list-field.component.scss
index 5d4e87f..636bf4e 100644
--- a/src/app/list-field/list-field.component.scss
+++ b/src/app/list-field/list-field.component.scss
@@ -1,3 +1,7 @@
 :host {
   display: block;
 }
+
+.row-wrapper {
+  display: flex;
+}
diff --git a/src/app/list-field/list-field.component.ts b/src/app/list-field/list-field.component.ts
index 427dc73..a9bb0bb 100644
--- a/src/app/list-field/list-field.component.ts
+++ b/src/app/list-field/list-field.component.ts
@@ -18,17 +18,34 @@ import {
   selector: 'app-list-field',
   standalone: true,
   imports: [CommonModule, MatButton, MatIconModule, ProtoFieldComponent],
-  template: ` @for(value of values(); track values()) {
-    <app-proto-field
-      [configuration]="configuration().subConfiguration"
-      [value]="value"
-    ></app-proto-field>
+  template: ` @for(value of values(); track $index) {
+    <div class="row-wrapper">
+      <app-proto-field
+        [configuration]="configuration().subConfiguration"
+        [value]="value"
+      ></app-proto-field>
+      <button mat-icon-button (click)="remove($index)">
+        <mat-icon>remove</mat-icon>
+      </button>
+    </div>
     }
-    <button mat-icon-button><mat-icon>add</mat-icon></button>`,
+    <button mat-icon-button (click)="add()"><mat-icon>add</mat-icon></button>`,
   styleUrl: './list-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListFieldComponent {
   configuration = input.required<ListMessage>();
   values = model<any[]>();
+
+  add() {
+    const newValues = this.values();
+    newValues?.push(null);
+    this.values.set(newValues);
+  }
+
+  remove(index: number) {
+    const newValues = this.values();
+    newValues?.splice(index, 1);
+    this.values.set(newValues);
+  }
 }