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 16 import { ShortPipe } from './dashboard/short';
17 17 import { FilterPipe } from './dashboard/filter.pipe';
18 18 import { PontPipe } from './dashboard/font';
  19 +import { TextShortPipe } from './dashboard/texrshort';
19 20  
20 21  
21 22 @NgModule({
... ... @@ -23,6 +24,7 @@ import { PontPipe } from './dashboard/font';
23 24 AppComponent,
24 25 ShortPipe,
25 26 PontPipe,
  27 + TextShortPipe,
26 28 LayoutComponent,
27 29 DashboardComponent,
28 30 FilterPipe
... ...
src/app/dashboard/dashboard.component.html
... ... @@ -35,7 +35,6 @@
35 35 <h1 class="icon-bubble font-green-sharp">
36 36 <span class="caption-subject font-green-sharp sbold font"> Active</span>
37 37 </h1>
38   -
39 38 <div class="input-group" style="float: right; margin-top: 11px;">
40 39 <div class="input-icon right">
41 40 <i class="icon-magnifier">
... ... @@ -49,11 +48,11 @@
49 48 </div>
50 49 <div class="panel-body">
51 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 52 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
54 53 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
55 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 56 <div class="visual">
58 57 <i class="fa fa-comments"></i>
59 58 </div>
... ... @@ -108,7 +107,7 @@
108 107 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
109 108 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
110 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 111 <div class="visual">
113 112 <i class="fa fa-comments"></i>
114 113 </div>
... ... @@ -665,7 +664,7 @@
665 664 <h1 class="icon-bubble font-green-sharp">
666 665 <span class="caption-subject font-green-sharp sbold font"> Active</span>
667 666 </h1>
668   -
  667 + <button *ngFor="let name of ButtonValue" (click)="getButton(name.valueN)" >{{ name.name }}</button>
669 668 <div class="input-group" style="float: right; margin-top: 11px;">
670 669 <div class="input-icon right">
671 670 <i class="icon-magnifier">
... ... @@ -683,14 +682,14 @@
683 682 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
684 683 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
685 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 686 <div class="visual">
688 687 <i class="fa fa-comments"></i>
689 688 </div>
690 689 <table>
691 690 <tr>
692 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 693 <div style="text-align: right; color: black;">{{item.STATUS}}</div>
695 694 <div class="number" style=" color: black; display: block; text-align: right; margin-top: -7px;">
696 695 <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
... ... @@ -738,7 +737,7 @@
738 737 <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
739 738 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
740 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 741 <div class="visual">
743 742 <i class="fa fa-comments"></i>
744 743 </div>
... ...
src/app/dashboard/dashboard.component.ts
... ... @@ -13,8 +13,12 @@ export class DashboardComponent implements OnInit {
13 13  
14 14 FilterSearch = '';
15 15 FilterSearchOnHold = '';
  16 + FilterSearchButton = '';
16 17  
  18 +
17 19  
  20 +
  21 +
18 22 getColorDay(days){
19 23 console.log(days)
20 24  
... ... @@ -66,6 +70,21 @@ export class DashboardComponent implements OnInit {
66 70 resultNum7:number = 0;
67 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 89 async ngOnInit() {
71 90 //----------------------------1------------------------
... ... @@ -127,6 +146,8 @@ export class DashboardComponent implements OnInit {
127 146 await this.getDataOnHold();
128 147 }, 600000);
129 148  
  149 +
  150 +
130 151 //----------------------------2------------------------
131 152 // Active
132 153 try {
... ... @@ -436,7 +457,9 @@ export class DashboardComponent implements OnInit {
436 457 this.resultData7[i].link = this._common.decodeURI(this.resultData7[i].link);
437 458 this.resultData7[i].birth_date = this._common.convertDate(this.resultData7[i].birth_date);
438 459 this.resultNum7 = this.resultData7.length;
  460 +
439 461 }
  462 + this.Show = Object.assign(this.resultData7);
440 463 } else {
441 464 this.resultData7 = [];
442 465 }
... ... @@ -478,6 +501,33 @@ export class DashboardComponent implements OnInit {
478 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 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 7  
8 8 transform(value: any, filterString: string, propName: any): any {
9 9 console.log('propName: ', propName);
  10 +
10 11 if (value.length === 0) {
11 12 return value;
12 13 }
... ... @@ -17,18 +18,18 @@ export class FilterPipe implements PipeTransform {
17 18  
18 19 var st = '';
19 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 33 if(item['type']){
33 34 st += item['type'].toLowerCase();
34 35 }
... ...
src/app/dashboard/texrshort.ts 0 → 100644
... ... @@ -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 17 \ No newline at end of file
... ...