fix: #371 Add_confirmation_before_deleting_data

DiegoTinitana · DiegoTinitana · commit fa8fe332cf83 · 2020-06-17T09:37:32.000-05:00
diff --git a/src/app/app.module.ts b/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),
diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.html b/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'"
+  [list]="activityToDelete"
+  (removeList)="deleteActivity($event)"
+>
+</app-dialog>
diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
@@ -14,6 +14,8 @@ import { Activity } from '../../../shared/models';
 })
 export class ActivityListComponent implements OnInit {
   activities: Activity[] = [];
+  showModal = false;
+  activityToDelete: Activity;
 
   constructor(private store: Store<ActivityState>) {}
 
@@ -28,9 +30,15 @@ export class ActivityListComponent implements OnInit {
 
   deleteActivity(activityId: string) {
     this.store.dispatch(new DeleteActivity(activityId));
+    this.showModal = true;
   }
 
   updateActivity(activityId: string) {
     this.store.dispatch(new SetActivityToEdit(activityId));
   }
+
+  openModal(item: Activity) {
+    this.activityToDelete = item;
+    this.showModal = true;
+  }
 }
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html b/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'"
+  [list]="customerToDelete"
+  (removeList)="deleteCustomer($event)"
+>
+</app-dialog>
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
@@ -29,6 +29,8 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   dtElement: DataTableDirective;
   loadCustomersSubscription: Subscription;
   changeCustomerSubscription: Subscription;
+  showModal = false;
+  customerToDelete: Customer;
 
   constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) { }
 
@@ -79,6 +81,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   deleteCustomer(customerId: string) {
     this.store.dispatch(new DeleteCustomer(customerId));
+    this.showModal = false;
   }
 
   private rerenderDataTable(): void {
@@ -91,4 +94,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
       this.dtTrigger.next();
     }
   }
+
+  openModal(item: Customer) {
+    this.customerToDelete = item;
+    this.showModal = true;
+  }
 }
