Adding filter (Implement in FE) + cypress + tests

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

5 files changed, 33 insertions, 14 deletions

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js b/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js
index ba9f0f533..9cdd5ceb9 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js
@@ -197,6 +197,7 @@ appDS2
     WELCOME_PATH: "welcome.htm",
     IS_PERMITTED_SUB_PATH: "&isPermitted=",
     SERVICE_POPUP_IFRAME_URL: "app/ui/#/servicePopup?serviceModelId=",
+    INSTANTIATION_TEMPLATES_IFRAME_URL: "app/ui/#/instantiationTemplatesPopup?serviceModelId=",
     SUB_INTERFACE_POPUP_IFRAME_URL: "app/ui/#/vlan?",
     VERIFY_SERVICE_URL: "rest/models/services/verifyService",
 
@@ -264,6 +265,7 @@ appDS2
       FLAG_FLASH_REPLACE_VF_MODULE: "FLAG_FLASH_REPLACE_VF_MODULE",
       FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT: "FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT",
       FLAG_SHOW_ORCHESTRATION_TYPE: "FLAG_SHOW_ORCHESTRATION_TYPE",
+      FLAG_2004_INSTANTIATION_TEMPLATES_POPUP : "FLAG_2004_INSTANTIATION_TEMPLATES_POPUP"
     }
 
   };
diff --git a/vid-webpack-master/src/app/app.routing.ts b/vid-webpack-master/src/app/app.routing.ts
index 779d17e3c..eaf4e9ca4 100644
--- a/vid-webpack-master/src/app/app.routing.ts
+++ b/vid-webpack-master/src/app/app.routing.ts
@@ -6,12 +6,20 @@ import {SupportComponent} from "./support/support.component";
 import {HealthStatusRoutes} from "./healthStatus/health-status.routing";
 import {VlanTaggingRoutes} from "./vlanTagging/vlan-tagging.routing";
 import {InstantiationStatusRoutes} from "./instantiationStatus/InstantiationStatus.routing";
+import {InstantiationTemplatesModalComponent} from "./shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component";
 const routes: Routes = [
   ...DrawingBoardRoutes,
   ...HealthStatusRoutes,
   ...VlanTaggingRoutes,
   ...InstantiationStatusRoutes,
   {
+    path: 'instantiationTemplatesPopup',
+    component: InstantiationTemplatesModalComponent,
+    resolve: {
+      flags: FlagsResolve
+    }
+  },
+  {
     path: 'servicePopup',
     component: GenericFormPopupComponent,
     resolve: {
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 c231c6081..19f641a56 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
@@ -23,12 +23,15 @@
           </div>
         </div>
         <div class="col-md-6">
-          <input
-            (keypress)="onFilterKeypress($event)"
-            class="filter-input form-control input-text"
-            placeholder="Filter...">
+          <div class="col-md-6">
+          </div>
+          <div class="col-md-6">
+            <input
+              class="filter-input form-control input-text"
+              placeholder="Filter..."
+              [(ngModel)]="filterText">
+          </div>
         </div>
-
       </div>
       <div class="row" style="margin-left: 0;margin-right: 0;padding: 20px;">
         <table id="member-table" class="table table-bordered" style="table-layout: fixed">
@@ -37,7 +40,7 @@
             <th class="header-title" id="header-userId">User ID</th>
             <th class="header-title" id="header-createDate" style="width: 21ch;">Date</th>
             <th class="header-title" id="header-instanceName" style="max-width: 50ch;">Instance Name</th>
-            <th class="header-title" id="header-instantiationStatus">Instantiation Status</th>
+            <th class="header-title" id="header-instantiationStatus" style="width: 30ch;">Instantiation Status</th>
             <th class="header-title" id="header-summary">Summary</th>
             <th class="header-title" id="header-region">Region</th>
             <th class="header-title" id="header-tenant">Tenant</th>
@@ -46,7 +49,7 @@
           </thead>
           <tbody>
           <tr class="member-table-row"
-              *ngFor="let item of filterTableData;"
+              *ngFor="let item of filterTableData | searchFilter: filterText ;"
               (click)="selectedJobId = item.jobId"
               [ngClass]="{'selected' : selectedJobId === 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 ef8d01a75..267d2cee0 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
@@ -166,7 +166,11 @@ $grid-border: 1px #d2d2d2 solid;
 
   .filter-input {
     float: right;
-    width: 25%;
+    width: 50%;
+  }
+
+  .details-item {
+    text-align: right;
   }
 
 
@@ -187,6 +191,6 @@ $grid-border: 1px #d2d2d2 solid;
   }
 
   .member-table-row.selected {
-    background: #009fdbb5 !important;
+    background: #8080808f !important;
   }
 }
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 56abe5b4c..4d89750f9 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
@@ -18,6 +18,7 @@ export class InstantiationTemplatesModalComponent extends DialogComponent<string
   templateModalComponentService: InstantiationTemplatesModalService;
   originalTableData: InstantiationTemplatesRowModel[] = [];
   filterTableData : InstantiationTemplatesRowModel[] = [];
+  filterText: string;
 
   constructor(dialogService: DialogService,
               private _iframeService: IframeService,
@@ -29,6 +30,7 @@ export class InstantiationTemplatesModalComponent extends DialogComponent<string
   }
 
   ngOnInit(): void {
+    this.filterText = '';
     this._route
       .queryParams
       .subscribe(params => {
@@ -44,12 +46,12 @@ export class InstantiationTemplatesModalComponent extends DialogComponent<string
   };
 
 
-  onFilterKeypress = (event : KeyboardEvent) => {
-    //event.target.value
-      console.log(event.altKey);
-  };
-
   closeModal(): void {
+    this._iframeService.removeClassCloseModal('content');
     this.dialogService.removeDialog(this);
+    setTimeout(() => {
+      window.parent.postMessage("closeIframe", "*");
+    }, 15);
+
   }
 }