Merge branch 'develop' into Oliinyk/2267_2269_CreateChildDirtyAndVali…

…dation

src/app/shared/enum/enumUA/localization.ts

@@ -0,0 +1,4 @@
+export enum Localization {
+  uk,
+  en
+}

src/app/shared/pipes/translate-cases.pipe.ts

@@ -17,7 +17,7 @@ export class TranslateCasesPipe implements PipeTransform {
 
   transform(count: number, enumTranslate: any): string {
     const countLastStr = count?.toString().slice(-1);
-    let countNum = count?.toString();
+    let countNum = count?.toString() || '0';
 
     if (count === 0 || (count >= 11 && count <= 14)) {
       this.translateKey = enumTranslate[2];

src/app/shared/store/meta-data.actions.ts

@@ -8,7 +8,7 @@ export class GetDirections {
 
 export class GetSocialGroup {
   static readonly type = '[meta-data] Get get social groups';
-  constructor() {}
+  constructor(public locale?: string) {}
 }
 
 export class GetInstitutionStatuses {
@@ -37,7 +37,7 @@ export class GetFeaturesList {
 
 export class GetAllInstitutions {
   static readonly type = '[meta-data] Get All Institutions';
-  constructor(public filterNonGovernment: boolean) {}
+  constructor(public filterNonGovernment: boolean, public locale?: string) {}
 }
 
 export class GetAllInstitutionsHierarchy {

src/app/shared/store/meta-data.state.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { Action, Selector, State, StateContext } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { Util } from 'shared/utils/utils';
 
 import { Constants, EMPTY_RESULT } from '../constants/constants';
 import { AchievementType } from '../models/achievement.model';
@@ -175,10 +176,10 @@ export class MetaDataState {
   }
 
   @Action(GetSocialGroup)
-  getSocialGroup({ patchState }: StateContext<MetaDataStateModel>, {}: GetSocialGroup): Observable<DataItem[]> {
+  getSocialGroup({ patchState }: StateContext<MetaDataStateModel>, { locale }: GetSocialGroup): Observable<DataItem[]> {
     patchState({ isLoading: true });
     return this.childrenService
-      .getSocialGroup({ uk: 0, en: 1 }[localStorage.getItem('ui-culture') || 'uk'])
+      .getSocialGroup(Util.getCurrentLocalization(locale))
       .pipe(tap((socialGroups: DataItem[]) => patchState({ socialGroups, isLoading: false })));
   }
 

src/app/shared/utils/utils.ts

@@ -1,3 +1,4 @@
+import { Localization } from 'shared/enum/enumUA/localization';
 import { BaseAdmin } from 'shared/models/admin.model';
 import { AreaAdmin } from 'shared/models/areaAdmin.model';
 import { CodeMessageErrors } from '../enum/enumUA/errors';
@@ -19,6 +20,20 @@ import { EmailConfirmationStatuses } from './../enum/statuses';
  * Utility class that providers methods for shared data manipulations
  */
 export class Util {
+  /**
+   * This method returns current localization as a number for backend requests
+   * <br>
+   * Locale string can be passed as param or by default it is taken from local storage,
+   * but it is required to provide locale if calling from a language change event
+   * because storage gives the previous locale
+   * <br>
+   * Ukrainian locale is 0 and English is 1
+   * @param locale Locale string (uk, en)
+   */
+  public static getCurrentLocalization(locale: string = localStorage.getItem('ui-culture') || 'uk'): number {
+    return Localization[locale];
+  }
+
   /**
    * This method returns child age
    * @param child Child
@@ -66,9 +81,7 @@ export class Util {
   }
 
   public static getTodayBirthDate(): Date {
-    const today = new Date();
-
-    return today;
+    return new Date();
   }
 
   /**

src/app/shell/personal-cabinet/parent/create-child/child-form/child-form.component.spec.ts

@@ -1,18 +1,20 @@
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
+import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ChildFormComponent } from './child-form.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatNativeDateModule, MatOptionModule } from '@angular/material/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule, MatOptionModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
-import { Component, Input } from '@angular/core';
-import { KeyFilterDirective } from '../../../../../shared/directives/key-filter.directive';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
+import { NgxsModule } from '@ngxs/store';
+
+import { KeyFilterDirective } from 'shared/directives/key-filter.directive';
+import { ChildFormComponent } from './child-form.component';
 
 describe('ChildFormComponent', () => {
   let component: ChildFormComponent;
@@ -33,6 +35,7 @@ describe('ChildFormComponent', () => {
         MatSelectModule,
         MatIconModule,
         MatChipsModule,
+        NgxsModule.forRoot([]),
         TranslateModule.forRoot()
       ],
       declarations: [ChildFormComponent, MockValidationHintForInputComponent, KeyFilterDirective]

src/app/shell/personal-cabinet/parent/create-child/child-form/child-form.component.ts

@@ -1,46 +1,74 @@
-import { Component, EventEmitter, Input, Output, OnInit, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { MatSelect } from '@angular/material/select';
+import { MatChipList } from '@angular/material/chips';
 import { MatOption } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
+import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
+import { Store } from '@ngxs/store';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import { DATE_REGEX } from 'shared/constants/regex-constants';
 import { ValidationConstants } from 'shared/constants/validation';
-import { Util } from 'shared/utils/utils';
 import { DataItem } from 'shared/models/item.model';
+import { GetSocialGroup } from 'shared/store/meta-data.actions';
+import { Util } from 'shared/utils/utils';
 
 @Component({
   selector: 'app-child-form',
   templateUrl: './child-form.component.html',
   styleUrls: ['./child-form.component.scss']
 })
-export class ChildFormComponent implements OnInit {
-  readonly validationConstants = ValidationConstants;
-
+export class ChildFormComponent implements OnInit, OnDestroy {
+  public readonly validationConstants = ValidationConstants;
   private readonly NONE_SOCIAL_GROUP_ID = 6;
 
-  @Input() ChildFormGroup: FormGroup;
-  @Input() index: number;
-  @Input() childrenAmount: number;
-  @Input() socialGroups: DataItem[];
+  @Input()
+  public ChildFormGroup: FormGroup;
+  @Input()
+  public index: number;
+  @Input()
+  public childrenAmount: number;
+  @Input()
+  public socialGroups: DataItem[];
 
-  @Output() deleteForm = new EventEmitter();
+  @Output()
+  public deleteForm = new EventEmitter();
 
-  @ViewChild('select') select: MatSelect;
+  @ViewChild('select')
+  private select: MatSelect;
+  @ViewChild('chipList')
+  private chipList: MatChipList;
 
-  socialGroupControl: FormControl = new FormControl([]);
-  dateFilter: RegExp = DATE_REGEX;
+  public socialGroupControl: FormControl = new FormControl([]);
+  public dateFilter: RegExp = DATE_REGEX;
   // TODO: Check the maximum allowable date in this case
-  maxDate: Date = Util.getTodayBirthDate();
-  minDate: Date = Util.getMinBirthDate(ValidationConstants.BIRTH_AGE_MAX);
+  public maxDate: Date = Util.getTodayBirthDate();
+  public minDate: Date = Util.getMinBirthDate(ValidationConstants.BIRTH_AGE_MAX);
 
-  ngOnInit(): void {
+  public destroy$: Subject<boolean> = new Subject<boolean>();
+
+  constructor(private translateService: TranslateService, private store: Store) {}
+
+  public ngOnInit(): void {
     this.socialGroupControl = this.ChildFormGroup.get('socialGroups') as FormControl;
+
+    this.translateService.onLangChange.pipe(takeUntil(this.destroy$)).subscribe(({ lang }: LangChangeEvent) => {
+      this.store.dispatch(new GetSocialGroup(lang));
+      this.chipList.chips.forEach((chip) => chip.remove());
+    });
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
   }
 
   /**
    * This method remove selected option from formControl
    * @param group SocialGroup
    */
-  onRemoveItem(group: DataItem): void {
+  public onRemoveItem(group: DataItem): void {
     this.socialGroupControl.value.splice(this.socialGroupControl.value.indexOf(group), 1);
     this.select.options.find((option: MatOption) => option.value.id === group.id).deselect();
   }
@@ -49,7 +77,7 @@ export class ChildFormComponent implements OnInit {
    * This method disabled option if there is selected value in social group form control and this value is None
    * @param option SocialGroup
    */
-  checkDisabled(option: DataItem): boolean {
+  public checkDisabled(option: DataItem): boolean {
     if (!this.socialGroupControl.value.length) {
       return false;
     } else {
@@ -58,11 +86,11 @@ export class ChildFormComponent implements OnInit {
     }
   }
 
-  compareSocialGroups(group: DataItem, group2: DataItem): boolean {
+  public compareSocialGroups(group: DataItem, group2: DataItem): boolean {
     return group.id === group2.id;
   }
 
-  onDelete(): void {
+  public onDelete(): void {
     this.deleteForm.emit(this.index);
   }
 }