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,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 | } |
@@ -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 |