diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/searchMembersModal')
15 files changed, 813 insertions, 501 deletions
diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/element-table-row.model.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/element-table-row.model.ts new file mode 100644 index 000000000..250e2c1fa --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/element-table-row.model.ts @@ -0,0 +1,88 @@ +import {VnfMember} from "../../../models/VnfMember"; +import {Observable} from "rxjs"; +import {CustomTableColumnDefinition} from "./elements-table.component"; + +export class ElementTableRowModel extends VnfMember { + isSelected: boolean = false; +} + + +/******************************************************************************************************************************* + ModalInformation + * @type: popup type (VPN, NETWORK, VNFGROUP) + * @title: popup title + * @description: popup upper message + * @topButtonText: (optional) + * @text: button text + * @action: button action + * @backAction : arrow back button action (can close the modal/move to next step) + * @uniqObjectField: uniq object field that we can find in O(1) + * @maxSelectRow: max number of row that user can select (default = no limit)(optional) + * @getElements: function that should return Observable<any[]> of collection of elements to show in the table + * @noElementsMsg : when there are no element some message should shown + * @searchFields : extra information in the left section + * @criteria: extra criteria on table content (optional) + * @tableHeaders : table headers + * @tableContent: table td's information. + + ******************************************************************************************************************************/ + +export class ModalInformation { + type : string; + currentCriteriaInfo? : Object; + title ?: string; + description ?: string; + topButton?: { + text ?: string, + action ?: (...args) => any + }; + searchButton?: { + text ?: string, + action ?: (...args)=> any + }; + backAction? : (...args) => any; + uniqObjectField : string; + maxSelectRow ?: number; + getElements : (...args) => Observable<any[]>; + noElementsMsg : string; + searchFields: ISearchField[]; + criteria ?: ICriteria[]; + tableHeaders : CustomTableColumnDefinition[]; + tableContent : ITableContent[]; + serviceModelId: string; +} + + +export interface ISearchField { + title: string; + value: any; + dataTestId: string; + type : string; +} + + +export interface ICriteria { + label: string; + defaultValue: any; + onInit?: (...args) => Observable<string>; + onChange? : (...arg) => void; + type : string; + dataTestId : string; + isRequired ?: boolean; + currentValue ?: any; +} + + +export interface ITableContent { + id : string; + contents : {id : string[], value : string[], prefix ?: string, type? : string}[]; +} + +export enum SearchFieldItemType { + LABEL = 'LABEL', + DROPDOWN = 'DROPDOWN' +} + + + + diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.component.html b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.component.html new file mode 100644 index 000000000..036a1240f --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.component.html @@ -0,0 +1,71 @@ +<div class="table-header"> + <div class="left-header"> + <span class="title-header">{{modalInformation.description}}</span> + <div class="sub-title-header"> + <span class="vnf-match-your-criteria" class="total" [attr.data-tests-id]="'total-amount'" style="margin-right: 5px;"><span + [attr.data-tests-id]="'numberOfNotHideRows'">{{membersTableService.numberOfNotHideRows}}</span> {{modalInformation.type}}s match your criteria |</span> + <span class="vnf-selected" class="total" [attr.data-tests-id]="'total-selected'"><span + [attr.data-tests-id]="'numberOfSelectedRows'">{{membersTableService.numberOfSelectedRows}}</span> {{modalInformation.type}}{{membersTableService.numberOfSelectedRows>1?'s':'' }} selected</span> + </div> + </div> + + <div class="search-container"> + <sdc-filter-bar + [placeHolder]="'Filter'" + [debounceTime]="250" + [testId]="'vnf-members-search'" + (valueChange)="search($event)"> + </sdc-filter-bar> + </div> +</div> +<table id="member-table" class="table table-bordered" style="table-layout: fixed" *ngIf="data?.length > 0"> + <thead class="thead-dark"> + <tr> + <th class="allCheckboxAreSelected" style="position: relative;"> + <sdc-checkbox + [disabled]="membersTableService.isCheckAllDisabled(modalInformation.maxSelectRow)" + [(checked)]="membersTableService.allCheckboxAreSelected" + [testId]="'all-checkbox-selected'" + (checkedChange)="changeAllCheckboxStatus($event)" + ></sdc-checkbox> + </th> + <th class="header-title" *ngFor="let header of headers">{{header.displayName}}</th> + </tr> + </thead> + <tbody> + <tr class="member-table-row" *ngFor="let item of membersTableService.filteredMembers"> + <td class="sdcCheckboxMember" style="position: relative;" [attr.data-tests-id]="item[membersTableService.staticUniqObjectField]"> + <sdc-checkbox + [disabled]="membersTableService.isRowDisabled( membersTableService.allElementsStatusMap[item[membersTableService.staticUniqObjectField]]?.isSelected, modalInformation.maxSelectRow)" + [checked]="membersTableService.allElementsStatusMap[item[membersTableService.staticUniqObjectField]]?.isSelected" + [testId]="item[membersTableService.staticUniqObjectField]" + (checkedChange)="changeCheckboxStatus(item[membersTableService.staticUniqObjectField])" + ></sdc-checkbox></td> + + <td *ngFor="let tdInformation of modalInformation.tableContent" [id]="tdInformation.id"> + <div *ngIf="tdInformation.contents[0].type === 'LIST'; else noList"> + <custom-ellipsis + *ngFor="let tdInformationItem of getTdListInformationItemValue(tdInformation.contents[0], item) " + [id]="tdInformationItem" + [value]="tdInformationItem" + [breakWord]="true" + [hightlight]="filterValue"></custom-ellipsis> + </div> + <ng-template #noList> + <custom-ellipsis + *ngFor="let tdInformationItem of tdInformation.contents; index as i" + [id]="getTdInformationItemId(tdInformationItem, item)" + [value]="getTdInformationItemValue(tdInformationItem, item)" + [ngClass]="{'second-line' : i%2 === 1}" + [breakWord]="true" + [hightlight]="filterValue"></custom-ellipsis> + </ng-template> + + </td> + </tr> + + </tbody> +</table> +<div class="no-result" *ngIf="data?.length == 0">{{modalInformation?.noElementsMsg}}</div> + + diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.component.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.component.ts new file mode 100644 index 000000000..485a63c43 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.component.ts @@ -0,0 +1,144 @@ +import {Component, Input, OnChanges, Output, SimpleChanges, EventEmitter} from '@angular/core'; +import {ElementsTableService} from "./elements-table.service"; +import {ModalInformation} from "./element-table-row.model"; +import * as _ from 'lodash'; +import {Level1Instance} from "../../../models/level1Instance"; +import {NgRedux} from "@angular-redux/store"; +import {AppState} from "../../../store/reducers"; +import { + deleteGenericModalhelper, + deleteGenericModalTableDataHelper +} from "../../../storeUtil/utils/global/global.actions"; + +export class CustomTableColumnDefinition { + public displayName = ''; + public key : any = ''; + public type? = 'text'; + public filter? = ''; +} + +@Component({ + selector: 'app-members-table', + templateUrl: './elements-table.component.html', + styleUrls: ['./members-table.component.scss'] +}) + +export class ElementsTableComponent implements OnChanges{ + filterValue: string = null; + allMemberStatusMap = null; + membersTableService : ElementsTableService; + headers: CustomTableColumnDefinition[] = []; + searchQuery = null; + + @Input() modalInformation : ModalInformation; + @Input() data: Level1Instance[]; + @Output() selectedMembersAmountChange : EventEmitter<number> = new EventEmitter(); + constructor(private _membersTableService : ElementsTableService, private _store : NgRedux<AppState>){ + this.membersTableService = this._membersTableService; + } + + ngOnChanges(changes: SimpleChanges): void { + if(_.isNil(this.data)){ + this._membersTableService.resetAll(this.modalInformation.uniqObjectField, this.modalInformation.maxSelectRow); + }else { + ElementsTableService.uniqObjectField = this.modalInformation.uniqObjectField; + this.headers = this.modalInformation.tableHeaders; + const genericModalHelper = this._store.getState().global.genericModalHelper; + if(!_.isNil(genericModalHelper) && !_.isNil(genericModalHelper[`${this.modalInformation.type}_TABLE_DATA`]) && !_.isNil(genericModalHelper[`selected${this.modalInformation.type}`])){ + this.updateTablWithDefaultData(this._store.getState().global.genericModalHelper[`${this.modalInformation.type}_TABLE_DATA`]); + }else { + this.modalInformation.getElements().subscribe((res)=>{ + this.updateTablWithDefaultData(res); + }); + } + } + } + + updateTablWithDefaultData(tableData) : void{ + this._membersTableService.allElementsStatusMap = this._membersTableService.generateAllMembersStatus(tableData); + this._membersTableService.filteredMembers = this._membersTableService.sortElementsByName(tableData, "instanceName"); + this._membersTableService.updateAmountsAndCheckAll(this.modalInformation.uniqObjectField, this.modalInformation, this.modalInformation.maxSelectRow); + this.updateDefaultSelectedRows(); + } + + search(searchStr: string): void { + this.filterValue = searchStr; + this._membersTableService.filterMembers(this.filterValue, this.modalInformation.type); + } + + selectItem(item , maxNumberOfRows : number) : void { + if (maxNumberOfRows === 1) { + for (let currentItem in this.membersTableService.allElementsStatusMap) { + if (this.membersTableService.allElementsStatusMap[currentItem].isSelected) { + this.membersTableService.allElementsStatusMap[currentItem].isSelected = false; + this.membersTableService.allElementsStatusMap[item[this.membersTableService.staticUniqObjectField]].isSelected = !this.membersTableService.allElementsStatusMap[item[this.membersTableService.staticUniqObjectField]].isSelected; + return; + } + } + this.membersTableService.allElementsStatusMap[item[this.membersTableService.staticUniqObjectField]].isSelected = !this.membersTableService.allElementsStatusMap[item[this.membersTableService.staticUniqObjectField]].isSelected; + } + } + + updateDefaultSelectedRows(): void { + if(this._store.getState().global.genericModalHelper && this._store.getState().global.genericModalHelper[`selected${this.modalInformation.type}`]){ + const selectedIds = this._store.getState().global.genericModalHelper[`selected${this.modalInformation.type}`]; + for(const id in selectedIds){ + if(!_.isNil(this._membersTableService.allElementsStatusMap[id])){ + this._membersTableService.allElementsStatusMap[id].isSelected = true; + } + } + this._membersTableService.updateAmountsAndCheckAll(this.modalInformation.uniqObjectField, this.modalInformation, this.modalInformation.maxSelectRow); + this.selectedMembersAmountChange.emit(this._membersTableService.numberOfSelectedRows); + } + } + + changeAllCheckboxStatus(status: boolean) : void { + this._membersTableService.changeAllCheckboxStatus(status); + this.selectedMembersAmountChange.emit(this._membersTableService.numberOfSelectedRows); + } + + + changeCheckboxStatus(vnfInstanceId: string) : void { + if (this.modalInformation.maxSelectRow === 1) { + for (let currentItem in this.membersTableService.allElementsStatusMap) { + if (this.membersTableService.allElementsStatusMap[currentItem].isSelected) { + this.membersTableService.allElementsStatusMap[currentItem].isSelected = false; + this._store.dispatch(deleteGenericModalhelper(`selected${this.modalInformation.type}`, this.membersTableService.allElementsStatusMap[currentItem][this.modalInformation.uniqObjectField])); + this._store.dispatch(deleteGenericModalTableDataHelper(`${this.modalInformation.type}_TABLE_DATA`)); + } + } + } + this._membersTableService.changeCheckboxStatus(vnfInstanceId, this.data); + this.selectedMembersAmountChange.emit(this._membersTableService.numberOfSelectedRows); + } + + + getTdInformationItemId(data : {id : string[], value : string[], prefix ?: string}, item) : string { + let result = item; + for(const idVal of data.id){ + if(_.isNil(result)) return null; + result = result[idVal]; + } + return result; + } + + getTdInformationItemValue(data : {id : string[], value : string[], prefix ?: string}, item) : string { + let result = item; + for(const idVal of data.value){ + if(_.isNil(result)) return null; + result = result[idVal]; + } + return !_.isNil(data.prefix) ? data.prefix + result : result; + } + + + getTdListInformationItemValue(data : {id : string[], value : string[], prefix ?: string}, item) : string[] { + let result = item; + + for(let i = 0 ; i < data.value.length -1 ; i++){ + if(_.isNil(result)) return null; + result = result[data.value[i]]; + } + return _.map(result, _.last(data.value)); + } +} diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.service.spec.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.service.spec.ts index e53c63be1..db56836bd 100644 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.service.spec.ts @@ -1,11 +1,9 @@ -import {MembersTableService} from "./members-table.service"; +import {ElementsTableService} from "./elements-table.service"; import {TestBed, getTestBed} from "@angular/core/testing"; import {NgRedux} from "@angular-redux/store"; -import {CustomTableColumnDefinition} from "./members-table.component"; +import {CustomTableColumnDefinition} from "./elements-table.component"; import {AppState} from "../../../store/reducers"; -import {createRelatedVnfMemberInstance} from "../../../storeUtil/utils/relatedVnfMember/relatedVnfMember.actions"; import {DataFilterPipe} from "../../../pipes/dataFilter/data-filter.pipe"; -import {VnfMember} from "../../../models/VnfMember"; @@ -27,7 +25,7 @@ class MockAppStore<T> { "instanceName": "VNF1_INSTANCE_NAME", "instanceId": "VNF1_INSTANCE_ID", "orchStatus": null, - "lcpCloudRegionId": "mtn23b", + "lcpCloudRegionId": "hvf23b", "tenantId": "3e9a20a3e89e45f884e09df0cc2d2d2a", "tenantName": "APPC-24595-T-IST-02C", "modelInfo": { @@ -62,9 +60,9 @@ class MockAppStore<T> { } } -describe('MembersTableService view member count', () => { +describe('ElementsTableService view member count', () => { let injector; - let service: MembersTableService; + let service: ElementsTableService; let store: NgRedux<AppState>; let data = loadMockMembers(); @@ -73,7 +71,7 @@ describe('MembersTableService view member count', () => { TestBed.configureTestingModule( { providers: [ - MembersTableService, + ElementsTableService, {provide: NgRedux, useClass: MockAppStore}, DataFilterPipe @@ -83,94 +81,80 @@ describe('MembersTableService view member count', () => { await TestBed.compileComponents(); injector = getTestBed(); - service = injector.get(MembersTableService); + service = injector.get(ElementsTableService); store = injector.get(NgRedux) })().then(done).catch(done.fail)); test('should return number of displayed members', () => { - service.allMemberStatusMap = MembersTableService.generateAllMembersStatus(<any>data); + service.modalInformation = <any>{ + uniqObjectField : "instanceId" + }; + service.allElementsStatusMap = service.generateAllMembersStatus(<any>data); service.filteredMembers = <any>data; - expect(service.calculateNotHideVnfMembers()).toEqual(2); + expect(service.calculateNotHideRows()).toEqual(2); }); test('should return number of selected members', () => { - service.allMemberStatusMap = MembersTableService.generateAllMembersStatus(<any>data); - service.allMemberStatusMap['VNF1_INSTANCE_ID'].isSelected = true; - service.allMemberStatusMap['VNF2_INSTANCE_ID'].isSelected = true; - expect(service.calculateSelectedVnfMembers()).toEqual(2); + ElementsTableService.uniqObjectField = "instanceId"; + service.allElementsStatusMap = service.generateAllMembersStatus(<any>data); + service.allElementsStatusMap['VNF1_INSTANCE_ID'].isSelected = true; + service.allElementsStatusMap['VNF2_INSTANCE_ID'].isSelected = true; + expect(service.calculateSelectedRows()).toEqual(2); }); test('should return number of selected members', () => { - service.allMemberStatusMap = MembersTableService.generateAllMembersStatus(<any>data); + service.allElementsStatusMap = service.generateAllMembersStatus(<any>data); service.filteredMembers = <any>data; - service.allMemberStatusMap['VNF1_INSTANCE_ID'].isSelected = true; - service.filterMembers('VNF2'); - service.allMemberStatusMap['VNF2_INSTANCE_ID'].isSelected = true; - expect(service.calculateNotHideVnfMembers()).toEqual(1); - }); - - test('getHeader should return labels with array of keys', () => { - const headers: CustomTableColumnDefinition[] = MembersTableService.getHeaders(); - expect(headers).toEqual([ - {displayName: 'VNF instance name', key: ['instanceName']}, - {displayName: 'VNF version', key: ['modelInfo', 'modelVersion']}, - {displayName: 'VNF model name', key: ['modelInfo', 'modelName']}, - {displayName: 'Prov Status', key: ['provStatus']}, - {displayName: 'Service instance name', key: ['serviceInstanceName']}, - {displayName: 'Cloud Region', key: ['lcpCloudRegionId']}, - {displayName: 'Tenant Name', key: ['tenantName']} - ]); - }); - - - test('setMembers should dispatch action only on selected members', () => { - const vnfGroupStoreKey: string = 'vnfGroupStoreKey'; - const serviceId: string = 'serviceId'; - - jest.spyOn(store, 'dispatch'); - service.allMemberStatusMap = MembersTableService.generateAllMembersStatus(<any>data); - service.allMemberStatusMap['VNF1_INSTANCE_ID'].isSelected = true; - service.setMembers({serviceId: serviceId, vnfGroupStoreKey: vnfGroupStoreKey}); - expect(store.dispatch).toHaveBeenCalledTimes(1); - expect(store.dispatch).toHaveBeenCalledWith(createRelatedVnfMemberInstance(vnfGroupStoreKey, serviceId, service.allMemberStatusMap['VNF1_INSTANCE_ID'])); + service.allElementsStatusMap['VNF1_INSTANCE_ID'].isSelected = true; + service.filterMembers('VNF2', "VNF"); + service.allElementsStatusMap['VNF2_INSTANCE_ID'].isSelected = true; + expect(service.calculateNotHideRows()).toEqual(1); }); test('generateAllMembersStatus should add to each instance isHide and isSelected and convert to map', () => { - let allMemberStatusMapMock = MembersTableService.generateAllMembersStatus(<any>data); + let allMemberStatusMapMock = service.generateAllMembersStatus(<any>data); for (const key in allMemberStatusMapMock) { expect(allMemberStatusMapMock[key].isSelected).toBeFalsy(); } }); test('changeAllCheckboxStatus', () => { + service.modalInformation = <any>{ + type : 'SomeType', + uniqObjectField : 'instanceId' + }; let data = loadMockMembers(); - service.allMemberStatusMap = MembersTableService.generateAllMembersStatus(<any>data); + service.allElementsStatusMap = service.generateAllMembersStatus(<any>data); service.filteredMembers = <any>data; service.changeAllCheckboxStatus(true); - for (let key in service.allMemberStatusMap) { - expect(service.allMemberStatusMap[key].isSelected).toEqual(true); + for (let key in service.allElementsStatusMap) { + expect(service.allElementsStatusMap[key].isSelected).toEqual(true); } }); test('should reset all numbers and lists', () => { + service.modalInformation = <any>{ + type : 'SomeType', + uniqObjectField : 'instanceId' + }; let data = loadMockMembers(); - service.allMemberStatusMap = MembersTableService.generateAllMembersStatus(<any>data); + service.allElementsStatusMap = service.generateAllMembersStatus(<any>data); service.filteredMembers = <any>data; service.changeAllCheckboxStatus(true); - service.resetAll(); - expect(service.numberOfNotHideVnfMembers).toEqual(0); - expect(service.numberOfSelectedAndNotHideVnfMembers).toEqual(0); - expect(service.numberOfSelectedVnfMembers).toEqual(0); - expect(service.allMemberStatusMap).toEqual({}); + service.resetAll("instanceId"); + expect(service.numberOfNotHideRows).toEqual(0); + expect(service.numberOfSelectedAndNotHideRows).toEqual(0); + expect(service.numberOfSelectedRows).toEqual(0); + expect(service.allElementsStatusMap).toEqual({}); expect(service.filteredMembers.length).toEqual(0); }); test('checkAllCheckboxStatus should be false if not all are selected', () => { - service.allMemberStatusMap = MembersTableService.generateAllMembersStatus(<any>loadMockMembers()); - service.updateAmountsAndCheckAll(); + service.allElementsStatusMap = service.generateAllMembersStatus(<any>loadMockMembers()); + service.updateAmountsAndCheckAll("instanceId", <any>{}); expect(service.allCheckboxAreSelected).toEqual(false); }); @@ -178,7 +162,7 @@ describe('MembersTableService view member count', () => { test('sortVnfMembersByName should sort list by vnf name', () => { let data = <any>loadMockMembers(); - let sortedList = MembersTableService.sortVnfMembersByName(data, "instanceName"); + let sortedList = service.sortElementsByName(data, "instanceName"); expect(sortedList[0].instanceName).toEqual("VNF1_INSTANCE_NAME"); expect(sortedList[1].instanceName).toEqual("VNF2_INSTANCE_NAME"); @@ -187,22 +171,63 @@ describe('MembersTableService view member count', () => { data[0] = data[1]; data[1] = tmp; - sortedList = MembersTableService.sortVnfMembersByName(data, "instanceName"); + sortedList = service.sortElementsByName(data, "instanceName"); expect(sortedList[1].instanceName).toEqual("VNF1_INSTANCE_NAME"); expect(sortedList[0].instanceName).toEqual("VNF2_INSTANCE_NAME"); - sortedList = MembersTableService.sortVnfMembersByName(null, "instanceName"); + sortedList = service.sortElementsByName(null, "instanceName"); expect(sortedList).toEqual([]); - sortedList = MembersTableService.sortVnfMembersByName(data, undefined); + sortedList = service.sortElementsByName(data, undefined); expect(sortedList).toEqual([]); }); - test('should return only vnf members not associated to any vnf group', ()=>{ - const result: VnfMember[] = service.filterUsedVnfMembers("serviceModelId",loadMockMembers()); - expect(result.length).toEqual(1); - expect(result[0].instanceId).toEqual("VNF2_INSTANCE_ID"); + test('isRowDisabled should return false current row is selected', ()=> { + let isDisabled = service.isRowDisabled(true, null); + expect(isDisabled).toBeFalsy(); + }); + + + test('isRowDisabled should return false if there is no limit', ()=> { + let isDisabled = service.isRowDisabled(false, null); + expect(isDisabled).toBeFalsy(); + }); + + test('isRowDisabled should return false if number of rows are less then limit ', ()=> { + service.modalInformation = <any>{ + uniqObjectField : "instanceId" + }; + service.allElementsStatusMap = service.generateAllMembersStatus(<any>data); + service.allElementsStatusMap['VNF1_INSTANCE_ID'].isSelected = true; + service.allElementsStatusMap['VNF2_INSTANCE_ID'].isSelected = true; + + let isDisabled = service.isRowDisabled(false, 3); + expect(isDisabled).toBeFalsy(); + }); + + test('isRowDisabled should return true if number of rows are equal or more then limit ', ()=> { + ElementsTableService.uniqObjectField = "instanceId"; + service.allElementsStatusMap = service.generateAllMembersStatus(<any>data); + service.allElementsStatusMap['VNF1_INSTANCE_ID'].isSelected = true; + service.allElementsStatusMap['VNF2_INSTANCE_ID'].isSelected = true; + + let isDisabled = service.isRowDisabled(false, 2); + expect(isDisabled).toBeTruthy(); + }); + + + test('isCheckAllDisabled should false true if number of rows are equal or more then limit ', ()=> { + service.modalInformation = <any>{ + uniqObjectField : "instanceId" + }; + service.allElementsStatusMap = service.generateAllMembersStatus(<any>data); + service.allElementsStatusMap['VNF1_INSTANCE_ID'].isSelected = true; + service.allElementsStatusMap['VNF2_INSTANCE_ID'].isSelected = true; + + let isDisabled = service.isCheckAllDisabled( 2); + expect(isDisabled).toBeFalsy(); }); + }); @@ -214,7 +239,7 @@ function loadMockMembers(): any[] { "instanceId": "VNF1_INSTANCE_ID", "orchStatus": null, "productFamilyId": null, - "lcpCloudRegionId": "mtn23b", + "lcpCloudRegionId": "hvf23b", "tenantId": "3e9a20a3e89e45f884e09df0cc2d2d2a", "tenantName": "APPC-24595-T-IST-02C", "modelInfo": { @@ -242,7 +267,7 @@ function loadMockMembers(): any[] { "instanceId": "VNF2_INSTANCE_ID", "orchStatus": null, "productFamilyId": null, - "lcpCloudRegionId": "mtn23b", + "lcpCloudRegionId": "hvf23b", "tenantId": "3e9a20a3e89e45f884e09df0cc2d2d2a", "tenantName": "APPC-24595-T-IST-02C", "modelInfo": { diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.service.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.service.ts new file mode 100644 index 000000000..bd7f3979d --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/elements-table.service.ts @@ -0,0 +1,187 @@ +import {Injectable} from "@angular/core";; +import {NgRedux} from "@angular-redux/store"; +import {AppState} from "../../../store/reducers"; +import {DataFilterPipe} from "../../../pipes/dataFilter/data-filter.pipe"; +import {ElementTableRowModel, ModalInformation} from "./element-table-row.model"; +import {Level1Instance} from "../../../models/level1Instance"; +import * as _ from 'lodash'; +import {Subject} from "rxjs"; +import {CustomTableColumnDefinition} from "./elements-table.component"; +import { + deleteGenericModalhelper, + deleteGenericModalTableDataHelper, + updateGenericModalhelper, updateGenericModalTableDataHelper +} from "../../../storeUtil/utils/global/global.actions"; + +@Injectable() +export class ElementsTableService { + allElementsStatusMap : { [key:string]: ElementTableRowModel; }; + filteredMembers : any[]; + allCheckboxAreSelected : boolean; + numberOfNotHideRows : number; + numberOfSelectedRows : number; + numberOfSelectedAndNotHideRows : number; + numberOfNotSelectedAndNotHideRows : number; + maxSelectedRow : number; + modalInformation : ModalInformation; + + static uniqObjectField : string; + static changeFnTableDataTrigger : Subject<any> = new Subject(); + static changeModalInformationDataTrigger : Subject<{modalInformation, selectedRowsIds}> = new Subject(); + static selectRowsTrigger : Subject<string[]> = new Subject(); + + get staticUniqObjectField() { return ElementsTableService.uniqObjectField; } + + constructor(private _store: NgRedux<AppState>, private dataFilter: DataFilterPipe){ + this.resetAll(ElementsTableService.uniqObjectField, this.maxSelectedRow); + } + + updateAmountsAndCheckAll = (uniqObjectField: string, modalInformation : ModalInformation, maxSelectedRow? : number) : void => { + this.maxSelectedRow = maxSelectedRow; + this.modalInformation = modalInformation; + ElementsTableService.uniqObjectField = uniqObjectField; + this.numberOfSelectedRows = this.calculateSelectedRows(); + this.numberOfNotHideRows = this.calculateNotHideRows(); + this.numberOfSelectedAndNotHideRows = this.calculateSelectedAndNotHide(); + this.numberOfNotSelectedAndNotHideRows = this.calculateNotSelectedAndNotHide(); + this.allCheckboxAreSelected = this.numberOfNotHideRows > 0 && ((this.numberOfNotHideRows === this.numberOfSelectedAndNotHideRows) || (this.numberOfSelectedAndNotHideRows === this.maxSelectedRow)); + }; + + resetAll = (uniqObjectField: string, maxSelectedRow? : number) : void => { + this.allElementsStatusMap = {}; + this.filteredMembers = []; + this.numberOfSelectedRows = 0; + this.numberOfNotHideRows = 0; + this.numberOfSelectedAndNotHideRows = 0; + this.numberOfNotSelectedAndNotHideRows = 0; + this.allCheckboxAreSelected = false; + this.maxSelectedRow = maxSelectedRow; + ElementsTableService.uniqObjectField = uniqObjectField; + }; + + changeAllCheckboxStatus = (status : boolean) : void =>{ + for(const member of this.filteredMembers){ + this.allElementsStatusMap[member[this.modalInformation.uniqObjectField]].isSelected = status; + if(status){ + this._store.dispatch(updateGenericModalhelper(`selected${this.modalInformation.type}`, this.allElementsStatusMap[member[this.modalInformation.uniqObjectField]], this.modalInformation.uniqObjectField)); + }else { + this._store.dispatch(deleteGenericModalhelper(`selected${this.modalInformation.type}`,this.allElementsStatusMap[member[this.modalInformation.uniqObjectField]][this.modalInformation.uniqObjectField])); + } + } + this.updateAmountsAndCheckAll(ElementsTableService.uniqObjectField, this.modalInformation, this.maxSelectedRow); + }; + + changeCheckboxStatus = (vnfInstanceId : string, tableData) : void => { + if(_.isNil(this.allElementsStatusMap[vnfInstanceId].isSelected)){ + this.allElementsStatusMap[vnfInstanceId].isSelected = true; + this._store.dispatch(updateGenericModalhelper(`selected${this.modalInformation.type}`, this.allElementsStatusMap[vnfInstanceId], this.modalInformation.uniqObjectField)); + this._store.dispatch(updateGenericModalTableDataHelper(`${this.modalInformation.type}_TABLE_DATA`, tableData)); + }else { + this.allElementsStatusMap[vnfInstanceId].isSelected = !this.allElementsStatusMap[vnfInstanceId].isSelected; + if(this.allElementsStatusMap[vnfInstanceId].isSelected){ + this._store.dispatch(updateGenericModalhelper(`selected${this.modalInformation.type}`, this.allElementsStatusMap[vnfInstanceId], this.modalInformation.uniqObjectField)); + this._store.dispatch(updateGenericModalTableDataHelper(`${this.modalInformation.type}_TABLE_DATA`, tableData)); + }else { + this._store.dispatch(deleteGenericModalhelper(`selected${this.modalInformation.type}`, this.modalInformation.uniqObjectField)); + this._store.dispatch(deleteGenericModalhelper(`selected${this.modalInformation.type}`, vnfInstanceId)); + + this._store.dispatch(deleteGenericModalTableDataHelper(`${this.modalInformation.type}_TABLE_DATA`)); + } + } + + this.updateAmountsAndCheckAll(ElementsTableService.uniqObjectField, this.modalInformation, this.maxSelectedRow); + }; + + filterMembers(searchStr: string, type :string): void { + const keys: string[][] = this.getDataKeys(type); + const types :string[] = this.getDataType(type); + this.filteredMembers = this.dataFilter.transform(_.values(this.allElementsStatusMap), searchStr || '', keys, types); + this.updateAmountsAndCheckAll(ElementsTableService.uniqObjectField, this.modalInformation, this.maxSelectedRow); + } + + /************************************************** + generate elements data for select/ unselect rows + **************************************************/ + generateAllMembersStatus(tableData : Level1Instance[]) : { [key:string]: ElementTableRowModel; }{ + tableData.map((item) => { + item['isSelected'] = false + }); + return _.keyBy(tableData as ElementTableRowModel[],this.staticUniqObjectField); + } + + sortElementsByName(list : Level1Instance[], keyName : string) :Level1Instance[]{ + if(!_.isNil(list) && !_.isNil(keyName)) { + return list.sort(function(itemA, itemB) { return itemA[keyName]- itemB[keyName];}) + } + return []; + } + + /******************************** + table columns headers and key's + ********************************/ + static getHeaders(type: string) : CustomTableColumnDefinition[] { + return [ + {displayName: `${type} instance name`, key: ['instanceName']}, + {displayName: `${type} version`, key: ['modelInfo', 'modelVersion']}, + {displayName: `${type} model name`, key: ['modelInfo', 'modelName']}, + {displayName: 'Prov Status', key: ['provStatus']}, + {displayName: 'Service instance name', key: ['serviceInstanceName']}, + {displayName: 'Cloud Region', key: ['lcpCloudRegionId']}, + {displayName: 'Tenant Name', key: ['tenantName']} + ]; + } + + getDataKeys(type: string): string[][]{ + const headers = (!_.isNil(this.modalInformation) && !_.isNil(this.modalInformation.tableHeaders)) ? this.modalInformation.tableHeaders : ElementsTableService.getHeaders(type); + return headers.map((header)=> header.key).concat([[ElementsTableService.uniqObjectField]],[['serviceInstanceId']]); + } + + getDataType(type: string): string[]{ + const headers = (!_.isNil(this.modalInformation) && !_.isNil(this.modalInformation.tableHeaders)) ? this.modalInformation.tableHeaders : ElementsTableService.getHeaders(type); + return headers.map((header)=> header.type); + + } + + /************************************************************************************* + calculate the number of selected vnf members - include not visible and visible rows + @allElementsStatusMap: current vnf member status + *************************************************************************************/ + calculateSelectedRows() : number { + const flatObject = _.values(this.allElementsStatusMap); + return _.filter(flatObject, (item) => { if (item.isSelected) return item }).length; + } + + /************************************************ + calculate the number of display vnf members + @allElementsStatusMap: current vnf member status + ************************************************/ + calculateNotHideRows() : number { + return this.filteredMembers ? this.filteredMembers.length : 0; + } + + /************************************************ + calculate the number of display vnf members + @allElementsStatusMap: current vnf member status + ************************************************/ + calculateSelectedAndNotHide() : number { + return _.filter(this.filteredMembers, (item) => { if ( this.allElementsStatusMap[item[ElementsTableService.uniqObjectField]].isSelected) return item }).length; + } + + calculateNotSelectedAndNotHide() : number { + return _.filter(this.filteredMembers, (item) => { if ( !this.allElementsStatusMap[item[ElementsTableService.uniqObjectField]].isSelected) return item }).length; + } + + + isRowDisabled(currentRowIsSelected : boolean, maxSelectRow?: number) : boolean { + return _.isNil(maxSelectRow) || currentRowIsSelected || maxSelectRow === 1 ? false : maxSelectRow <= this.calculateSelectedRows(); + } + + isCheckAllDisabled(maxSelectRow?: number) : boolean{ + if(_.isNil(maxSelectRow)) return false; + else { + return this.numberOfNotSelectedAndNotHideRows > maxSelectRow; + } + } + + +} diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/member-table-row.model.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/member-table-row.model.ts deleted file mode 100644 index c5f1a7a07..000000000 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/member-table-row.model.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {VnfMember} from "../../../models/VnfMember"; - -export class MemberTableRowModel extends VnfMember{ - isSelected : boolean = false; -} - diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.html b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.html deleted file mode 100644 index 3a29ed824..000000000 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.html +++ /dev/null @@ -1,75 +0,0 @@ -<div class="table-header"> - <div class="left-header"> - <span class="title-header">{{description}}</span> - <div class="sub-title-header"> - <span class="vnf-match-your-criteria" class="total" [attr.data-tests-id]="'total-amount'" style="margin-right: 5px;"><span - [attr.data-tests-id]="'numberOfNotHideVnfMembers'">{{membersTableService.numberOfNotHideVnfMembers}}</span> VNFs match your criteria</span> - <span class="vnf-selected" class="total" [attr.data-tests-id]="'total-selected'"><span - [attr.data-tests-id]="'numberOfSelectedVnfMembers'">{{membersTableService.numberOfSelectedVnfMembers}}</span> VNF{{membersTableService.numberOfSelectedVnfMembers>1?'s':'' }} selected</span> - </div> - </div> - - <div class="search-container"> - <sdc-filter-bar - [placeHolder]="'Search...'" - [debounceTime]="250" - [testId]="'vnf-members-search'" - (valueChange)="search($event)"> - </sdc-filter-bar> - </div> -</div> -<table id="member-table" class="table table-bordered" *ngIf="data?.length > 0"> - <thead class="thead-dark"> - <tr> - <th class="allCheckboxAreSelected" style="position: relative;"> - <sdc-checkbox - [(checked)]="membersTableService.allCheckboxAreSelected" - [testId]="'all-checkbox-selected'" - (checkedChange)="changeAllCheckboxStatus($event)" - ></sdc-checkbox> - </th> - <th class="header-title" *ngFor="let header of headers">{{header.displayName}}</th> - </tr> - </thead> - <tbody> - <tr class="member-table-row" *ngFor="let vnf of membersTableService.filteredMembers"> - <td class="sdcCheckboxMember" style="position: relative;" [attr.data-tests-id]="vnf?.instanceId"> - <sdc-checkbox - [checked]="membersTableService.allMemberStatusMap[vnf.instanceId]?.isSelected" - [testId]="vnf?.instanceId" - (checkedChange)="changeCheckboxStatus(vnf.instanceId)" - ></sdc-checkbox></td> - <td id="vnfName"> - <custom-ellipsis [id]="vnf?.instanceName" [value]="vnf?.instanceName" - [hightlight]="filterValue"></custom-ellipsis> - <custom-ellipsis class="second-line" [id]="vnf?.instanceId" [value]="'UUID: '+ vnf?.instanceId" - [hightlight]="filterValue"></custom-ellipsis> - </td> - <td id="version"> - <custom-ellipsis [id]="vnf?.modelInfo?.modelVersion" [value]="vnf?.modelInfo?.modelVersion" [hightlight]="filterValue"></custom-ellipsis> - </td> - <td id="modelName"> - <custom-ellipsis [id]="vnf?.modelInfo?.modelName" [value]="vnf?.modelInfo?.modelName" [hightlight]="filterValue"></custom-ellipsis> - </td> - <td id="provStatus"> - <custom-ellipsis [id]="vnf?.provStatus" [value]="vnf?.provStatus" [hightlight]="filterValue"></custom-ellipsis> - </td> - <td id="serviceInstance"> - <custom-ellipsis [id]="vnf?.serviceInstanceName" [value]="vnf?.serviceInstanceName" - [hightlight]="filterValue"></custom-ellipsis> - <custom-ellipsis class="second-line" [id]="vnf?.serviceInstanceId" [value]="'UUID: '+ vnf?.serviceInstanceId" - [hightlight]="filterValue"></custom-ellipsis> - </td> - <td id="cloudRegion"> - <custom-ellipsis [id]="vnf?.lcpCloudRegionId" [value]="vnf?.lcpCloudRegionId" [hightlight]="filterValue"></custom-ellipsis> - </td> - <td id="tenantName"> - <custom-ellipsis [id]="vnf?.tenantName" [value]="vnf?.tenantName" [hightlight]="filterValue"></custom-ellipsis> - </td> - </tr> - - </tbody> -</table> -<div class="no-result" *ngIf="data?.length == 0">No VNFs were found that can belong to this group.</div> - - diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.scss b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.scss index 3be975222..2fa90b859 100644 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.scss +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.scss @@ -42,32 +42,46 @@ #member-table { border: 1px solid #D2D2D2; + display: flex; + flex-flow: column; + max-height: calc(100vh - 135px); + overflow-y: auto; thead { background: #F8F8F8; - th.allCheckboxAreSelected { - vertical-align: middle !important; - width: 48px; - max-width: 48px; - min-width: 48px; - height: 48px; - } - th.header-title { - font-family: OpenSans-SemiBold; - vertical-align: middle !important; - height: 48px; - font-size: 12px; + tr { + table-layout: fixed; + display: table; + width: 100%; + th.allCheckboxAreSelected { + vertical-align: middle !important; + width: 48px; + max-width: 48px; + min-width: 48px; + height: 48px; + } + th.header-title { + font-family: OpenSans-SemiBold; + vertical-align: middle !important; + height: 48px; + font-size: 12px; + } } } tbody { - td{ - text-align: center; - height: 60px; - padding-top: 0; - padding-bottom: 0; - max-height: 60px; - vertical-align: middle; - .second-line { - font-size: 12px; + tr { + table-layout: fixed; + display: table; + width: 100%; + td{ + text-align: center; + height: 60px; + padding-top: 0; + padding-bottom: 0; + max-height: 60px; + vertical-align: middle; + .second-line { + font-size: 12px; + } } } } @@ -89,3 +103,13 @@ align-items: center; justify-content: center; } + +td.sdcCheckboxMember { + vertical-align: middle !important; + width: 48px !important; + max-width: 48px !important; + min-width: 48px !important; + height: 48px !important; +} + + diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.ts deleted file mode 100644 index 9736563af..000000000 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -import {Component, Input, OnChanges, Output, SimpleChanges, EventEmitter} from '@angular/core'; -import {VnfMember} from "../../../models/VnfMember"; -import {MembersTableService} from "./members-table.service"; -import * as _ from 'lodash'; - -export class CustomTableColumnDefinition { - public displayName = ''; - public key : any = ''; - public type? = 'text'; - public filter? = ''; -} - -@Component({ - selector: 'app-members-table', - templateUrl: './members-table.component.html', - styleUrls: ['./members-table.component.scss'] -}) - -export class MembersTableComponent implements OnChanges{ - filterValue: string = null; - allMemberStatusMap = null; - membersTableService : MembersTableService; - headers: CustomTableColumnDefinition[] = MembersTableService.getHeaders(); - @Input() data: VnfMember[]; - @Input() description: string; - @Output() selectedMembersAmountChange : EventEmitter<number> = new EventEmitter(); - constructor(private _membersTableService : MembersTableService){ - this.membersTableService = this._membersTableService; - } - - ngOnChanges(changes: SimpleChanges): void { - if(_.isNil(this.data)){ - this._membersTableService.resetAll(); - }else { - this._membersTableService.allMemberStatusMap = MembersTableService.generateAllMembersStatus(this.data); - this._membersTableService.filteredMembers = MembersTableService.sortVnfMembersByName(this.data, "instanceName"); - this._membersTableService.updateAmountsAndCheckAll(); - } - } - - search(searchStr: string): void { - this.filterValue = searchStr; - this._membersTableService.filterMembers(this.filterValue); - } - - changeAllCheckboxStatus(status: boolean) : void { - this._membersTableService.changeAllCheckboxStatus(status); - this.selectedMembersAmountChange.emit(this._membersTableService.numberOfSelectedVnfMembers); - } - - - changeCheckboxStatus(vnfInstanceId: string) : void { - this._membersTableService.changeCheckboxStatus(vnfInstanceId); - this.selectedMembersAmountChange.emit(this._membersTableService.numberOfSelectedVnfMembers); - } - -} diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.service.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.service.ts deleted file mode 100644 index 5b9cd39a2..000000000 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/members-table/members-table.service.ts +++ /dev/null @@ -1,153 +0,0 @@ -import {Injectable} from "@angular/core"; -import {VnfMember} from "../../../models/VnfMember"; -import {CustomTableColumnDefinition} from "./members-table.component"; -import {NgRedux} from "@angular-redux/store"; -import {AppState} from "../../../store/reducers"; -import {createRelatedVnfMemberInstance} from "../../../storeUtil/utils/relatedVnfMember/relatedVnfMember.actions"; -import * as _ from 'lodash'; -import {DataFilterPipe} from "../../../pipes/dataFilter/data-filter.pipe"; -import {MemberTableRowModel} from "./member-table-row.model"; - -@Injectable() -export class MembersTableService { - allMemberStatusMap : { [key:string]: MemberTableRowModel; }; - filteredMembers : VnfMember[]; - allCheckboxAreSelected : boolean; - numberOfNotHideVnfMembers : number; - numberOfSelectedVnfMembers : number; - numberOfSelectedAndNotHideVnfMembers : number; - - constructor(private _store: NgRedux<AppState>, private dataFilter: DataFilterPipe){ - this.resetAll(); - } - - filterUsedVnfMembers = (serviceModelId: string, result: VnfMember[]): VnfMember[] => { - const allMembersMap = _.keyBy(result as VnfMember[], 'instanceId'); - const vnfGroupsData = this._store.getState().service.serviceInstance[serviceModelId].vnfGroups; - const vnfMembersArr = _.flatMap(vnfGroupsData).map((vnfGroup) =>vnfGroup.vnfs ); - for( let vnf of vnfMembersArr ){ - for(let member in vnf){ - delete allMembersMap[member]; - } - } - return _.flatMap(allMembersMap); - }; - - updateAmountsAndCheckAll = () : void => { - this.numberOfSelectedVnfMembers = this.calculateSelectedVnfMembers(); - this.numberOfNotHideVnfMembers = this.calculateNotHideVnfMembers(); - this.numberOfSelectedAndNotHideVnfMembers = this.calculateSelectedAndNotHide(); - this.allCheckboxAreSelected = this.numberOfNotHideVnfMembers > 0 && this.numberOfNotHideVnfMembers === this.numberOfSelectedAndNotHideVnfMembers; - }; - - resetAll = () : void => { - this.allMemberStatusMap = {}; - this.filteredMembers = []; - this.numberOfSelectedVnfMembers = 0; - this.numberOfNotHideVnfMembers = 0; - this.numberOfSelectedAndNotHideVnfMembers = 0; - this.allCheckboxAreSelected = false; - }; - - changeAllCheckboxStatus = (status : boolean) : void =>{ - for(const member of this.filteredMembers){ - this.allMemberStatusMap[member.instanceId].isSelected = status; - } - this.updateAmountsAndCheckAll(); - }; - - changeCheckboxStatus = (vnfInstanceId : string ) : void =>{ - this.allMemberStatusMap[vnfInstanceId].isSelected = !this.allMemberStatusMap[vnfInstanceId].isSelected; - this.updateAmountsAndCheckAll(); - }; - - /************************************************ - iterate over all current vnf members: - 1) if vnf member is selected then update REDUX store - 2) if vnf member is not selected then delete member - @allMemberStatusMap: current vnf member status - @vnfGroupStoreKey: vnf group store key - @serviceId: service model id - ************************************************/ - setMembers = (data : {serviceId : string, vnfGroupStoreKey : string}) : void =>{ - let tmpMembers = this.allMemberStatusMap; - for(let key in tmpMembers){ - if(tmpMembers[key].isSelected){ - this._store.dispatch(createRelatedVnfMemberInstance( data.vnfGroupStoreKey, data.serviceId, tmpMembers[key])); - } - } - }; - - filterMembers(searchStr: string): void { - const keys: string[][] = MembersTableService.getDataKeys(); - this.filteredMembers = this.dataFilter.transform(_.values(this.allMemberStatusMap), searchStr || '', keys); - this.updateAmountsAndCheckAll(); - } - - /************************************ - generate vnf member data for select/ unselect rows - ************************************/ - static generateAllMembersStatus(tableData : VnfMember[]) : { [key:string]: MemberTableRowModel; }{ - - tableData.map((vnf) => { - vnf['isSelected'] = false - }); - return _.keyBy(tableData as MemberTableRowModel[], 'instanceId'); - } - - - static sortVnfMembersByName(list : VnfMember[], keyName : string) :VnfMember[]{ - if(!_.isNil(list) && !_.isNil(keyName)) { - return list.sort(function(itemA, itemB) { return itemA[keyName]- itemB[keyName];}) - } - return []; - - } - - /******************************** - table columns headers and key's - ********************************/ - static getHeaders() : CustomTableColumnDefinition[] { - return [ - {displayName: 'VNF instance name', key: ['instanceName']}, - {displayName: 'VNF version', key: ['modelInfo', 'modelVersion']}, - {displayName: 'VNF model name', key: ['modelInfo', 'modelName']}, - {displayName: 'Prov Status', key: ['provStatus']}, - {displayName: 'Service instance name', key: ['serviceInstanceName']}, - {displayName: 'Cloud Region', key: ['lcpCloudRegionId']}, - {displayName: 'Tenant Name', key: ['tenantName']} - ]; - } - - static getDataKeys(): string[][]{ - const headers = MembersTableService.getHeaders(); - return headers.map((header)=> header.key).concat([['instanceId']],[['serviceInstanceId']]); - } - - /************************************************************************************* - calculate the number of selected vnf members - include not visible and visible rows - @allMemberStatusMap: current vnf member status - *************************************************************************************/ - calculateSelectedVnfMembers() : number { - const flatObject = _.values(this.allMemberStatusMap); - return _.filter(flatObject, (item) => { if (item.isSelected) return item }).length; - } - - /************************************************ - calculate the number of display vnf members - @allMemberStatusMap: current vnf member status - ************************************************/ - calculateNotHideVnfMembers() : number { - return this.filteredMembers.length; - } - - /************************************************ - calculate the number of display vnf members - @allMemberStatusMap: current vnf member status - ************************************************/ - calculateSelectedAndNotHide() : number { - return _.filter(this.filteredMembers, (item) => { if ( this.allMemberStatusMap[item.instanceId].isSelected) return item }).length; - } - - -} diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.html b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.html new file mode 100644 index 000000000..7e79ca6f1 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.html @@ -0,0 +1,64 @@ +<div class="modal-search-member-content"> + <div class="header"> + <vid-svg-icon + [attr.data-tests-id]="'cancelBtn'" + (click)="backAction()" + class="navigation-arrow-back" + [mode]="'primary'" + [size]="'large'" + [name]="'navigation-arrow-back'" + [clickable]="true" + [fill]="'#FFFFFF'" + [widthViewBox]="'24'" + [heightViewBox]="'24'"> + </vid-svg-icon> + + <span class="title"> + {{modalInformation.title}} + </span> + <button type="submit" data-tests-id="setMembersBtn" [disabled]="disableSetElements" (click)="doneAction()" class="sdc-button sdc-button__primary">{{modalInformation?.topButton?.text}}</button> + </div> + <div class="content-wrapper"> + <div class="sidebar-left"> + <div class="search-criteria-wrapper"> + <div class="search-criteria-title">SEARCH CRITERIA</div> + <div class="search-item" *ngFor="let searchFieldItem of modalInformation?.searchFields"> + <div> + <div><span class="label-item" >{{searchFieldItem.title}}</span></div> + <div><span attr.data-tests-id="{{searchFieldItem.dataTestId}}" class="text-item">{{searchFieldItem.value}}</span></div> + </div> + </div> + <div class="search-item" *ngFor="let criteria of modalInformation?.criteria"> + <div *ngIf="criteria.type === 'DROPDOWN'"> + <div><span class="label-item" [ngClass]="{'required': criteria.isRequired}">{{criteria.label}}</span></div> + <div> + <select class="form-control input-text select-criteria" + id="{{criteria?.dataTestId}}-select" + [attr.data-tests-id]="criteria?.dataTestId" + (change)="criteria.onChange(criteria, $event.target.value)"> + + <option *ngFor="let option of criteria.onInit() | async" + class="{{option}} {{option}}-Option" + [value]="option">{{option}} + </option> + </select> + </div> + </div> + </div> + <div class="search-button" *ngIf="modalInformation.criteria && modalInformation.criteria.length > 0"> + <button type="submit" + data-tests-id="searchByNetworkRole" + [disabled]="disableSearchByNetworkRole" + (click)="searchByCriteriaAction()" + class="sdc-button sdc-button__primary">Search...</button> + </div> + </div> + </div> + <div class="sidebar-right"> + <app-members-table + [data]="elementsData" + [modalInformation]="modalInformation" + (selectedMembersAmountChange)="selectedMembersAmountChange($event)"></app-members-table> + </div> + </div> +</div> diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-members-modal.component.scss b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.scss index d49653934..7d9d139d1 100644 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-members-modal.component.scss +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.scss @@ -44,12 +44,12 @@ } .content-wrapper { - display: flex; .sidebar-left { - flex-basis: 285px; + width: 20%; border-right: 1px solid #D2D2D2; height: calc(100vh - 60px); + float: left; .search-criteria-wrapper{ @@ -82,8 +82,34 @@ } .sidebar-right { - flex: 1; - margin: 80px 50px; + padding: 15px 30px 0px 30px; + width: 80%; + float: right; } } } + +select.select-criteria { + webkit-appearance: none; + background: url('../../../../assets/img/chevron.svg') 0 0 no-repeat; + background-size: 24px; + background-position-x: right; + background-position-y: center; + font-family: OpenSans-Italic; + font-size: 14px; + height: 38px; + -webkit-appearance: none; + -moz-appearance: none; +} + +.required:after { + content: " * "; + color: #cf2a2a; + margin-left: 3px; +} + +.search-button { + display: flex; + justify-content: space-around; +} + diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts new file mode 100644 index 000000000..211f59337 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts @@ -0,0 +1,91 @@ +import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {DialogComponent, DialogService} from "ng2-bootstrap-modal"; +import {IframeService} from "../../utils/iframe.service"; +import {AaiService} from "../../services/aaiService/aai.service"; +import {VnfGroupModel} from "../../models/vnfGroupModel"; +import {ElementsTableService} from "./members-table/elements-table.service"; +import {Level1Instance} from "../../models/level1Instance"; +import {ModalInformation} from "./members-table/element-table-row.model"; +import {NgRedux} from "@angular-redux/store"; +import {AppState} from "../../store/reducers"; +import {FormGroup} from "@angular/forms"; +import * as _ from "lodash"; +import {clearAllGenericModalhelper} from "../../storeUtil/utils/global/global.actions"; +@Component({ + selector: 'search-members-modal', + templateUrl: 'search-elements-modal.component.html', + styleUrls: ['search-elements-modal.component.scss'] +}) + +export class SearchElementsModalComponent extends DialogComponent<{ modalInformation: ModalInformation }, boolean> implements OnInit, OnDestroy { + modalInformation: ModalInformation; + parentElementClassName = 'content'; + elementsData: Level1Instance[]; + vnfGroupModel: VnfGroupModel; + disableSetElements: boolean = true; + disableSearchByNetworkRole: boolean = false; + dynamicFormGroup: FormGroup = null; + + constructor(dialogService: DialogService, + private _iframeService: IframeService, + private _aaiService: AaiService, + private _membersTableService: ElementsTableService, + private _store: NgRedux<AppState>) { + super(dialogService); + ElementsTableService.changeFnTableDataTrigger.subscribe((triggerRes) => { + this._membersTableService.resetAll(this.modalInformation.uniqObjectField, this.modalInformation.maxSelectRow); + this.elementsData = triggerRes; + }); + + ElementsTableService.changeModalInformationDataTrigger.subscribe(({modalInformation, selectedRowsIds}) => { + this.disableSetElements = true; + this.modalInformation = modalInformation; + this.ngOnInit(selectedRowsIds); + }) + } + + @ViewChild('ElementsTableComponent') membersTable; + + ngOnInit(selectedRowsIds?: string[]): void { + const genericModalHelper = this._store.getState().global.genericModalHelper; + if(!_.isNil(genericModalHelper) && !_.isNil(genericModalHelper[`${this.modalInformation.type}_TABLE_DATA`]) && !_.isNil(genericModalHelper[`selected${this.modalInformation.type}`])){ + this.elementsData = this._store.getState().global.genericModalHelper[`${this.modalInformation.type}_TABLE_DATA`]; + } else { + this.modalInformation.getElements() + .subscribe((result) => { + this.elementsData = result; + }); + } + }; + + closeDialog(): void { + this._iframeService.removeFullScreen(); + this._iframeService.removeClassCloseModal(this.parentElementClassName); + this.dialogService.removeDialog(this); + setTimeout(() => { + window.parent.postMessage("closeIframe", "*"); + }, 15); + } + + selectedMembersAmountChange(selectedMembersAmount: number): void { + this.disableSetElements = selectedMembersAmount == 0; + } + + doneAction(): void { + this.modalInformation.topButton.action.call(this, this); + } + + searchByCriteriaAction(): void { + this.modalInformation.searchButton.action.call(this, this); + } + + backAction(): void { + if (this.modalInformation.backAction) { + this.modalInformation.backAction.call(this, this); + } else { + this.closeDialog(); + } + } +} + + diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-members-modal.component.html b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-members-modal.component.html deleted file mode 100644 index 899bc9889..000000000 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-members-modal.component.html +++ /dev/null @@ -1,35 +0,0 @@ -<div class="modal-search-member-content"> - <div class="header"> - <vid-svg-icon - [attr.data-tests-id]="'cancelBtn'" - (click)="closeDialog()" - class="navigation-arrow-back" - [mode]="'primary'" - [size]="'large'" - [name]="'navigation-arrow-back'" - [clickable]="true" - [fill]="'#FFFFFF'" - [widthViewBox]="'24'" - [heightViewBox]="'24'"> - </vid-svg-icon> - - <span class="title"> - {{title}} - </span> - <button type="submit" data-tests-id="setMembersBtn" [disabled]="disableSetMembers" (click)="setMembers()" class="sdc-button sdc-button__primary">SET MEMBERS</button> - </div> - <div class="content-wrapper"> - <div class="sidebar-left"> - <div class="search-criteria-wrapper"> - <div class="search-criteria-title">SEARCH CRITERIA</div> - <div class="search-item" *ngFor="let searchFieldItem of searchFields"> - <span class="label-item">{{searchFieldItem.title}}</span> - <span attr.data-tests-id="{{searchFieldItem.dataTestId}}" class="text-item">{{searchFieldItem.value}}</span> - </div> - </div> - </div> - <div class="sidebar-right"> - <app-members-table [data]="membersData" [description]="description" (selectedMembersAmountChange)="selectedMembersAmountChange($event)"></app-members-table> - </div> - </div> -</div> diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-members-modal.component.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-members-modal.component.ts deleted file mode 100644 index 9c65d222d..000000000 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-members-modal.component.ts +++ /dev/null @@ -1,82 +0,0 @@ -import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; -import {DialogComponent, DialogService} from "ng2-bootstrap-modal"; -import {IframeService} from "../../utils/iframe.service"; -import {AaiService} from "../../services/aaiService/aai.service"; -import {VnfMember} from "../../models/VnfMember"; -import {VnfGroupModel} from "../../models/vnfGroupModel"; -import {MembersTableService} from "./members-table/members-table.service"; -import {VnfGroupInstance} from "../../models/vnfGroupInstance"; - - -export interface PopupModel { - title: string; - serviceModelId : string; - searchFields: ISearchField[]; - description : string; - subscriberId: string, - serviceType: string, - node: VnfGroupInstance, - vnfGroupModel: VnfGroupModel; - -} - -export interface ISearchField { - title: string; - value: any; - dataTestId: string; -} - -@Component({ - selector : 'search-members-modal', - templateUrl : 'search-members-modal.component.html', - styleUrls : ['search-members-modal.component.scss'] -}) - -export class SearchMembersModalComponent extends DialogComponent<PopupModel, boolean> implements OnInit, OnDestroy { - title: string; - serviceModelId : string; - parentElementClassName = 'content'; - membersData: VnfMember[]; - description : string; - searchFields: ISearchField[]; - vnfGroupModel: VnfGroupModel; - subscriberId: string; - serviceType: string; - node: VnfGroupInstance; - disableSetMembers: boolean = true; - constructor(dialogService: DialogService , - private _iframeService : IframeService, - private _aaiService : AaiService, - private _membersTableService: MembersTableService){ - super(dialogService); - - } - @ViewChild('MembersTableComponent') membersTable; - - ngOnInit() : void{ - this._aaiService.getOptionalGroupMembers(this.serviceModelId, this.subscriberId, this.serviceType, (Object.values(this.vnfGroupModel.members))[0].sourceModelInvariant, this.vnfGroupModel.properties.type, this.vnfGroupModel.properties.role) - .subscribe((result: VnfMember[])=>{ - this.membersData = this._membersTableService.filterUsedVnfMembers(this.serviceModelId, result); - }); - }; - - - closeDialog() : void{ - this._iframeService.removeClassCloseModal(this.parentElementClassName); - this.dialogService.removeDialog(this); - setTimeout(() => { - window.parent.postMessage("closeIframe", "*"); - }, 15); - } - selectedMembersAmountChange(selectedMembersAmount: number) : void { - this.disableSetMembers = selectedMembersAmount==0; - } - - - setMembers() : void { - this._membersTableService.setMembers({serviceId : this.serviceModelId, vnfGroupStoreKey : this.node.vnfGroupStoreKey}); - this.closeDialog(); - } -} - - |