added material search

src/app/app.module.ts

@@ -34,6 +34,7 @@ import { SizePipe } from './size.pipe';
 import { DocumentationArchitectureComponent } from './documentation/documentation-architecture/documentation-architecture.component';
 import { MaterialsComponent } from './materials/materials.component';
 import { MaterialComponent } from './material/material.component';
+import { DocumentationModelsComponent } from './documentation/documentation-models/documentation-models.component';
 
 @NgModule({
   declarations: [
@@ -60,7 +61,8 @@ import { MaterialComponent } from './material/material.component';
     SizePipe,
     DocumentationArchitectureComponent,
     MaterialsComponent,
-    MaterialComponent
+    MaterialComponent,
+    DocumentationModelsComponent
   ],
   imports: [
     LocalStorageModule.forRoot({

src/app/documentation/documentation-models/documentation-models.component.html

@@ -0,0 +1 @@
+<p>documentation-models works!</p>

src/app/documentation/documentation-models/documentation-models.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentationModelsComponent } from './documentation-models.component';
+
+describe('DocumentationModelsComponent', () => {
+  let component: DocumentationModelsComponent;
+  let fixture: ComponentFixture<DocumentationModelsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DocumentationModelsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentationModelsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/documentation/documentation-models/documentation-models.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-documentation-models',
+  templateUrl: './documentation-models.component.html',
+  styleUrls: ['./documentation-models.component.scss']
+})
+export class DocumentationModelsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/materials/materials.component.html

@@ -26,6 +26,11 @@
   </rb-form-checkbox>
 </div>
 
+<div class="material-search space-right">
+  <rb-form-input label="search" [(ngModel)]="materialSearch" icon="close"></rb-form-input>
+  <span class="rb-ic rb-ic-close clickable" (click)="materialSearch = ''"></span>
+</div>
+
 <ng-container *ngTemplateOutlet="paging"></ng-container>
 
 <rb-table ellipsis scrollTop>
@@ -40,7 +45,8 @@
     <th>Numbers</th>
     <th></th>
   </tr>
-  <tr *ngFor="let material of (materials || []).slice((page - 1) * pageSize, page * pageSize); index as i">
+  <tr *ngFor="let material of (materials || []).filter(materialFilter(materialSearch))
+    .slice((page - 1) * pageSize, page * pageSize); index as i">
     <td *ngIf="sampleSelect">
       <rb-form-checkbox *ngIf="material.status !== 'deleted'" [name]="'validate-' + i"
                         [(ngModel)]="material.selected">

src/app/materials/materials.component.scss

@@ -49,3 +49,15 @@
     float: right;
   }
 }
+
+.material-search {
+  width: 300px;
+  float: left;
+  position: relative;
+
+  span {
+    position: absolute;
+    right: 5px;
+    top: 24px;
+  }
+}

src/app/materials/materials.component.ts

@@ -15,6 +15,7 @@ export class MaterialsComponent implements OnInit {
   materials: MaterialModel[] = [];
   templateKeys: {key: string, label: string}[] = [];
   materialStatus = {validated: true, new: true, deleted: false};
+  materialSearch = '';
   sampleSelect = false;
 
   page = 1;
@@ -89,4 +90,8 @@ export class MaterialsComponent implements OnInit {
     return string[0].toUpperCase() + string.slice(1);
   }
 
+  materialFilter(ms) {
+    return e => e.name.indexOf(ms) >= 0;
+  }
+
 }