Add details in template list popup
Issue-ID: VID-730
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>
Change-Id: I7042e85a1e12e7d5d9a19b5cc1eb92c65ea08134
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 3caa4e8..b2d3eb5 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 @@
"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 @@
});
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 @@
//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 0000000..005e28c
--- /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 f9ba483..215b1fe 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 @@
@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 9b2ce83..07fc7ab 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 @@
</div>
<div class="col-md-6">
<div class="col-md-6">
+ <div class="details-item" style="text-align: center;">
+ <input type="checkbox"
+ #filterByUserIdCheckbox
+ id="filterByUserIdCheckbox"
+ [attr.data-tests-id]="'filterByUserIdTestId'"
+ [checked]="filterByUserId"
+ (change)="filterByUserIdChanged(filterByUserIdCheckbox.checked)"
+ data-toggle="toggle">
+ <label class="checkbox-label"
+ for="'filterByUserIdTestId'">Show only mine</label>
+ </div>
</div>
<div class="col-md-6">
<input
@@ -49,7 +60,7 @@
</thead>
<tbody>
<tr class="member-table-row"
- *ngFor="let item of filterTableData | searchFilter: filterText ;"
+ *ngFor="let item of filterTableData | searchFilter: filterText;"
(click)="selectedInstantiation = item"
[ngClass]="{'selected' : selectedInstantiation && selectedInstantiation.jobId === item.jobId}"
[attr.data-tests-id]="'row-' + item.jobId">
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 c0ce0c9..d62caf5 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 @@
.filter-input {
float: right;
- width: 50%;
}
.details-item {
@@ -205,4 +204,48 @@
.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 9681113..b37d7f9 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 {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 @@
originalTableData: InstantiationTemplatesRowModel[] = [];
filterTableData : InstantiationTemplatesRowModel[] = [];
filterText: string;
+ filterByUserId: boolean = false;
constructor(dialogService: DialogService,
private _iframeService: IframeService,
private _serviceInfoService: ServiceInfoService,
private _templateModalComponentService: InstantiationTemplatesModalService,
private _instantiationStatusComponentService: InstantiationStatusComponentService,
+ private _aaiService: AaiService,
+ private _store : NgRedux<AppState>,
private _route: ActivatedRoute) {
super(dialogService);
this.templateModalComponentService = _templateModalComponentService;
@@ -37,7 +44,11 @@
this._route
.queryParams
.subscribe(params => {
- 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 @@
this._instantiationStatusComponentService.navigateToNewViewEdit(this.selectedInstantiation, DrawingBoardModes.RECREATE)
};
+ filterByUserIdChanged = (value : boolean) : void => {
+ 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 1ff0f61..2f04411 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 @@
expect(result.instanceName).toEqual('<Automatically generated>');
});
+ 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 8377ccf..36691fd 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 @@
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 e68c34b..6737094 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 @@
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 f793e05..6bf5ff1 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 @@
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/';