fix: #371 Add_confirmation_before_deleting_data

src/app/app.module.ts

@@ -66,6 +66,7 @@ import {ReportsComponent} from './modules/reports/pages/reports.component';
 import {InputDateComponent} from './modules/shared/components/input-date/input-date.component';
 import {TimeRangeFormComponent} from './modules/reports/components/time-range-form/time-range-form.component';
 import {TimeEntriesTableComponent} from './modules/reports/components/time-entries-table/time-entries-table.component';
+import { DialogComponent } from './modules/shared/components/dialog/dialog.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -112,6 +113,7 @@ const maskConfig: Partial<IConfig> = {
     InputDateComponent,
     TimeRangeFormComponent,
     TimeEntriesTableComponent,
+    DialogComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -10,12 +10,33 @@
       <tr class="d-flex" *ngFor="let activity of activities">
         <td class="col-sm-9">{{ activity.name }}</td>
         <td class="col-sm-3 text-center">
-          <button type="button" class="btn btn-sm btn-primary" (click)="updateActivity(activity.id)"><i
-              class="fa fa-pencil fa-xs"></i></button>
-          <button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteActivity(activity.id)"><i
-              class="fas fa-trash-alt fa-xs"></i></button>
+          <button type="button" class="btn btn-sm btn-primary" (click)="updateActivity(activity.id)">
+            <i class="fa fa-pencil fa-xs"></i>
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-danger ml-2"
+            data-toggle="modal"
+            data-target="#deleteModal"
+            (click)="openModal(activity)"
+          >
+            <i class="fas fa-trash-alt fa-xs"></i>
+          </button>
         </td>
       </tr>
     </tbody>
   </table>
 </div>
+
+<app-dialog
+  *ngIf="showModal"
+  class="modal fade"
+  id="deleteModal"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [title]="'Delete Activity'"
+  [body]="message"
+  (closeModalEvent)="deleteActivity()"
+>
+</app-dialog>

src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts

@@ -50,8 +50,8 @@ describe('ActivityListComponent', () => {
 
   it('deleteActivity, dispatchs DeleteActivity action', () => {
     spyOn(store, 'dispatch');
-
-    component.deleteActivity('id');
+    component.idToDelete = 'id';
+    component.deleteActivity();
 
     expect(store.dispatch).toHaveBeenCalledWith(new DeleteActivity('id'));
   });

src/app/modules/activities-management/components/activity-list/activity-list.component.ts

@@ -14,7 +14,10 @@ import { Activity } from '../../../shared/models';
 })
 export class ActivityListComponent implements OnInit {
   activities: Activity[] = [];
-
+  showModal = false;
+  activityToDelete: Activity;
+  message: string;
+  idToDelete: string;
   constructor(private store: Store<ActivityState>) {}
 
   ngOnInit() {
@@ -26,11 +29,18 @@ export class ActivityListComponent implements OnInit {
     });
   }
 
-  deleteActivity(activityId: string) {
-    this.store.dispatch(new DeleteActivity(activityId));
+  deleteActivity() {
+    this.store.dispatch(new DeleteActivity(this.idToDelete));
+    this.showModal = true;
   }
 
   updateActivity(activityId: string) {
     this.store.dispatch(new SetActivityToEdit(activityId));
   }
+
+  openModal(item: Activity) {
+    this.idToDelete = item.id;
+    this.message = `Are you sure you want to delete ${item.name}?`;
+    this.showModal = true;
+  }
 }

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -1,24 +1,46 @@
-<table *ngIf="customers" class="table table-sm table-bordered table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
+<table
+  *ngIf="customers"
+  class="table table-sm table-bordered table-striped mb-0"
+  datatable
+  [dtTrigger]="dtTrigger"
+  [dtOptions]="dtOptions"
+>
   <thead class="thead-blue">
     <tr class="d-flex">
       <th class="col-9">Name</th>
       <th class="col-3 text-center">Options</th>
     </tr>
   </thead>
   <tbody>
