Merge pull request #15 from Quantum-P3/feature/US-18

Feature/us 18

src/main/webapp/app/entities/categoria/list/categoria.component.html

@@ -29,6 +29,12 @@
   </div>
 
   <div class="table-responsive" id="entities" *ngIf="categorias && categorias.length > 0">
+    <form class="ds-form">
+      <div class="input-group">
+        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
+        <input type="text" class="form-control" name="searchString" placeholder="Type to search..." [(ngModel)]="searchString" />
+      </div>
+    </form>
     <table class="table table-striped" aria-describedby="page-heading">
       <thead>
         <tr>
@@ -39,7 +45,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let categoria of categorias; trackBy: trackId" data-cy="entityTable">
+        <tr *ngFor="let categoria of categorias | filter: 'nombre':searchString; trackBy: trackId" data-cy="entityTable">
           <td>
             <a [routerLink]="['/categoria', categoria.id, 'view']">{{ categoria.id }}</a>
           </td>

src/main/webapp/app/entities/categoria/list/categoria.component.ts

@@ -13,8 +13,11 @@ import { CategoriaDeleteDialogComponent } from '../delete/categoria-delete-dialo
 export class CategoriaComponent implements OnInit {
   categorias?: ICategoria[];
   isLoading = false;
+  public searchString: string;
 
-  constructor(protected categoriaService: CategoriaService, protected modalService: NgbModal) {}
+  constructor(protected categoriaService: CategoriaService, protected modalService: NgbModal) {
+    this.searchString = '';
+  }
 
   loadAll(): void {
     this.isLoading = true;
@@ -31,6 +34,7 @@ export class CategoriaComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.searchString = '';
     this.loadAll();
   }
 

src/main/webapp/app/shared/pipes/filter.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform, Injectable } from '@angular/core';
+
+@Pipe({
+  name: 'filter',
+})
+@Injectable()
+export class FilterPipe implements PipeTransform {
+  transform(items: any[], field: string, value: string): any[] {
+    if (!items) {
+      return [];
+    }
+    if (!field || !value) {
+      return items;
+    }
+
+    return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
+  }
+}

src/main/webapp/app/shared/shared.module.ts

@@ -12,6 +12,7 @@ import { FormatMediumDatePipe } from './date/format-medium-date.pipe';
 import { SortByDirective } from './sort/sort-by.directive';
 import { SortDirective } from './sort/sort.directive';
 import { ItemCountComponent } from './pagination/item-count.component';
+import { FilterPipe } from './pipes/filter';
 
 @NgModule({
   imports: [SharedLibsModule],
@@ -27,6 +28,7 @@ import { ItemCountComponent } from './pagination/item-count.component';
     SortByDirective,
     SortDirective,
     ItemCountComponent,
+    FilterPipe,
   ],
   exports: [
     SharedLibsModule,
@@ -41,6 +43,7 @@ import { ItemCountComponent } from './pagination/item-count.component';
     SortByDirective,
     SortDirective,
     ItemCountComponent,
+    FilterPipe,
   ],
 })
 export class SharedModule {}