From eafbe7ef997988a6922d004703dcd35dd28bf991 Mon Sep 17 00:00:00 2001 From: Yoav Schneiderman Date: Tue, 17 Dec 2019 22:10:31 +0200 Subject: Add details in template list popup Issue-ID: VID-730 Signed-off-by: Yoav Schneiderman Change-Id: I7042e85a1e12e7d5d9a19b5cc1eb92c65ea08134 --- .../iFrames/instantiation.templates.modal.e2e.ts | 48 +++++++++++++++++++++- .../checkbox/checkbox.formControl.component.scss | 41 ++++++++++++++++++ .../checkbox/checkbox.formControl.component.ts | 3 +- .../instantiation.templates.modal.component.html | 13 +++++- .../instantiation.templates.modal.component.scss | 45 +++++++++++++++++++- .../instantiation.templates.modal.component.ts | 23 ++++++++++- .../instantiation.templates.modal.service.spec.ts | 17 ++++++++ .../instantiation.templates.modal.service.ts | 11 +++++ .../instantiation.templates.row.model.ts | 2 +- .../src/app/shared/utils/constants.ts | 1 + 10 files changed, 196 insertions(+), 8 deletions(-) create mode 100644 vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.scss diff --git a/vid-webpack-master/cypress/integration/iFrames/instantiation.templates.modal.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/instantiation.templates.modal.e2e.ts index 3caa4e81d..b2d3eb578 100644 --- a/vid-webpack-master/cypress/integration/iFrames/instantiation.templates.modal.e2e.ts +++ b/vid-webpack-master/cypress/integration/iFrames/instantiation.templates.modal.e2e.ts @@ -39,6 +39,44 @@ describe('Template', () => { "serviceModelVersion": "1.0", "createdBulkDate": 1525075968000, "isRetryEnabled": true + }, + { + "id": 7, + "created": 1525075968000, + "modified": 1525075971000, + "action": "INSTANTIATE", + "createdId": null, + "modifiedId": null, + "rowNum": null, + "auditUserId": null, + "auditTrail": null, + "jobId": "13063a83-924e-4500-a3a1-e53d1b58450b", + "templateId": "d42ba7c8-9e19-4e34-ae2c-d8af3f24498e", + "userId": "17807000", + "aLaCarte": false, + "msoRequestId": "c0011670-0e1a-4b74-945d-8bf5aede1d9d", + "jobStatus": "IN_PROGRESS", + "statusModifiedDate": 1525075968000, + "hidden": false, + "pause": false, + "owningEntityId": "d61e6f2d-12fa-4cc2-91df-7c244011d6fc", + "owningEntityName": "WayneHolland", + "project": "WATKINS", + "aicZoneId": "NFT1", + "aicZoneName": "NFTJSSSS-NFT1", + "tenantId": "bae71557c5bb4d5aac6743a4e5f1d054", + "tenantName": "AIN Web Tool-15-D-testalexandria", + "regionId": "hvf6", + "regionName": null, + "serviceType": "TYLER SILVIA", + "subscriberName": "e433710f-9217-458d-a79d-1c7aff376d89", + "serviceInstanceId": null, + "serviceInstanceName": "nWUfl instance name_001", + "serviceModelId": "e49fbd11-e60c-4a8e-b4bf-30fbe8f4fcc0", + "serviceModelName": "action-data", + "serviceModelVersion": "1.0", + "createdBulkDate": 1525075968000, + "isRetryEnabled": false } ]; @@ -65,6 +103,7 @@ describe('Template', () => { }); cy.route(Cypress.config('baseUrl') + "/asyncInstantiation**", asyncInstantiation); + cy.route(Cypress.config('baseUrl') + "/getuserID", '16807000'); cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true'); @@ -106,9 +145,14 @@ describe('Template', () => { //check load button is disabled - cy.getElementByDataTestsId('LoadTemplateButton').should('be.disabled') + cy.getElementByDataTestsId('LoadTemplateButton').should('be.disabled'); cy.getElementByDataTestsId('row-5c2cd8e5-27d0-42e3-85a1-85db5eaba459').click(); - cy.getElementByDataTestsId('LoadTemplateButton').should('not.be.disabled') + cy.getElementByDataTestsId('LoadTemplateButton').should('not.be.disabled'); + + //filter by userId + cy.get('.member-table-row').should('have.length', 2); + cy.getElementByDataTestsId('filterByUserIdTestId').click(); + cy.get('.member-table-row').should('have.length', 1); }); diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.scss new file mode 100644 index 000000000..005e28cc6 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.scss @@ -0,0 +1,41 @@ +.details-item input { + cursor: pointer; + opacity: 0; + position: absolute; + z-index: 100; + width: 24px; + height: 22px; + margin: 0; +} + +.details-item label { + position: relative; + cursor: pointer; +} + +.details-item label:before { + content:''; + -webkit-appearance: none; + background-color: transparent; + border: 2px solid #0079bf; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); + padding: 10px; + display: inline-block; + position: relative; + vertical-align: middle; + cursor: pointer; + margin-right: 5px; +} + +.details-item input:checked + label:after { + content: ''; + display: block; + position: absolute; + top: 2px; + left: 9px; + width: 6px; + height: 14px; + border: solid #0079bf; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts index f9ba48308..215b1fec1 100644 --- a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts +++ b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts @@ -4,7 +4,8 @@ import {FormGroup} from "@angular/forms"; @Component({ selector: 'checkbox-form-control', - templateUrl: './checkbox.formControl.component.html' + templateUrl: './checkbox.formControl.component.html', + styleUrls : ['./checkbox.formControl.component.scss'] }) export class CheckboxFormControlComponent{ @Input() data: FormControlModel; diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html index 9b2ce8300..07fc7ab22 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html @@ -24,6 +24,17 @@
+
+ + +
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.scss b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.scss index c0ce0c985..d62caf5de 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.scss +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.scss @@ -167,7 +167,6 @@ $grid-border: 1px #d2d2d2 solid; .filter-input { float: right; - width: 50%; } .details-item { @@ -205,4 +204,48 @@ $grid-border: 1px #d2d2d2 solid; .member-table-row.selected { background: #8080808f !important; } + + + .details-item input { + cursor: pointer; + opacity: 0; + position: absolute; + z-index: 100; + width: 24px; + height: 22px; + margin: 0; + } + + .details-item label { + position: relative; + cursor: pointer; + } + + .details-item label:before { + content:''; + -webkit-appearance: none; + background-color: transparent; + border: 2px solid #0079bf; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); + padding: 10px; + display: inline-block; + position: relative; + vertical-align: middle; + cursor: pointer; + margin-right: 5px; + } + + .details-item input:checked + label:after { + content: ''; + display: block; + position: absolute; + top: 2px; + left: 9px; + width: 6px; + height: 14px; + border: solid #0079bf; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } + } diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.ts index 9681113e8..b37d7f9a2 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.ts @@ -7,7 +7,11 @@ import {InstantiationTemplatesModalService} from "./instantiation.templates.moda import {InstantiationTemplatesRowModel} from "./instantiation.templates.row.model"; import {DrawingBoardModes} from "../../../../drawingBoard/service-planning/drawing-board.modes"; import {InstantiationStatusComponentService} from "../../../../instantiationStatus/instantiationStatus.component.service"; - +import {AaiService} from "../../../services/aaiService/aai.service"; +import {NgRedux} from "@angular-redux/store"; +import {AppState} from "../../../store/reducers"; +import * as _ from 'lodash'; +import {forkJoin} from "rxjs"; @Component({ selector: 'template-modal', templateUrl: 'instantiation.templates.modal.component.html', @@ -21,12 +25,15 @@ export class InstantiationTemplatesModalComponent extends DialogComponent, private _route: ActivatedRoute) { super(dialogService); this.templateModalComponentService = _templateModalComponentService; @@ -37,7 +44,11 @@ export class InstantiationTemplatesModalComponent extends DialogComponent { - this._serviceInfoService.getServicesJobInfo(true, params['serviceModelId']).subscribe((jobs) => { + + const getServiceJobInfoRoute = this._serviceInfoService.getServicesJobInfo(true, params['serviceModelId']); + const getUserIdRoute = this._aaiService.getUserId(); + + forkJoin([getServiceJobInfoRoute, getUserIdRoute]).subscribe(([jobs]) => { this.originalTableData = this._templateModalComponentService.convertResponseToUI(jobs); this.filterTableData = this.originalTableData; }); @@ -48,6 +59,14 @@ export class InstantiationTemplatesModalComponent extends DialogComponent { + this.filterByUserId = value; + const userId: string = this._store.getState().service['userId']; + if(!_.isNil(userId)){ + this.filterTableData = this.filterByUserId ? this._templateModalComponentService.filterByUserId(userId, this.originalTableData) : this.originalTableData; + } + }; + closeModal(): void { this.dialogService.removeDialog(this); } diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.service.spec.ts index 1ff0f61e2..2f044112b 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.service.spec.ts @@ -130,4 +130,21 @@ describe('instantiation templates modal service', () => { expect(result.instanceName).toEqual(''); }); + test('filterByUserId should filter table data by userId: not empty list', () => { + const jobs : InstantiationTemplatesRowModel[] = [ + new InstantiationTemplatesRowModel({userId : 'userId_1'}), + new InstantiationTemplatesRowModel({userId : 'userId'}), + new InstantiationTemplatesRowModel({userId : 'userId'}), + new InstantiationTemplatesRowModel({userId : 'userId_1'}) + ]; + let result: InstantiationTemplatesRowModel[] = service.filterByUserId('userId', jobs); + expect(result).toHaveLength(2); + }); + + test('filterByUserId should filter table data by userId: empty list should return empty list', () => { + const jobs : InstantiationTemplatesRowModel[] = []; + let result: InstantiationTemplatesRowModel[] = service.filterByUserId('userId', jobs); + expect(result).toHaveLength(0); + }); + }); diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.service.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.service.ts index 8377ccf42..36691fda5 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.service.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.service.ts @@ -1,5 +1,6 @@ import {Injectable} from "@angular/core"; import {InstantiationTemplatesRowModel} from "./instantiation.templates.row.model"; +import * as _ from 'lodash'; @Injectable() export class InstantiationTemplatesModalService { @@ -14,4 +15,14 @@ export class InstantiationTemplatesModalService { return tableRows; }; + + filterByUserId = (userId: string, originalTableData: InstantiationTemplatesRowModel[]): InstantiationTemplatesRowModel[] => { + if (!_.isNil(originalTableData)) { + return originalTableData.filter((item: InstantiationTemplatesRowModel) => { + return item.userId === userId; + }); + } + return []; + }; + } diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.row.model.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.row.model.ts index e68c34b85..673709462 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.row.model.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.row.model.ts @@ -14,7 +14,7 @@ export class InstantiationTemplatesRowModel extends InstantiationBase{ constructor(data) { super(data); - this.userId = !_.isNil(data.created) ? data.userId : null; + this.userId = !_.isNil(data.userId) ? data.userId : null; this.createDate = !_.isNil(data.created) ? moment(data.created).format("YYYY-MM-DD HH:mm:ss") : null; this.instanceName = this.getInstanceName(data.serviceInstanceName); this.instantiationStatus = !_.isNil(data.jobStatus) ? data.jobStatus : null; diff --git a/vid-webpack-master/src/app/shared/utils/constants.ts b/vid-webpack-master/src/app/shared/utils/constants.ts index f793e05db..6bf5ff1f4 100644 --- a/vid-webpack-master/src/app/shared/utils/constants.ts +++ b/vid-webpack-master/src/app/shared/utils/constants.ts @@ -39,6 +39,7 @@ export module Constants { public static AAI_GET_ACTIVE_NETWORKS_PATH = '../../aai_get_active_networks/'; public static AAI_GET_VPNS_PATH = '../../aai_get_vpn_list/'; public static AAI_GET_SERVICE_GROUP_MEMBERS_PATH = '../../aai_search_group_members/'; + public static AAI_GET_USER_ID_PATH = '../../getuserID'; public static AAI_GET_VERSION_BY_INVARIANT_ID = 'aai_get_version_by_invariant_id/'; public static SEARCH_SERVICE_INSTANCES = 'search_service_instances'; public static AAI_GET_VNF_BY_CUSTOMERID_AND_SERVICETYPE = 'get_vnf_data_by_globalid_and_service_type/'; -- cgit 1.2.3-korg