From 821ea54b88330b77ea8a3a89487d64342ef5d3aa Mon Sep 17 00:00:00 2001
From: pgiertych <pgiertych@man.poznan.pl>
Date: Tue, 6 Jun 2023 11:09:53 +0200
Subject: [PATCH] added confirmation modal for removing domains
---
src/app/appmarket/domains/domains.module.ts | 2 +
.../domains/list/domainslist.component.html | 4 +-
.../domains/list/domainslist.component.ts | 20 ++++++++--
.../removal-confirmation-modal.component.css | 0
.../removal-confirmation-modal.component.html | 12 ++++++
...moval-confirmation-modal.component.spec.ts | 25 ++++++++++++
.../removal-confirmation-modal.component.ts | 39 +++++++++++++++++++
src/app/service/domain.service.ts | 6 +--
8 files changed, 101 insertions(+), 7 deletions(-)
create mode 100644 src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.css
create mode 100644 src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.html
create mode 100644 src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.spec.ts
create mode 100644 src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.ts
diff --git a/src/app/appmarket/domains/domains.module.ts b/src/app/appmarket/domains/domains.module.ts
index af01e1f5..7d7dbf47 100644
--- a/src/app/appmarket/domains/domains.module.ts
+++ b/src/app/appmarket/domains/domains.module.ts
@@ -17,6 +17,7 @@ import { DomainGroupsComponent } from './domain-groups/domain-groups.component';
import { DomainGroupViewComponent } from './domain-group-view/domain-group-view.component';
import {DropdownModule} from 'primeng/dropdown';
import {MultiSelectModule} from 'primeng/multiselect';
+import { RemovalConfirmationModalComponent } from './modals/removal-confirmation-modal/removal-confirmation-modal.component';
@@ -26,6 +27,7 @@ import {MultiSelectModule} from 'primeng/multiselect';
DomainComponent,
DomainGroupsComponent,
DomainGroupViewComponent,
+ RemovalConfirmationModalComponent,
],
imports: [
CommonModule,
diff --git a/src/app/appmarket/domains/list/domainslist.component.html b/src/app/appmarket/domains/list/domainslist.component.html
index d68a5374..3993ed51 100644
--- a/src/app/appmarket/domains/list/domainslist.component.html
+++ b/src/app/appmarket/domains/list/domainslist.component.html
@@ -34,7 +34,7 @@
<li><a *roles="['ROLE_SYSTEM_ADMIN']" (click)="$event.stopPropagation(); changeState(domain)"
class="">{{ getStateLabel(domain?.active) }}</a>
</li>
- <li><a *roles="['ROLE_SYSTEM_ADMIN']" (click)="$event.stopPropagation(); softDeleteDomain(domain.id)"
+ <li><a *roles="['ROLE_SYSTEM_ADMIN']" (click)="$event.stopPropagation(); openRemovalModal(domain)"
class="">{{ 'DOMAINS.DELETE_BUTTON' | translate }}</a>
</li>
</ul>
@@ -45,3 +45,5 @@
</tbody>
</table>
</div>
+
+<app-removal-confirmation-modal [domain]="domainToRemove" (onConfirm)="update()"></app-removal-confirmation-modal>
diff --git a/src/app/appmarket/domains/list/domainslist.component.ts b/src/app/appmarket/domains/list/domainslist.component.ts
index ab855567..ae21395b 100644
--- a/src/app/appmarket/domains/list/domainslist.component.ts
+++ b/src/app/appmarket/domains/list/domainslist.component.ts
@@ -2,10 +2,14 @@ import {AuthService} from '../../../auth/auth.service';
import {Domain} from '../../../model/domain';
import {Role} from '../../../model/userrole';
import {DomainService} from '../../../service/domain.service';
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {TranslateService} from '@ngx-translate/core';
+import {ModalComponent} from "../../../shared";
+import {
+ RemovalConfirmationModalComponent
+} from "../modals/removal-confirmation-modal/removal-confirmation-modal.component";
@Component({
selector: 'app-domains-list',
@@ -16,6 +20,11 @@ export class DomainsListComponent implements OnInit {
public domains: Observable<Domain[]>;
+ @ViewChild(RemovalConfirmationModalComponent)
+ public readonly modal: ModalComponent;
+
+ public domainToRemove: Domain
+
constructor(protected domainService: DomainService, protected authService: AuthService, public translate: TranslateService) {
}
@@ -33,7 +42,7 @@ export class DomainsListComponent implements OnInit {
}
}
- protected update(): void {
+ public update(): void {
this.domains = this.getDomainsObservable().pipe(
map((domains) => [...domains].sort(
(a, b) => {
@@ -59,10 +68,15 @@ export class DomainsListComponent implements OnInit {
return active ? this.translate.instant('DOMAINS.DISABLE_BUTTON') : this.translate.instant('DOMAINS.ENABLE_BUTTON');
}
- public softDeleteDomain(id: number): void {
+ public softRemoveDomain(id: number): void {
this.domainService.remove(id, true).subscribe({
next: () => this.update(),
error: err => console.error(err)
});
}
+
+ openRemovalModal(domain: Domain) {
+ this.domainToRemove = domain
+ this.modal.show()
+ }
}
diff --git a/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.css b/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.html b/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.html
new file mode 100644
index 00000000..57bb6c83
--- /dev/null
+++ b/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.html
@@ -0,0 +1,12 @@
+<nmaas-modal styleModal="warning">
+<!-- <div class="nmaas-modal-header">{{'APP_ACCESS_METHODS_MODAL.HEADER' | translate}}</div>-->
+ <div class="nmaas-modal-header">{{ 'DOMAIN_DETAILS.MODAL.HEADER' | translate }}</div>
+ <div class="nmaas-modal-body">
+ <p>{{ 'DOMAIN_DETAILS.MODAL.DESCRIPTION' | translate}}</p>
+ </div>
+ <div class="nmaas-modal-footer">
+ <button role="button" type="button" class="btn btn-success" (click)="removeDomain()">{{ 'DOMAIN_DETAILS.MODAL.BUTTONS.CONFIRM' | translate}}</button>
+ <button type="button" class="btn btn-primary" (click)="modal.hide()">{{ 'DOMAIN_DETAILS.MODAL.BUTTONS.CANCEL' | translate}}</button>
+ </div>
+</nmaas-modal>
+
diff --git a/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.spec.ts b/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.spec.ts
new file mode 100644
index 00000000..572ebc13
--- /dev/null
+++ b/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RemovalConfirmationModalComponent } from './removal-confirmation-modal.component';
+
+describe('RemovalConfirmationModalComponent', () => {
+ let component: RemovalConfirmationModalComponent;
+ let fixture: ComponentFixture<RemovalConfirmationModalComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ RemovalConfirmationModalComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RemovalConfirmationModalComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.ts b/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.ts
new file mode 100644
index 00000000..e925c3e4
--- /dev/null
+++ b/src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.ts
@@ -0,0 +1,39 @@
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {ModalComponent} from "../../../../shared";
+import {Domain} from "../../../../model/domain";
+import {DomainService} from "../../../../service";
+
+@Component({
+ selector: 'app-removal-confirmation-modal',
+ templateUrl: './removal-confirmation-modal.component.html',
+ styleUrls: ['./removal-confirmation-modal.component.css']
+})
+export class RemovalConfirmationModalComponent {
+
+ @ViewChild(ModalComponent, { static: true })
+ public readonly modal: ModalComponent;
+
+ @Input()
+ public domain: Domain;
+
+ @Output()
+ public onConfirm: EventEmitter<void> = new EventEmitter<void>();
+
+ constructor(private readonly domainService: DomainService) { }
+
+ public show() {
+ this.modal.show();
+ }
+
+ public hide() {
+ this.modal.hide();
+ this.onConfirm.emit()
+ }
+
+ removeDomain() {
+ this.domainService.remove(this.domain.id, true).subscribe({
+ next: () => this.hide(),
+ error: err => console.error(err)
+ });
+ }
+}
diff --git a/src/app/service/domain.service.ts b/src/app/service/domain.service.ts
index 820e7119..3337b190 100644
--- a/src/app/service/domain.service.ts
+++ b/src/app/service/domain.service.ts
@@ -61,10 +61,10 @@ export class DomainService extends GenericDataService {
return this.patch<Domain, Id>(this.url + domain.id + '/state?active=' + !domain.active, null);
}
- public remove(domainId: number, softDelete?: boolean): Observable<any> {
+ public remove(domainId: number, softRemove?: boolean): Observable<any> {
let params = new HttpParams()
- if (softDelete !== undefined) {
- params = params.append("softDelete", softDelete.toString())
+ if (softRemove !== undefined) {
+ params = params.append("softRemove", softRemove.toString())
}
return this.http.delete(this.url + domainId, {params})
}
--
GitLab