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 |