Feature/#803delete teacher guard

src/app/shared/enum/modal-confirmation.ts

@@ -1,5 +1,6 @@
 export enum ModalConfirmationType {
   delete = 'delete',
+  deleteTeacher = 'deleteTeacher',
   leaveWorkshop = 'leaveWorkshop',
   deleteChild = 'deleteChild',
   leavePage = 'leavePage',
@@ -11,6 +12,7 @@ export enum ModalConfirmationType {
 export enum ModalConfirmationTitle {
   delete = 'ВИДАЛИТИ ГУРТОК',
   deleteChild = 'ВИЛУЧИТИ ДАНІ ПРО ДИТИНУ?',
+  deleteTeacher = 'ВИЛУЧИТИ ДАНІ ПРО ВЧИТЕЛЯ',
   leaveWorkshop = 'ЗАЛИШИТИ ГУРТОК?',
   leavePage = 'ЗАЛИШИТИ СТОРІНКУ?',
   createApplication = 'ПОДАТИ ЗАЯВКУ?',
@@ -21,6 +23,7 @@ export enum ModalConfirmationTitle {
 export enum ModalConfirmationText {
   delete = 'Ви впевнені, що хочете видалити гурток',
   deleteChild = 'Ви впевнені, що хочете вилучити дані про дитину',
+  deleteTeacher = 'Ви впевнені, що хочете вилучити дані про вчителя ?',
   leaveWorkshop = 'Ви впевнені, що хочете залишити гурток',
   leavePage = 'Ви впевнені, що хочете залишити сторінку?',
   rate = 'Поставте будь ласка оцінку цьому гуртку',

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

@@ -129,7 +129,7 @@
   </mat-form-field>
 
   <div fxLayout='row' fxLayoutAlign='center' *ngIf="childrenAmount > 1" class="addChild">
-    <button class="btn-reset" type="reset" mat-button (click)="delete()">
+    <button class="btn-reset" mat-button (click)="delete()">
       <mat-icon class="mat-icon-delete">delete</mat-icon>Вилучити дані про дитину
     </button>
   </div>

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

@@ -23,7 +23,8 @@ describe('CreateChildComponent', () => {
         MatIconModule,
         RouterTestingModule,
         HttpClientTestingModule,
-        MatCheckboxModule
+        MatCheckboxModule,
+        MatDialogModule
       ],
       declarations: [
         CreateChildComponent,

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

@@ -18,6 +18,9 @@ import { CreateChildren, UpdateChild } from 'src/app/shared/store/user.actions';
 import { TEXT_REGEX, TEXT_WITH_DIGITS_REGEX } from 'src/app/shared/constants/regex-constants';
 import { Constants } from 'src/app/shared/constants/constants';
 import { CreateFormComponent } from '../../create-form/create-form.component';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmationModalWindowComponent } from 'src/app/shared/components/confirmation-modal-window/confirmation-modal-window.component';
+import { ModalConfirmationType } from 'src/app/shared/enum/modal-confirmation';
 
 @Component({
   selector: 'app-create-child',
@@ -40,7 +43,8 @@ export class CreateChildComponent extends CreateFormComponent implements OnInit,
     private fb: FormBuilder,
     store: Store,
     route: ActivatedRoute,
-    navigationBarService: NavigationBarService) {
+    navigationBarService: NavigationBarService,
+    private matDialog: MatDialog) {
     super(store, route, navigationBarService);
   }
 
@@ -146,9 +150,26 @@ export class CreateChildComponent extends CreateFormComponent implements OnInit,
    * @param index
    */
   onDeleteForm(index: number): void {
-    this.ChildrenFormArray.removeAt(index);
+    const status: string = this.ChildrenFormArray.controls[index].status;
+    const isTouched: boolean = this.ChildrenFormArray.controls[index].touched;
+
+    if(status !== 'INVALID' || isTouched) {
+    const dialogRef = this.matDialog.open(ConfirmationModalWindowComponent, {
+      width: '330px',
+      data: {
+        type: ModalConfirmationType.deleteChild,
+        property: ''
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((result: boolean) => {
+      result && this.ChildrenFormArray.removeAt(index);;
+    });
+    } else {
+      this.ChildrenFormArray.removeAt(index);
+    }   
   }
-
+  
   /**
    * This method create or edit Child and distpatch CreateChild action
    */

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

@@ -5,6 +5,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { Component, Input } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('CreateTeacherComponent', () => {
   let component: CreateTeacherComponent;
@@ -16,7 +17,8 @@ describe('CreateTeacherComponent', () => {
         MatFormFieldModule,
         ReactiveFormsModule,
         MatIconModule,
-        MatGridListModule
+        MatGridListModule,
+        MatDialogModule
       ],
       declarations: [
         CreateTeacherComponent,

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

@@ -2,6 +2,9 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Teacher } from 'src/app/shared/models/teacher.model';
 import { TEXT_REGEX } from 'src/app/shared/constants/regex-constants'
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmationModalWindowComponent } from 'src/app/shared/components/confirmation-modal-window/confirmation-modal-window.component';
+import { ModalConfirmationType } from 'src/app/shared/enum/modal-confirmation';
 
 
 @Component({
@@ -15,7 +18,7 @@ export class CreateTeacherComponent implements OnInit {
   @Input() teachers: Teacher[];
   @Output() passTeacherFormArray = new EventEmitter();
 
-  constructor(private fb: FormBuilder) { }
+  constructor(private fb: FormBuilder, private matDialog: MatDialog) { }
 
   ngOnInit(): void {
     if (this.teachers?.length) {
@@ -56,6 +59,25 @@ export class CreateTeacherComponent implements OnInit {
    * @param index: number
    */
   onDeleteForm(index: number): void {
-    this.TeacherFormArray.removeAt(index);
+    const status: string = this.TeacherFormArray.controls[index].status;
+    const isTouched: boolean = this.TeacherFormArray.controls[index].touched;
+
+    if(status !== 'INVALID' || isTouched) {
+      const dialogRef = this.matDialog.open(ConfirmationModalWindowComponent, {
+        width: '330px',
+        data: {
+          type: ModalConfirmationType.deleteTeacher,
+          property: ''
+        }
+      });
+
+      dialogRef.afterClosed().subscribe((result: boolean) => {
+        result && this.TeacherFormArray.removeAt(index);
+      });  
+    }
+    else {
+      this.TeacherFormArray.removeAt(index);
+    } 
   }
+
 }

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

@@ -70,7 +70,7 @@
   </app-validation-hint-for-input>
 
   <div fxLayout='row' fxLayoutAlign='center' *ngIf="teacherAmount > 1">
-    <button class=" btn-reset" type="reset" mat-button (click)="onDeleteTeacher()">
+    <button class=" btn-reset" mat-button (click)="onDeleteTeacher()">
       <mat-icon class="mat-icon-delete">delete</mat-icon>Вилучити дані про викладача
     </button>
   </div>

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

@@ -1,7 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Output, EventEmitter } from '@angular/core';
-import { emit } from 'process';
 import { Constants } from 'src/app/shared/constants/constants';
 
 @Component({