diff --git a/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html b/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 Activity'"
+  [list]="projectTypeToDelete"
+  (removeList)="deleteProjectType($event)"
+>
+</app-dialog>
diff --git a/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.ts b/src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.ts
@@ -16,6 +16,8 @@ export class ProjectTypeListComponent implements OnInit {
 
   initPage2 = 1;
   itemsPerPage = ITEMS_PER_PAGE;
+  showModal = false;
+  projectTypeToDelete: ProjectType;
 
   constructor(private store: Store<ProjectTypeState>) {}
 
@@ -28,9 +30,15 @@ export class ProjectTypeListComponent implements OnInit {
 
   deleteProjectType(projectTypeId: string) {
     this.store.dispatch(new DeleteProjectType(projectTypeId));
+    this.showModal = false;
   }
 
   updateProjectType(projectTypeId: string) {
     this.store.dispatch(new SetProjectTypeToEdit(projectTypeId));
   }
+
+  openModal(item: ProjectType) {
+    this.projectTypeToDelete = item;
+    this.showModal = true;
+  }
 }
diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html b/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 Activity'"
+  [list]="projectToDelete"
+  (removeList)="deleteProject($event)"
+>
+</app-dialog>
diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts
@@ -18,6 +18,8 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   isLoading = false;
   projects: Project[] = [];
   filterProjects = '';
+  showModal = false;
+  projectToDelete: Project;
 
   projectsSubscription: Subscription;
 
@@ -41,5 +43,11 @@ export class ProjectListComponent implements OnInit, OnDestroy {
 
   deleteProject(projectId: string) {
     this.store.dispatch(new actions.DeleteProject(projectId));
+    this.showModal = false;
+  }
+
+  openModal(item: Project) {
+    this.projectToDelete = item;
+    this.showModal = true;
   }
 }
diff --git a/src/app/modules/shared/components/dialog/dialog.component.html b/src/app/modules/shared/components/dialog/dialog.component.html
@@ -0,0 +1,17 @@
+<div class="modal-dialog" role="document">
+  <div class="modal-content" *ngIf="list">
+    <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">
+      Are you sure you want to delete <b>{{ list.project_name || list.name }}</b>
+    </div>
+    <div class="modal-footer">
+      <button #cancelDeleteModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+      <button (click)="removeListById(list.id)" type="button" class="btn btn-danger">Delete</button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/modules/shared/components/dialog/dialog.component.scss b/src/app/modules/shared/components/dialog/dialog.component.scss
diff --git a/src/app/modules/shared/components/dialog/dialog.component.spec.ts b/src/app/modules/shared/components/dialog/dialog.component.spec.ts
@@ -0,0 +1,48 @@
+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', () => {
+    const merged = {
+      id: '1',
+      name: 'app 4',
+      description: 'It is a good app',
+      status: 'inactive',
+      completed: true,
+      project: 'ErnstYoung',
+      startDate: '2020-02-05T15:36:15.887Z',
+      endDate: '2020-02-05T18:36:15.887Z',
+      activity: 'development',
+      technologies: ['Angular', 'TypeScript'],
+    };
+
+    spyOn(component.removeList, 'emit');
+    component.list = merged;
+    fixture.detectChanges();
+    component.removeListById(merged.id);
+    expect(component.removeList.emit).toHaveBeenCalled();
+    component.cancelDeleteModal.nativeElement.click();
+  });
+
+});
diff --git a/src/app/modules/shared/components/dialog/dialog.component.ts b/src/app/modules/shared/components/dialog/dialog.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss'],
+})
+export class DialogComponent implements OnInit {
+  @Input() list: any;
+  @Output() removeList = new EventEmitter();
+  @Input() title: string;
+
+  @ViewChild('cancelDeleteModal') cancelDeleteModal: ElementRef;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  removeListById(id: string) {
+    this.removeList.emit(id);
+    this.cancelDeleteModal.nativeElement.click();
+  }
+}
diff --git a/src/app/modules/time-entries/pages/time-entries.component.html b/src/app/modules/time-entries/pages/time-entries.component.html
diff --git a/src/app/modules/time-entries/pages/time-entries.component.ts b/src/app/modules/time-entries/pages/time-entries.component.ts

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,8 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {`
`29`	`29`	`dtElement: DataTableDirective;`
`30`	`30`	`loadCustomersSubscription: Subscription;`
`31`	`31`	`changeCustomerSubscription: Subscription;`
	`32`	`+ showModal = false;`
	`33`	`+ customerToDelete: Customer;`
`32`	`34`
`33`	`35`	`constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) { }`
`34`	`36`
`@@ -79,6 +81,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {`
`79`	`81`
`80`	`82`	`deleteCustomer(customerId: string) {`
`81`	`83`	`this.store.dispatch(new DeleteCustomer(customerId));`
	`84`	`+ this.showModal = false;`
`82`	`85`	`}`
`83`	`86`
`84`	`87`	`private rerenderDataTable(): void {`
`@@ -91,4 +94,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {`
`91`	`94`	`this.dtTrigger.next();`
`92`	`95`	`}`
`93`	`96`	`}`
	`97`	`+`
	`98`	`+ openModal(item: Customer) {`
	`99`	`+ this.customerToDelete = item;`
	`100`	`+ this.showModal = true;`
	`101`	`+ }`
`94`	`102`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,8 @@ export class ProjectTypeListComponent implements OnInit {`
`16`	`16`
`17`	`17`	`initPage2 = 1;`
`18`	`18`	`itemsPerPage = ITEMS_PER_PAGE;`
	`19`	`+ showModal = false;`
	`20`	`+ projectTypeToDelete: ProjectType;`
`19`	`21`
`20`	`22`	`constructor(private store: Store<ProjectTypeState>) {}`
`21`	`23`
`@@ -28,9 +30,15 @@ export class ProjectTypeListComponent implements OnInit {`
`28`	`30`
`29`	`31`	`deleteProjectType(projectTypeId: string) {`
`30`	`32`	`this.store.dispatch(new DeleteProjectType(projectTypeId));`
	`33`	`+ this.showModal = false;`
`31`	`34`	`}`
`32`	`35`
`33`	`36`	`updateProjectType(projectTypeId: string) {`
`34`	`37`	`this.store.dispatch(new SetProjectTypeToEdit(projectTypeId));`
`35`	`38`	`}`
	`39`	`+`
	`40`	`+ openModal(item: ProjectType) {`
	`41`	`+ this.projectTypeToDelete = item;`
	`42`	`+ this.showModal = true;`
	`43`	`+ }`
`36`	`44`	`}`