Skip to content

Commit ae7f3f3

Browse files
enriquezreneenriquezrene
authored
Merge pull request #387 from ioet/371_Add_confirmation_before_deleting_data
fix: #371 Add_confirmation_before_deleting_data
2 parents e6c6ec4 + 2c9c0a2 commit ae7f3f3

21 files changed

+300
-83
lines changed

‎src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ import {ReportsComponent} from './modules/reports/pages/reports.component';
6666
import {InputDateComponent} from './modules/shared/components/input-date/input-date.component';
6767
import {TimeRangeFormComponent} from './modules/reports/components/time-range-form/time-range-form.component';
6868
import {TimeEntriesTableComponent} from './modules/reports/components/time-entries-table/time-entries-table.component';
69+
import { DialogComponent } from './modules/shared/components/dialog/dialog.component';
6970

7071
const maskConfig: Partial<IConfig> = {
7172
validation: false,
@@ -112,6 +113,7 @@ const maskConfig: Partial<IConfig> = {
112113
InputDateComponent,
113114
TimeRangeFormComponent,
114115
TimeEntriesTableComponent,
116+
DialogComponent,
115117
],
116118
imports: [
117119
NgxMaskModule.forRoot(maskConfig),

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,33 @@
1010
<tr class="d-flex" *ngFor="let activity of activities">
1111
<td class="col-sm-9">{{ activity.name }}</td>
1212
<td class="col-sm-3 text-center">
13-
<button type="button" class="btn btn-sm btn-primary" (click)="updateActivity(activity.id)"><i
14-
class="fa fa-pencil fa-xs"></i></button>
15-
<button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteActivity(activity.id)"><i
16-
class="fas fa-trash-alt fa-xs"></i></button>
13+
<button type="button" class="btn btn-sm btn-primary" (click)="updateActivity(activity.id)">
14+
<i class="fa fa-pencil fa-xs"></i>
15+
</button>
16+
<button
17+
type="button"
18+
class="btn btn-sm btn-danger ml-2"
19+
data-toggle="modal"
20+
data-target="#deleteModal"
21+
(click)="openModal(activity)"
22+
>
23+
<i class="fas fa-trash-alt fa-xs"></i>
24+
</button>
1725
</td>
1826
</tr>
1927
</tbody>
2028
</table>
2129
</div>
30+
31+
<app-dialog
32+
*ngIf="showModal"
33+
class="modal fade"
34+
id="deleteModal"
35+
tabindex="-1"
36+
role="dialog"
37+
aria-hidden="true"
38+
[title]="'Delete Activity'"
39+
[body]="message"
40+
(closeModalEvent)="deleteActivity()"
41+
>
42+
</app-dialog>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ describe('ActivityListComponent', () => {
5050

5151
it('deleteActivity, dispatchs DeleteActivity action', () => {
5252
spyOn(store, 'dispatch');
53-
54-
component.deleteActivity('id');
53+
component.idToDelete = 'id';
54+
component.deleteActivity();
5555

5656
expect(store.dispatch).toHaveBeenCalledWith(new DeleteActivity('id'));
5757
});

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ import { Activity } from '../../../shared/models';
1414
})
1515
export class ActivityListComponent implements OnInit {
1616
activities: Activity[] = [];
17-
17+
showModal = false;
18+
activityToDelete: Activity;
19+
message: string;
20+
idToDelete: string;
1821
constructor(private store: Store<ActivityState>) {}
1922

2023
ngOnInit() {
@@ -26,11 +29,18 @@ export class ActivityListComponent implements OnInit {
2629
});
2730
}
2831

29-
deleteActivity(activityId: string) {
30-
this.store.dispatch(new DeleteActivity(activityId));
32+
deleteActivity() {
33+
this.store.dispatch(new DeleteActivity(this.idToDelete));
34+
this.showModal = true;
3135
}
3236

3337
updateActivity(activityId: string) {
3438
this.store.dispatch(new SetActivityToEdit(activityId));
3539
}
40+
41+
openModal(item: Activity) {
42+
this.idToDelete = item.id;
43+
this.message = `Are you sure you want to delete ${item.name}?`;
44+
this.showModal = true;
45+
}
3646
}

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

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,46 @@
1-
<table *ngIf="customers" class="table table-sm table-bordered table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
1+
<table
2+
*ngIf="customers"
3+
class="table table-sm table-bordered table-striped mb-0"
4+
datatable
5+
[dtTrigger]="dtTrigger"
6+
[dtOptions]="dtOptions"
7+
>
28
<thead class="thead-blue">
39
<tr class="d-flex">
410
<th class="col-9">Name</th>
511
<th class="col-3 text-center">Options</th>
612
</tr>
713
</thead>
814
<tbody>
9-
<tr
10-
class="d-flex"
11-
*ngFor="let customer of customers"
12-
>
15+
<tr class="d-flex" *ngFor="let customer of customers">
1316
<td class="col-sm-9">{{ customer.name }}</td>
1417
<td class="col-sm-3 text-center">
1518
<button (click)="editCustomer(customer.id)" type="button" class="btn btn-sm btn-primary">
1619
<i class="fa fa-pencil fa-xs"></i>
1720
</button>
18-
<button (click)="deleteCustomer(customer.id)" type="button" class="btn btn-sm btn-danger ml-2">
21+
<button
22+
data-toggle="modal"
23+
data-target="#deleteModal"
24+
(click)="openModal(customer)"
25+
type="button"
26+
class="btn btn-sm btn-danger ml-2"
27+
>
1928
<i class="fa fa-trash-alt fa-xs"></i>
2029
</button>
2130
</td>
2231
</tr>
2332
</tbody>
2433
</table>
34+
35+
<app-dialog
36+
*ngIf="showModal"
37+
class="modal fade"
38+
id="deleteModal"
39+
tabindex="-1"
40+
role="dialog"
41+
aria-hidden="true"
42+
[title]="'Delete Customer'"
43+
[body]="message"
44+
(closeModalEvent)="deleteCustomer()"
45+
>
46+
</app-dialog>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ describe('CustomerTableListComponent', () => {
6767

6868
it('onClick delete, dispatch DeleteCustomer', () => {
6969
spyOn(store, 'dispatch');
70-
71-
component.deleteCustomer('1');
70+
component.idToDelete = '1';
71+
component.deleteCustomer();
7272

7373
expect(store.dispatch).toHaveBeenCalledWith(new DeleteCustomer('1'));
7474
});

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
2929
dtElement: DataTableDirective;
3030
loadCustomersSubscription: Subscription;
3131
changeCustomerSubscription: Subscription;
32+
showModal = false;
33+
idToDelete: string;
34+
message: string;
3235

3336
constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) { }
3437

@@ -77,8 +80,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
7780
this.store.dispatch(new SetCustomerToEdit(customerId));
7881
}
7982

80-
deleteCustomer(customerId: string) {
81-
this.store.dispatch(new DeleteCustomer(customerId));
83+
deleteCustomer() {
84+
this.store.dispatch(new DeleteCustomer(this.idToDelete));
85+
this.showModal = false;
8286
}
8387

8488
private rerenderDataTable(): void {
@@ -91,4 +95,10 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
9195
this.dtTrigger.next();
9296
}
9397
}
98+
99+
openModal(item: Customer) {
100+
this.idToDelete = item.id;
101+
this.message = `Are you sure you want to delete ${item.name}?`;
102+
this.showModal = true;
103+
}
94104
}

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,33 @@
1010
<tr class="d-flex" *ngFor="let projectType of projectTypes">
1111
<td class="col-sm-9">{{ projectType.name }}</td>
1212
<td class="col-sm-3 text-center">
13-
<button type="button" class="btn btn-sm btn-primary" (click)="updateProjectType(projectType.id)"><i
14-
class="fa fa-pencil fa-xs"></i></button>
15-
<button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteProjectType(projectType.id)"><i
16-
class="fas fa-trash-alt fa-xs"></i></button>
13+
<button type="button" class="btn btn-sm btn-primary" (click)="updateProjectType(projectType.id)">
14+
<i class="fa fa-pencil fa-xs"></i>
15+
</button>
16+
<button
17+
type="button"
18+
data-toggle="modal"
19+
data-target="#deleteModal"
20+
class="btn btn-sm btn-danger ml-2"
21+
(click)="openModal(projectType)"
22+
>
23+
<i class="fas fa-trash-alt fa-xs"></i>
24+
</button>
1725
</td>
1826
</tr>
1927
</tbody>
2028
</table>
2129
</div>
30+
31+
<app-dialog
32+
*ngIf="showModal"
33+
class="modal fade"
34+
id="deleteModal"
35+
tabindex="-1"
36+
role="dialog"
37+
aria-hidden="true"
38+
[title]="'Delete Project Type'"
39+
[body]="message"
40+
(closeModalEvent)="deleteProjectType()"
41+
>
42+
</app-dialog>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ describe('ProjectTypeTableListComponent', () => {
5454

5555
it('dispatchs DeleteProjectType on deleteProjectType', () => {
5656
spyOn(store, 'dispatch');
57-
58-
component.deleteProjectType('id');
57+
component.idToDelete = 'id';
58+
component.deleteProjectType();
5959

6060
expect(store.dispatch).toHaveBeenCalledWith(new DeleteProjectType('id'));
6161
});

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export class ProjectTypeListComponent implements OnInit {
1616

1717
initPage2 = 1;
1818
itemsPerPage = ITEMS_PER_PAGE;
19+
showModal = false;
20+
idToDelete: string;
21+
message: string;
1922

2023
constructor(private store: Store<ProjectTypeState>) {}
2124

@@ -26,11 +29,18 @@ export class ProjectTypeListComponent implements OnInit {
2629
});
2730
}
2831

29-
deleteProjectType(projectTypeId: string) {
30-
this.store.dispatch(new DeleteProjectType(projectTypeId));
32+
deleteProjectType() {
33+
this.store.dispatch(new DeleteProjectType(this.idToDelete));
34+
this.showModal = false;
3135
}
3236

3337
updateProjectType(projectTypeId: string) {
3438
this.store.dispatch(new SetProjectTypeToEdit(projectTypeId));
3539
}
40+
41+
openModal(item: ProjectType) {
42+
this.idToDelete = item.id;
43+
this.message = `Are you sure you want to delete ${item.name}?`;
44+
this.showModal = true;
45+
}
3646
}

0 commit comments

Comments
 (0)