Oi#986 Added information to child info box

src/app/shared/components/child-info-box/child-info-box.component.html

@@ -1,13 +1,38 @@
 <mat-card class="card" #childInfoBox [style]="{top:top, left: isMobile ? '0px' : left}" id="child-box" [class.isMobile]="isMobile">
   <div fxLayout='column' fxLayoutAlign='center start'>
-    <h3 class="text title">ДАНІ ДИТИНИ</h3>
-    <h4 class="text">{{child.firstName}} {{child.lastName}} {{child.middleName}}</h4>
-    <h5 class="text">Дата народження:</h5>
-    <span>{{ child.dateOfBirth | date: constants.SHORT_DATE_FORMAT }}</span>
-    <span>{{ childAge }}</span>
-    <h5 class="text">Стать:</h5>
-    <span>{{ gender[child.gender] }}</span>
-    <h5 class="text">Соціальна група:</h5>
-    <span>{{ socialGroup ? socialGroup.name : "Відсутня" }}</span>
+    <h3 class="title">ДАНІ ДИТИНИ</h3>
+
+    <div class="info-group">
+      <h4 class="textChildrenName">{{child.firstName}} {{child.lastName}} {{child.middleName}}</h4>
+      <h5 class="text">Дата народження:</h5>
+      <p >
+        {{ child.dateOfBirth | date: constants.SHORT_DATE_FORMAT }}  ({{ childAge }})
+      </p>
+    </div>
+
+    <div class="info-group">
+      <h5 class="text">Стать:</h5>
+      <p>{{ gender[child.gender] }}</p>
+    </div>
+
+    <div class="info-group">
+      <h5 class="text">Соціальна група:</h5>
+      <p>{{ socialGroup ? socialGroup.name : "Відсутня" }}</p>
+    </div>
+
+    <div class="info-group">
+      <h5 class="text">Батьки:</h5>
+      <p>{{ parentLastName }} {{parentFirstName}} {{parantMiddleName}}</p>
+    </div>
+
+    <div class="info-group">
+      <h5 class="text">Телефон:</h5>
+      <p>{{ phonePrefix + parentPhoneNumber | phoneTransform}}</p>
+    </div>
+
+    <div class="info-group">
+      <h5 class="text">Електронна пошта:</h5>
+      <p>{{parentEmail}}</p>
+    </div>
   </div>
 </mat-card>

src/app/shared/components/child-info-box/child-info-box.component.scss

@@ -10,15 +10,21 @@
   margin: 1rem 0;
   color: #000000;
 }
+
 .title{
+  margin-bottom: 15px;
   color: #444444;
-  margin: 2rem  0;
 }
+
 .text{
-  margin-top: 1rem;
+  color: #000000;
 }
 
 .card.isMobile {
   box-sizing: border-box;
   width: 100vw;
 }
+
+.textChildrenName{
+  margin-bottom: 15px;
+}

src/app/shared/components/child-info-box/child-info-box.component.spec.ts

@@ -5,6 +5,7 @@ import { Child } from '../../models/child.model';
 import { HttpClientModule } from '@angular/common/http';
 import { GeolocationService } from '../../services/geolocation/geolocation.service';
 import { ChildrenService } from '../../services/children/children.service';