-    <tr
-      class="d-flex"
-      *ngFor="let customer of customers"
-    >
+    <tr class="d-flex" *ngFor="let customer of customers">
       <td class="col-sm-9">{{ customer.name }}</td>
       <td class="col-sm-3 text-center">
         <button (click)="editCustomer(customer.id)" type="button" class="btn btn-sm btn-primary">
           <i class="fa fa-pencil fa-xs"></i>
         </button>
-        <button (click)="deleteCustomer(customer.id)" type="button" class="btn btn-sm btn-danger ml-2">
+        <button
+          data-toggle="modal"
+          data-target="#deleteModal"
+          (click)="openModal(customer)"
+          type="button"
+          class="btn btn-sm btn-danger ml-2"
+        >
           <i class="fa fa-trash-alt fa-xs"></i>
         </button>
       </td>
     </tr>
   </tbody>
 </table>
+
+<app-dialog
+  *ngIf="showModal"
+  class="modal fade"
+  id="deleteModal"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [title]="'Delete Customer'"
+  [body]="message"
+  (closeModalEvent)="deleteCustomer()"
+>
+</app-dialog>

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts

@@ -67,8 +67,8 @@ describe('CustomerTableListComponent', () => {
 
   it('onClick delete, dispatch DeleteCustomer', () => {
     spyOn(store, 'dispatch');
-
-    component.deleteCustomer('1');
+    component.idToDelete = '1';
+    component.deleteCustomer();
 
     expect(store.dispatch).toHaveBeenCalledWith(new DeleteCustomer('1'));
   });

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -29,6 +29,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   dtElement: DataTableDirective;
   loadCustomersSubscription: Subscription;
   changeCustomerSubscription: Subscription;
+  showModal = false;
+  idToDelete: string;
+  message: string;
 
   constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) { }
 
@@ -77,8 +80,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.store.dispatch(new SetCustomerToEdit(customerId));
   }
 
-  deleteCustomer(customerId: string) {
-    this.store.dispatch(new DeleteCustomer(customerId));
+  deleteCustomer() {
+    this.store.dispatch(new DeleteCustomer(this.idToDelete));
+    this.showModal = false;
   }
 
   private rerenderDataTable(): void {
@@ -91,4 +95,10 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
       this.dtTrigger.next();
     }
   }
+
+  openModal(item: Customer) {
+    this.idToDelete = item.id;
+    this.message = `Are you sure you want to delete ${item.name}?`;
+    this.showModal = true;
+  }
 }

src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html

@@ -10,12 +10,33 @@
       <tr class="d-flex" *ngFor="let projectType of projectTypes">
         <td class="col-sm-9">{{ projectType.name }}</td>
         <td class="col-sm-3 text-center">
-          <button type="button" class="btn btn-sm btn-primary" (click)="updateProjectType(projectType.id)"><i
-              class="fa fa-pencil fa-xs"></i></button>
-          <button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteProjectType(projectType.id)"><i
-              class="fas fa-trash-alt fa-xs"></i></button>
+          <button type="button" class="btn btn-sm btn-primary" (click)="updateProjectType(projectType.id)">
+            <i class="fa fa-pencil fa-xs"></i>
+          </button>
+          <button
+            type="button"
+            data-toggle="modal"
+            data-target="#deleteModal"
+            class="btn btn-sm btn-danger ml-2"
+            (click)="openModal(projectType)"
+          >
+            <i class="fas fa-trash-alt fa-xs"></i>
+          </button>
         </td>
       </tr>
     </tbody>
   </table>
 </div>
+
+<app-dialog
+  *ngIf="showModal"
+  class="modal fade"
+  id="deleteModal"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [title]="'Delete Project Type'"
+  [body]="message"
+  (closeModalEvent)="deleteProjectType()"
+>
+</app-dialog>

src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.spec.ts

