#930

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

@@ -80,7 +80,7 @@
   <app-validation-hint-for-input type="outOfRangeDate"
     [minMaxDate]="InfoFormGroup.get('directorDateOfBirth').hasError('matDatepickerMin') || InfoFormGroup.get('directorDateOfBirth').hasError('matDatepickerMax')">
   </app-validation-hint-for-input>
-  <label class="step-label">{{InfoFormGroup.get('type').value === 0 ? "ІПН" : "ЄДПРОУ"}}<span
+  <label class="step-label"> {{this.InfoFormGroup.get('type').value === 0? "ІПН" : "ЄДПРОУ"}}<span
       class="step-required">*</span></label>
   <mat-form-field>
     <input matInput class="step-input" type="text" minlength="10" maxlength="20" formControlName="edrpouIpn"

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

@@ -12,8 +12,12 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-
-  <label class="step-label"> Опис<span class="step-required">*</span></label>
+  <div class="step-label-combined">
+    <label class="step-label"> Опис<span class="step-required">*</span></label>
+    <label class="step-characters-count">
+      {{descriptionFormGroup.value.length}}/{{constants.MAX_DESCRIPTION_ABOUT_LENGTH}}
+    </label>
+  </div>
   <mat-form-field appPlaceholderStyling floatLabel="never" appearance="none">
     <textarea matInput class="step-textarea" placeholder="Максимум {{constants.MAX_DESCRIPTION_ABOUT_LENGTH}} символів"
       formControlName="description" minlength="3" maxlength="{{constants.MAX_DESCRIPTION_ABOUT_LENGTH}}"></textarea>

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

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -19,45 +19,35 @@ export class CreatePhotoFormComponent implements OnInit {
 
   readonly constants: typeof Constants = Constants;
 
-
   @Select(MetaDataState.institutionStatuses)
   institutionStatuses$: Observable<InstitutionStatus[]>;
   destroy$: Subject<boolean> = new Subject<boolean>();
 
   PhotoFormGroup: FormGroup;
-
+  descriptionFormGroup: FormControl = new FormControl('', [Validators.required, Validators.pattern(TEXT_WITH_DIGITS_AND_SYMBOLS_REGEX)]);
   @Input() provider: Provider;
-  @Input() editMode: boolean;
-
+
   @Output() passPhotoFormGroup = new EventEmitter();
 
-  constructor(private formBuilder: FormBuilder, private store: Store) {
+  constructor(private formBuilder: FormBuilder, private store: Store ) {
     this.PhotoFormGroup = this.formBuilder.group({
       image: new FormControl(''),
-      description: new FormControl('', [Validators.required, Validators.pattern(TEXT_WITH_DIGITS_AND_SYMBOLS_REGEX)]),
+      description: this.descriptionFormGroup,
       institutionStatusId: new FormControl(Constants.INSTITUTION_STATUS_ID_ABSENT_VALUE),
-    });
+    }); 
   }
 
   ngOnInit(): void {
     this.store.dispatch(new GetInstitutionStatus());
-    if (this.provider?.institutionStatusId === null) {
-      this.provider.institutionStatusId = 0
-    }
-    this.provider && this.PhotoFormGroup.patchValue(this.provider, { emitEvent: false });
+    this.provider && this.activateEditMode();
     this.passPhotoFormGroup.emit(this.PhotoFormGroup);
-
-    this.institutionStatuses$
-    .pipe(
-      takeUntil(this.destroy$),
-    ).subscribe(() => {
-      if (this.editMode) {
-        this.provider.institutionStatusId = this.provider.institutionStatusId || Constants.SOCIAL_GROUP_ID_ABSENT_VALUE;
-        this.PhotoFormGroup.patchValue(this.provider, { emitEvent: false });
-      }
-    });
   }
 
+  private activateEditMode(): void {
+  this.PhotoFormGroup.patchValue(this.provider, { emitEvent: false });
+  this.provider.institutionStatusId = this.provider.institutionStatusId || Constants.SOCIAL_GROUP_ID_ABSENT_VALUE;
+}
+
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();

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

@@ -1,5 +1,5 @@
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
-import { AfterViewInit, Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild, OnDestroy, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatStepper } from '@angular/material/stepper';
 import { ActivatedRoute, Params } from '@angular/router';
@@ -25,7 +25,7 @@ import { CreateFormComponent } from '../../create-form/create-form.component';
     useValue: { displayDefaultIndicatorType: false }
   }]
 })
-export class CreateProviderComponent extends CreateFormComponent implements OnInit, AfterViewInit, OnDestroy {
+export class CreateProviderComponent extends CreateFormComponent implements OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
   provider: Provider;
   isAgreed: boolean;
   isNotRobot: boolean;  
@@ -41,7 +41,7 @@ export class CreateProviderComponent extends CreateFormComponent implements OnIn
 
   @ViewChild('stepper') stepper: MatStepper;
 
-  constructor(store: Store, route: ActivatedRoute, navigationBarService: NavigationBarService) {
+  constructor(store: Store, route: ActivatedRoute, navigationBarService: NavigationBarService, private changeDetector : ChangeDetectorRef) {
     super(store, route, navigationBarService);
   }
 
@@ -65,6 +65,9 @@ export class CreateProviderComponent extends CreateFormComponent implements OnIn
       });
     }
   }
+  ngAfterViewChecked(){
+    this.changeDetector.detectChanges();
+  }
 
   setEditMode(): void {
     this.provider = this.store.selectSnapshot<Provider>(RegistrationState.provider);