Feature 11011: Multiple NS deletion in OSM
- Added multi option in smart table
- Added new terminate api for multi select deletion
Change-Id: Ia03d24e30c1c0a549ac1eda87264d58ab6d3bccd
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
diff --git a/src/app/instances/ns-instances/NSInstancesComponent.html b/src/app/instances/ns-instances/NSInstancesComponent.html
index 8ee93b8..2f01b87 100644
--- a/src/app/instances/ns-instances/NSInstancesComponent.html
+++ b/src/app/instances/ns-instances/NSInstancesComponent.html
@@ -18,6 +18,10 @@
<div class="d-flex flex-row justify-content-between">
<div class="d-flex align-items-center header-style">{{'NSINSTANCES' | translate}}</div>
<span class="button">
+ <button *ngIf="selectList?.length !== 0" class="btn btn-primary me-2" type="button" placement="top" container="body" ngbTooltip="{{'DELETENS' | translate}}"
+ (click)="deleteNS()">
+ <i class="fa fa-trash-alt" aria-hidden="true"></i> {{'DELETENS' | translate}}
+ </button>
<button class="btn btn-primary me-2" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.NSINSTANCE.NEWNSINSTANCE' | translate}}"
(click)="instantiateNS()">
<i class="fa fa-paper-plane" aria-hidden="true"></i> {{'PAGE.NSINSTANCE.NEWNSINSTANCE' | translate}}
@@ -39,7 +43,7 @@
<page-reload></page-reload>
</div>
<div class="smarttable-style bg-white mt-1">
- <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
+ <ng2-smart-table #table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
(userRowSelect)="onUserRowSelect($event)">
</ng2-smart-table>
</div>
diff --git a/src/app/instances/ns-instances/NSInstancesComponent.ts b/src/app/instances/ns-instances/NSInstancesComponent.ts
index 14d6349..34719f3 100644
--- a/src/app/instances/ns-instances/NSInstancesComponent.ts
+++ b/src/app/instances/ns-instances/NSInstancesComponent.ts
@@ -18,18 +18,20 @@
/**
* @file NS Instance Component
*/
-import { Component, Injector, OnInit } from '@angular/core';
+import { Component, Injector, OnInit, ViewChild } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { TranslateService } from '@ngx-translate/core';
import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
import { DataService } from 'DataService';
+import { DeleteComponent } from 'DeleteComponent';
import { environment } from 'environment';
import { InstantiateNsComponent } from 'InstantiateNs';
-import { LocalDataSource } from 'ng2-smart-table';
+import { LocalDataSource, Ng2SmartTableComponent } from 'ng2-smart-table';
import { NSDInstanceData, NSInstanceDetails } from 'NSInstanceModel';
import { NSInstancesActionComponent } from 'NSInstancesActionComponent';
import { RestService } from 'RestService';
import { Subscription } from 'rxjs';
+import { isNullOrUndefined } from 'SharedService';
import { SharedService } from 'SharedService';
/**
@@ -42,6 +44,8 @@
})
/** Exporting a class @exports NSInstancesComponent */
export class NSInstancesComponent implements OnInit {
+ @ViewChild('table') table: Ng2SmartTableComponent;
+
/** Injector to invoke other services @public */
public injector: Injector;
@@ -52,10 +56,11 @@
public dataSource: LocalDataSource = new LocalDataSource();
/** SelectedRows array @public */
- public selectedRows: object[] = [];
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ public selectedRows: any;
/** Selected list array @public */
- public selectList: object[] = [];
+ public selectList: [] = [];
/** Instance component are stored in settings @public */
public settings: {} = {};
@@ -136,6 +141,7 @@
/** Generate smart table row title and filters @public */
public generateTableSettings(): void {
this.settings = {
+ selectMode: 'multi',
columns: this.columnList,
actions: { add: false, edit: false, delete: false, position: 'right' },
attr: this.sharedService.tableClassConfig(),
@@ -172,25 +178,25 @@
valuePrepareFunction: (cell: NSDInstanceData, row: NSDInstanceData): string => {
if (row.OperationalStatus === this.operationalStateFirstStep) {
return `<span class="icon-label" title="${row.OperationalStatus}">
- <i class="fas fa-clock text-warning"></i>
- </span>`;
+ <i class="fas fa-clock text-warning"></i>
+ </span>`;
} else if (row.OperationalStatus === this.operationalStateSecondStep) {
return `<span class="icon-label" title="${row.OperationalStatus}">
- <i class="fas fa-check-circle text-success"></i>
- </span>`;
+ <i class="fas fa-check-circle text-success"></i>
+ </span>`;
} else if (row.OperationalStatus === this.operationalStateThirdStep) {
return `<span class="icon-label" title="${row.OperationalStatus}">
- <i class="fas fa-times-circle text-danger"></i>
- </span>`;
+ <i class="fas fa-times-circle text-danger"></i>
+ </span>`;
} else if (row.OperationalStatus === this.operationalStateFourthStep) {
return `<span class="icon-label" title="${row.OperationalStatus}">
- <i class="fas fa-compress-alt text-success"></i>
- </span>`;
+ <i class="fas fa-compress-alt text-success"></i>
+ </span>`;
}
else if (row.OperationalStatus === this.operationalStateFifthStep) {
return `<span class="icon-label" title="${row.OperationalStatus}">
- <i class="fas fa-briefcase-medical text-success"></i>
- </span>`;
+ <i class="fas fa-briefcase-medical text-success"></i>
+ </span>`;
} else {
return `<span>${row.OperationalStatus}</span>`;
}
@@ -212,16 +218,16 @@
valuePrepareFunction: (cell: NSDInstanceData, row: NSDInstanceData): string => {
if (row.ConfigStatus === this.configStateFirstStep) {
return `<span class="icon-label" title="${row.ConfigStatus}">
- <i class="fas fa-clock text-warning"></i>
- </span>`;
+ <i class="fas fa-clock text-warning"></i>
+ </span>`;
} else if (row.ConfigStatus === this.configStateSecondStep) {
return `<span class="icon-label" title="${row.ConfigStatus}">
- <i class="fas fa-check-circle text-success"></i>
- </span>`;
+ <i class="fas fa-check-circle text-success"></i>
+ </span>`;
} else if (row.ConfigStatus === this.configStateThirdStep) {
return `<span class="icon-label" title="${row.ConfigStatus}">
- <i class="fas fa-times-circle text-danger"></i>
- </span>`;
+ <i class="fas fa-times-circle text-danger"></i>
+ </span>`;
} else {
return `<span>${row.ConfigStatus}</span>`;
}
@@ -285,14 +291,46 @@
/** smart table listing manipulation @public */
public onUserRowSelect(event: MessageEvent): void {
- Object.assign(event.data, { page: 'ns-instance' });
- this.dataService.changeMessage(event.data);
+ if (!isNullOrUndefined(event)) {
+ this.selectedRows = event;
+ if (this.selectedRows.selected.length !== 0) {
+ this.selectList = this.selectedRows.selected;
+ } else {
+ if (!isNullOrUndefined(event.data)) {
+ Object.assign(event.data, { page: 'ns-instance' });
+ this.dataService.changeMessage(event.data);
+ }
+ this.selectList.length = 0;
+ }
+ }
+ }
+
+ /** delete NS using modalservice @public */
+ public deleteNS(): void {
+ // eslint-disable-next-line security/detect-non-literal-fs-filename
+ const modalRef: NgbModalRef = this.modalService.open(DeleteComponent, { backdrop: 'static' });
+ modalRef.componentInstance.params = {
+ identifierList: this.selectList,
+ page: 'instantiateNS'
+ };
+ modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+ if (result) {
+ this.sharedService.callData();
+ this.table.isAllSelected = false;
+ this.selectList.length = 0;
+ }
+ }).catch((): void => {
+ // Catch Navigation Error
+ });
}
/** Instantiate NS using modalservice @public */
public instantiateNS(): void {
// eslint-disable-next-line security/detect-non-literal-fs-filename
const modalRef: NgbModalRef = this.modalService.open(InstantiateNsComponent, { backdrop: 'static' });
+ modalRef.componentInstance.params = {
+ titleName: 'instantiateNS'
+ };
modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
if (result) {
this.generateData();