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 --- .../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 + 9 files changed, 150 insertions(+), 6 deletions(-) create mode 100644 vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.scss (limited to 'vid-webpack-master/src/app/shared') 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