[High priority bug fix] - fix of dirty user config form, disable actual address, fix validations hints for address

src/app/shell/personal-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.html

@@ -18,9 +18,10 @@ <h4 class="step-title">Юридична адреса</h4>
     (focusout)="onFocusOutLegal($event)">
   </app-city-autocomplete>
   <app-validation-hint 
-    [validationFormControl]="LegalAddressFormGroup.get('city')"
+    [validationFormControl]="cityLegalFormControl"
     [minCharachters]="validationConstants.INPUT_LENGTH_1"
-    [maxCharachters]="validationConstants.INPUT_LENGTH_60">
+    [maxCharachters]="validationConstants.INPUT_LENGTH_60"
+    [isTouched]="cityLegalFormControl.touched">
   </app-validation-hint>
 
   <label class="step-label">Район<span class="step-required">*</span></label>
@@ -81,9 +82,10 @@ <h4>Фактична адреса</h4>
     (focusout)="onFocusOutActual($event)">
   </app-city-autocomplete>
   <app-validation-hint 
-    [validationFormControl]="ActualAddressFormGroup.get('city')"
+    [validationFormControl]="cityActualFormControl"
     [minCharachters]="validationConstants.INPUT_LENGTH_1"
-    [maxCharachters]="validationConstants.INPUT_LENGTH_60">
+    [maxCharachters]="validationConstants.INPUT_LENGTH_60"
+    [isTouched]="cityActualFormControl.touched">
   </app-validation-hint>
 
   <label class="step-label">Район<span class="step-required">*</span></label>

src/app/shell/personal-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.scss

