From 245e76f697092b3d086a30a8ff02951245ff7858 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Mon, 12 Aug 2024 11:06:15 +0200
Subject: [PATCH] Update on numeric inputs

---
 .../edit-business-listing.component.html      | 19 ++++++++++++++++---
 .../edit-business-listing.component.ts        | 13 +++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
index 367ac4f..349fd58 100644
--- a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
+++ b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
@@ -116,8 +116,15 @@
         </div>
       </div> -->
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <app-validated-input label="Years Established Since" name="established" [(ngModel)]="listing.established" kind="number"></app-validated-input>
-        <app-validated-input label="Employees" name="employees" [(ngModel)]="listing.employees" kind="number"></app-validated-input>
+        <app-validated-input
+          label="Years Established Since"
+          name="established"
+          [(ngModel)]="listing.established"
+          kind="number"
+          mask="0000"
+          (ngModelChange)="onNumericInputChange($event, 'listing.established')"
+        ></app-validated-input>
+        <app-validated-input label="Employees" name="employees" [(ngModel)]="listing.employees" kind="number" mask="0000" (ngModelChange)="onNumericInputChange($event, 'listing.employees')"></app-validated-input>
       </div>
 
       <div class="flex mb-4 space-x-4">
@@ -160,7 +167,13 @@
       </div> -->
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <app-validated-input label="Broker Licensing" name="brokerLicencing" [(ngModel)]="listing.brokerLicencing"></app-validated-input>
-        <app-validated-input label="Internal Listing Number" name="internalListingNumber" [(ngModel)]="listing.internalListingNumber" kind="number"></app-validated-input>
+        <app-validated-input
+          label="Internal Listing Number"
+          name="internalListingNumber"
+          [(ngModel)]="listing.internalListingNumber"
+          kind="number"
+          (ngModelChange)="onNumericInputChange($event, 'listing.internalListingNumber')"
+        ></app-validated-input>
       </div>
 
       <!-- <div class="mb-4">
diff --git a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
index e38c2f7..7ea1547 100644
--- a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
+++ b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
@@ -146,4 +146,17 @@ export class EditBusinessListingComponent {
   changeListingCategory(value: 'business' | 'commercialProperty') {
     routeListingWithState(this.router, value, this.listing);
   }
+  onNumericInputChange(value: string, modelProperty: string): void {
+    const newValue = value === '' ? null : +value;
+    this.setPropertyByPath(this, modelProperty, newValue);
+  }
+
+  private setPropertyByPath(obj: any, path: string, value: any): void {
+    const keys = path.split('.');
+    let target = obj;
+    for (let i = 0; i < keys.length - 1; i++) {
+      target = target[keys[i]];
+    }
+    target[keys[keys.length - 1]] = value;
+  }
 }