Commit 16d48521c31ba57e9c0b9b077cb2f0c124f4498d
1 parent
2d0f0ca8
Exists in
master
search ได้แค่อันเดียว
Showing
5 changed files
with
88 additions
and
20 deletions
Show diff stats
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 | } | ... | ... |
... | ... | @@ -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 | ... | ... |