+import { PhoneTransformPipe } from '../../pipes/phone-transform.pipe';
 
 describe('ChildInfoBoxComponent', () => {
   let component: ChildInfoBoxComponent;
@@ -16,7 +17,7 @@ describe('ChildInfoBoxComponent', () => {
         MatCardModule,
         HttpClientModule
       ],
-      declarations: [ChildInfoBoxComponent],
+      declarations: [ChildInfoBoxComponent, PhoneTransformPipe],
       providers: [
         { provide: ChildrenService, useValue: ChildrenService }
       ]
@@ -27,7 +28,9 @@ describe('ChildInfoBoxComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ChildInfoBoxComponent);
     component = fixture.componentInstance;
-    component.child = {} as Child;
+    component.child = {
+      parent: {}
+    } as Child;
     fixture.detectChanges();
   });
 

src/app/shared/components/child-info-box/child-info-box.component.ts

@@ -13,7 +13,7 @@ import { Util } from '../../utils/utils';
   styleUrls: ['./child-info-box.component.scss']
 })
 export class ChildInfoBoxComponent implements OnInit {
-
+ 
   constructor(private childrenService: ChildrenService, private detectedDevice: DetectedDeviceService) { }
 
   @Input() child: Child;
@@ -23,8 +23,15 @@ export class ChildInfoBoxComponent implements OnInit {
   isMobile = false
   socialGroup: SocialGroup;
   childAge: string;
+  parentFirstName: string;
+  parentLastName: string;
+  parantMiddleName: string;
+  parentPhoneNumber: string;
+  parentEmail: string;
+
   readonly gender = Gender;
   readonly constants: typeof Constants = Constants;
+  readonly phonePrefix = Constants.PHONE_PREFIX;
 
 
 
@@ -37,5 +44,10 @@ export class ChildInfoBoxComponent implements OnInit {
 
     this.childAge = Util.getChildAge(this.child);
     this.isMobile = this.detectedDevice.checkedDevice();
+    this.parentFirstName = this.child.parent.firstName;
+    this.parentLastName = this.child.parent.lastName;
+    this.parantMiddleName = this.child.parent.middleName;
+    this.parentPhoneNumber = this.child.parent.phoneNumber;
+    this.parentEmail = this.child.parent.email;
   }
 }

src/app/shared/models/application.model.ts

@@ -1,5 +1,5 @@
 import { Child } from './child.model';
-import { Parent } from './parent.model';
+import { ParentWithContactInfo } from './parent.model';
 import { Workshop, WorkshopCard } from './workshop.model';
 export class Application {
   id: string;
@@ -10,10 +10,10 @@ export class Application {
   parentId: string;
   workshop: WorkshopCard;
   child: Child;
-  parent: Parent;
+  parent: ParentWithContactInfo;
   rejectionMessage: string
 
-  constructor(child: Child, workshop: Workshop, parent: Parent) {
+  constructor(child: Child, workshop: Workshop, parent: ParentWithContactInfo) {
     this.childId = child.id;
     this.workshopId = workshop.id;
     this.parentId = parent.id;

src/app/shared/models/child.model.ts

@@ -1,4 +1,4 @@
-import { Parent } from './parent.model';
+import { ParentWithContactInfo } from './parent.model';
 export class Child {
   id: string;
   firstName: string;
@@ -9,7 +9,7 @@ export class Child {
   parentId?: number;
   socialGroupId: number;
   placeOfStudy: string;
-  parent: Parent;
+  parent: ParentWithContactInfo;
 
   constructor(info, parentId, id?) {
     this.id = id;

src/app/shared/models/parent.model.ts

@@ -7,3 +7,23 @@ export class Parent {
     this.userId = info.userId;
   }
 }
+
+export class ParentWithContactInfo{
+  id?: string;
+  userId?: string;
+  email?: string;
+  phoneNumber?: string;
+  lastName?: string;
+  middleName?: string;
+  firstName?: string;
+
+  constructor(info) {
+    this.id = info.id;
+    this.userId = info.userId;
+    this.email = info.email;
+    this.phoneNumber = info.phoneNumber;
+    this.lastName = info.lastName;
+    this.middleName = info.middleName;
+    this.firstName = info.firstName;
+  }
+}

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

@@ -17,7 +17,7 @@ import { AddNavPath, DeleteNavPath } from 'src/app/shared/store/navigation.actio
 import { RegistrationState } from 'src/app/shared/store/registration.state';
 import { CreateApplication, GetAllUsersChildren, GetWorkshopById } from 'src/app/shared/store/user.actions';
 import { UserState } from 'src/app/shared/store/user.state';
-import { Parent } from 'src/app/shared/models/parent.model';
+import { ParentWithContactInfo } from 'src/app/shared/models/parent.model';
 import { ModalConfirmationType } from 'src/app/shared/enum/modal-confirmation';
 import { takeUntil, filter } from 'rxjs/operators';
 import { Constants } from 'src/app/shared/constants/constants';
@@ -34,8 +34,8 @@ export class CreateApplicationComponent implements OnInit, OnDestroy {
 
   @Select(UserState.children) children$: Observable<ChildCards>;
   @Select(RegistrationState.user) user$: Observable<User>;
-  @Select(RegistrationState.parent) parent$: Observable<Parent>;
-  parent: Parent;
+  @Select(RegistrationState.parent) parent$: Observable<ParentWithContactInfo>;
+  parent: ParentWithContactInfo;
 
   ContraindicationAgreementFormControl = new FormControl(false);
   ParentAgreementFormControl = new FormControl(false);
@@ -73,9 +73,9 @@ export class CreateApplicationComponent implements OnInit, OnDestroy {
 
     this.parent$
       .pipe(
-        filter((parent: Parent) => !!parent),
+        filter((parent: ParentWithContactInfo) => !!parent),
         takeUntil(this.destroy$))
-      .subscribe((parent: Parent) => {
+      .subscribe((parent: ParentWithContactInfo) => {
         this.parent = parent;
         this.store.dispatch(new GetAllUsersChildren());
       });