From 17dcd6f1f822695876ae570a33985dcd58f1fa8d Mon Sep 17 00:00:00 2001
From: MiguelPelegrina <95084406+MiguelPelegrina@users.noreply.github.com>
Date: Mon, 22 Apr 2024 12:20:22 +0200
Subject: [PATCH] Implemented that stock in AddEditBookForm only allows whole
 numbers

---
 src/app/app.module.ts                         |  2 ++
 .../add-edit-book-form.component.html         |  1 +
 .../user/add-edit-user-form.component.html    |  2 +-
 .../user/add-edit-user-form.component.ts      | 14 ---------
 .../directives/whole-number.directive.ts      | 31 +++++++++++++++++++
 5 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/app/shared/utils/directives/whole-number.directive.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 767ec73..631ccb6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -60,6 +60,7 @@ import { ButtonGroupComponent } from './components/cart/button-group/button-grou
 import { NgxPermissionsModule } from 'ngx-permissions';
 import { FooterComponent } from './components/footer/footer.component';
 import { BookExcelParserComponent } from './components/book/book-excel-parser/book-excel-parser.component';
+import { WholeNumberDirective } from './shared/utils/directives/whole-number.directive';
 
 @NgModule({
   declarations: [
@@ -89,6 +90,7 @@ import { BookExcelParserComponent } from './components/book/book-excel-parser/bo
     ViewBookComponent,
     FooterComponent,
     BookExcelParserComponent,
+    WholeNumberDirective,
   ],
   imports: [
     AppRoutingModule,
diff --git a/src/app/components/book/add-edit-book-form/add-edit-book-form.component.html b/src/app/components/book/add-edit-book-form/add-edit-book-form.component.html
index 1ef1c5f..a41b959 100644
--- a/src/app/components/book/add-edit-book-form/add-edit-book-form.component.html
+++ b/src/app/components/book/add-edit-book-form/add-edit-book-form.component.html
@@ -125,6 +125,7 @@ <h1 class="text-center m-2 p-2" *ngIf="!isAddMode">Edit book</h1>
           <!-- STOCK -->
           <mat-label>Stock</mat-label>
           <input
+          appWholeNumber
           formControlName="stock"
           matInput
           placeholder="Enter the stock"
diff --git a/src/app/components/user/forms/user/add-edit-user-form.component.html b/src/app/components/user/forms/user/add-edit-user-form.component.html
index 5b62b11..effaac5 100644
--- a/src/app/components/user/forms/user/add-edit-user-form.component.html
+++ b/src/app/components/user/forms/user/add-edit-user-form.component.html
@@ -31,7 +31,7 @@
       <div class="col-sm">
         <mat-form-field class="form-group w-100" appearance="fill">
           <mat-label>Email</mat-label>
-          <input formControlName="email" matInput placeholder="Enter your email" required type="text">
+          <input formControlName="email" matInput placeholder="Enter your email" [readonly]="" required type="text" >
           <mat-error *ngIf="f['email'].invalid">{{getErrorMessage('email')}}</mat-error>
         </mat-form-field>
       </div>
diff --git a/src/app/components/user/forms/user/add-edit-user-form.component.ts b/src/app/components/user/forms/user/add-edit-user-form.component.ts
index 9125a54..3ca169a 100644
--- a/src/app/components/user/forms/user/add-edit-user-form.component.ts
+++ b/src/app/components/user/forms/user/add-edit-user-form.component.ts
@@ -50,19 +50,5 @@ export class AddEditUserForm extends AbstractForm implements OnDestroy, OnInit {
     this.id = this.route.snapshot.params['id'];
 
     this.form = this.rootFormGroup.control.get(this.formGroupName) as FormGroup;
-
-    if(this.id){
-      this.loadUser();
-    }
-  }
-
-  // Private methods
-  /**
-   * Load user data using the user service based on the provided ID.
-   */
-  private loadUser(){
-    this.userService.getById(this.id!).subscribe((response) => {
-      this.form.patchValue(response);
-    })
   }
 }
diff --git a/src/app/shared/utils/directives/whole-number.directive.ts b/src/app/shared/utils/directives/whole-number.directive.ts
new file mode 100644
index 0000000..d904e92
--- /dev/null
+++ b/src/app/shared/utils/directives/whole-number.directive.ts
@@ -0,0 +1,31 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS } from '@angular/forms';
+
+@Directive({
+  selector: '[appWholeNumber]',
+})
+export class WholeNumberDirective {
+  private regex: RegExp = new RegExp(/^[0-9]+$/);
+
+  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
+
+  constructor(private el: ElementRef) {}
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    // Allow Backspace, tab, end, and home keys
+    if (this.specialKeys.indexOf(event.key) !== -1) {
+      return;
+    }
+
+    let current: string = this.el.nativeElement.value;
+
+    const position = this.el.nativeElement.selectionStart;
+
+    const next: string = [current.slice(0, position), event.key == 'Whole' ? '.' : event.key, current.slice(position)].join('');
+
+    if (next && !String(next).match(this.regex)) {
+      event.preventDefault();
+    }
+  }
+}