From d132cdc8ff5909b956903786687a0eaf10d726ea Mon Sep 17 00:00:00 2001
From: Snider <snider@lt.hn>
Date: Thu, 11 Dec 2025 14:29:08 +0000
Subject: [PATCH] feat: Refactor profile edit form to use custom element
 bindings and improve event handling

---
 ui/src/app/profile-list.component.html | 49 ++++++++++++++++++++------
 ui/src/app/profile-list.component.ts   | 40 ++++++++++++++++++++-
 2 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/ui/src/app/profile-list.component.html b/ui/src/app/profile-list.component.html
index 9976643..12a29ce 100644
--- a/ui/src/app/profile-list.component.html
+++ b/ui/src/app/profile-list.component.html
@@ -4,22 +4,51 @@
     <div class="profile-item">
       @if(editingProfile && editingProfile.id === profile.id) {
         <div class="profile-form">
-          <wa-input [(ngModel)]="editingProfile.name" label="Profile Name"></wa-input>
-          <wa-select [(ngModel)]="editingProfile.minerType" label="Miner Type">
+          <wa-input
+            label="Profile Name"
+            [value]="editingProfile.name"
+            (input)="onNameInput($event)">
+          </wa-input>
+          <wa-select
+            label="Miner Type"
+            [value]="editingProfile.minerType"
+            (change)="onMinerTypeChange($event)">
             @for(miner of state().manageableMiners; track miner.name) {
-              <wa-option [value]="miner.name">{{ miner.name }}</wa-option>
+              <wa-option [value]="miner.name" [selected]="miner.name === editingProfile.minerType">
+                {{ miner.name }}
+              </wa-option>
             }
           </wa-select>
-          <wa-input [(ngModel)]="editingProfile.config.pool" label="Pool Address"></wa-input>
-          <wa-input [(ngModel)]="editingProfile.config.wallet" label="Wallet Address"></wa-input>
-          <wa-checkbox [(ngModel)]="editingProfile.config.tls">TLS</wa-checkbox>
-          <wa-checkbox [(ngModel)]="editingProfile.config.hugePages">Huge Pages</wa-checkbox>
-          <wa-button (click)="updateProfile()">Save</wa-button>
-          <wa-button variant="neutral" (click)="cancelEdit()">Cancel</wa-button>
+          <wa-input
+            label="Pool Address"
+            [value]="editingProfile.config.pool"
+            (input)="onPoolInput($event)">
+          </wa-input>
+          <wa-input
+            label="Wallet Address"
+            [value]="editingProfile.config.wallet"
+            (input)="onWalletInput($event)">
+          </wa-input>
+          <div class="checkbox-group">
+            <wa-checkbox
+              [checked]="editingProfile.config.tls"
+              (change)="onTlsChange($event)">
+              TLS
+            </wa-checkbox>
+            <wa-checkbox
+              [checked]="editingProfile.config.hugePages"
+              (change)="onHugePagesChange($event)">
+              Huge Pages
+            </wa-checkbox>
+          </div>
+          <div class="button-group">
+            <wa-button (click)="updateProfile()">Save</wa-button>
+            <wa-button variant="neutral" (click)="cancelEdit()">Cancel</wa-button>
+          </div>
         </div>
       } @else {
         <span>{{ profile.name }} ({{ profile.minerType }})</span>
-        <div>
+        <div class="button-group">
           <wa-button size="small" (click)="editProfile(profile)">Edit</wa-button>
           <wa-button size="small" variant="danger" (click)="deleteProfile(profile.id)">Delete</wa-button>
         </div>
diff --git a/ui/src/app/profile-list.component.ts b/ui/src/app/profile-list.component.ts
index 608c668..da7e5ef 100644
--- a/ui/src/app/profile-list.component.ts
+++ b/ui/src/app/profile-list.component.ts
@@ -17,12 +17,50 @@ export class ProfileListComponent {
 
   editingProfile: (MiningProfile & { config: any }) | null = null;
 
+  // --- Event Handlers for Custom Elements in Edit Form ---
+  onNameInput(event: Event) {
+    if (this.editingProfile) {
+      this.editingProfile.name = (event.target as HTMLInputElement).value;
+    }
+  }
+
+  onMinerTypeChange(event: Event) {
+    if (this.editingProfile) {
+      this.editingProfile.minerType = (event.target as HTMLSelectElement).value;
+    }
+  }
+
+  onPoolInput(event: Event) {
+    if (this.editingProfile) {
+      this.editingProfile.config.pool = (event.target as HTMLInputElement).value;
+    }
+  }
+
+  onWalletInput(event: Event) {
+    if (this.editingProfile) {
+      this.editingProfile.config.wallet = (event.target as HTMLInputElement).value;
+    }
+  }
+
+  onTlsChange(event: Event) {
+    if (this.editingProfile) {
+      this.editingProfile.config.tls = (event.target as HTMLInputElement).checked;
+    }
+  }
+
+  onHugePagesChange(event: Event) {
+    if (this.editingProfile) {
+      this.editingProfile.config.hugePages = (event.target as HTMLInputElement).checked;
+    }
+  }
+
   deleteProfile(profileId: string) {
     this.minerService.deleteProfile(profileId).subscribe();
   }
 
   editProfile(profile: MiningProfile) {
-    this.editingProfile = { ...profile, config: { ...profile.config } };
+    // Create a deep copy to avoid mutating the original profile object during editing
+    this.editingProfile = JSON.parse(JSON.stringify(profile));
   }
 
   updateProfile() {