@@ -10,7 +10,7 @@ h4{
   margin-bottom: 1rem;
 }
 .city-autocomplete {
-  padding: 0.2rem 1rem;
+  padding: 0.1rem 1rem;
   border: 1px solid #E3E3E3;
   border-radius: 21px;
   line-height: initial;

src/app/shell/personal-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.spec.ts

@@ -53,6 +53,7 @@ class MockValidationHintForInputComponent{
   @Input() minCharachters: number;
   @Input() maxCharachters: number;
   @Input() minMaxDate: boolean;
+  @Input() isTouched: boolean;
 }
 @Component({
   selector: 'app-city-autocomplete',

src/app/shell/personal-cabinet/provider/create-provider/create-contacts-form/create-contacts-form.component.ts

@@ -9,19 +9,19 @@ import { City } from 'src/app/shared/models/city.model';
 import { Constants } from 'src/app/shared/constants/constants';
 
 const defaultValidators: ValidatorFn[] = [
-  Validators.required, 
+  Validators.required,
   Validators.pattern(NO_LATIN_REGEX),
   Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
-  Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
-]
+  Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
+];
 @Component({
   selector: 'app-create-contacts-form',
   templateUrl: './create-contacts-form.component.html',
-  styleUrls: ['./create-contacts-form.component.scss']
+  styleUrls: ['./create-contacts-form.component.scss'],
 })
 export class CreateContactsFormComponent implements OnInit, OnDestroy {
   readonly validationConstants = ValidationConstants;
-  
+
   ActualAddressFormGroup: FormGroup;
   LegalAddressFormGroup: FormGroup;
   isSameAddressControl: FormControl = new FormControl(false);
@@ -52,8 +52,8 @@ export class CreateContactsFormComponent implements OnInit, OnDestroy {
       region: new FormControl(''),
     });
 
-    this.setDefaultValidators(this.ActualAddressFormGroup); 
-    this.setDefaultValidators(this.LegalAddressFormGroup); 
+    this.setDefaultValidators(this.ActualAddressFormGroup);
+    this.setDefaultValidators(this.LegalAddressFormGroup);
   }
 
   ngOnInit(): void {
@@ -76,15 +76,15 @@ export class CreateContactsFormComponent implements OnInit, OnDestroy {
   }
 
   onFocusOutLegal(city: City): void {
-      if(!this.cityLegalFormControl.value || city?.name === Constants.NO_CITY){
-        this.cityLegalFormControl.setValue(null);
-      } else {
-        this.cityLegalFormControl.setValue(this.cityLegal);
-      }
+    if (!this.cityLegalFormControl.value || city?.name === Constants.NO_CITY) {
+      this.cityLegalFormControl.setValue(null);
+    } else {
+      this.cityLegalFormControl.setValue(this.cityLegal);
+    }
   }
 
   onFocusOutActual(city: City): void {
-    if(!this.cityActualFormControl.value || city?.name === Constants.NO_CITY){
+    if (!this.cityActualFormControl.value || city?.name === Constants.NO_CITY) {
       this.cityActualFormControl.setValue(null);
     } else {
       this.cityActualFormControl.setValue(this.cityActual);
@@ -98,7 +98,8 @@ export class CreateContactsFormComponent implements OnInit, OnDestroy {
     this.ActualAddressFormGroup.addControl('id', this.formBuilder.control(''));
 
     this.LegalAddressFormGroup.patchValue(this.provider.legalAddress, { emitEvent: false });
-    this.provider?.actualAddress && this.ActualAddressFormGroup.patchValue(this.provider.actualAddress, { emitEvent: false });
+    this.provider?.actualAddress &&
+      this.ActualAddressFormGroup.patchValue(this.provider.actualAddress, { emitEvent: false });
 
     this.isSameAddressControl.setValue(!Boolean(this.provider.actualAddress));
   }
@@ -107,29 +108,35 @@ export class CreateContactsFormComponent implements OnInit, OnDestroy {
    * This method makes input enable if radiobutton value is true and sets the value to the formgroup
    */
   private sameAddressHandler(): void {
-    this.isSameAddressControl.valueChanges.pipe(
-      takeUntil(this.destroy$),
-    ).subscribe((isSame: boolean) => {
+    const enable = (reactForm: FormGroup | FormControl) => {
+      reactForm.enable();
+      reactForm.markAsUntouched();
+      this.setDefaultValidators(this.ActualAddressFormGroup);
+    };
+    const disable = (reactForm: FormGroup | FormControl) => {
+      reactForm.reset();
+      reactForm.disable();
+      reactForm.clearValidators();
+    };
+
+    this.isSameAddressControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((isSame: boolean) => {
       if (isSame) {
-        this.ActualAddressFormGroup.reset();
-        this.ActualAddressFormGroup.disable();
-        this.ActualAddressFormGroup.clearValidators();
+        disable(this.ActualAddressFormGroup);
+        disable(this.cityActualFormControl);
       } else {
-        this.ActualAddressFormGroup.enable();
-        this.ActualAddressFormGroup.markAsUntouched();
-        this.setDefaultValidators(this.ActualAddressFormGroup); 
-        this.provider?.actualAddress && this.ActualAddressFormGroup.get('id')
-          .setValue(this.provider.actualAddress.id);
+        enable(this.ActualAddressFormGroup);
+        enable(this.cityActualFormControl);
+        this.provider?.actualAddress && this.ActualAddressFormGroup.get('id').setValue(this.provider.actualAddress.id);
       }
     });
   }
   /**
-  * This method add validators to teh form-group when actual address is not teh same as legal address
-  */
+   * This method add validators to teh form-group when actual address is not teh same as legal address
+   */
   private setDefaultValidators(form: FormGroup): void {
     Object.keys(form.controls).forEach((formControlTitle: string) => {
-        form.get(formControlTitle).setValidators(defaultValidators);
-    });    
+      form.get(formControlTitle).setValidators(defaultValidators);
+    });
   }
 
   ngOnDestroy(): void {

src/app/shell/personal-cabinet/user-config/user-config-edit/user-config-edit.component.scss

@@ -8,4 +8,7 @@
   &-title{
     text-align: center;
   }
+}
+.step {
+  padding: 0 !important;
 }

src/app/shell/personal-cabinet/user-config/user-config-edit/user-config-edit.component.ts

@@ -1,3 +1,4 @@
+import { CreateFormComponent } from 'src/app/shell/personal-cabinet/create-form/create-form.component';
 import { NAME_REGEX } from 'src/app/shared/constants/regex-constants';
 import { Role } from 'src/app/shared/enum/role';
 import { Component, OnDestroy, OnInit } from '@angular/core';
@@ -12,17 +13,18 @@ import { AddNavPath, DeleteNavPath } from 'src/app/shared/store/navigation.actio
 import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service';
 import { NavBarName } from 'src/app/shared/enum/navigation-bar';
 import { ValidationConstants } from 'src/app/shared/constants/validation';
-
+import { ActivatedRoute } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-user-config-edit',
   templateUrl: './user-config-edit.component.html',
-  styleUrls: ['./user-config-edit.component.scss']
+  styleUrls: ['./user-config-edit.component.scss'],
 })
-export class UserConfigEditComponent implements OnInit, OnDestroy {
+export class UserConfigEditComponent extends CreateFormComponent implements OnInit, OnDestroy {
   readonly role = Role;
   readonly validationConstants = ValidationConstants;
-  readonly phonePrefix= Constants.PHONE_PREFIX;
+  readonly phonePrefix = Constants.PHONE_PREFIX;
 
   @Select(RegistrationState.user)
   user$: Observable<User>;
@@ -32,50 +34,65 @@ export class UserConfigEditComponent implements OnInit, OnDestroy {
 
   constructor(
     private fb: FormBuilder,
-    private store: Store,
-    private navigationBarService: NavigationBarService) {
+    store: Store,
+    navigationBarService: NavigationBarService,
+    route: ActivatedRoute
+  ) {
+    super(store, route, navigationBarService);
 
     this.userEditFormGroup = this.fb.group({
       lastName: new FormControl('', [
-        Validators.required, 
+        Validators.required,
         Validators.pattern(NAME_REGEX),
-        Validators.minLength(ValidationConstants.INPUT_LENGTH_1), 
-        Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
+        Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
+        Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
       ]),
       firstName: new FormControl('', [
-        Validators.required, 
+        Validators.required,
         Validators.pattern(NAME_REGEX),
-        Validators.minLength(ValidationConstants.INPUT_LENGTH_1), 
-        Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
+        Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
+        Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
       ]),
       middleName: new FormControl('', [
-        Validators.required, 
+        Validators.required,
         Validators.pattern(NAME_REGEX),
-        Validators.minLength(ValidationConstants.INPUT_LENGTH_1), 
-        Validators.maxLength(ValidationConstants.INPUT_LENGTH_60)
-      ]),
-      phoneNumber: new FormControl('', [
-        Validators.required, 
-        Validators.minLength(ValidationConstants.PHONE_LENGTH)
+        Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
+        Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
       ]),
+      phoneNumber: new FormControl('', [Validators.required, Validators.minLength(ValidationConstants.PHONE_LENGTH)]),
     });
+    this.subscribeOnDirtyForm(this.userEditFormGroup);
   }
 
   ngOnInit(): void {
-    this.user$.subscribe((user: User) => this.user = user);
-    this.user && this.userEditFormGroup.patchValue(this.user);
+    this.user$.pipe(filter((user: User) => !!user)).subscribe((user: User) => (this.user = user));
+    this.setEditMode();
+  }
+
+  setEditMode(): void {
+    this.userEditFormGroup.patchValue(this.user, { emitEvent: false });
+    this.addNavPath();
+  }
 
-    this.store.dispatch(new AddNavPath(this.navigationBarService.createNavPaths(
-      { name: this.store.selectSnapshot<User>(RegistrationState.user)?.role === this.role.provider ?
-        NavBarName.PersonalCabinetProvider : 
-        this.role.techAdmin ?
-        NavBarName.PersonalCabinetTechAdmin :
-        NavBarName.PersonalCabinetParent,
-        path: '/personal-cabinet/config',
-        isActive: false, disable: false
-      },
-      { name: NavBarName.EditInformationAbout, isActive: false, disable: true }
-    )));
+  addNavPath(): void {
+    this.store.dispatch(
+      new AddNavPath(
+        this.navigationBarService.createNavPaths(
+          {
+            name:
+              this.store.selectSnapshot<User>(RegistrationState.user)?.role === this.role.provider
+                ? NavBarName.PersonalCabinetProvider
+                : this.role.techAdmin
+                ? NavBarName.PersonalCabinetTechAdmin
+                : NavBarName.PersonalCabinetParent,
+            path: '/personal-cabinet/config',
+            isActive: false,
+            disable: false,
+          },
+          { name: NavBarName.EditInformationAbout, isActive: false, disable: true }
+        )
+      )
+    );
   }
 
   ngOnDestroy(): void {