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>

3 files changed, 23 insertions, 14 deletions

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);
+
   }
 }