Add details in template list popup

Issue-ID: VID-730
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>
Change-Id: I7042e85a1e12e7d5d9a19b5cc1eb92c65ea08134

9 files changed, 150 insertions, 6 deletions

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 @@
         </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 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<string
   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 @@ export class InstantiationTemplatesModalComponent extends DialogComponent<string
     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 @@ export class InstantiationTemplatesModalComponent extends DialogComponent<string
     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 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('<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 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/';