filter

frontends/dnet-is-application/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { FilterPipe } from './pipes/filter.pipe';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule,ReactiveFormsModule } from '@angular/forms';
@@ -31,6 +31,7 @@ import { ResourcesComponent, ResContentDialog, ResCreateNewDialog, ResMetadataDi
 @NgModule({
   declarations: [
     AppComponent,
+    FilterPipe,
     MainMenuPanelsComponent,
     MainMenuTreeComponent,
     InfoComponent,

frontends/dnet-is-application/src/app/pipes/filter.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'searchFilter' })
+export class FilterPipe implements PipeTransform {
+  /**
+   * Pipe filters the list of elements based on the search text provided
+   *
+   * @param items list of elements to search in
+   * @param searchText search string
+   * @returns list of elements filtered by search text or []
+   */
+
+  transform(items: any[], searchText: string): any[] {
+    if (!items) return [];
+    if (!searchText) return items;
+
+    searchText = searchText.trim().toLocaleLowerCase();
+
+    return items.filter(obj => {
+      return Object.keys(obj).reduce((acc, curr) => {
+          return acc || String(obj[curr]).toLowerCase().includes(searchText);
+      }, false);
+    });
+  }
+}

frontends/dnet-is-application/src/app/resources/resources.component.html

@@ -3,11 +3,12 @@
 <button mat-stroked-button color="primary" (click)="openNewDialog()">create a new resource</button>
 
 <mat-form-field style="width: 100%; margin-top: 10px;">
-    <mat-label>Filter</mat-label>
-    <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
+    <mat-label><b>Filter</b> (Total: {{(resources | searchFilter: searchText).length}})</mat-label>
+    <input matInput [(ngModel)]="searchText"  placeholder="Filter..."  autofocus />
 </mat-form-field>
 
-<mat-card class="example-card" *ngFor="let r of resources" style="margin-top: 10px;">
+
+<mat-card class="example-card" *ngFor="let r of resources | searchFilter: searchText" style="margin-top: 10px;">
     <mat-card-header>
       <mat-card-title title="{{r.id}}">{{r.name}} <span class="badge-label badge-info" style="font-size: 0.7em;">{{type.contentType}}</span></mat-card-title>
     </mat-card-header>

frontends/dnet-is-application/src/app/resources/resources.component.ts

@@ -20,6 +20,7 @@ export class ResourcesComponent implements OnInit {
   typeId:string = '';
   type:ResourceType = { id: '', name: '', contentType: '', count: 0, simple: true };
   resources:SimpleResource[] = [];
+  searchText:string = '';
 
   constructor(public service: ISService, public route: ActivatedRoute, public newDialog: MatDialog, public contentDialog: MatDialog, public metadataDialog: MatDialog) {
   }
@@ -47,11 +48,6 @@ export class ResourcesComponent implements OnInit {
     }
   }
 
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
-    //this.historyDatasource.filter = filterValue;
-  }
-
   openNewDialog(): void {
     const dialogRef = this.newDialog.open(ResCreateNewDialog, {
       data: {