From d5d75b1b5ea56616680cd46bdf4e1c8aeab8966d Mon Sep 17 00:00:00 2001
From: fe-dev <Dgerik2015@gmail.com>
Date: Mon, 18 Jul 2022 11:40:49 +0300
Subject: [PATCH] UI: Refactoring

---
 .../shared/components/contact.component.html  |  2 +-
 .../components/phone-input.component.ts       | 39 +++++++++++++------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/contact.component.html b/ui-ngx/src/app/shared/components/contact.component.html
index 2776c88863..d3e6c474d0 100644
--- a/ui-ngx/src/app/shared/components/contact.component.html
+++ b/ui-ngx/src/app/shared/components/contact.component.html
@@ -57,7 +57,7 @@
   </mat-form-field>
   <tb-phone-input [required]="false"
                   [label]="'contact.phone'"
-                  [enableFlagsSelect]="false"
+                  [enableFlagsSelect]="true"
                   formControlName="phone">
   </tb-phone-input>
   <mat-form-field class="mat-block">
diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts
index 1be1e20d29..2f055bbb59 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.ts
+++ b/ui-ngx/src/app/shared/components/phone-input.component.ts
@@ -92,7 +92,6 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
       this.isLoading = value;
       if (this.phoneFormGroup) {
         this.defineCountryFromNumber(this.phoneFormGroup.get('phoneNumber').value);
-        this.getFlagAndPhoneNumberData(this.phoneFormGroup.get('country').value);
       }
     }
   }
@@ -103,6 +102,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
   private countryCallingCode = '+';
   private modelValue: string;
   private changeSubscriptions: Subscription[] = [];
+  private validators: ValidatorFn[] = [(c: FormControl) => Validators.pattern(this.getPhoneNumberPattern())(c), this.validatePhoneNumber()];
 
   private propagateChange = (v: any) => { };
 
@@ -116,15 +116,16 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
   }
 
   ngOnInit(): void {
-    const validators: ValidatorFn[] = [(c: FormControl) => Validators.pattern(this.getPhoneNumberPattern())(c), this.validatePhoneNumber()];
     if (this.required) {
-      validators.push(Validators.required);
+      this.validators.push(Validators.required);
     }
     this.phoneFormGroup = this.fb.group({
       country: [this.defaultCountry, []],
-      phoneNumber: [null, validators]
+      phoneNumber: [null, this.validators]
     });
 
+    this.flagIcon = this.getFlagIcon(this.phoneFormGroup.get('country').value);
+
     this.changeSubscriptions.push(this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => {
       this.updateModel();
       this.defineCountryFromNumber(value);
@@ -154,11 +155,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
   focus() {
     const phoneNumber = this.phoneFormGroup.get('phoneNumber');
     if (!phoneNumber.value) {
-      phoneNumber.patchValue(this.countryCallingCode, {emitEvent: false});
-    }
-    if (phoneNumber.untouched && this.countryCallingCode !== phoneNumber.value) {
-      phoneNumber.markAsTouched();
-      phoneNumber.updateValueAndValidity();
+      phoneNumber.patchValue(this.countryCallingCode, {emitEvent: true});
     }
   }
 
@@ -214,7 +211,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
 
   validate(): ValidationErrors | null {
     const phoneNumber = this.phoneFormGroup.get('phoneNumber');
-    return phoneNumber.valid ? null : {
+    return phoneNumber.valid || this.countryCallingCode === phoneNumber.value ? null : {
       phoneFormGroup: false
     };
   }
@@ -239,6 +236,24 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
     this.modelValue = phoneNumber;
     let country = this.defaultCountry;
     if (this.parsePhoneNumberFromString) {
+      this.phoneFormGroup.get('phoneNumber').clearValidators();
+      this.phoneFormGroup.get('phoneNumber').setValidators(this.validators);
+      if (phoneNumber) {
+        const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber);
+        if (parsedPhoneNumber?.isValid() && parsedPhoneNumber?.isPossible()) {
+          this.enableFlagsSelect = true;
+        } else {
+          const validators = [Validators.maxLength(255)];
+          if (this.required) {
+            validators.push(Validators.required);
+          }
+          this.phoneFormGroup.get('phoneNumber').setValidators(validators);
+          this.enableFlagsSelect = false;
+        }
+      } else {
+        this.enableFlagsSelect = true;
+      }
+      this.phoneFormGroup.updateValueAndValidity({emitEvent: false});
       country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry;
       this.getFlagAndPhoneNumberData(country);
     }
@@ -247,7 +262,9 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
 
   private updateModel() {
     const phoneNumber = this.phoneFormGroup.get('phoneNumber');
-    if (phoneNumber.valid) {
+    if (phoneNumber.value === '+' || phoneNumber.value === this.countryCallingCode) {
+      this.propagateChange(null);
+    } else if (phoneNumber.valid) {
       this.modelValue = phoneNumber.value;
       this.propagateChange(this.modelValue);
     } else {