diff options
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; } } |