เสริชข้อมูล active ด้วย ชื่อ team อย่างเดียว

trainee
1 parent 2eac6113
Showing 5 changed files with 34 additions and 31 deletions Show diff stats
src/app/app.module.ts
src/app/dashboard/dashboard.component.html
src/app/dashboard/dashboard.component.spec.ts
src/app/dashboard/dashboard.component.ts
src/app/dashboard/filter.pipe.ts
@@ -14,13 +14,16 @@ import { AppComponent } from &#39;./app.component&#39;;
 import { LayoutComponent } from './layout/layout.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ShortPipe } from './dashboard/short';
+import { FilterPipe } from './dashboard/filter.pipe';
+
 @NgModule({
   declarations: [
     AppComponent,
     ShortPipe,
     LayoutComponent,
-    DashboardComponent
+    DashboardComponent,
+    FilterPipe
   ],
   imports: [
     BrowserModule,
@@ -23,7 +23,11 @@
             <div class="input-icon right" style="margin-left: 820px; margin-top: -20px;" >
               <i class="icon-magnifier">
               </i>
-              <input type="text" placeholder="Search.." class="form-control sbold font">
+              <input 
+              type="text" 
+              placeholder="Search.." 
+              class="form-control sbold font"    
+              [(ngModel)]="FilterSearch">
             </div>
           </h1>
           <hr>
@@ -31,7 +35,7 @@
         </div>
         <div class="panel-body">
           <div class="row">
-            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
+            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: 'team'">
               <a class="dashboard-stat dashboard-stat-v2 red "
                   href="{{item.link}}" 
                   target="_blank"
@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { DashboardComponent } from './dashboard.component';
-
-describe('DashboardComponent', () => {
-  let component: DashboardComponent;
-  let fixture: ComponentFixture<DashboardComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DashboardComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DashboardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -11,6 +11,7 @@ import { async } from &#39;rxjs/internal/scheduler/async&#39;;
 })
 export class DashboardComponent implements OnInit {
+  FilterSearch = '';
   getColorDay(days){
@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+
+  transform(value: any, filterString: string, propName: string): any {
+    if (value.length === 0) {
+      return value;
+    }
+
+    const resultArray = [];
+    for (const item of value) {
+      if (item[propName] === filterString) {
+        resultArray.push(item);
+      }
+      
+    }
+    return resultArray;
+  }
+
+}
	@@ -1,28 +0,0 @@	@@ -1,28 +0,0 @@
1	-/* tslint:disable:no-unused-variable */
2	-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3	-import { By } from '@angular/platform-browser';
4	-import { DebugElement } from '@angular/core';
5	-
6	-import { DashboardComponent } from './dashboard.component';
7	-
8	-describe('DashboardComponent', () => {
9	- let component: DashboardComponent;
10	- let fixture: ComponentFixture<DashboardComponent>;
11	-
12	- beforeEach(async(() => {
13	- TestBed.configureTestingModule({
14	- declarations: [ DashboardComponent ]
15	- })
16	- .compileComponents();
17	- }));
18	-
19	- beforeEach(() => {
20	- fixture = TestBed.createComponent(DashboardComponent);
21	- component = fixture.componentInstance;
22	- fixture.detectChanges();
23	- });
24	-
25	- it('should create', () => {
26	- expect(component).toBeTruthy();
27	- });
28	-});
	@@ -11,6 +11,7 @@ import { async } from 'rxjs/internal/scheduler/async';		@@ -11,6 +11,7 @@ import { async } from 'rxjs/internal/scheduler/async';
11	})	11	})
12	export class DashboardComponent implements OnInit {	12	export class DashboardComponent implements OnInit {
13		13
		14	+ FilterSearch = '';
14		15
15		16
16	getColorDay(days){	17	getColorDay(days){
@@ -0,0 +1,23 @@		@@ -0,0 +1,23 @@
	1	+import { Pipe, PipeTransform } from '@angular/core';
	2	+
	3	+@Pipe({
	4	+ name: 'filter'
	5	+})
	6	+export class FilterPipe implements PipeTransform {
	7	+
	8	+ transform(value: any, filterString: string, propName: string): any {
	9	+ if (value.length === 0) {
	10	+ return value;
	11	+ }
	12	+
	13	+ const resultArray = [];
	14	+ for (const item of value) {
	15	+ if (item[propName] === filterString) {
	16	+ resultArray.push(item);
	17	+ }
	18	+
	19	+ }
	20	+ return resultArray;
	21	+ }
	22	+
	23	+}