Introduce column filters in GAB table

Additional input is available in each GABs headers providing
possibility to filter data-rows

Change-Id: I3d782673e275a2dc3b2d297520ace774348a8e68
Issue-ID: SDC-2214
Signed-off-by: Tomasz Golabek <tomasz.golabek@nokia.com>

diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
index a94f0ca..1abd68d 100644 (file)
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
@@ -31,6 +31,20 @@
         [selected]="selectedRows"
         [selectionType]="'cell'"
         >
-        Loading...
+        <ngx-datatable-column [prop]="col.prop" *ngFor="let col of columns">
+            <template let-column="column" ngx-datatable-header-template>
+            <span style="height:10px">
+              <b>{{col.name}}</b>
+            </span>
+                <br/>
+                <input
+                    type='text'
+                    class="datatable-input-filter"
+                    placeholder='Filter column...'
+                    (keyup)='updateColumnFilter($event, col.prop)'
+                />
+            </template>
+        </ngx-datatable-column>
+
     </ngx-datatable>
 </div>
\ No newline at end of file

diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less
index 288cfd9..57da199 100644 (file)
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less
@@ -49,6 +49,20 @@
   .break-all-words();
 }
 
+.datatable-input-filter{
+  &[placeholder] {
+    color: #009fdb;
+    font-style: italic;
+  }
+  height: 23px;
+  margin: 2px auto;
+  border: none;
+  border-bottom: solid 3px #009fdb;
+  border-radius: 15px;
+  color: #009fdb;
+  outline: none;
+}
+
 .datatable-header-cell {
   color: rgb(51, 51, 51);
   font-weight: bold;

diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
index c87fb51..695d782 100644 (file)
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
@@ -40,9 +40,11 @@ export class GenericArtifactBrowserComponent {
 
     columns: ColumnDefinition[];
     rows: any[];
+    originRows: any[];
     selectedRows: any[];
     isLoading: boolean;
     ready: boolean;
+    columnsFilters: Map<string, string>;
 
     constructor(private gabService: GabService) {
     }
@@ -51,6 +53,7 @@ export class GenericArtifactBrowserComponent {
         this.ready = false;
         this.isLoading = true;
         this.columns = [];
+        this.columnsFilters = new Map<string,string>();
         let paths: string[] = this.pathsandnames.map(item => item.path);
         this.gabService.getArtifact(this.artifactid, this.resourceid, paths)
         .subscribe(
@@ -66,9 +69,30 @@ export class GenericArtifactBrowserComponent {
         );
     }
 
+  updateColumnFilter(event, column) {
+    const val = event.target.value.toLowerCase();
+    this.columnsFilters.set(column, val);
+    let temp_rows = [...this.originRows];
+
+    this.columnsFilters.forEach((value: string, key: string) => {
+      temp_rows = this.updateSingleColumnFilter(value, key, temp_rows);
+    });
+
+    // update the rows
+    this.rows = temp_rows
+  }
+
+  private updateSingleColumnFilter(value, column, rows) {
+    return rows.filter(function(obj) {
+      const row = obj[column];
+      return row !== undefined && row.toLowerCase().indexOf(value) !== -1 || !value;
+    });
+  }
+
     private normalizeDataForNgxDatatable(data: [{ [key: string]: string }]) {
         let result: NormalizationResult = this.getNormalizationResult(data, this.pathsandnames);
         this.rows = result.rows;
+        this.originRows = result.rows;
         this.columns = result.columns;
     }
 
@@ -111,6 +135,7 @@ export class GenericArtifactBrowserComponent {
             }
             arrayOfRows.push(row);
         });
+
         return arrayOfRows;
     }
 }