@@ -54,8 +54,8 @@ describe('ProjectTypeTableListComponent', () => {
 
   it('dispatchs DeleteProjectType on deleteProjectType', () => {
     spyOn(store, 'dispatch');
-
-    component.deleteProjectType('id');
+    component.idToDelete = 'id';
+    component.deleteProjectType();
 
     expect(store.dispatch).toHaveBeenCalledWith(new DeleteProjectType('id'));
   });

src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.ts

@@ -16,6 +16,9 @@ export class ProjectTypeListComponent implements OnInit {
 
   initPage2 = 1;
   itemsPerPage = ITEMS_PER_PAGE;
+  showModal = false;
+  idToDelete: string;
+  message: string;
 
   constructor(private store: Store<ProjectTypeState>) {}
 
@@ -26,11 +29,18 @@ export class ProjectTypeListComponent implements OnInit {
     });
   }
 
-  deleteProjectType(projectTypeId: string) {
-    this.store.dispatch(new DeleteProjectType(projectTypeId));
+  deleteProjectType() {
+    this.store.dispatch(new DeleteProjectType(this.idToDelete));
+    this.showModal = false;
   }
 
   updateProjectType(projectTypeId: string) {
     this.store.dispatch(new SetProjectTypeToEdit(projectTypeId));
   }
+
+  openModal(item: ProjectType) {
+    this.idToDelete = item.id;
+    this.message = `Are you sure you want to delete ${item.name}?`;
+    this.showModal = true;
+  }
 }

src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html

@@ -13,11 +13,30 @@
           <button type="button" class="btn btn-sm btn-primary" (click)="updateProject(project)">
             <i class="fa fa-pencil fa-xs"></i>
           </button>
-          <button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteProject(project.id)">
+          <button
+            type="button"
+            data-toggle="modal"
+            data-target="#deleteModal"
+            class="btn btn-sm btn-danger ml-2"
+            (click)="openModal(project)"
+          >
             <i class="fa fa-trash-alt fa-xs"></i>
           </button>
         </td>
       </tr>
     </tbody>
   </table>
 </div>
+
+<app-dialog
+  *ngIf="showModal"
+  class="modal fade"
+  id="deleteModal"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [title]="'Delete Project'"
+  [body]="message"
+  (closeModalEvent)="deleteProject()"
+>
+</app-dialog>

src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts

@@ -88,10 +88,10 @@ describe('ProjectListComponent', () => {
     component.projectsSubscription = new Subscription();
     const subscription = spyOn(component.projectsSubscription, 'unsubscribe');
 
+    component.idToDelete = project.id;
     spyOn(store, 'dispatch');
-    component.deleteProject(project.id);
+    component.deleteProject();
     component.ngOnDestroy();
-
     expect(subscription).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledWith(new DeleteProject(project.id));

src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts

@@ -18,6 +18,9 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   isLoading = false;
   projects: Project[] = [];
   filterProjects = '';
+  showModal = false;
+  idToDelete: string;
+  message: string;
 
   projectsSubscription: Subscription;
 
@@ -39,7 +42,14 @@ export class ProjectListComponent implements OnInit, OnDestroy {
     this.store.dispatch(new actions.SetProjectToEdit(project));
   }
 
-  deleteProject(projectId: string) {
-    this.store.dispatch(new actions.DeleteProject(projectId));
+  deleteProject() {
+    this.store.dispatch(new actions.DeleteProject(this.idToDelete));
+    this.showModal = false;
+  }
+
+  openModal(item: Project) {
+    this.idToDelete = item.id;
+    this.message = `Are you sure you want to delete ${item.name}?`;
+    this.showModal = true;
   }
 }

src/app/modules/shared/components/dialog/dialog.component.html

@@ -0,0 +1,17 @@
+<div class="modal-dialog" role="document">
+  <div class="modal-content" *ngIf="body">
+    <div class="modal-header">
+      <h5 class="modal-title" >{{ title }}</h5>
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      {{ body }}
+    </div>
+    <div class="modal-footer">
+      <button #cancelDeleteModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+      <button (click)="closeModal()" type="button" class="btn btn-danger">Confirm</button>
+    </div>
+  </div>
+</div>

src/app/modules/shared/components/dialog/dialog.component.spec.ts

@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogComponent } from './dialog.component';
+
+describe('DialogComponent', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit removeProject event #removedProject', () => {
+    spyOn(component.closeModalEvent, 'emit');
+    component.body = 'test';
+    fixture.detectChanges();
+    component.closeModal();
+    expect(component.closeModalEvent.emit).toHaveBeenCalled();
+  });
+
+});