From 8b656f3a2b8182fc4ddc7b94ade7f6b2cc9db530 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 16:05:11 +0300
Subject: [PATCH 01/13] personalInfoRole

---
 src/app/shared/enum/role.ts                   |  8 ++
 src/app/shared/models/user.model.ts           |  8 +-
 src/app/shared/services/user/user.service.ts  | 22 +++--
 src/app/shared/store/registration.actions.ts  | 16 ++++
 src/app/shared/store/registration.state.ts    | 93 +++++++++++--------
 src/app/shared/store/user.actions.ts          | 12 ---
 src/app/shared/store/user.state.ts            | 32 -------
 .../user-config-edit.component.html           | 68 ++++++++------
 .../user-config-edit.component.ts             | 23 +++--
 .../user-config/user-config.component.html    | 22 +++--
 .../user-config/user-config.component.ts      |  8 ++
 11 files changed, 175 insertions(+), 137 deletions(-)

diff --git a/src/app/shared/enum/role.ts b/src/app/shared/enum/role.ts
index 6a04e19d69..90486918af 100644
--- a/src/app/shared/enum/role.ts
+++ b/src/app/shared/enum/role.ts
@@ -10,6 +10,14 @@ export enum Role {
   None = 'None'
 }
 
+export enum PersonalInfoRole {
+  provider = 'Provider',
+  parent = 'Parent',
+  techAdmin = 'TechAdmin',
+  providerAdmin = 'ProviderAdmin',
+  ministryAdmin = 'MinistryAdmin',
+}
+
 export enum cardType {
   provider = 'provider',
   parent = 'parent',
diff --git a/src/app/shared/models/user.model.ts b/src/app/shared/models/user.model.ts
index b55251820d..cfaba4037b 100644
--- a/src/app/shared/models/user.model.ts
+++ b/src/app/shared/models/user.model.ts
@@ -15,12 +15,18 @@ export class User implements Person {
   email?: string;
   phoneNumber?: string;
   role: string;
+  dateOfBirth: string;
 
   constructor(info, id: string) {
     this.firstName = info.firstName;
     this.lastName = info.lastName;
     this.middleName = info.middleName;
-    this.gender = info.gender;
+    if(info.gender){
+      this.gender = info.gender;
+    }
+    if(info.dateOfBirth){
+      this.dateOfBirth = info.dateOfBirth;
+    }
     this.phoneNumber = info.phoneNumber;
     this.id = id;
   }
diff --git a/src/app/shared/services/user/user.service.ts b/src/app/shared/services/user/user.service.ts
index 456e1971dd..755bc2b8ea 100644
--- a/src/app/shared/services/user/user.service.ts
+++ b/src/app/shared/services/user/user.service.ts
@@ -2,26 +2,28 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { User } from '../../models/user.model';
-import { map } from 'rxjs/operators';
+import { PersonalInfoRole } from '../../enum/role';
 
 @Injectable({ providedIn: 'root' })
 export class UserService {
-
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {}
 
   /**
-   * gets user data
-   * @return object of type User
+   * This method get Personal Info according to teh user role
+   * @param userRole: PersonalInfoRole
+   * @return user: User
    */
-  getUserById(id): Observable<User> {
-    return this.http.get<User>(`/api/v1/User/GetUserById/${id}`);
+  getPersonalInfo(userRole: PersonalInfoRole): Observable<User> {
+    return this.http.get<User>(`/api/v1/${userRole}/GetPersonalInfo`);
   }
 
   /**
-   * This method update Provider
+   * This method update Personal Info according to teh user role
+   * @param userRole: PersonalInfoRole
    * @param user: User
+   * @return user: User
    */
-  updateUser(user: User): Observable<object> {
-    return this.http.put('/api/v1/User/Update', user);
+  updatePersonalInfo(userRole: PersonalInfoRole, user: User): Observable<User> {
+    return this.http.put<User>(`/api/v1/${userRole}/UpdatePersonalInfo`, user);
   }
 }
diff --git a/src/app/shared/store/registration.actions.ts b/src/app/shared/store/registration.actions.ts
index 215e86830c..2fd267e8d1 100644
--- a/src/app/shared/store/registration.actions.ts
+++ b/src/app/shared/store/registration.actions.ts
@@ -1,3 +1,7 @@
+import { HttpErrorResponse, HttpResponse } from "@angular/common/http";
+import { PersonalInfoRole } from "../enum/role";
+import { User } from "../models/user.model";
+
 export class Login {
   static readonly type = '[user] logins';
   constructor(public payload: boolean) { }
@@ -29,3 +33,15 @@ export class RegisterUser {
   static readonly type = '[user] change register status';
   constructor() { }
 }
+export class UpdateUser {
+  static readonly type = '[user] update User';
+  constructor(public userRole: PersonalInfoRole, public user: User) { }
+}
+export class OnUpdateUserFail {
+  static readonly type = '[user] update User fail';
+  constructor(public payload: HttpErrorResponse) { }
+}
+export class OnUpdateUserSuccess {
+  static readonly type = '[user] update User success';
+  constructor(public payload: PersonalInfoRole) { }
+}
\ No newline at end of file
diff --git a/src/app/shared/store/registration.state.ts b/src/app/shared/store/registration.state.ts
index 1aad745fde..656996b3be 100644
--- a/src/app/shared/store/registration.state.ts
+++ b/src/app/shared/store/registration.state.ts
@@ -7,6 +7,9 @@ import {
   OnAuthFail,
   CheckRegistration,
   GetProfile,
+  OnUpdateUserSuccess,
+  UpdateUser,
+  OnUpdateUserFail,
 } from './registration.actions';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
 import jwt_decode from 'jwt-decode';
@@ -16,14 +19,16 @@ import { ProviderService } from '../services/provider/provider.service';
 import { ParentService } from '../services/parent/parent.service';
 import { Parent } from '../models/parent.model';
 import { TechAdmin } from '../models/techAdmin.model';
-import { tap } from 'rxjs/operators';
+import { catchError, tap } from 'rxjs/operators';
 import { Provider } from '../models/provider.model';
 import { Router } from '@angular/router';
 import { Role } from '../enum/role';
 import { UserService } from '../services/user/user.service';
-import { Observable } from 'rxjs';
+import { Observable, of, throwError } from 'rxjs';
 import { TechAdminService } from '../services/tech-admin/tech-admin.service';
 import { SignalRService } from '../services/signalR/signal-r.service';
+import { MarkFormDirty, ShowMessageBar } from './app.actions';
+import { HttpErrorResponse } from '@angular/common/http';
 export interface RegistrationStateModel {
   isAuthorized: boolean;
   isLoading: boolean;
@@ -45,7 +50,7 @@ export interface RegistrationStateModel {
     parent: undefined,
     techAdmin: undefined,
     role: Role.unauthorized,
-    subrole: null
+    subrole: null,
   },
 })
 @Injectable()
@@ -55,8 +60,8 @@ export class RegistrationState {
     return state.isAuthorized;
   }
   @Selector()
-  static isLoading(state: RegistrationStateModel): boolean { 
-    return state.isLoading
+  static isLoading(state: RegistrationStateModel): boolean {
+    return state.isLoading;
   }
   @Selector()
   static isRegistered(state: RegistrationStateModel): boolean {
@@ -121,29 +126,27 @@ export class RegistrationState {
   }
 
   @Action(CheckAuth)
-  CheckAuth({
-    patchState,
-    dispatch,
-  }: StateContext<RegistrationStateModel>): void { 
+  CheckAuth({ patchState, dispatch }: StateContext<RegistrationStateModel>): void {
     patchState({ isLoading: true });
-    this.oidcSecurityService.checkAuth().subscribe((auth) => {
-      console.log('is authenticated', auth);
+    this.oidcSecurityService.checkAuth().subscribe((auth: boolean) => {
       patchState({ isAuthorized: auth });
-      if (auth) {  
+      if (auth) {
         const token = jwt_decode(this.oidcSecurityService.getToken());
-        const id = token['sub'];
+        // const id = token['sub'];
         const subrole = token['subrole'];
-       
-        this.userService.getUserById(id).subscribe((user) => {
-          patchState({ subrole: subrole , user: user, isLoading: false });
+        const role = token['role'];
+
+        patchState({ subrole, role });
+
+        this.userService.getPersonalInfo(role).subscribe(user => {
+          patchState({ user, isLoading: false });
           dispatch(new CheckRegistration());
         });
       } else {
-        patchState({ isLoading: false });
-        patchState({ role: Role.unauthorized });
+        patchState({ role: Role.unauthorized, isLoading: false });
       }
     });
-  }  
+  }
 
   @Action(OnAuthFail)
   onAuthFail(): void {
@@ -155,16 +158,11 @@ export class RegistrationState {
   }
 
   @Action(CheckRegistration)
-  checkRegistration({
-    dispatch,
-    getState,
-  }: StateContext<RegistrationStateModel>): void {
+  checkRegistration({ dispatch, getState }: StateContext<RegistrationStateModel>): void {
     const state = getState();
     this.signalRservice.startConnection();
 
-    state.user.isRegistered
-      ? dispatch(new GetProfile())
-      : this.router.navigate(['/create-provider', '']);
+    state.user.isRegistered ? dispatch(new GetProfile()) : this.router.navigate(['/create-provider', '']);
   }
 
   @Action(GetProfile)
@@ -174,24 +172,43 @@ export class RegistrationState {
   ): Observable<Parent> | Observable<Provider> {
     const state = getState();
     patchState({ role: state.user.role as Role });
-    
+
     switch (state.user.role) {
       case Role.parent:
-        return this.parentService
-          .getProfile()
-          .pipe(tap((parent: Parent) => patchState({ parent: parent })));
+        return this.parentService.getProfile().pipe(tap((parent: Parent) => patchState({ parent: parent })));
       case Role.techAdmin:
         return this.techAdminService
           .getProfile()
-          .pipe(
-            tap((techAdmin: TechAdmin) => patchState({ techAdmin: techAdmin }))
-          );
+          .pipe(tap((techAdmin: TechAdmin) => patchState({ techAdmin: techAdmin })));
       default:
-        return this.providerService
-          .getProfile()
-          .pipe(
-            tap((provider: Provider) => patchState({ provider: provider }))
-          );
+        return this.providerService.getProfile().pipe(tap((provider: Provider) => patchState({ provider: provider })));
     }
   }
+
+  @Action(UpdateUser)
+  updateUser({ dispatch }: StateContext<RegistrationStateModel>, { userRole, user }: UpdateUser): Observable<object> {
+    return this.userService.updatePersonalInfo(userRole, user).pipe(
+      tap((res: User) => dispatch(new OnUpdateUserSuccess(userRole))),
+      catchError((error: HttpErrorResponse) => of(dispatch(new OnUpdateUserFail(error))))
+    );
+  }
+
+  @Action(OnUpdateUserFail)
+  onUpdateUserFail({ dispatch }: StateContext<RegistrationStateModel>, { payload }: OnUpdateUserFail): void {
+    throwError(payload);
+    dispatch(new ShowMessageBar({ message: 'На жаль виникла помилка', type: 'error' }));
+  }
+
+  @Action(OnUpdateUserSuccess)
+  onUpdateUserSuccess({ dispatch }: StateContext<RegistrationStateModel>, { payload }: OnUpdateUserSuccess): void {
+    dispatch([
+      new MarkFormDirty(false),
+      this.userService.getPersonalInfo(payload),
+      new ShowMessageBar({
+        message: 'Особиста інформація успішно відредагована',
+        type: 'success',
+      }),
+    ]);
+    this.router.navigate(['/personal-cabinet/config']);
+  }
 }
diff --git a/src/app/shared/store/user.actions.ts b/src/app/shared/store/user.actions.ts
index fcb7119057..05cdb44170 100644
--- a/src/app/shared/store/user.actions.ts
+++ b/src/app/shared/store/user.actions.ts
@@ -246,18 +246,6 @@ export class OnUpdateProviderSuccess {
   static readonly type = '[user] update Provider success';
   constructor(public payload) { }
 }
-export class UpdateUser {
-  static readonly type = '[user] update User';
-  constructor(public payload: User) { }
-}
-export class OnUpdateUserFail {
-  static readonly type = '[user] update User fail';
-  constructor(public payload: HttpErrorResponse) { }
-}
-export class OnUpdateUserSuccess {
-  static readonly type = '[user] update User success';
-  constructor(public payload) { }
-}
 export class UpdateApplication {
   static readonly type = '[user] update Application';
   constructor(public payload: ApplicationUpdate) { }
diff --git a/src/app/shared/store/user.state.ts b/src/app/shared/store/user.state.ts
index 80e157e355..d1fc57a838 100644
--- a/src/app/shared/store/user.state.ts
+++ b/src/app/shared/store/user.state.ts
@@ -54,9 +54,6 @@ import {
   UpdateProvider,
   OnUpdateProviderFail,
   OnUpdateProviderSuccess,
-  UpdateUser,
-  OnUpdateUserFail,
-  OnUpdateUserSuccess,
   GetWorkshopById,
   OnGetWorkshopByIdFail,
   GetApplicationsByProviderId,
@@ -245,7 +242,6 @@ export class UserState {
     private providerAdminService: ProviderAdminService,
     private achievementsService: AchievementsService,
     private router: Router,
-    private userService: UserService,
     private ratingService: RatingService,
     private favoriteWorkshopsService: FavoriteWorkshopsService,
     private blockService: BlockService,
@@ -843,34 +839,6 @@ export class UserState {
     dispatch(new GetProfile()).subscribe(() => this.router.navigate(['/personal-cabinet/provider/info']));
   }
 
-  @Action(UpdateUser)
-  updateUser({ dispatch }: StateContext<UserStateModel>, { payload }: UpdateUser): Observable<object> {
-    return this.userService.updateUser(payload).pipe(
-      tap(res => dispatch(new OnUpdateUserSuccess(res))),
-      catchError((error: HttpErrorResponse) => of(dispatch(new OnUpdateUserFail(error))))
-    );
-  }
-
-  @Action(OnUpdateUserFail)
-  onUpdateUserFail({ dispatch }: StateContext<UserStateModel>, { payload }: OnUpdateUserFail): void {
-    throwError(payload);
-    dispatch(new ShowMessageBar({ message: 'На жаль виникла помилка', type: 'error' }));
-  }
-
-  @Action(OnUpdateUserSuccess)
-  onUpdateUserSuccess({ dispatch }: StateContext<UserStateModel>, { payload }: OnUpdateUserSuccess): void {
-    dispatch(new MarkFormDirty(false));
-    console.log('User is updated', payload);
-    dispatch([
-      new CheckAuth(),
-      new ShowMessageBar({
-        message: 'Особиста інформація успішно відредагована',
-        type: 'success',
-      }),
-    ]);
-    this.router.navigate(['/personal-cabinet/config']);
-  }
-
   @Action(UpdateApplication)
   updateApplication({ dispatch }: StateContext<UserStateModel>, { payload }: UpdateApplication): Observable<object> {
     return this.applicationService.updateApplication(payload).pipe(
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.html b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.html
index b30c4aebfa..d0871fe628 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.html
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.html
@@ -5,12 +5,11 @@ <h3 class="wrapper-title">РЕДАГУВАННЯ ОСОБИСТОЇ ІНФОРМ
     </div>
     <div fxLayout="row" fxLayoutAlign="center center">
       <form [formGroup]="userEditFormGroup" fxLayout="column" fxLayoutAlign="center space-between" class="step">
-
         <label class="step-label"> Прізвище <span class="step-required">*</span></label>
         <mat-form-field>
-          <input matInput class="step-input" type="text" formControlName="lastName" appTrimValue>
+          <input matInput class="step-input" type="text" formControlName="lastName" appTrimValue />
         </mat-form-field>
-        <app-validation-hint 
+        <app-validation-hint
           [validationFormControl]="userEditFormGroup.get('lastName')"
           [minCharachters]="validationConstants.INPUT_LENGTH_1"
           [maxCharachters]="validationConstants.INPUT_LENGTH_60">
@@ -18,9 +17,9 @@ <h3 class="wrapper-title">РЕДАГУВАННЯ ОСОБИСТОЇ ІНФОРМ
 
         <label class="step-label"> Ім'я <span class="step-required">*</span></label>
         <mat-form-field>
-          <input matInput class="step-input" type="text" formControlName="firstName" appTrimValue>
+          <input matInput class="step-input" type="text" formControlName="firstName" appTrimValue />
         </mat-form-field>
-        <app-validation-hint 
+        <app-validation-hint
           [validationFormControl]="userEditFormGroup.get('firstName')"
           [minCharachters]="validationConstants.INPUT_LENGTH_1"
           [maxCharachters]="validationConstants.INPUT_LENGTH_60">
@@ -28,45 +27,60 @@ <h3 class="wrapper-title">РЕДАГУВАННЯ ОСОБИСТОЇ ІНФОРМ
 
         <label class="step-label"> По-батькові <span class="step-required">*</span></label>
         <mat-form-field>
-          <input matInput class="step-input" type="text" formControlName="middleName" appTrimValue>
+          <input matInput class="step-input" type="text" formControlName="middleName" appTrimValue />
         </mat-form-field>
-        <app-validation-hint 
+        <app-validation-hint
           [validationFormControl]="userEditFormGroup.get('middleName')"
           [minCharachters]="validationConstants.INPUT_LENGTH_1"
           [maxCharachters]="validationConstants.INPUT_LENGTH_60">
         </app-validation-hint>
 
-        <label class="step-label">Стать<span class="step-required">*</span></label>
-        <mat-radio-group formControlName="gender" color="primary">
-          <mat-radio-button class="step-radio" [value]="0">Чоловіча</mat-radio-button>
-          <mat-radio-button class="step-radio" [value]="1">Жіноча</mat-radio-button>
-        </mat-radio-group>
-        <app-validation-hint 
-          [validationFormControl]="userEditFormGroup.get('gender')">
-        </app-validation-hint>
+        <ng-container *ngIf="userRole === role.parent">
+          <label class="step-label">Дата народження<span class="step-required">*</span></label>
+          <mat-form-field appPlaceholderStyling class="step-input step-input-date" floatLabel="never">
+            <input matInput [matDatepicker]="picker" formControlName="dateOfBirth" placeholder="ДД/ММ/РРРР" />
+            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-datepicker #picker></mat-datepicker>
+          </mat-form-field>
+
+          <label class="step-label">Стать<span class="step-required">*</span></label>
+          <mat-radio-group formControlName="gender" color="primary">
+            <mat-radio-button class="step-radio" [value]="0">Чоловіча</mat-radio-button>
+            <mat-radio-button class="step-radio" [value]="1">Жіноча</mat-radio-button>
+          </mat-radio-group>
+          <app-validation-hint [validationFormControl]="userEditFormGroup.get('gender')"> </app-validation-hint>
+        </ng-container>
 
         <label class="step-label"> Телефон <span class="step-required">*</span></label>
         <mat-form-field>
-          <div fxLayout='row' fxLayoutAlign='start center'>
+          <div fxLayout="row" fxLayoutAlign="start center">
             <span class="step-text">{{ phonePrefix }}</span>
-            <input matInput class="step-input" type="tel" formControlName="phoneNumber" appDigitOnly ui-number-mask
-              ui-hide-group-sep maxlength="{{validationConstants.PHONE_LENGTH}}" appTrimValue>
-          </div>          
+            <input
+              matInput
+              class="step-input"
+              type="tel"
+              formControlName="phoneNumber"
+              appDigitOnly
+              ui-number-mask
+              ui-hide-group-sep
+              maxlength="{{ validationConstants.PHONE_LENGTH }}"
+              appTrimValue />
+          </div>
         </mat-form-field>
-        <app-validation-hint 
+        <app-validation-hint
           [validationFormControl]="userEditFormGroup.get('phoneNumber')"
           [minCharachters]="validationConstants.PHONE_LENGTH"
           [isPhoneNumber]="true">
         </app-validation-hint>
-
       </form>
     </div>
     <div fxLayout="row" fxLayoutAlign="center center" class="footer">
-      <a [routerLink]="'/personal-cabinet/config'"><button mat-raised-button
-          class="btn btn-cancel">Скасувати</button></a>
-      <button [disabled]="!userEditFormGroup.valid" class="btn" mat-button type="submit"
-        (click)="onSubmit()">Зберегти</button>
+      <a [routerLink]="'/personal-cabinet/config'"
+        ><button mat-raised-button class="btn btn-cancel">Скасувати</button></a
+      >
+      <button [disabled]="!userEditFormGroup.valid" class="btn" mat-button type="submit" (click)="onSubmit()">
+        Зберегти
+      </button>
     </div>
-
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
index e24c811d89..d78106dd2d 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
@@ -1,3 +1,4 @@
+import { PersonalInfoRole } from './../../../../../shared/enum/role';
 import { Util } from 'src/app/shared/utils/utils';
 import { CreateFormComponent } from 'src/app/shell/personal-cabinet/shared-cabinet/create-form/create-form.component';
 import { NAME_REGEX } from 'src/app/shared/constants/regex-constants';
@@ -8,7 +9,6 @@ import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { User } from 'src/app/shared/models/user.model';
 import { RegistrationState } from 'src/app/shared/store/registration.state';
-import { UpdateUser } from 'src/app/shared/store/user.actions';
 import { Constants } from 'src/app/shared/constants/constants';
 import { AddNavPath, DeleteNavPath } from 'src/app/shared/store/navigation.actions';
 import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service';
@@ -16,6 +16,7 @@ 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';
+import { UpdateUser } from 'src/app/shared/store/registration.actions';
 
 @Component({
   selector: 'app-user-config-edit',
@@ -32,6 +33,7 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
   user: User;
 
   userEditFormGroup: FormGroup;
+  userRole: Role;
 
   constructor(
     private fb: FormBuilder,
@@ -60,15 +62,21 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
         Validators.minLength(ValidationConstants.INPUT_LENGTH_1),
         Validators.maxLength(ValidationConstants.INPUT_LENGTH_60),
       ]),
-      gender: new FormControl('', [Validators.required]),
       phoneNumber: new FormControl('', [Validators.required, Validators.minLength(ValidationConstants.PHONE_LENGTH)]),
     });
     this.subscribeOnDirtyForm(this.userEditFormGroup);
   }
 
   ngOnInit(): void {
-    this.user$.pipe(filter((user: User) => !!user)).subscribe((user: User) => (this.user = user));
-    this.setEditMode();
+    this.user$.pipe(filter((user: User) => !!user)).subscribe((user: User) => {
+      this.userRole = this.store.selectSnapshot<Role>(RegistrationState.role);
+      this.user = user;
+      if (this.userRole === Role.parent) {
+        this.userEditFormGroup.addControl('dateOfBirth', new FormControl('', Validators.required));
+        this.userEditFormGroup.addControl('gender', new FormControl('', Validators.required));
+      }
+      this.setEditMode();
+    });
   }
 
   setEditMode(): void {
@@ -77,9 +85,8 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
   }
 
   addNavPath(): void {
-    const userRole = this.store.selectSnapshot<Role>(RegistrationState.role);
     const subRole = this.store.selectSnapshot<Role>(RegistrationState.subrole);
-    const personalCabinetTitle = Util.getPersonalCabinetTitle(userRole, subRole);
+    const personalCabinetTitle = Util.getPersonalCabinetTitle(this.userRole, subRole);
 
     this.store.dispatch(
       new AddNavPath(
@@ -102,6 +109,6 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
 
   onSubmit(): void {
     const user = new User(this.userEditFormGroup.value, this.user.id);
-    this.store.dispatch(new UpdateUser(user));
+    this.store.dispatch(new UpdateUser(PersonalInfoRole[this.userRole], user));
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
index 0059350d34..e754692750 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
@@ -1,24 +1,28 @@
 <div class="wrapper" *ngIf="user$ | async as user" fxLayout="row wrap" fxLayoutAlign="start">
   <div class="config">
     <a routerLink="edit" class="config_edit-icon">
-      <button mat-button style="color:#3849F9;">
-        <mat-icon style="color:#3849F9;">edit</mat-icon>Редагувати
-      </button>
+      <button mat-button style="color: #3849f9"><mat-icon style="color: #3849f9">edit</mat-icon>Редагувати</button>
     </a>
     <h4>Прізвище</h4>
-    <p>{{user.lastName}}</p>
+    <p>{{ user.lastName }}</p>
     <h4>Ім'я</h4>
-    <p>{{user.firstName}}</p>
+    <p>{{ user.firstName }}</p>
     <h4>По-батькові</h4>
-    <p>{{user.middleName}}</p>
+    <p>{{ user.middleName }}</p>
     <h4>Телефон</h4>
-    <p>{{phonePrefix + user.phoneNumber | phoneTransform }}</p>
+    <p>{{ phonePrefix + user.phoneNumber | phoneTransform }}</p>
+    <ng-container *ngIf="(role$ | async) === role.parent">
+      <h4>Дата народження</h4>
+      <p>{{ user.dateOfBirth | date: dateFormat }}</p>
+      <h4>Стать</h4>
+      <p>{{ user.gender === 0 ? 'Чоловіча' : 'Жіноча' }}</p>
+    </ng-container>
   </div>
   <div class="config">
     <h4>Електронна пошта</h4>
-    <p style="margin-bottom: 0;">{{user.email}}</p>
+    <p style="margin-bottom: 0">{{ user.email }}</p>
     <p class="link" (click)="onRedirect('/Account/ChangeEmail')">Змінити електронну пошту</p>
     <h4>Пароль</h4>
     <p class="link" (click)="onRedirect('/Account/ChangePassword')">Змінити Пароль</p>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
index 52ce975fd6..cb4f059ac5 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
@@ -9,6 +9,7 @@ import { Constants } from 'src/app/shared/constants/constants';
 import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service';
 import { PushNavPath } from 'src/app/shared/store/navigation.actions';
 import { NavBarName } from 'src/app/shared/enum/navigation-bar';
+import { Role } from 'src/app/shared/enum/role';
 
 @Component({
   selector: 'app-user-config',
@@ -17,9 +18,15 @@ import { NavBarName } from 'src/app/shared/enum/navigation-bar';
 })
 export class UserConfigComponent implements OnInit, OnDestroy {
   readonly phonePrefix = Constants.PHONE_PREFIX;
+  readonly dateFormat = Constants.SHORT_DATE_FORMAT;
+
+  readonly role = Role;
 
   @Select(RegistrationState.user)
   user$: Observable<User>;
+
+  @Select(RegistrationState.role)
+  role$: Observable<Role>;
   
   authServer: string = environment.stsServer;
   culture: string = localStorage.getItem('ui-culture');;
@@ -28,6 +35,7 @@ export class UserConfigComponent implements OnInit, OnDestroy {
   constructor(private store: Store) { }
 
   ngOnInit(): void {
+
     this.store.dispatch(
       new PushNavPath(
         {

From 9114afa93d7d2ed56947dae11994f08f0b878d10 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 16:43:34 +0300
Subject: [PATCH 02/13] personal info user role

---
 src/app/shared/enum/role.ts                   |  5 +++--
 src/app/shared/store/registration.actions.ts  |  4 ++++
 src/app/shared/store/registration.state.ts    | 21 +++++++++++++++----
 src/app/shared/utils/utils.ts                 | 14 ++++++++++---
 .../user-config-edit.component.ts             | 10 +++++----
 5 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/app/shared/enum/role.ts b/src/app/shared/enum/role.ts
index 90486918af..0037a02d68 100644
--- a/src/app/shared/enum/role.ts
+++ b/src/app/shared/enum/role.ts
@@ -3,6 +3,7 @@ export enum Role {
   parent = 'parent',
   unauthorized = 'unauthorized',
   techAdmin = 'techadmin',
+  ministryadmin= 'ministryadmin',
   ProviderDeputy = 'ProviderDeputy',
   ProviderAdmin = 'ProviderAdmin',
   all = 'all',
@@ -13,9 +14,9 @@ export enum Role {
 export enum PersonalInfoRole {
   provider = 'Provider',
   parent = 'Parent',
-  techAdmin = 'TechAdmin',
+  techadmin = 'TechAdmin',
   providerAdmin = 'ProviderAdmin',
-  ministryAdmin = 'MinistryAdmin',
+  ministryadmin = 'MinistryAdmin',
 }
 
 export enum cardType {
diff --git a/src/app/shared/store/registration.actions.ts b/src/app/shared/store/registration.actions.ts
index 2fd267e8d1..574b66f24b 100644
--- a/src/app/shared/store/registration.actions.ts
+++ b/src/app/shared/store/registration.actions.ts
@@ -44,4 +44,8 @@ export class OnUpdateUserFail {
 export class OnUpdateUserSuccess {
   static readonly type = '[user] update User success';
   constructor(public payload: PersonalInfoRole) { }
+}
+export class GetUserPersonalInfo {
+  static readonly type = '[user] get User';
+  constructor(public userRole: PersonalInfoRole) { }
 }
\ No newline at end of file
diff --git a/src/app/shared/store/registration.state.ts b/src/app/shared/store/registration.state.ts
index 656996b3be..6fac736316 100644
--- a/src/app/shared/store/registration.state.ts
+++ b/src/app/shared/store/registration.state.ts
@@ -10,6 +10,7 @@ import {
   OnUpdateUserSuccess,
   UpdateUser,
   OnUpdateUserFail,
+  GetUserPersonalInfo,
 } from './registration.actions';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
 import jwt_decode from 'jwt-decode';
@@ -29,6 +30,8 @@ import { TechAdminService } from '../services/tech-admin/tech-admin.service';
 import { SignalRService } from '../services/signalR/signal-r.service';
 import { MarkFormDirty, ShowMessageBar } from './app.actions';
 import { HttpErrorResponse } from '@angular/common/http';
+import { Util } from '../utils/utils';
+
 export interface RegistrationStateModel {
   isAuthorized: boolean;
   isLoading: boolean;
@@ -132,13 +135,12 @@ export class RegistrationState {
       patchState({ isAuthorized: auth });
       if (auth) {
         const token = jwt_decode(this.oidcSecurityService.getToken());
-        // const id = token['sub'];
         const subrole = token['subrole'];
         const role = token['role'];
-
+        const personalInfoRole = Util.getPersonalInfoRole(role, subrole);
         patchState({ subrole, role });
 
-        this.userService.getPersonalInfo(role).subscribe(user => {
+        this.userService.getPersonalInfo(personalInfoRole).subscribe(user => {
           patchState({ user, isLoading: false });
           dispatch(new CheckRegistration());
         });
@@ -185,6 +187,17 @@ export class RegistrationState {
     }
   }
 
+  @Action(GetUserPersonalInfo)
+  getUserPersonalInfo(
+    { patchState }: StateContext<RegistrationStateModel>,
+    { userRole }: GetUserPersonalInfo
+  ): Observable<User> {
+    patchState({ isLoading: true });
+    return this.userService
+      .getPersonalInfo(userRole)
+      .pipe(tap((user: User) => patchState({ user: user, isLoading: false })));
+  }
+
   @Action(UpdateUser)
   updateUser({ dispatch }: StateContext<RegistrationStateModel>, { userRole, user }: UpdateUser): Observable<object> {
     return this.userService.updatePersonalInfo(userRole, user).pipe(
@@ -203,7 +216,7 @@ export class RegistrationState {
   onUpdateUserSuccess({ dispatch }: StateContext<RegistrationStateModel>, { payload }: OnUpdateUserSuccess): void {
     dispatch([
       new MarkFormDirty(false),
-      this.userService.getPersonalInfo(payload),
+      new GetUserPersonalInfo(payload),
       new ShowMessageBar({
         message: 'Особиста інформація успішно відредагована',
         type: 'success',
diff --git a/src/app/shared/utils/utils.ts b/src/app/shared/utils/utils.ts
index c9ae465729..9ad25cadd9 100644
--- a/src/app/shared/utils/utils.ts
+++ b/src/app/shared/utils/utils.ts
@@ -2,7 +2,7 @@ import { map } from 'rxjs/internal/operators/map';
 import { Constants } from '../constants/constants';
 import { CodeMessageErrors } from '../enum/enumUA/errors';
 import { PersonalCabinetTitle } from '../enum/navigation-bar';
-import { Role } from '../enum/role';
+import { PersonalInfoRole, Role } from '../enum/role';
 import { Child } from '../models/child.model';
 import { Person } from '../models/user.model';
 import { UsersTable } from '../models/usersTable';
@@ -135,7 +135,9 @@ export class Util {
         pib: `${user.lastName} ${user.firstName} ${user.middleName}` || constants.NO_INFORMATION,
         email: user.parent.email || constants.NO_INFORMATION,
         place: user.place || constants.NO_INFORMATION,
-        phoneNumber: user.parent.phoneNumber ? `${constants.PHONE_PREFIX} ${user.parent.phoneNumber}` : constants.NO_INFORMATION,
+        phoneNumber: user.parent.phoneNumber
+          ? `${constants.PHONE_PREFIX} ${user.parent.phoneNumber}`
+          : constants.NO_INFORMATION,
         role: user.parentId ? 'Діти' : 'Батьки',
         status: user.accountStatus || 'Accepted',
       });
@@ -194,10 +196,16 @@ export class Util {
   }
 
   public static getPersonalCabinetTitle(userRole, subrole): PersonalCabinetTitle {
-    return (userRole !== Role.provider) ? PersonalCabinetTitle[userRole] : PersonalCabinetTitle[subrole];
+    return userRole !== Role.provider ? PersonalCabinetTitle[userRole] : PersonalCabinetTitle[subrole];
   }
 
   public static getFullName(person: Person): string {
     return `${person.lastName} ${person.firstName} ${person.middleName}`;
   }
+
+  public static getPersonalInfoRole(userRole, subrole): PersonalInfoRole {
+    return userRole === Role.provider && subrole === Role.ProviderAdmin
+      ? PersonalInfoRole.providerAdmin
+      : PersonalInfoRole[userRole];
+  }
 }
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
index d78106dd2d..7471163330 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
@@ -34,6 +34,7 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
 
   userEditFormGroup: FormGroup;
   userRole: Role;
+  subRole: Role;
 
   constructor(
     private fb: FormBuilder,
@@ -70,6 +71,8 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
   ngOnInit(): void {
     this.user$.pipe(filter((user: User) => !!user)).subscribe((user: User) => {
       this.userRole = this.store.selectSnapshot<Role>(RegistrationState.role);
+      this.subRole = this.store.selectSnapshot<Role>(RegistrationState.subrole);
+
       this.user = user;
       if (this.userRole === Role.parent) {
         this.userEditFormGroup.addControl('dateOfBirth', new FormControl('', Validators.required));
@@ -85,9 +88,7 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
   }
 
   addNavPath(): void {
-    const subRole = this.store.selectSnapshot<Role>(RegistrationState.subrole);
-    const personalCabinetTitle = Util.getPersonalCabinetTitle(this.userRole, subRole);
-
+    const personalCabinetTitle = Util.getPersonalCabinetTitle(this.userRole, this.subRole);
     this.store.dispatch(
       new AddNavPath(
         this.navigationBarService.createNavPaths(
@@ -109,6 +110,7 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
 
   onSubmit(): void {
     const user = new User(this.userEditFormGroup.value, this.user.id);
-    this.store.dispatch(new UpdateUser(PersonalInfoRole[this.userRole], user));
+    const personalInfoRole = Util.getPersonalInfoRole(this.userRole, this.subRole);
+    this.store.dispatch(new UpdateUser(personalInfoRole, user));
   }
 }

From c87ff20671647969d0e2a164d0fb057effe3b914 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 16:48:39 +0300
Subject: [PATCH 03/13] Update role.ts

---
 src/app/shared/enum/role.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/enum/role.ts b/src/app/shared/enum/role.ts
index 0037a02d68..8befc4290a 100644
--- a/src/app/shared/enum/role.ts
+++ b/src/app/shared/enum/role.ts
@@ -16,7 +16,7 @@ export enum PersonalInfoRole {
   parent = 'Parent',
   techadmin = 'TechAdmin',
   providerAdmin = 'ProviderAdmin',
-  ministryadmin = 'MinistryAdmin',
+  // ministryadmin = 'MinistryAdmin', TODO: upgrade handling of ministry admin profile
 }
 
 export enum cardType {

From baa456d778d821962868fad2852b94db411c5329 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 17:02:45 +0300
Subject: [PATCH 04/13] fix

---
 src/app/shared/enum/role.ts                           |  2 +-
 src/app/shared/store/registration.state.ts            | 11 +++++++----
 .../child-info-box/child-info-box.component.ts        |  2 --
 .../user-config/user-config.component.html            |  2 +-
 .../user-config/user-config.component.ts              |  2 ++
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/app/shared/enum/role.ts b/src/app/shared/enum/role.ts
index 8befc4290a..0037a02d68 100644
--- a/src/app/shared/enum/role.ts
+++ b/src/app/shared/enum/role.ts
@@ -16,7 +16,7 @@ export enum PersonalInfoRole {
   parent = 'Parent',
   techadmin = 'TechAdmin',
   providerAdmin = 'ProviderAdmin',
-  // ministryadmin = 'MinistryAdmin', TODO: upgrade handling of ministry admin profile
+  ministryadmin = 'MinistryAdmin',
 }
 
 export enum cardType {
diff --git a/src/app/shared/store/registration.state.ts b/src/app/shared/store/registration.state.ts
index 6fac736316..df1a384252 100644
--- a/src/app/shared/store/registration.state.ts
+++ b/src/app/shared/store/registration.state.ts
@@ -140,10 +140,13 @@ export class RegistrationState {
         const personalInfoRole = Util.getPersonalInfoRole(role, subrole);
         patchState({ subrole, role });
 
-        this.userService.getPersonalInfo(personalInfoRole).subscribe(user => {
-          patchState({ user, isLoading: false });
-          dispatch(new CheckRegistration());
-        });
+        this.userService
+          .getPersonalInfo(personalInfoRole)
+          .pipe(catchError(() => dispatch(new ShowMessageBar({ message: 'На жаль виникла помилка', type: 'error' }))))
+          .subscribe((user: User) => {
+            patchState({ user, isLoading: false });
+            dispatch(new CheckRegistration());
+          });
       } else {
         patchState({ role: Role.unauthorized, isLoading: false });
       }
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.ts b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.ts
index d36bc61208..b351c58440 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.ts
@@ -2,8 +2,6 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Constants } from '../../../../../../shared/constants/constants';
 import { Gender } from '../../../../../../shared/enum/gender';
 import { Child } from '../../../../../../shared/models/child.model';
-import { SocialGroup } from '../../../../../../shared/models/socialGroup.model';
-import { ChildrenService } from '../../../../../../shared/services/children/children.service';
 import { DetectedDeviceService } from '../../../../../../shared/services/detected-device.service';
 import { Util } from '../../../../../../shared/utils/utils';
 
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
index e754692750..f16eba34e6 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
@@ -15,7 +15,7 @@ <h4>Телефон</h4>
       <h4>Дата народження</h4>
       <p>{{ user.dateOfBirth | date: dateFormat }}</p>
       <h4>Стать</h4>
-      <p>{{ user.gender === 0 ? 'Чоловіча' : 'Жіноча' }}</p>
+      <p>{{ gender[user.gender] }}</p>
     </ng-container>
   </div>
   <div class="config">
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
index cb4f059ac5..995870b4cd 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
@@ -10,6 +10,7 @@ import { NavigationBarService } from 'src/app/shared/services/navigation-bar/nav
 import { PushNavPath } from 'src/app/shared/store/navigation.actions';
 import { NavBarName } from 'src/app/shared/enum/navigation-bar';
 import { Role } from 'src/app/shared/enum/role';
+import { Gender } from 'src/app/shared/enum/gender';
 
 @Component({
   selector: 'app-user-config',
@@ -17,6 +18,7 @@ import { Role } from 'src/app/shared/enum/role';
   styleUrls: ['./user-config.component.scss']
 })
 export class UserConfigComponent implements OnInit, OnDestroy {
+  readonly gender = Gender;
   readonly phonePrefix = Constants.PHONE_PREFIX;
   readonly dateFormat = Constants.SHORT_DATE_FORMAT;
 

From 771d7ef1f7f45b00a9ca0529fd57975988d700f7 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:05:32 +0300
Subject: [PATCH 05/13] fix

---
 src/app/shared/store/registration.state.ts                  | 5 ++---
 src/app/shared/utils/utils.ts                               | 6 ------
 .../user-config-edit/user-config-edit.component.spec.ts     | 2 ++
 .../user-config-edit/user-config-edit.component.ts          | 3 +--
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/store/registration.state.ts b/src/app/shared/store/registration.state.ts
index df1a384252..81d11ebab4 100644
--- a/src/app/shared/store/registration.state.ts
+++ b/src/app/shared/store/registration.state.ts
@@ -23,7 +23,7 @@ import { TechAdmin } from '../models/techAdmin.model';
 import { catchError, tap } from 'rxjs/operators';
 import { Provider } from '../models/provider.model';
 import { Router } from '@angular/router';
-import { Role } from '../enum/role';
+import { PersonalInfoRole, Role } from '../enum/role';
 import { UserService } from '../services/user/user.service';
 import { Observable, of, throwError } from 'rxjs';
 import { TechAdminService } from '../services/tech-admin/tech-admin.service';
@@ -137,11 +137,10 @@ export class RegistrationState {
         const token = jwt_decode(this.oidcSecurityService.getToken());
         const subrole = token['subrole'];
         const role = token['role'];
-        const personalInfoRole = Util.getPersonalInfoRole(role, subrole);
         patchState({ subrole, role });
 
         this.userService
-          .getPersonalInfo(personalInfoRole)
+          .getPersonalInfo(PersonalInfoRole[role])
           .pipe(catchError(() => dispatch(new ShowMessageBar({ message: 'На жаль виникла помилка', type: 'error' }))))
           .subscribe((user: User) => {
             patchState({ user, isLoading: false });
diff --git a/src/app/shared/utils/utils.ts b/src/app/shared/utils/utils.ts
index 9ad25cadd9..327376c19c 100644
--- a/src/app/shared/utils/utils.ts
+++ b/src/app/shared/utils/utils.ts
@@ -202,10 +202,4 @@ export class Util {
   public static getFullName(person: Person): string {
     return `${person.lastName} ${person.firstName} ${person.middleName}`;
   }
-
-  public static getPersonalInfoRole(userRole, subrole): PersonalInfoRole {
-    return userRole === Role.provider && subrole === Role.ProviderAdmin
-      ? PersonalInfoRole.providerAdmin
-      : PersonalInfoRole[userRole];
-  }
 }
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.spec.ts b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.spec.ts
index 9cf4587851..7bfaa08266 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.spec.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.spec.ts
@@ -1,3 +1,4 @@
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { UserConfigEditComponent } from './user-config-edit.component';
 import { NgxsModule } from '@ngxs/store';
@@ -28,6 +29,7 @@ describe('UserConfigEditComponent', () => {
         MatDialogModule,
         RouterTestingModule,
         MatRadioModule,
+        MatDatepickerModule
       ],
       declarations: [
         UserConfigEditComponent,
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
index 7471163330..d02c44aab5 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts
@@ -110,7 +110,6 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
 
   onSubmit(): void {
     const user = new User(this.userEditFormGroup.value, this.user.id);
-    const personalInfoRole = Util.getPersonalInfoRole(this.userRole, this.subRole);
-    this.store.dispatch(new UpdateUser(personalInfoRole, user));
+    this.store.dispatch(new UpdateUser(PersonalInfoRole[this.userRole] , user));
   }
 }

From 007bba61b6c465fb021b958b60687894d9f53c56 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:12:16 +0300
Subject: [PATCH 06/13] commt

---
 src/app/shared/enum/role.ts                          |  1 -
 src/app/shared/store/registration.state.ts           | 12 +++---------
 .../user-config/user-config.component.ts             |  3 ---
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/app/shared/enum/role.ts b/src/app/shared/enum/role.ts
index 0037a02d68..bd0d268fdf 100644
--- a/src/app/shared/enum/role.ts
+++ b/src/app/shared/enum/role.ts
@@ -15,7 +15,6 @@ export enum PersonalInfoRole {
   provider = 'Provider',
   parent = 'Parent',
   techadmin = 'TechAdmin',
-  providerAdmin = 'ProviderAdmin',
   ministryadmin = 'MinistryAdmin',
 }
 
diff --git a/src/app/shared/store/registration.state.ts b/src/app/shared/store/registration.state.ts
index 81d11ebab4..5d0fe4475e 100644
--- a/src/app/shared/store/registration.state.ts
+++ b/src/app/shared/store/registration.state.ts
@@ -1,3 +1,4 @@
+import { PersonalInfoRole } from './../enum/role';
 import { Injectable } from '@angular/core';
 import { State, Action, StateContext, Selector } from '@ngxs/store';
 import {
@@ -23,14 +24,13 @@ import { TechAdmin } from '../models/techAdmin.model';
 import { catchError, tap } from 'rxjs/operators';
 import { Provider } from '../models/provider.model';
 import { Router } from '@angular/router';
-import { PersonalInfoRole, Role } from '../enum/role';
+import { Role } from '../enum/role';
 import { UserService } from '../services/user/user.service';
 import { Observable, of, throwError } from 'rxjs';
 import { TechAdminService } from '../services/tech-admin/tech-admin.service';
 import { SignalRService } from '../services/signalR/signal-r.service';
 import { MarkFormDirty, ShowMessageBar } from './app.actions';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Util } from '../utils/utils';
 
 export interface RegistrationStateModel {
   isAuthorized: boolean;
@@ -139,13 +139,7 @@ export class RegistrationState {
         const role = token['role'];
         patchState({ subrole, role });
 
-        this.userService
-          .getPersonalInfo(PersonalInfoRole[role])
-          .pipe(catchError(() => dispatch(new ShowMessageBar({ message: 'На жаль виникла помилка', type: 'error' }))))
-          .subscribe((user: User) => {
-            patchState({ user, isLoading: false });
-            dispatch(new CheckRegistration());
-          });
+        dispatch(new GetUserPersonalInfo(PersonalInfoRole[role])).subscribe(() => dispatch(new CheckRegistration()));
       } else {
         patchState({ role: Role.unauthorized, isLoading: false });
       }
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
index 995870b4cd..e38bc2784f 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
@@ -21,12 +21,10 @@ export class UserConfigComponent implements OnInit, OnDestroy {
   readonly gender = Gender;
   readonly phonePrefix = Constants.PHONE_PREFIX;
   readonly dateFormat = Constants.SHORT_DATE_FORMAT;
-
   readonly role = Role;
 
   @Select(RegistrationState.user)
   user$: Observable<User>;
-
   @Select(RegistrationState.role)
   role$: Observable<Role>;
   
@@ -37,7 +35,6 @@ export class UserConfigComponent implements OnInit, OnDestroy {
   constructor(private store: Store) { }
 
   ngOnInit(): void {
-
     this.store.dispatch(
       new PushNavPath(
         {

From 918625e13cd3fa5ca9bef2f64103c9cd2654ca5f Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:41:49 +0300
Subject: [PATCH 07/13] fix

---
 src/app/shared/enum/role.ts                   |   7 --
 src/app/shared/pipes/join.pipe.spec.ts        |   8 ++
 src/app/shared/pipes/join.pipe.ts             |  10 ++
 src/app/shared/shared.module.ts               |   5 +-
 .../create-application.component.html         | 104 +++++++++++-------
 .../create-application.component.scss         |   2 +-
 .../create-application.component.spec.ts      |   5 +-
 .../create-application.component.ts           |  42 ++++---
 .../person-card/person-card.component.html    |  78 +++----------
 .../person-card/person-card.component.ts      |  29 ++---
 .../child-info-box.component.html             |   4 +-
 .../user-config/user-config.component.ts      |   1 -
 12 files changed, 139 insertions(+), 156 deletions(-)
 create mode 100644 src/app/shared/pipes/join.pipe.spec.ts
 create mode 100644 src/app/shared/pipes/join.pipe.ts

diff --git a/src/app/shared/enum/role.ts b/src/app/shared/enum/role.ts
index bd0d268fdf..2972f4c2ab 100644
--- a/src/app/shared/enum/role.ts
+++ b/src/app/shared/enum/role.ts
@@ -18,13 +18,6 @@ export enum PersonalInfoRole {
   ministryadmin = 'MinistryAdmin',
 }
 
-export enum cardType {
-  provider = 'provider',
-  parent = 'parent',
-  child = 'child',
-  user = 'user',
-}
-
 export enum RoleLinks {
   provider = 'заклад',
   parent = 'дітей'
diff --git a/src/app/shared/pipes/join.pipe.spec.ts b/src/app/shared/pipes/join.pipe.spec.ts
new file mode 100644
index 0000000000..9a5689c09f
--- /dev/null
+++ b/src/app/shared/pipes/join.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { JoinPipe } from './join.pipe';
+
+describe('JoinPipe', () => {
+  it('create an instance', () => {
+    const pipe = new JoinPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/pipes/join.pipe.ts b/src/app/shared/pipes/join.pipe.ts
new file mode 100644
index 0000000000..7b9e4c062d
--- /dev/null
+++ b/src/app/shared/pipes/join.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'join',
+})
+export class JoinPipe implements PipeTransform {
+  transform(input: Array<any>, propertyName: string, sep = ', '): string {
+    return input.map(value => value[propertyName]).join(sep);
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index d30e3432a7..b27e0ef7ac 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -60,6 +60,7 @@ import { AchievementCardComponent } from '../shell/details/details-tabs/achievem
 import { InstitutionHierarchyComponent } from './components/institution-hierarchy/institution-hierarchy.component';
 import { StarsComponent } from '../shell/details/details-tabs/reviews/stars/stars.component';
 import { ErrorPageComponent } from './components/error-page/error-page.component';
+import { JoinPipe } from './pipes/join.pipe';
 
 @NgModule({
   declarations: [
@@ -116,6 +117,7 @@ import { ErrorPageComponent } from './components/error-page/error-page.component
     ErrorPageComponent,
     AchievementCardComponent,
     StarsComponent,
+    JoinPipe,
   ],
   
   imports: [
@@ -181,7 +183,8 @@ import { ErrorPageComponent } from './components/error-page/error-page.component
     ImageCropperModalComponent,
     InfoFormComponent,
     AchievementCardComponent,
-    StarsComponent
+    StarsComponent,
+    JoinPipe
   ]
 })
 export class SharedModule { }
diff --git a/src/app/shell/personal-cabinet/parent/create-application/create-application.component.html b/src/app/shell/personal-cabinet/parent/create-application/create-application.component.html
index 1742074ae3..e33327cab3 100644
--- a/src/app/shell/personal-cabinet/parent/create-application/create-application.component.html
+++ b/src/app/shell/personal-cabinet/parent/create-application/create-application.component.html
@@ -3,31 +3,40 @@
     <div class="create-form-header" fxLayout="column" fxLayoutAlign="center center">
       <h3 class="wrapper-title">ЗАЯВА НА ГУРТОК</h3>
     </div>
-    <app-workshop-card class="application-workshop" [workshop]="workshop" [isHorizontalView]="true"
+    <app-workshop-card
+      class="application-workshop"
+      [workshop]="workshop"
+      [isHorizontalView]="true"
       [isCreateApplicationView]="true"></app-workshop-card>
     <div class="card-border">
       <mat-tab-group mat-align-tabs="center" #tabGroup (selectedTabChange)="onTabChange($event)">
-        <hr class="line">
-          <mat-tab label="Подати дані про дитину">
-            <form fxLayout='column' fxLayoutAlign='center space-between' class="step">
+        <hr class="line" />
+        <mat-tab label="Подати дані про дитину">
+          <form fxLayout="column" fxLayoutAlign="center space-between" class="step">
             <label class="step-label">Виберіть дитину<span class="step-required">*</span></label>
             <mat-form-field appearance="none">
-              <mat-select name="child" placeholder="Діти" disableOptionCentering panelClass="dropdown-panel"
-                [ngClass]="(!isAllowChildToApply && selectedChild?.id) ? 'redBorder step-input' : 'step-input'"
-                [formControl]="ChildFormControl" [(ngModel)]="selectedChild" (selectionChange)="onSelectChild($event)">
+              <mat-select
+                name="child"
+                placeholder="Діти"
+                disableOptionCentering
+                panelClass="dropdown-panel"
+                [ngClass]="!isAllowChildToApply && selectedChild?.id ? 'redBorder step-input' : 'step-input'"
+                [formControl]="ChildFormControl"
+                [(ngModel)]="selectedChild"
+                (selectionChange)="onSelectChild($event)">
                 <mat-option *ngFor="let child of children" [value]="child" class="dropdown-option">
-                  {{child.lastName}} {{child.firstName}} {{child.middleName}}
+                  {{ child.lastName }} {{ child.firstName }} {{ child.middleName }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <small class="warning" *ngIf="!isAllowChildToApply && selectedChild?.id">Дитина не може бути прийнята в
-              гурток</small>
+            <small class="warning" *ngIf="!isAllowChildToApply && selectedChild?.id">Дитина не може бути прийнята в гурток</small>
             <app-validation-hint [validationFormControl]="ChildFormControl" [isTouched]="ChildFormControl.touched">
             </app-validation-hint>
 
             <div fxLayout="column" fxLayoutAlign="center center">
-              <p class="background-text"> Немає дитини у списку?
-                <a [routerLink]="['/create-child', '']" [queryParams]="{workshopId: workshop?.id}">
+              <p class="background-text">
+                Немає дитини у списку?
+                <a [routerLink]="['/create-child', '']" [queryParams]="{ workshopId: workshop?.id }">
                   <button class="btn-add" mat-button>
                     <mat-icon class="mat-icon-add">add</mat-icon>Додати ще одну дитину
                   </button>
@@ -37,13 +46,11 @@ <h3 class="wrapper-title">ЗАЯВА НА ГУРТОК</h3>
 
             <div *ngIf="selectedChild" class="info-wrapper">
               <p class="step-label">Дані про дитину</p>
-              <app-person-card [card]="selectedChild" [cardType]="CardType.child"></app-person-card>
-            </div>
-
-            <div class="info-wrapper">
-              <p class="step-label">Дані про батьків</p>
-              <app-person-card *ngIf="(user$ | async)" [card]="(user$ | async)" [cardType]="CardType.parent">
-              </app-person-card>
+              <app-person-card [child]="selectedChild"></app-person-card>
+              <div class="info-wrapper">
+                <p class="step-label">Дані про батьків</p>
+                <app-person-card [child]="parentCard"> </app-person-card>
+              </div>
             </div>
 
             <div fxLayout="column" fxLayoutAlign="start start" class="wrapper-check-box">
@@ -59,26 +66,39 @@ <h3 class="wrapper-title">ЗАЯВА НА ГУРТОК</h3>
               </mat-checkbox>
             </div>
             <div fxLayout="row" fxLayoutAlign="center center" class="footer">
-              <a [routerLink]="['/details/workshop', workshopId]"><button class="btn btn-cancel"
-                  mat-raised-button>СКАСУВАТИ</button></a>
-              <button class="btn" mat-button type="submit" [disabled]="!isAttendAgreed ||
-                            !isContraindicationAgreed ||
-                            !isParentAgreed ||
-                            !selectedChild ||
-                            !isAllowChildToApply" (click)="onSubmit()">ВІДПРАВИТИ</button>
+              <a [routerLink]="['/details/workshop', workshopId]"
+                ><button class="btn btn-cancel" mat-raised-button>СКАСУВАТИ</button></a
+              >
+              <button
+                class="btn"
+                mat-button
+                type="submit"
+                [disabled]="
+                  !isAttendAgreed ||
+                  !isContraindicationAgreed ||
+                  !isParentAgreed ||
+                  !selectedChild ||
+                  !isAllowChildToApply
+                "
+                (click)="onSubmit()">
+                ВІДПРАВИТИ
+              </button>
             </div>
           </form>
-          </mat-tab>
-          <mat-tab label="Подати дані про себе">
-            <form fxLayout='column' fxLayoutAlign='center space-between' class="step">
+        </mat-tab>
+        <mat-tab label="Подати дані про себе">
+          <form fxLayout="column" fxLayoutAlign="center space-between" class="step">
             <div class="info-wrapper">
-              <small class="warning" fxLayoutAlign='center space-between' *ngIf="!isAllowChildToApply && parentCard?.id">Користувач не може бути прийнятий повторно в
-                гурток</small>
+              <small class="warning" fxLayoutAlign="center space-between" *ngIf="!isAllowChildToApply && parentCard?.id"
+                >Користувач не може бути прийнятий повторно в гурток</small
+              >
               <p class="step-label">Персональні дані</p>
-              <app-person-card *ngIf="(user$ | async)" [card]="(user$ | async)" [cardType]="CardType.parent">
-              </app-person-card>
+              <app-person-card *ngIf="parentCard" [child]="parentCard"> </app-person-card>
             </div>
-            <mat-checkbox class="step-check-box" color="primary" [formControl]="ContraindicationAgreementFormControlYourself">
+            <mat-checkbox
+              class="step-check-box"
+              color="primary"
+              [formControl]="ContraindicationAgreementFormControlYourself">
               Я не маю противопоказів щодо відвідування гуртка/секції/класу
             </mat-checkbox>
             <mat-checkbox class="step-check-box" color="primary" [formControl]="AttendAgreementFormControlYourself">
@@ -86,12 +106,20 @@ <h3 class="wrapper-title">ЗАЯВА НА ГУРТОК</h3>
               та надаю згоду на обробку персональних даних
             </mat-checkbox>
             <div fxLayout="row" fxLayoutAlign="center center" class="footer">
-              <a [routerLink]="['/details/workshop', workshopId]"><button class="btn btn-cancel"
-                  mat-raised-button>СКАСУВАТИ</button></a>
-              <button class="btn" mat-button type="submit" [disabled]="!isContraindicationAgreementYourself || !isAttendAgreementYourself || !isAllowChildToApply" (click)="onSubmit()">ВІДПРАВИТИ</button>
+              <a [routerLink]="['/details/workshop', workshopId]"
+                ><button class="btn btn-cancel" mat-raised-button>СКАСУВАТИ</button></a
+              >
+              <button
+                class="btn"
+                mat-button
+                type="submit"
+                [disabled]="!isContraindicationAgreementYourself || !isAttendAgreementYourself || !isAllowChildToApply"
+                (click)="onSubmit()">
+                ВІДПРАВИТИ
+              </button>
             </div>
           </form>
-          </mat-tab>
+        </mat-tab>
       </mat-tab-group>
     </div>
   </div>
diff --git a/src/app/shell/personal-cabinet/parent/create-application/create-application.component.scss b/src/app/shell/personal-cabinet/parent/create-application/create-application.component.scss
index 775052e80f..dc8bcd7713 100644
--- a/src/app/shell/personal-cabinet/parent/create-application/create-application.component.scss
+++ b/src/app/shell/personal-cabinet/parent/create-application/create-application.component.scss
@@ -23,7 +23,7 @@
   padding-left: 3rem;
 }
 .wrapper-check-box {
-  padding: 0 50px;
+  padding: 0;
 }
 
 @media (max-width: 750px) {
diff --git a/src/app/shell/personal-cabinet/parent/create-application/create-application.component.spec.ts b/src/app/shell/personal-cabinet/parent/create-application/create-application.component.spec.ts
index d3a0b878b8..f1f17c5c7e 100644
--- a/src/app/shell/personal-cabinet/parent/create-application/create-application.component.spec.ts
+++ b/src/app/shell/personal-cabinet/parent/create-application/create-application.component.spec.ts
@@ -10,12 +10,12 @@ import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MatInputModule } from '@angular/material/input';
 import { Component, Input } from '@angular/core';
-import { cardType } from 'src/app/shared/enum/role';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatDialogModule } from '@angular/material/dialog';
 import { Parent } from 'src/app/shared/models/parent.model';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { Workshop } from 'src/app/shared/models/workshop.model';
+import { Child } from 'src/app/shared/models/child.model';
 
 describe('CreateApplicationComponent', () => {
   let component: CreateApplicationComponent;
@@ -67,8 +67,7 @@ describe('CreateApplicationComponent', () => {
   template: ''
 })
 class MockPersonCardComponent {
-  @Input() card;
-  @Input() cardType: cardType;
+  @Input() child: Child;
 }
 
 @Component({
diff --git a/src/app/shell/personal-cabinet/parent/create-application/create-application.component.ts b/src/app/shell/personal-cabinet/parent/create-application/create-application.component.ts
index 0d295a6baa..da18d68e18 100644
--- a/src/app/shell/personal-cabinet/parent/create-application/create-application.component.ts
+++ b/src/app/shell/personal-cabinet/parent/create-application/create-application.component.ts
@@ -7,7 +7,6 @@ import { ActivatedRoute } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
 import { combineLatest, Observable, Subject } from 'rxjs';
 import { ConfirmationModalWindowComponent } from 'src/app/shared/components/confirmation-modal-window/confirmation-modal-window.component';
-import { cardType } from 'src/app/shared/enum/role';
 import { Application } from 'src/app/shared/models/application.model';
 import { Child, ChildCards } from 'src/app/shared/models/child.model';
 import { User } from 'src/app/shared/models/user.model';
@@ -34,20 +33,16 @@ import { MatTabChangeEvent } from '@angular/material/tabs';
   styleUrls: ['./create-application.component.scss'],
 })
 export class CreateApplicationComponent implements OnInit, OnDestroy {
-  readonly CardType = cardType;
-
-  @Select(UserState.children) 
+  @Select(UserState.children)
   children$: Observable<ChildCards>;
   children: Child[];
   parentCard: Child;
-  @Select(UserState.isAllowChildToApply) 
+  @Select(UserState.isAllowChildToApply)
   isAllowChildToApply$: Observable<boolean>;
-  @Select(RegistrationState.user) 
-  user$: Observable<User>;
-  @Select(RegistrationState.parent) 
+  @Select(RegistrationState.parent)
   parent$: Observable<ParentWithContactInfo>;
   parent: ParentWithContactInfo;
-  @Select(UserState.selectedWorkshop) 
+  @Select(UserState.selectedWorkshop)
   workshop$: Observable<Workshop>;
   workshop: Workshop;
 
@@ -98,22 +93,26 @@ export class CreateApplicationComponent implements OnInit, OnDestroy {
     this.AttendAgreementFormControlYourself.valueChanges
       .pipe(takeUntil(this.destroy$))
       .subscribe((val: boolean) => (this.isAttendAgreementYourself = val));
-      this.children$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((children: ChildCards) => {
-        this.parentCard = children?.entities.find((child: Child) => child.isParent);
-        this.children = children?.entities.filter((child: Child) => !child.isParent);
-      }
-        );
-      this.isAllowChildToApply$
+    this.isAllowChildToApply$
       .pipe(takeUntil(this.destroy$))
       .subscribe((status: boolean) => (this.isAllowChildToApply = status));
 
+    this.children$
+      .pipe(
+        filter((children: ChildCards) => !!children),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((children: ChildCards) => {
+        this.parentCard = children.entities.find((child: Child) => child.isParent);
+        this.children = children.entities.filter((child: Child) => !child.isParent);
+      });
+
     combineLatest([this.parent$, this.workshop$])
       .pipe(
         takeUntil(this.destroy$),
         filter(([parent, workshop]) => !!(parent && workshop))
-      ).subscribe(([parent, workshop]) => {
+      )
+      .subscribe(([parent, workshop]) => {
         this.parent = parent;
         this.workshop = workshop;
         this.store.dispatch([
@@ -133,7 +132,6 @@ export class CreateApplicationComponent implements OnInit, OnDestroy {
       });
   }
 
-
   ngOnDestroy(): void {
     this.store.dispatch(new DeleteNavPath());
     this.destroy$.next(true);
@@ -154,8 +152,8 @@ export class CreateApplicationComponent implements OnInit, OnDestroy {
 
     dialogRef.afterClosed().subscribe((result: boolean) => {
       if (result) {
-          const application = new Application(
-          this.tabIndex ? this.parentCard: this.selectedChild,
+        const application = new Application(
+          this.tabIndex ? this.parentCard : this.selectedChild,
           this.workshop,
           this.parent
         );
@@ -170,7 +168,7 @@ export class CreateApplicationComponent implements OnInit, OnDestroy {
 
   onTabChange(tabChangeEvent: MatTabChangeEvent): void {
     this.tabIndex = tabChangeEvent.index;
-    if(this.tabIndex){
+    if (this.tabIndex) {
       this.store.dispatch(new GetStatusIsAllowToApply(this.parentCard.id, this.workshopId));
     }
   }
diff --git a/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.html b/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.html
index a65bbf7f3e..c666341e19 100644
--- a/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.html
+++ b/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.html
@@ -1,68 +1,18 @@
-<div>
-
-  <div class="card-person">
-    <div *ngIf="(CardType.child === cardType) then ChildView; else ParentView"></div>
-  </div>
-  <div *ngIf="(CardType.user === cardType) then UserView"></div>
-
-</div>
-
-<ng-template #ChildView>
+<div class="card-person">
   <div class="card-edit">
     <label class="card-label">ПІБ</label>
-    <a class="edit" [routerLink]="['/create-child', card.id]">
-      <mat-icon>create</mat-icon>Редагувати
-    </a>
+    <a class="edit" [routerLink]="[editLink, !child.isParent && child.id]"> <mat-icon>create</mat-icon>Редагувати </a>
   </div>
-  <p>{{ card.lastName }} {{ card.firstName }} {{ card.middleName }} </p>
+  <p>{{ child.lastName }} {{ child.firstName }} {{ child.middleName }}</p>
   <label class="card-label">Дата народження</label>
-  <p>{{ card.dateOfBirth | date: constants.SHORT_DATE_FORMAT }}</p>
-  <label class="card-label">Стать дитини</label>
-  <p> {{ card.gender === 0 ? 'Чоловіча' : "Жіноча" }} </p>
-  <label class="card-label">Соціальна група</label>
-  <p> {{ card.socialGroupId === 0 ? 'Відстуня' : "Присутня" }} </p>
-</ng-template>
-
-<ng-template #ParentView>
-  <div class="card-edit">
-    <label class="card-label">ПІБ</label>
-    <a class="edit" routerLink="/personal-cabinet/config/edit">
-      <mat-icon>create</mat-icon>Редагувати
-    </a>
-  </div>
-  <p>{{ card.lastName }} {{ card.firstName }} {{ card.middleName }} </p>
-  <label class="card-label">Телефон</label>
-  <p> {{ phonePrefix + card.phoneNumber | phoneTransform }} </p>
-  <label class="card-label">Електронна пошта</label>
-  <p> {{ card.email}} </p>
-</ng-template>
-
-<ng-template #UserView>
-  <form [formGroup]="UserFormGroup" fxLayout='column' fxLayoutAlign='center space-between' class="user-form">
-
-    <label class="step-label">Дата народження<span class="step-required">*</span></label>
-    <mat-form-field appPlaceholderStyling class="step-input step-input-date" floatLabel="never">
-      <input matInput [matDatepicker]="picker" formControlName="birthDay" placeholder="ДД/ММ/РРРР">
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-datepicker #picker></mat-datepicker>
-    </mat-form-field>
-
-    <label class="step-label">Стать<span class="step-required">*</span></label>
-    <mat-radio-group formControlName="gender" color="primary">
-      <mat-radio-button class="step-radio" [value]="0">Чоловіча</mat-radio-button>
-      <mat-radio-button class="step-radio" [value]="1">Жіноча</mat-radio-button>
-    </mat-radio-group>
-
-    <label class="step-label">Соціальна група<span class="step-required">*</span></label>
-    <mat-form-field appPlaceholderStyling floatLabel="never" appearance="none">
-      <mat-select disableOptionCentering panelClass="dropdown-panel" class="step-input"
-        placeholder="Соціальна група" formControlName="socialGroupId">
-        <mat-option value="0" selected class="dropdown-option"> Присутня </mat-option>
-        <mat-option value="1" class="dropdown-option"> Відсутня </mat-option>
-      </mat-select>
-    </mat-form-field>
-
-
-  </form>
-
-</ng-template>
+  <p>{{ child.dateOfBirth | date: dateFormat }}</p>
+  <label class="card-label">Стать</label>
+  <p>{{ gender[child.gender] }}</p>
+
+  <ng-container *ngIf="!child.isParent">
+    <div class="info-group">
+      <h5 class="text">Соціальні групи:</h5>
+      <p> {{ child.socialGroups | join : 'name'}} </p>
+    </div>
+  </ng-container>
+</div>
diff --git a/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.ts b/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.ts
index 46796fac7d..e3c1d7d060 100644
--- a/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.ts
+++ b/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.ts
@@ -1,30 +1,25 @@
-import { Input } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { cardType } from '../../../../../shared/enum/role';
+import { Input, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Constants } from '../../../../../shared/constants/constants';
+import { Gender } from 'src/app/shared/enum/gender';
+import { Child } from 'src/app/shared/models/child.model';
 @Component({
   selector: 'app-person-card',
   templateUrl: './person-card.component.html',
-  styleUrls: ['./person-card.component.scss']
+  styleUrls: ['./person-card.component.scss'],
 })
 export class PersonCardComponent implements OnInit {
-  readonly constants: typeof Constants = Constants;
-  readonly CardType: typeof cardType = cardType;
   readonly phonePrefix = Constants.PHONE_PREFIX;
-  UserFormGroup: FormGroup;
+  readonly dateFormat = Constants.SHORT_DATE_FORMAT;
+  readonly gender = Gender;
 
-  @Input() card;
-  @Input() cardType: cardType;
+  @Input() child: Child;
 
-  constructor(private fb: FormBuilder) {
-    this.UserFormGroup = this.fb.group({
-      birthDay: new FormControl('', Validators.required),
-      gender: new FormControl(''),
-      socialGroupId: new FormControl('', Validators.required),
-    });
-  }
+  editLink: string;
+
+  constructor() {}
 
   ngOnInit(): void {
+    this.editLink = this.child.isParent ? '/personal-cabinet/config/edit' : '/create-child';
   }
 }
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.html b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.html
index f778af9d1c..a937fb4e4b 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.html
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.html
@@ -16,8 +16,8 @@ <h5 class="text">Стать:</h5>
     </div>
     <ng-container *ngIf="!child.isParent">
       <div class="info-group">
-        <h5 class="text">Соціальна група:</h5>
-        <p>{{ child.socialGroups.join(',') }}</p>
+        <h5 class="text">Соціальні групи:</h5>
+        <p> {{ child.socialGroups | join : 'name'}} </p>
       </div>
 
       <div class="info-group">
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
index e38bc2784f..a614d46838 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.ts
@@ -6,7 +6,6 @@ import { User } from 'src/app/shared/models/user.model';
 import { RegistrationState } from 'src/app/shared/store/registration.state';
 import { environment } from 'src/environments/environment';
 import { Constants } from 'src/app/shared/constants/constants';
-import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service';
 import { PushNavPath } from 'src/app/shared/store/navigation.actions';
 import { NavBarName } from 'src/app/shared/enum/navigation-bar';
 import { Role } from 'src/app/shared/enum/role';

From ebb9e70e5ce0bb3bc3901769b6f53f58501e2a24 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:43:27 +0300
Subject: [PATCH 08/13] test fix

---
 .../application-card/application-card.component.spec.ts      | 2 ++
 .../child-info-box/child-info-box.component.spec.ts          | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
index 96f7590253..e24ca70e54 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
@@ -13,6 +13,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { InfoStatusComponent } from 'src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/info-status/info-status.component';
 import { ChildInfoBoxComponent } from 'src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component';
 import { PhoneTransformPipe } from 'src/app/shared/pipes/phone-transform.pipe';
+import { JoinPipe } from 'src/app/shared/pipes/join.pipe';
 
 describe('ApplicationCardComponent', () => {
   let component: ApplicationCardComponent;
@@ -29,6 +30,7 @@ describe('ApplicationCardComponent', () => {
         MatMenuModule,
         MatDialogModule,
         MatTooltipModule,
+        JoinPipe
       ],
       providers: [
         { provide: LOCALE_ID, useValue: 'uk' },
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.spec.ts b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.spec.ts
index 579a307081..0a2e8550bb 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.spec.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.spec.ts
@@ -3,9 +3,9 @@ import { ChildInfoBoxComponent } from './child-info-box.component';
 import { MatCardModule } from '@angular/material/card';
 import { Child } from '../../../../../../shared/models/child.model';
 import { HttpClientModule } from '@angular/common/http';
-import { GeolocationService } from '../../../../../../shared/services/geolocation/geolocation.service';
 import { ChildrenService } from '../../../../../../shared/services/children/children.service';
 import { PhoneTransformPipe } from '../../../../../../shared/pipes/phone-transform.pipe';
+import { JoinPipe } from 'src/app/shared/pipes/join.pipe';
 
 describe('ChildInfoBoxComponent', () => {
   let component: ChildInfoBoxComponent;
@@ -15,7 +15,8 @@ describe('ChildInfoBoxComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         MatCardModule,
-        HttpClientModule
+        HttpClientModule,
+        JoinPipe
       ],
       declarations: [ChildInfoBoxComponent, PhoneTransformPipe],
       providers: [

From ce50faf614a7daceca898a3411f15df942e4b6c5 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:45:21 +0300
Subject: [PATCH 09/13] test fix

---
 .../person-card/person-card.component.spec.ts | 30 +++++--------------
 .../child-info-box.component.spec.ts          |  3 +-
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.spec.ts b/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.spec.ts
index 03c4c94630..ad8a1becfa 100644
--- a/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.spec.ts
+++ b/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.spec.ts
@@ -1,17 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PersonCardComponent } from './person-card.component';
 import { MatIconModule } from '@angular/material/icon';
-import { MatCardModule } from '@angular/material/card';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
-import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
-import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatOptionModule } from '@angular/material/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { Component, Input } from '@angular/core';
 import { PhoneTransformPipe } from '../../../../../shared/pipes/phone-transform.pipe';
+import { JoinPipe } from 'src/app/shared/pipes/join.pipe';
 
 describe('PersonCardComponent', () => {
   let component: PersonCardComponent;
@@ -21,19 +20,12 @@ describe('PersonCardComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         MatIconModule,
-        ReactiveFormsModule,
-        FormsModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        MatOptionModule,
-        BrowserAnimationsModule,
-        MatDatepickerModule,
-        MatRadioModule,
         RouterTestingModule
       ],
       declarations: [
         PersonCardComponent,
-        PhoneTransformPipe
+        PhoneTransformPipe,
+        JoinPipe
       ]
     })
       .compileComponents();
@@ -42,13 +34,7 @@ describe('PersonCardComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PersonCardComponent);
     component = fixture.componentInstance;
-    component.card = {} as any;
-    component.UserFormGroup = new FormGroup({
-      birthDay: new FormControl(''),
-      gender: new FormControl(''),
-      socialGroupId: new FormControl(''),
-    });
-
+    component.child = {} as any;
     fixture.detectChanges();
   });
 
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.spec.ts b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.spec.ts
index 0a2e8550bb..0a7f4151ac 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.spec.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component.spec.ts
@@ -16,9 +16,8 @@ describe('ChildInfoBoxComponent', () => {
       imports: [
         MatCardModule,
         HttpClientModule,
-        JoinPipe
       ],
-      declarations: [ChildInfoBoxComponent, PhoneTransformPipe],
+      declarations: [ChildInfoBoxComponent, PhoneTransformPipe, JoinPipe],
       providers: [
         { provide: ChildrenService, useValue: ChildrenService }
       ]

From 391dc80faecd4dda3155f32b85d3588e125a0d95 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:46:03 +0300
Subject: [PATCH 10/13] Update application-card.component.spec.ts

---
 .../application-card.component.spec.ts                 | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
index e24ca70e54..8cdebd37cd 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
@@ -30,21 +30,19 @@ describe('ApplicationCardComponent', () => {
         MatMenuModule,
         MatDialogModule,
         MatTooltipModule,
-        JoinPipe
       ],
       providers: [
         { provide: LOCALE_ID, useValue: 'uk' },
-        {provide: MatDialog, useValue: {}}
+        { provide: MatDialog, useValue: {} },
       ],
       declarations: [
         ApplicationCardComponent,
         StatusInfoCardComponent,
         InfoStatusComponent,
         ChildInfoBoxComponent,
-        PhoneTransformPipe]
-
-    })
-      .compileComponents();
+        PhoneTransformPipe,
+      ],
+    }).compileComponents();
   });
 
   beforeEach(() => {

From fe79565f1a97b46521fb7a0233ab67f18903ce33 Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:47:34 +0300
Subject: [PATCH 11/13] Update application-card.component.spec.ts

---
 .../application-card/application-card.component.spec.ts          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
index 8cdebd37cd..5233ec90fd 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
@@ -41,6 +41,7 @@ describe('ApplicationCardComponent', () => {
         InfoStatusComponent,
         ChildInfoBoxComponent,
         PhoneTransformPipe,
+        JoinPipe
       ],
     }).compileComponents();
   });

From 7ad4365541e0e3c6203d9047151fc4e455592bab Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:50:40 +0300
Subject: [PATCH 12/13] Update application-card.component.spec.ts

---
 .../application-card.component.spec.ts              | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
index 5233ec90fd..4df9c52303 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
@@ -3,7 +3,7 @@ import { ApplicationCardComponent } from './application-card.component';
 import { MatCardModule } from '@angular/material/card';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
-import { LOCALE_ID } from '@angular/core';
+import { Component, Input, LOCALE_ID } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { StatusInfoCardComponent } from 'src/app/shared/components/status-info-card/status-info-card.component';
 import { MatMenuModule } from '@angular/material/menu';
@@ -14,6 +14,7 @@ import { InfoStatusComponent } from 'src/app/shell/personal-cabinet/shared-cabin
 import { ChildInfoBoxComponent } from 'src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component';
 import { PhoneTransformPipe } from 'src/app/shared/pipes/phone-transform.pipe';
 import { JoinPipe } from 'src/app/shared/pipes/join.pipe';
+import { Child } from 'src/app/shared/models/child.model';
 
 describe('ApplicationCardComponent', () => {
   let component: ApplicationCardComponent;
@@ -39,7 +40,7 @@ describe('ApplicationCardComponent', () => {
         ApplicationCardComponent,
         StatusInfoCardComponent,
         InfoStatusComponent,
-        ChildInfoBoxComponent,
+        MockChildInfoComponent,
         PhoneTransformPipe,
         JoinPipe
       ],
@@ -55,3 +56,11 @@ describe('ApplicationCardComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+
+@Component({
+  selector: 'app-child-info-box',
+  template: ''
+})
+class MockChildInfoComponent {
+  @Input() child: Child;
+}
\ No newline at end of file

From dc2de0395257662e35087dc442d25632a4b77c4b Mon Sep 17 00:00:00 2001
From: Oleksandra Lytvynets <alitvinets7@gmail.com>
Date: Wed, 24 Aug 2022 18:58:48 +0300
Subject: [PATCH 13/13] fix

---
 .../person-card/person-card.component.spec.ts     | 15 +++++++--------
 .../application-card.component.spec.ts            |  1 -
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.spec.ts b/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.spec.ts
index ad8a1becfa..f17be453e9 100644
--- a/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.spec.ts
+++ b/src/app/shell/personal-cabinet/parent/create-application/person-card/person-card.component.spec.ts
@@ -1,13 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PersonCardComponent } from './person-card.component';
 import { MatIconModule } from '@angular/material/icon';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatOptionModule } from '@angular/material/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PhoneTransformPipe } from '../../../../../shared/pipes/phone-transform.pipe';
 import { JoinPipe } from 'src/app/shared/pipes/join.pipe';
@@ -34,7 +27,13 @@ describe('PersonCardComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PersonCardComponent);
     component = fixture.componentInstance;
-    component.child = {} as any;
+    component.child = {
+      socialGroups: [
+        {
+          name: ''
+        }
+      ]
+    } as any;
     fixture.detectChanges();
   });
 
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
index 4df9c52303..8c4a7bcc42 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
+++ b/src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/application-card.component.spec.ts
@@ -11,7 +11,6 @@ import { NgxsModule } from '@ngxs/store';
 import { MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { InfoStatusComponent } from 'src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/info-status/info-status.component';
-import { ChildInfoBoxComponent } from 'src/app/shell/personal-cabinet/shared-cabinet/applications/application-card/child-info-box/child-info-box.component';
 import { PhoneTransformPipe } from 'src/app/shared/pipes/phone-transform.pipe';
 import { JoinPipe } from 'src/app/shared/pipes/join.pipe';
 import { Child } from 'src/app/shared/models/child.model';