From 17213ba4b0b854677100fce0ac1bac594ae1d468 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Mon, 9 Sep 2024 20:13:11 +0200
Subject: [PATCH] Fix: #104

---
 .../account/account.component.html            | 35 ++++++++++---------
 .../subscription/account/account.component.ts |  8 ++---
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/bizmatch/src/app/pages/subscription/account/account.component.html b/bizmatch/src/app/pages/subscription/account/account.component.html
index cfaf8a1..2f05ab4 100644
--- a/bizmatch/src/app/pages/subscription/account/account.component.html
+++ b/bizmatch/src/app/pages/subscription/account/account.component.html
@@ -147,28 +147,31 @@
           <app-tooltip [id]="tooltipTargetAreasServed" [text]="getValidationMessage('areasServed')"></app-tooltip>
           }
         </h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
+        <div class="grid grid-cols-12 gap-4">
+          <div class="col-span-6">
             <label for="state" class="block text-sm font-medium text-gray-700">State</label>
           </div>
-          <div>
+          <div class="col-span-5">
             <label for="county" class="block text-sm font-medium text-gray-700">County</label>
           </div>
         </div>
         @for (areasServed of user.areasServed; track areasServed; let i=$index){
-        <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4 gap-1 mb-3 md:mb-1">
-          <div>
+        <div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
+          <div class="col-span-6">
             <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="areasServed.state" (ngModelChange)="setState(i, $event)" name="state{{ i }}"> </ng-select>
           </div>
-          <div>
+          <div class="col-span-5">
             <!-- <input type="text" id="county{{ i }}" name="county{{ i }}" [(ngModel)]="areasServed.county" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" /> -->
             <app-validated-county name="county{{ i }}" [(ngModel)]="areasServed.county" labelClasses="text-gray-900 font-medium" [state]="areasServed.state" [readonly]="!areasServed.state"></app-validated-county>
           </div>
+          <div class="col-span-1">
+            <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8" (click)="removeArea(i)">-</button>
+          </div>
         </div>
         }
         <div class="mt-2">
-          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2" (click)="addArea()">+</button>
-          <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md" (click)="removeArea()">-</button>
+          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8" (click)="addArea()">+</button>
+
           <span class="text-sm text-gray-500 ml-2">[Add more Areas or remove existing ones.]</span>
         </div>
       </div>
@@ -185,20 +188,20 @@
           <app-tooltip [id]="tooltipTargetLicensed" [text]="getValidationMessage('licensedIn')"></app-tooltip>
           }
         </h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
+        <div class="grid grid-cols-12 gap-4">
+          <div class="col-span-6">
             <label for="state" class="block text-sm font-medium text-gray-700">State</label>
           </div>
-          <div>
+          <div class="col-span-5">
             <label for="county" class="block text-sm font-medium text-gray-700">License Number</label>
           </div>
         </div>
         @for (licensedIn of user.licensedIn; track licensedIn; let i=$index){
-        <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4 gap-1 mb-3 md:mb-1">
-          <div>
+        <div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
+          <div class="col-span-6">
             <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="licensedIn.state" name="state{{ i }}"> </ng-select>
           </div>
-          <div>
+          <div class="col-span-5">
             <input
               type="text"
               id="licenseNumber{{ i }}"
@@ -207,11 +210,11 @@
               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
             />
           </div>
+          <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8" (click)="removeLicence(i)">-</button>
         </div>
         }
         <div class="mt-2">
-          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2" (click)="addLicence()">+</button>
-          <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md" (click)="removeLicence()">-</button>
+          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8" (click)="addLicence()">+</button>
           <span class="text-sm text-gray-500 ml-2">[Add more licenses or remove existing ones.]</span>
         </div>
       </div>
diff --git a/bizmatch/src/app/pages/subscription/account/account.component.ts b/bizmatch/src/app/pages/subscription/account/account.component.ts
index dc4285c..cac5ad4 100644
--- a/bizmatch/src/app/pages/subscription/account/account.component.ts
+++ b/bizmatch/src/app/pages/subscription/account/account.component.ts
@@ -204,14 +204,14 @@ export class AccountComponent {
   addLicence() {
     this.user.licensedIn.push({ registerNo: '', state: '' });
   }
-  removeLicence() {
-    this.user.licensedIn.splice(this.user.licensedIn.length - 1, 1);
+  removeLicence(index: number) {
+    this.user.licensedIn.splice(index, 1);
   }
   addArea() {
     this.user.areasServed.push({ county: '', state: '' });
   }
-  removeArea() {
-    this.user.areasServed.splice(this.user.areasServed.length - 1, 1);
+  removeArea(index: number) {
+    this.user.areasServed.splice(index, 1);
   }
   get isProfessional() {
     return this.user.customerType === 'professional';