Commit 16d48521c31ba57e9c0b9b077cb2f0c124f4498d

Authored by trainee
1 parent 2d0f0ca8
Exists in master

search ได้แค่อันเดียว

src/app/app.module.ts
@@ -16,6 +16,7 @@ import { DashboardComponent } from './dashboard/dashboard.component'; @@ -16,6 +16,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
16 import { ShortPipe } from './dashboard/short'; 16 import { ShortPipe } from './dashboard/short';
17 import { FilterPipe } from './dashboard/filter.pipe'; 17 import { FilterPipe } from './dashboard/filter.pipe';
18 import { PontPipe } from './dashboard/font'; 18 import { PontPipe } from './dashboard/font';
  19 +import { TextShortPipe } from './dashboard/texrshort';
19 20
20 21
21 @NgModule({ 22 @NgModule({
@@ -23,6 +24,7 @@ import { PontPipe } from './dashboard/font'; @@ -23,6 +24,7 @@ import { PontPipe } from './dashboard/font';
23 AppComponent, 24 AppComponent,
24 ShortPipe, 25 ShortPipe,
25 PontPipe, 26 PontPipe,
  27 + TextShortPipe,
26 LayoutComponent, 28 LayoutComponent,
27 DashboardComponent, 29 DashboardComponent,
28 FilterPipe 30 FilterPipe
src/app/dashboard/dashboard.component.html
@@ -35,7 +35,6 @@ @@ -35,7 +35,6 @@
35 <h1 class="icon-bubble font-green-sharp"> 35 <h1 class="icon-bubble font-green-sharp">
36 <span class="caption-subject font-green-sharp sbold font"> Active</span> 36 <span class="caption-subject font-green-sharp sbold font"> Active</span>
37 </h1> 37 </h1>
38 -  
39 <div class="input-group" style="float: right; margin-top: 11px;"> 38 <div class="input-group" style="float: right; margin-top: 11px;">
40 <div class="input-icon right"> 39 <div class="input-icon right">
41 <i class="icon-magnifier"> 40 <i class="icon-magnifier">
@@ -49,11 +48,11 @@ @@ -49,11 +48,11 @@
49 </div> 48 </div>
50 <div class="panel-body"> 49 <div class="panel-body">
51 <div class="row"> 50 <div class="row">
52 - <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' "> 51 + <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' | filter:FilterSearchButton: 'name.valueN' " >
53 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}"> 52 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
54 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> --> 53 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
55 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> --> 54 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
56 - <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 22px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div> 55 + <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
57 <div class="visual"> 56 <div class="visual">
58 <i class="fa fa-comments"></i> 57 <i class="fa fa-comments"></i>
59 </div> 58 </div>
@@ -108,7 +107,7 @@ @@ -108,7 +107,7 @@
108 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}"> 107 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
109 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> --> 108 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
110 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> --> 109 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
111 - <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 22px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div> 110 + <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
112 <div class="visual"> 111 <div class="visual">
113 <i class="fa fa-comments"></i> 112 <i class="fa fa-comments"></i>
114 </div> 113 </div>
@@ -665,7 +664,7 @@ @@ -665,7 +664,7 @@
665 <h1 class="icon-bubble font-green-sharp"> 664 <h1 class="icon-bubble font-green-sharp">
666 <span class="caption-subject font-green-sharp sbold font"> Active</span> 665 <span class="caption-subject font-green-sharp sbold font"> Active</span>
667 </h1> 666 </h1>
668 - 667 + <button *ngFor="let name of ButtonValue" (click)="getButton(name.valueN)" >{{ name.name }}</button>
669 <div class="input-group" style="float: right; margin-top: 11px;"> 668 <div class="input-group" style="float: right; margin-top: 11px;">
670 <div class="input-icon right"> 669 <div class="input-icon right">
671 <i class="icon-magnifier"> 670 <i class="icon-magnifier">
@@ -683,14 +682,14 @@ @@ -683,14 +682,14 @@
683 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}"> 682 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
684 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> --> 683 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
685 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> --> 684 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
686 - <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 22px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div> 685 + <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
687 <div class="visual"> 686 <div class="visual">
688 <i class="fa fa-comments"></i> 687 <i class="fa fa-comments"></i>
689 </div> 688 </div>
690 <table> 689 <table>
691 <tr> 690 <tr>
692 <div class="details" style="width: calc(100% - 50px);"> 691 <div class="details" style="width: calc(100% - 50px);">
693 - <div style="text-align: right; margin-top: -60px; color: black;">{{item.type}}</div> 692 + <div style="text-align: right; margin-top: -60px; color: black;">{{item.type | textshort}}</div>
694 <div style="text-align: right; color: black;">{{item.STATUS}}</div> 693 <div style="text-align: right; color: black;">{{item.STATUS}}</div>
695 <div class="number" style=" color: black; display: block; text-align: right; margin-top: -7px;"> 694 <div class="number" style=" color: black; display: block; text-align: right; margin-top: -7px;">
696 <span data-counter="counterup" data-value="">{{item.custgroupName}}</span> 695 <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
@@ -738,7 +737,7 @@ @@ -738,7 +737,7 @@
738 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}"> 737 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
739 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> --> 738 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
740 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> --> 739 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
741 - <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 22px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div> 740 + <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
742 <div class="visual"> 741 <div class="visual">
743 <i class="fa fa-comments"></i> 742 <i class="fa fa-comments"></i>
744 </div> 743 </div>
src/app/dashboard/dashboard.component.ts
@@ -13,8 +13,12 @@ export class DashboardComponent implements OnInit { @@ -13,8 +13,12 @@ export class DashboardComponent implements OnInit {
13 13
14 FilterSearch = ''; 14 FilterSearch = '';
15 FilterSearchOnHold = ''; 15 FilterSearchOnHold = '';
  16 + FilterSearchButton = '';
16 17
  18 +
17 19
  20 +
  21 +
18 getColorDay(days){ 22 getColorDay(days){
19 console.log(days) 23 console.log(days)
20 24
@@ -66,6 +70,21 @@ export class DashboardComponent implements OnInit { @@ -66,6 +70,21 @@ export class DashboardComponent implements OnInit {
66 resultNum7:number = 0; 70 resultNum7:number = 0;
67 resultDataOnHold7: any; 71 resultDataOnHold7: any;
68 72
  73 + ButtonValue = [
  74 + {
  75 + name : 'apd',
  76 + valueN : 'apd'
  77 + },
  78 + {
  79 + name : 'ade',
  80 + valueN : 'ade'
  81 + },
  82 + ];
  83 +
  84 + Show: any;
  85 +
  86 +
  87 +
69 88
70 async ngOnInit() { 89 async ngOnInit() {
71 //----------------------------1------------------------ 90 //----------------------------1------------------------
@@ -127,6 +146,8 @@ export class DashboardComponent implements OnInit { @@ -127,6 +146,8 @@ export class DashboardComponent implements OnInit {
127 await this.getDataOnHold(); 146 await this.getDataOnHold();
128 }, 600000); 147 }, 600000);
129 148
  149 +
  150 +
130 //----------------------------2------------------------ 151 //----------------------------2------------------------
131 // Active 152 // Active
132 try { 153 try {
@@ -436,7 +457,9 @@ export class DashboardComponent implements OnInit { @@ -436,7 +457,9 @@ export class DashboardComponent implements OnInit {
436 this.resultData7[i].link = this._common.decodeURI(this.resultData7[i].link); 457 this.resultData7[i].link = this._common.decodeURI(this.resultData7[i].link);
437 this.resultData7[i].birth_date = this._common.convertDate(this.resultData7[i].birth_date); 458 this.resultData7[i].birth_date = this._common.convertDate(this.resultData7[i].birth_date);
438 this.resultNum7 = this.resultData7.length; 459 this.resultNum7 = this.resultData7.length;
  460 +
439 } 461 }
  462 + this.Show = Object.assign(this.resultData7);
440 } else { 463 } else {
441 this.resultData7 = []; 464 this.resultData7 = [];
442 } 465 }
@@ -478,6 +501,33 @@ export class DashboardComponent implements OnInit { @@ -478,6 +501,33 @@ export class DashboardComponent implements OnInit {
478 }, 600000); 501 }, 600000);
479 } 502 }
480 503
  504 + getButton(valueN){
  505 + console.log(valueN);
  506 +
  507 + if (this.resultData7.length === 0) {
  508 + return this.resultData7;
  509 + }
  510 +
  511 + const resultArray = [];
  512 + for (const item of this.resultData7) {
  513 + console.log('item: ', item);
  514 +
  515 + var st = '';
  516 + // st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ;
  517 + if(item['type']){
  518 + st = item['type'].toLowerCase();
  519 + }
  520 +
  521 + var string2 = valueN.toLowerCase();
  522 + if (st.indexOf(string2) > -1) {
  523 + console.log(st);
  524 + resultArray.push(item);
  525 + }
  526 +
  527 + }
  528 + this.resultData7 = resultArray;
  529 +
  530 + }
481 /////////////Get data come to use////////////////////// 531 /////////////Get data come to use//////////////////////
482 532
483 533
src/app/dashboard/filter.pipe.ts
@@ -7,6 +7,7 @@ export class FilterPipe implements PipeTransform { @@ -7,6 +7,7 @@ export class FilterPipe implements PipeTransform {
7 7
8 transform(value: any, filterString: string, propName: any): any { 8 transform(value: any, filterString: string, propName: any): any {
9 console.log('propName: ', propName); 9 console.log('propName: ', propName);
  10 +
10 if (value.length === 0) { 11 if (value.length === 0) {
11 return value; 12 return value;
12 } 13 }
@@ -17,18 +18,18 @@ export class FilterPipe implements PipeTransform { @@ -17,18 +18,18 @@ export class FilterPipe implements PipeTransform {
17 18
18 var st = ''; 19 var st = '';
19 // st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ; 20 // st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ;
20 - if(item['team']){  
21 - st += item['team'].toLowerCase();  
22 - }  
23 - if(item['COMMENT']){  
24 - st += item['COMMENT'].toLowerCase();  
25 - }  
26 - if(item['custgroupName']){  
27 - st += item['custgroupName'].toLowerCase();  
28 - }  
29 - if(item['STATUS']){  
30 - st += item['STATUS'].toLowerCase();  
31 - } 21 + // if(item['team']){
  22 + // st += item['team'].toLowerCase();
  23 + // }
  24 + // if(item['COMMENT']){
  25 + // st += item['COMMENT'].toLowerCase();
  26 + // }
  27 + // if(item['custgroupName']){
  28 + // st += item['custgroupName'].toLowerCase();
  29 + // }
  30 + // if(item['STATUS']){
  31 + // st += item['STATUS'].toLowerCase();
  32 + // }
32 if(item['type']){ 33 if(item['type']){
33 st += item['type'].toLowerCase(); 34 st += item['type'].toLowerCase();
34 } 35 }
src/app/dashboard/texrshort.ts 0 → 100644
@@ -0,0 +1,16 @@ @@ -0,0 +1,16 @@
  1 +import { PipeTransform, Pipe } from "@angular/core";
  2 +
  3 +@Pipe ({
  4 + name: 'textshort'
  5 +})
  6 +export class TextShortPipe implements PipeTransform {
  7 + transform(value: string): string {
  8 + if(value === null){
  9 + value = '';
  10 + }
  11 + if (value.length > 28) {
  12 + return value.substr(0, 28) + ' ...';
  13 + }
  14 + return value;
  15 + }
  16 +}
0 \ No newline at end of file 17 \ No newline at end of file