Feature/#181 child info box (#182)

* info-child-box works

* style fix

* refactoring

* fix

* directive

* style

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

@@ -0,0 +1,18 @@
+<mat-card class="card" #childInfoBox [style]="{top:top, left:left}">
+  <mat-card-header fxLayout='column' fxLayoutAlign='center start'>
+    <div mat-card-avatar fxLayout='column' fxLayoutAlign='center start'></div>
+    <mat-card-title>ДАНІ ДИТИНИ</mat-card-title>
+    <h3>{{child.firstName}} {{child.lastName}} {{child.patronymic}}</h3>
+    <h4>{{child.birthDay}}</h4><br>
+  </mat-card-header>
+  <mat-card-content fxLayout='column' fxLayoutAlign='center start'>
+    <h4>Соціальна група</h4>
+    <p>Відсутня</p>
+    <h4>Батьки</h4>
+    <p>{{child.parent?.firstName}} {{child.parent.lastName}} {{child.parent.secondName}}</p>
+    <h4>Телефон</h4>
+    <p>{{child.parent?.phone}}</p>
+    <h4>Емейл</h4>
+    <p>{{child.parent?.email}}</p>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,11 @@
+.card{
+  display: block;
+  position: absolute;
+  z-index: 2;
+  background:white;
+  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
+  min-width:400px;
+  border-radius: 5px;
+  padding: 1rem;
+  margin: 1rem 0;
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChildInfoBoxComponent } from './child-info-box.component';
+
+describe('ChildInfoBoxComponent', () => {
+  let component: ChildInfoBoxComponent;
+  let fixture: ComponentFixture<ChildInfoBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChildInfoBoxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChildInfoBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Child } from '../../models/child.model';
+
+@Component({
+  selector: 'app-child-info-box',
+  templateUrl: './child-info-box.component.html',
+  styleUrls: ['./child-info-box.component.scss']
+})
+export class ChildInfoBoxComponent implements OnInit {
+
+  constructor() { }
+
+  @Input() child: Child;
+  @ViewChild('childInfoBox') childInfoBox: ElementRef<HTMLInputElement>;
+  @Input() top: string;
+  @Input() left: string;
+
+  ngOnInit(): void {
+  }
+}

src/app/shared/components/workshop-card/workshop-card.component.html

@@ -2,7 +2,7 @@
   <div class="card_header" fxLayout="row" fxLayoutAlign="end start">
     <div *ngIf="!(isMainPage$ | async) then ProviderActions; else UserActions"></div>
     <a href="#" class="card_category">
-      <img src="assets/icons/{{card.category}}.png" alt="{{card.category}}" class="card_category-img">
+      <img src="assets/icons/{{workshop.category}}.png" alt="{{workshop.category}}" class="card_category-img">
     </a>
   </div>
   <div *ngIf="( isMainPage$ | async) then MainView; else ProviderActivities"></div>
@@ -16,38 +16,38 @@
 <ng-template #MainView>
   <div class="card_body">
     <h3 class="card_title">
-      {{card.title}}
+      {{workshop.title}}
     </h3>
     <ul class="card_data">
       <li class="card_data-item">
         <img src="assets/icons/rate.png" alt="rate" class="card_data-icon">
-        {{card.rate}} <span class="card_rate-span">({{card.votes}})</span>
+        {{workshop.rate}} <span class="card_rate-span">({{workshop.votes}})</span>
       </li>
       <li class="card_data-item">
         <img src="assets/icons/name.png" alt="name" class="card_data-icon">
         <a href="#" class="card_owner">
-          {{card.head}}
+          {{workshop.head}}
         </a>
       </li>
       <li class="card_data-item">
         <img src="assets/icons/age.png" alt="age" class="card_data-icon">
-        {{card.minAge}}-{{card.maxAge}}
+        {{workshop.minAge}}-{{workshop.maxAge}}
       </li>
       <li class="card_data-item">
         <img src="assets/icons/price.png" alt="price" class="card_data-icon">
-        {{card.price}}
+        {{workshop.price}}
       </li>
       <li class="card_data-item">
         <img src="assets/icons/address.png" alt="address" class="card_data-icon">
-        {{card.address.city}}, {{card.address.street}}, {{card.address.buildingNumber}}
+        {{workshop.address.city}}, {{workshop.address.street}}, {{workshop.address.buildingNumber}}
       </li>
     </ul>
   </div>
 </ng-template>
 <ng-template #ProviderActivities>
   <div class="card_body">
     <h3 class="card_title">
-      {{card.title}}
+      {{workshop.title}}
     </h3>
     <ul class="card_data">
       <li class="card_data-item">
@@ -69,7 +69,7 @@ <h3 class="card_title">
 <ng-template #ProviderActions>
   <div fxLayout="row" fxLayoutAlign="end start">
     <div class="actions_btn"><img src="assets/icons/edit.png" alt="edit"></div>
-    <div class="actions_btn"><img src="assets/icons/delete.png" alt="delete"></div>
+    <div class="actions_btn"><img src="assets/icons/delete.png" alt="delete" (click)="onDelete()"></div>
   </div>
 </ng-template>
 

src/app/shared/components/workshop-card/workshop-card.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Select } from '@ngxs/store';
+import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { Workshop } from '../../models/workshop.model';
 import { AppState } from '../../store/app.state';
