เสริชข้อมูล 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;
+  }
+
+}
...	...	@@ -14,13 +14,16 @@ import { AppComponent } from './app.component';
14	14	import { LayoutComponent } from './layout/layout.component';
15	15	import { DashboardComponent } from './dashboard/dashboard.component';
16	16	import { ShortPipe } from './dashboard/short';
	17	+import { FilterPipe } from './dashboard/filter.pipe';
	18	+
17	19
18	20	@NgModule({
19	21	declarations: [
20	22	AppComponent,
21	23	ShortPipe,
22	24	LayoutComponent,
23		- DashboardComponent
	25	+ DashboardComponent,
	26	+ FilterPipe
24	27	],
25	28	imports: [
26	29	BrowserModule,
...	...
...	...	@@ -23,7 +23,11 @@
23	23	<div class="input-icon right" style="margin-left: 820px; margin-top: -20px;" >
24	24	<i class="icon-magnifier">
25	25	</i>
26		- <input type="text" placeholder="Search.." class="form-control sbold font">
	26	+ <input
	27	+ type="text"
	28	+ placeholder="Search.."
	29	+ class="form-control sbold font"
	30	+ [(ngModel)]="FilterSearch">
27	31	</div>
28	32	</h1>
29	33	<hr>
...	...	@@ -31,7 +35,7 @@
31	35	</div>
32	36	<div class="panel-body">
33	37	<div class="row">
34		- <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
	38	+ <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData \| filter:FilterSearch: 'team'">
35	39	<a class="dashboard-stat dashboard-stat-v2 red "
36	40	href="{{item.link}}"
37	41	target="_blank"
...	...
...	...	@@ -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	11	})
12	12	export class DashboardComponent implements OnInit {
13	13
	14	+ FilterSearch = '';
14	15
15	16
16	17	getColorDay(days){
...	...
...	...	@@ -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	+}
...	...