aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app
diff options
context:
space:
mode:
authorTomasz Golabek <tomasz.golabek@nokia.com>2019-03-29 08:31:43 +0100
committerOfir Sonsino <ofir.sonsino@intl.att.com>2019-04-15 15:49:57 +0000
commita22260fc6631dfa681d532a91fcb1dcfa1cc4e89 (patch)
treeaec2248c551c607755d01d9dabaa9f7355c2af68 /catalog-ui/src/app
parentfe4afd47955705bb377583649cb53e2cf4508493 (diff)
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>
Diffstat (limited to 'catalog-ui/src/app')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html16
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less14
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts25
3 files changed, 54 insertions, 1 deletions
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 a94f0cafa0..1abd68db50 100644
--- 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 288cfd9619..57da199ef2 100644
--- 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 c87fb51162..695d782a15 100644
--- 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;
}
}