+import { DeleteWorkshop } from '../../store/provider.actions';
 
 @Component({
   selector: 'app-workshop-card',
@@ -13,11 +14,14 @@ export class WorkshopCardComponent implements OnInit {
 
   @Select(AppState.isMainPage)
   isMainPage$: Observable<boolean>;
-  @Input() card: Workshop;
+  @Input() workshop: Workshop;
 
-  constructor() { }
+  constructor(private store: Store) { }
 
   ngOnInit(): void {
   }
 
+  onDelete(): void {
+    this.store.dispatch(new DeleteWorkshop(this.workshop))
+  }
 }

src/app/shared/directives/info-box-host.directive.spec.ts

@@ -0,0 +1,8 @@
+import { InfoBoxHostDirective } from './info-box-host.directive';
+
+describe('InfoBoxHostDirective', () => {
+  it('should create an instance', () => {
+    const directive = new InfoBoxHostDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/shared/directives/info-box-host.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[appInfoBoxHost]'
+})
+export class InfoBoxHostDirective {
+
+  constructor(public viewContainerRef: ViewContainerRef) { }
+
+}

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

@@ -1,4 +1,5 @@
 import { Child } from "./child.model";
+import { Provider } from "./provider.model";
 import { Workshop } from "./workshop.model";
 
 export class Application {
@@ -8,6 +9,7 @@ export class Application {
   date: Date;
   workshop: Workshop;
   child: Child;
+  provider: Provider;
 
   constructor(info) {
     this.id = null;

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

@@ -1,20 +1,21 @@
-
+import { Parent } from "./parent.model";
 export class Child {
   firstName: string;
   lastName: string;
   secondName: string;
-  birthDay: Date;
+  patronymic: string;
+  birthDay: string;
   type: Boolean;
-  gender: string;
+  gender: number;
+  parent: Parent;
+  socialGroupId: number;
 
-
   constructor(info) {
     this.firstName = info.firstName;
-    this.lastName= info.lastName;
-    this.secondName= info.secondName;
-    this.birthDay= info.birthDay;
-    this.type = info.type;
-    this.gender = info.gender;
+    this.lastName = info.lastName;
+    this.patronymic = info.second;
+    this.birthDay = "2021-04-27";
+    this.gender = 0;
+    this.socialGroupId = 0;
   }
 }
-

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

@@ -0,0 +1,17 @@
+export class Parent {
+  firstName: string;
+  lastName: string;
+  secondName: string;
+  birthDay: Date;
+  gender: string;
+  phone: string;
+  email: string;
+
+  constructor(info) {
+    this.firstName = info.firstName;
+    this.lastName = info.lastName;
+    this.secondName = info.secondName;
+    this.birthDay = info.birthDay;
+    this.gender = info.gender;
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Workshop } from "./workshop.model";
+
+export class Provider {
+  title: string;
+  phone: string;
+  email: string;
+  workshop: Workshop
+
+  constructor(info) {
+    this.title = info.title;
+  }
+}

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

@@ -29,6 +29,7 @@ export class Workshop {
   ownership: string;
   rate: string;
   votes: string;
+  placeAmount: number;
 
   constructor(about, description, addr, tchrs) {
     this.title = about.title;

src/app/shared/services/child-cards/child-cards.service.ts

@@ -11,14 +11,13 @@ import { Child } from '../../models/child.model';
 })
 export class ChildCardService {
 
-  dataUrl = '/Child/Get'
-
   constructor(private http: HttpClient) { }
 
-  getCards(): Observable<Child[]> {
+  getChildren(): Observable<Child[]> {
     return this.http.get<Child[]>('/Child/Get')
   }
-  createChildren( child: Child):  void {
-    this.http.post('/Child/Create', child).subscribe(child => console.log(child));
+
+  createChildren(child: Child): void {
+    this.http.post('/Child/Create', child);
   }
 }

src/app/shared/services/info-box/info-box.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InfoBoxService } from './info-box.service';
+
+describe('InfoBoxService', () => {
+  let service: InfoBoxService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(InfoBoxService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/services/info-box/info-box.service.ts

@@ -0,0 +1,56 @@
+import { Component, ComponentFactoryResolver, Injectable, Type, ViewContainerRef } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { ChildInfoBoxComponent } from '../../components/child-info-box/child-info-box.component';
+import { Child } from '../../models/child.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InfoBoxService {
+
+  private isMouseOver = new BehaviorSubject(false);
+  isMouseOver$ = this.isMouseOver.asObservable();
+  child: Child;
+  top: string;
+  left: string;
+
+  constructor(private cfr: ComponentFactoryResolver) { }
+
+  onMouseOver({ element, child }: { element: Element, child: Child }) {
+    this.isMouseOver.next(true);
+    this.child = child;
+    this.getPosition(element);
+  }
+
+  onMouseLeave() {
+    this.isMouseOver.next(false);
+  }
+
+  async loadComponent(vcr: ViewContainerRef, isMouseOver: boolean) {
+    const { ChildInfoBoxComponent } = await import('../../components/child-info-box/child-info-box.component');
+
+    vcr.clear();
+    const component: Type<ChildInfoBoxComponent> = ChildInfoBoxComponent;
+    if (isMouseOver) {
+      const componentRef = vcr.createComponent(this.cfr.resolveComponentFactory(component));
+
+      (<ChildInfoBoxComponent>componentRef.instance).child = this.child ? this.child : null;
+      (<ChildInfoBoxComponent>componentRef.instance).top = this.top ? this.top : null;
+      (<ChildInfoBoxComponent>componentRef.instance).left = this.left ? this.left : null;
+
+      return componentRef;
+    }
+  }
+
+  /**
+    * This method get position pf emitted element
+    * @param Element element
+    */
+  getPosition(element: Element): void {
+    const bodyRect = document.body.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const offset = elementRect.top - bodyRect.top + 20;
+    this.top = offset + 'px';
+    this.left = elementRect.left + 'px';
+  }
+}

src/app/shared/services/workshops/provider-workshops copy/provider-workshops.ts

@@ -14,7 +14,7 @@ export class ProviderWorkshopsService {
     return this.http.get<Workshop[]>('/Workshop/Get')
   }
 
-  createWorkshop( workshop ): void {
-    this.http.post('/Workshop/Create', workshop).subscribe(workshop => console.log(workshop));
+  createWorkshop(workshop): void {
+    this.http.post('/Workshop/Create', workshop);
   }
 }

src/app/shared/services/workshops/provider-workshops/provider-workshops.ts

@@ -14,8 +14,12 @@ export class ProviderWorkshopsService {
     return this.http.get<Workshop[]>('/Workshop/Get')
   }
 
-  createWorkshop(workshop): any {
+  createWorkshop(workshop: Workshop): any {
     return this.http.post('/Workshop/Create', workshop);
   }
 
+  deleteWorkshop(workshop: Workshop): any {
+    const id = workshop.id;
+    return this.http.delete(`/Workshop/Delete/${id}`);
+  }
 }