Revision 60278
Added by Konstantinos Triantafyllou about 3 years ago
searchPaging.component.ts | ||
---|---|---|
2 | 2 |
import {ErrorCodes} from '../../utils/properties/errorCodes'; |
3 | 3 |
|
4 | 4 |
@Component({ |
5 |
selector: 'search-paging',
|
|
6 |
template: `
|
|
7 |
<div class= "paging-hr searchPaging uk-margin-small-bottom"
|
|
5 |
selector: 'search-paging', |
|
6 |
template: ` |
|
7 |
<div class="paging-hr searchPaging uk-margin-small-bottom" |
|
8 | 8 |
*ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"> |
9 | 9 |
<div class="uk-panel uk-margin-small-top uk-grid uk-flex uk-flex-middle"> |
10 |
<div class="uk-width-1-1@s uk-width-1-2@m uk-text-uppercase"
|
|
10 |
<div class="uk-width-1-1@s uk-width-1-2@m uk-text-uppercase" |
|
11 | 11 |
*ngIf="results && searchUtils.totalResults > 0"> |
12 |
{{searchUtils.totalResults|number}}
|
|
12 |
<span class="uk-text-bold">{{searchUtils.totalResults|number}}</span>
|
|
13 | 13 |
<span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span> |
14 |
{{searchUtils.page | number}}
|
|
14 |
<span class="uk-text-bold">{{searchUtils.page | number}}</span>
|
|
15 | 15 |
<span class="uk-text-muted uk-text-uppercase"> of </span> |
16 |
{{(totalPages(searchUtils.totalResults)|number)}}
|
|
16 |
<span class="uk-text-bold">{{(totalPages(searchUtils.totalResults)|number)}}</span>
|
|
17 | 17 |
</div> |
18 |
<div class="uk-width-1-1@s uk-width-1-2@m"
|
|
18 |
<div class="uk-width-1-1@s uk-width-1-2@m" |
|
19 | 19 |
*ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING"> |
20 |
{{oldTotalResults|number}}
|
|
20 |
<span class="uk-text-bold">{{oldTotalResults|number}}</span>
|
|
21 | 21 |
<span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span> |
22 |
{{searchUtils.page | number}}
|
|
22 |
<span class="uk-text-bold">{{searchUtils.page | number}}</span>
|
|
23 | 23 |
<span class="uk-text-muted uk-text-uppercase"> of </span> |
24 |
{{(totalPages(oldTotalResults)|number)}}
|
|
24 |
<span class="uk-text-bold">{{(totalPages(oldTotalResults)|number)}}</span>
|
|
25 | 25 |
</div> |
26 | 26 |
<!--div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > 0"> |
27 | 27 |
{{searchUtils.totalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(searchUtils.totalResults)|number)}} |
... | ... | |
29 | 29 |
<div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING"> |
30 | 30 |
{{oldTotalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(oldTotalResults)|number)}} |
31 | 31 |
</div--> |
32 |
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" *ngIf="results && searchUtils.totalResults > searchUtils.size"> |
|
33 |
<paging [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl" |
|
34 |
[size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" |
|
35 |
[isDisabled]="isDisabled"> |
|
32 |
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" |
|
33 |
*ngIf="results && searchUtils.totalResults > searchUtils.size"> |
|
34 |
<paging [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl" |
|
35 |
[size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues" |
|
36 |
[isDisabled]="isDisabled"> |
|
36 | 37 |
</paging> |
37 | 38 |
</div> |
38 |
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING"> |
|
39 |
<paging [currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl" |
|
40 |
[size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" |
|
41 |
[isDisabled]="isDisabled"> |
|
39 |
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" |
|
40 |
*ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING"> |
|
41 |
<paging [currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl" |
|
42 |
[size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues" |
|
43 |
[isDisabled]="isDisabled"> |
|
42 | 44 |
</paging> |
43 | 45 |
</div> |
44 | 46 |
</div> |
45 | 47 |
</div> |
46 |
`
|
|
48 |
` |
|
47 | 49 |
}) |
48 | 50 |
|
49 | 51 |
export class SearchPagingComponent { |
50 |
@Input() isDisabled: boolean = false; |
|
51 |
@Input() searchUtils; |
|
52 |
@Input() results; |
|
53 |
@Input() baseUrl; |
|
54 |
@Input() type; |
|
55 |
@Input() parameterNames:string[]; |
|
56 |
@Input() parameterValues:string[]; |
|
57 |
|
|
58 |
@Input() loadPaging: boolean = true; |
|
59 |
@Input() oldTotalResults: number = 0; |
|
60 |
|
|
61 |
public totalResults: number = 0; |
|
62 |
public errorCodes:ErrorCodes = new ErrorCodes(); |
|
63 |
|
|
64 |
// @Input() totalResults:number = 0; |
|
65 |
constructor () {} |
|
66 |
|
|
67 |
ngOnInit() { |
|
68 |
// this.totalResults = this.searchUtils.totalResults; |
|
69 |
// if(!this.loadPaging && this.totalResults == 0) { |
|
70 |
// this.totalResults = this.oldTotalResults; |
|
71 |
// } |
|
52 |
@Input() isDisabled: boolean = false; |
|
53 |
@Input() searchUtils; |
|
54 |
@Input() results; |
|
55 |
@Input() baseUrl; |
|
56 |
@Input() type; |
|
57 |
@Input() parameterNames: string[]; |
|
58 |
@Input() parameterValues: string[]; |
|
59 |
|
|
60 |
@Input() loadPaging: boolean = true; |
|
61 |
@Input() oldTotalResults: number = 0; |
|
62 |
|
|
63 |
public totalResults: number = 0; |
|
64 |
public errorCodes: ErrorCodes = new ErrorCodes(); |
|
65 |
|
|
66 |
// @Input() totalResults:number = 0; |
|
67 |
constructor() { |
|
68 |
} |
|
69 |
|
|
70 |
ngOnInit() { |
|
71 |
// this.totalResults = this.searchUtils.totalResults; |
|
72 |
// if(!this.loadPaging && this.totalResults == 0) { |
|
73 |
// this.totalResults = this.oldTotalResults; |
|
74 |
// } |
|
75 |
} |
|
76 |
|
|
77 |
totalPages(totalResults: number): number { |
|
78 |
let totalPages: any = totalResults / (this.searchUtils.size); |
|
79 |
if (!(Number.isInteger(totalPages))) { |
|
80 |
totalPages = (parseInt(totalPages, 10) + 1); |
|
72 | 81 |
} |
73 |
|
|
74 |
totalPages(totalResults: number): number { |
|
75 |
let totalPages:any = totalResults/(this.searchUtils.size); |
|
76 |
if(!(Number.isInteger(totalPages))) { |
|
77 |
totalPages = (parseInt(totalPages, 10) + 1); |
|
78 |
} |
|
79 |
return totalPages; |
|
80 |
} |
|
81 |
|
|
82 |
|
|
82 |
return totalPages; |
|
83 |
} |
|
84 |
|
|
85 |
|
|
83 | 86 |
} |
Also available in: Unified diff
[Library | Trunk]: Paging bold numbers