Skip to content

Commit aecfabb

Browse files
alanorthalanorth
authored
Merge pull request #4389 from jlipka/fix/4346-delete-group-confirm-dialog
Confirmation dialog before deleting Group
2 parents db81d5e + 2051059 commit aecfabb

36 files changed

Lines changed: 1021 additions & 46 deletions

‎src/app/access-control/group-registry/groups-registry.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ <h2 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | tra
8585
}
8686
@if (!groupDto.group?.permanent && groupDto.ableToDelete) {
8787
<button
88-
(click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
88+
(click)="confirmDelete(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
8989
title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: dsoNameService.getName(groupDto.group) } }}">
9090
<i class="fas fa-trash-alt fa-fw"></i>
9191
</button>

‎src/app/access-control/group-registry/groups-registry.component.spec.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -381,6 +381,8 @@ describe('GroupsRegistryComponent', () => {
381381
deleteButton.click();
382382
fixture.detectChanges();
383383

384+
(document as any).querySelector('.modal-footer .confirm').click();
385+
384386
expect(groupsDataServiceStub.delete).toHaveBeenCalledWith(mockGroups[0].id);
385387
});
386388
});

‎src/app/access-control/group-registry/groups-registry.component.ts‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import {
99
UntypedFormBuilder,
1010
} from '@angular/forms';
1111
import { RouterLink } from '@angular/router';
12-
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
12+
import {
13+
NgbModal,
14+
NgbTooltipModule,
15+
} from '@ng-bootstrap/ng-bootstrap';
1316
import {
1417
TranslateModule,
1518
TranslateService,
@@ -27,6 +30,7 @@ import {
2730
defaultIfEmpty,
2831
map,
2932
switchMap,
33+
takeUntil,
3034
tap,
3135
} from 'rxjs/operators';
3236

@@ -57,6 +61,7 @@ import {
5761
} from '../../core/shared/operators';
5862
import { PageInfo } from '../../core/shared/page-info.model';
5963
import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
64+
import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component';
6065
import { hasValue } from '../../shared/empty.util';
6166
import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
6267
import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -142,6 +147,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
142147
private paginationService: PaginationService,
143148
public requestService: RequestService,
144149
public dsoNameService: DSONameService,
150+
private modalService: NgbModal,
145151
) {
146152
this.currentSearchQuery = '';
147153
this.searchForm = this.formBuilder.group(({
@@ -314,4 +320,30 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
314320
this.paginationService.clearPagination(this.config.id);
315321
}
316322

323+
confirmDelete(group: GroupDtoModel): void {
324+
const modalRef = this.modalService.open(ConfirmationModalComponent);
325+
modalRef.componentInstance.name = this.dsoNameService.getName(group.group);
326+
modalRef.componentInstance.headerLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.header';
327+
modalRef.componentInstance.infoLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.info';
328+
modalRef.componentInstance.cancelLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.cancel';
329+
modalRef.componentInstance.confirmLabel = 'admin.access-control.epeople.table.edit.buttons.remove.modal.confirm';
330+
modalRef.componentInstance.brandColor = 'danger';
331+
modalRef.componentInstance.confirmIcon = 'fas fa-trash';
332+
333+
const modalSub: Subscription = modalRef.componentInstance.response.pipe(
334+
takeUntil(modalRef.closed),
335+
).subscribe((result: boolean) => {
336+
if (result === true) {
337+
this.deleteGroup(group);
338+
}
339+
});
340+
341+
void modalRef.result.then().finally(() => {
342+
modalRef.close();
343+
if (modalSub && !modalSub.closed) {
344+
modalSub.unsubscribe();
345+
}
346+
});
347+
}
348+
317349
}

‎src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h2 class="h4 w-100">
5151
@if (hasCustomGroup$ | async) {
5252
<button
5353
class="btn btn-danger delete"
54-
(click)="delete()">
54+
(click)="confirmDelete(dsoNameService.getName(group))">
5555
<i class="fas fa-trash" aria-hidden="true"></i> {{'comcol-role.edit.delete' | translate}}
5656
</button>
5757
}

‎src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.spec.ts‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
import { By } from '@angular/platform-browser';
1111
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
1212
import { RouterTestingModule } from '@angular/router/testing';
13+
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
1314
import { TranslateModule } from '@ngx-translate/core';
1415
import { of } from 'rxjs';
1516

@@ -36,17 +37,22 @@ describe('ComcolRoleComponent', () => {
3637
let comcolRole;
3738
let notificationsService;
3839

39-
const requestService = { hasByHref$: () => of(true) };
40+
const requestService = {
41+
hasByHref$: () => of(true),
42+
setStaleByHrefSubstring: () => of(true),
43+
};
4044

4145
const groupService = {
4246
findByHref: jasmine.createSpy('findByHref'),
4347
createComcolGroup: jasmine.createSpy('createComcolGroup').and.returnValue(of({})),
4448
deleteComcolGroup: jasmine.createSpy('deleteComcolGroup').and.returnValue(of({})),
49+
clearGroupsRequests: jasmine.createSpy('clearGroupsRequests'),
4550
};
4651

4752
beforeEach(waitForAsync(() => {
4853
TestBed.configureTestingModule({
4954
imports: [
55+
NgbModule,
5056
RouterTestingModule.withRoutes([]),
5157
TranslateModule.forRoot(),
5258
NoopAnimationsModule,
@@ -178,13 +184,17 @@ describe('ComcolRoleComponent', () => {
178184
fixture.detectChanges();
179185
});
180186

187+
afterEach(() => {
188+
const modal = document.querySelector('ds-confirmation-modal');
189+
if (modal) {
190+
modal.remove();
191+
}
192+
});
193+
181194
it('should have a delete button but no create or restrict button', (done) => {
182-
expect(de.query(By.css('.btn.create')))
183-
.toBeNull();
184-
expect(de.query(By.css('.btn.restrict')))
185-
.toBeNull();
186-
expect(de.query(By.css('.btn.delete')))
187-
.toBeTruthy();
195+
expect(de.query(By.css('.btn.create'))).toBeNull();
196+
expect(de.query(By.css('.btn.restrict'))).toBeNull();
197+
expect(de.query(By.css('.btn.delete'))).toBeTruthy();
188198
done();
189199
});
190200

@@ -195,6 +205,7 @@ describe('ComcolRoleComponent', () => {
195205
});
196206

197207
it('should call the groupService delete method', (done) => {
208+
(document as any).querySelector('.modal-footer .confirm').click();
198209
expect(groupService.deleteComcolGroup).toHaveBeenCalled();
199210
done();
200211
});
@@ -207,9 +218,11 @@ describe('ComcolRoleComponent', () => {
207218
});
208219

209220
it('should show an error notification', (done) => {
221+
(document as any).querySelector('.modal-footer .confirm').click();
210222
expect(notificationsService.error).toHaveBeenCalled();
211223
done();
212224
});
213225
});
226+
214227
});
215228
});

‎src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,21 @@ import {
55
OnInit,
66
} from '@angular/core';
77
import { RouterLink } from '@angular/router';
8+
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
89
import {
910
TranslateModule,
1011
TranslateService,
1112
} from '@ngx-translate/core';
1213
import {
1314
BehaviorSubject,
1415
Observable,
16+
Subscription,
1517
} from 'rxjs';
1618
import {
1719
filter,
1820
map,
1921
switchMap,
22+
takeUntil,
2023
} from 'rxjs/operators';
2124

2225
import { getGroupEditRoute } from '../../../../../access-control/access-control-routing-paths';
@@ -34,6 +37,7 @@ import {
3437
getFirstCompletedRemoteData,
3538
} from '../../../../../core/shared/operators';
3639
import { AlertComponent } from '../../../../alert/alert.component';
40+
import { ConfirmationModalComponent } from '../../../../confirmation-modal/confirmation-modal.component';
3741
import {
3842
hasNoValue,
3943
hasValue,
@@ -115,6 +119,7 @@ export class ComcolRoleComponent implements OnInit {
115119
protected notificationsService: NotificationsService,
116120
protected translateService: TranslateService,
117121
public dsoNameService: DSONameService,
122+
private modalService: NgbModal,
118123
) {
119124
}
120125

@@ -215,4 +220,31 @@ export class ComcolRoleComponent implements OnInit {
215220

216221
this.roleName$ = this.translateService.get(`comcol-role.edit.${this.comcolRole.name}.name`);
217222
}
223+
224+
confirmDelete(groupName: string): void {
225+
const modalRef = this.modalService.open(ConfirmationModalComponent);
226+
227+
modalRef.componentInstance.name = groupName;
228+
modalRef.componentInstance.headerLabel = 'comcol-role.edit.delete.modal.header';
229+
modalRef.componentInstance.infoLabel = 'comcol-role.edit.delete.modal.info';
230+
modalRef.componentInstance.cancelLabel = 'comcol-role.edit.delete.modal.cancel';
231+
modalRef.componentInstance.confirmLabel = 'comcol-role.edit.delete.modal.confirm';
232+
modalRef.componentInstance.brandColor = 'danger';
233+
modalRef.componentInstance.confirmIcon = 'fas fa-trash';
234+
235+
const modalSub: Subscription = modalRef.componentInstance.response.pipe(
236+
takeUntil(modalRef.closed),
237+
).subscribe((result: boolean) => {
238+
if (result === true) {
239+
this.delete();
240+
}
241+
});
242+
243+
void modalRef.result.then().finally(() => {
244+
modalRef.close();
245+
if (modalSub && !modalSub.closed) {
246+
modalSub.unsubscribe();
247+
}
248+
});
249+
}
218250
}

‎src/app/shared/confirmation-modal/confirmation-modal.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:host {
2+
.modal {
3+
&-body, &-header {
4+
word-break: break-word;
5+
}
6+
}
7+
}

‎src/app/shared/confirmation-modal/confirmation-modal.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { TranslateModule } from '@ngx-translate/core';
1111
@Component({
1212
selector: 'ds-confirmation-modal',
1313
templateUrl: 'confirmation-modal.component.html',
14+
styleUrls: ['confirmation-modal.component.scss'],
1415
standalone: true,
1516
imports: [
1617
TranslateModule,

‎src/assets/i18n/ar.json5‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -459,6 +459,22 @@
459459
// "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
460460
"admin.access-control.epeople.table.edit.buttons.remove": "حذف \"{{name}}\"",
461461

462+
// "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
463+
// TODO New key - Add a translation
464+
"admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
465+
466+
// "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
467+
// TODO New key - Add a translation
468+
"admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
469+
470+
// "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
471+
// TODO New key - Add a translation
472+
"admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
473+
474+
// "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
475+
// TODO New key - Add a translation
476+
"admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
477+
462478
// "admin.access-control.epeople.no-items": "No EPeople to show.",
463479
"admin.access-control.epeople.no-items": "لا يوجد أشخاص إلكترونيين للعرض.",
464480

@@ -651,7 +667,8 @@
651667
// "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
652668
"admin.access-control.groups.form.delete-group.modal.header": "حذف المجموعة \"{{ dsoName }}\"",
653669

654-
// "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
670+
// "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
671+
// TODO Source message changed - Revise the translation
655672
"admin.access-control.groups.form.delete-group.modal.info": "هل أنت متأكد من أنك ترغب في حذف المجموعة \"{{ dsoName }}\"",
656673

657674
// "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
@@ -2407,6 +2424,22 @@
24072424
// "comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
24082425
"comcol-role.edit.delete.error.title": "فشل حذف مجموعة الدور '{{ role }}'",
24092426

2427+
// "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
2428+
// TODO New key - Add a translation
2429+
"comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
2430+
2431+
// "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
2432+
// TODO New key - Add a translation
2433+
"comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
2434+
2435+
// "comcol-role.edit.delete.modal.cancel": "Cancel",
2436+
// TODO New key - Add a translation
2437+
"comcol-role.edit.delete.modal.cancel": "Cancel",
2438+
2439+
// "comcol-role.edit.delete.modal.confirm": "Delete",
2440+
// TODO New key - Add a translation
2441+
"comcol-role.edit.delete.modal.confirm": "Delete",
2442+
24102443
// "comcol-role.edit.community-admin.name": "Administrators",
24112444
"comcol-role.edit.community-admin.name": "المسؤولون",
24122445

‎src/assets/i18n/bn.json5‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -500,6 +500,22 @@
500500
// "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
501501
"admin.access-control.epeople.table.edit.buttons.remove": "\"{{ name }}\" মুছে ফেলুন",
502502

503+
// "admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
504+
// TODO New key - Add a translation
505+
"admin.access-control.epeople.table.edit.buttons.remove.modal.header": "Delete Group \"{{ dsoName }}\"",
506+
507+
// "admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
508+
// TODO New key - Add a translation
509+
"admin.access-control.epeople.table.edit.buttons.remove.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
510+
511+
// "admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
512+
// TODO New key - Add a translation
513+
"admin.access-control.epeople.table.edit.buttons.remove.modal.cancel": "Cancel",
514+
515+
// "admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
516+
// TODO New key - Add a translation
517+
"admin.access-control.epeople.table.edit.buttons.remove.modal.confirm": "Delete",
518+
503519
// "admin.access-control.epeople.no-items": "No EPeople to show.",
504520
"admin.access-control.epeople.no-items": "কোন ই-পারসিওন প্রদর্শন করার জন্যে নেই।",
505521

@@ -695,7 +711,8 @@
695711
// "admin.access-control.groups.form.delete-group.modal.header": "Delete Group \"{{ dsoName }}\"",
696712
"admin.access-control.groups.form.delete-group.modal.header": "গ্রুপ মুছে ফেলুন \"{{ dsoName }}\"",
697713

698-
// "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\"",
714+
// "admin.access-control.groups.form.delete-group.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
715+
// TODO Source message changed - Revise the translation
699716
"admin.access-control.groups.form.delete-group.modal.info": "আপনি কি গ্রুপ \"{{ dsoName }}\" মুছে ফেলতে চান তা নিশ্চিত করুন।",
700717

701718
// "admin.access-control.groups.form.delete-group.modal.cancel": "Cancel",
@@ -2558,6 +2575,22 @@
25582575
// TODO New key - Add a translation
25592576
"comcol-role.edit.delete.error.title": "Failed to delete the '{{ role }}' role's group",
25602577

2578+
// "comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
2579+
// TODO New key - Add a translation
2580+
"comcol-role.edit.delete.modal.header": "Delete Group \"{{ dsoName }}\"",
2581+
2582+
// "comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
2583+
// TODO New key - Add a translation
2584+
"comcol-role.edit.delete.modal.info": "Are you sure you want to delete Group \"{{ dsoName }}\" and all its associated policies?",
2585+
2586+
// "comcol-role.edit.delete.modal.cancel": "Cancel",
2587+
// TODO New key - Add a translation
2588+
"comcol-role.edit.delete.modal.cancel": "Cancel",
2589+
2590+
// "comcol-role.edit.delete.modal.confirm": "Delete",
2591+
// TODO New key - Add a translation
2592+
"comcol-role.edit.delete.modal.confirm": "Delete",
2593+
25612594
// "comcol-role.edit.community-admin.name": "Administrators",
25622595
"comcol-role.edit.community-admin.name": "প্রশাসক",
25632596

0 commit comments

Comments
 (0)