added confirmation modal for removing domains

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,

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>

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()
+    }
 }

src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.html

+<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>
+

src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.spec.ts

+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();
+  });
+});

src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.ts

+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)
+    });
+  }
+}

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})
   }