openaire-library/utils/pagingFormatter.component.ts

75 lines
3.7 KiB
TypeScript
Raw Normal View History

import {Component, Input} from '@angular/core';
import {RouterHelper} from './routerHelper.class';
import {EnvProperties} from './properties/env-properties';
import {properties} from "../../../environments/environment";
@Component({
selector: 'paging',
template: `
<ul *ngIf="currentPage > 0 && currentPage <= getTotalPages()"
[class.uk-disabled]="isDisabled" [class.uk-invisible]="getTotalPages() < 2" class="uk-pagination uk-margin-remove" [ngClass]="'uk-flex-' + position">
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
<li [class.uk-invisible]="currentPage <= 1">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
[routerLink]=baseUrl aria-label="Previous">
<icon name="chevron_left" ratio="1.2" [flex]="true" customClass="uk-pagination-previous"></icon>
</a>
</li>
<li *ngIf=" currentPage -2 > 0"><a
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 2))"
[routerLink]=baseUrl>{{(currentPage - 2) | number}}</a></li>
<li *ngIf=" currentPage -1 > 0 "><a
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))"
[routerLink]=baseUrl>{{(currentPage - 1) | number}}</a></li>
<li class="uk-active"><span>{{currentPage | number}}</span></li>
<li *ngIf=" currentPage +1 <= getTotalPages() "><a
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +1))"
[routerLink]=baseUrl>{{(currentPage + 1) | number}}</a></li>
<li *ngIf=" currentPage +2 <= getTotalPages() "><a
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +2))"
[routerLink]=baseUrl>{{(currentPage + 2) | number}}</a></li>
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) " class="uk-visible@l"><a
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +3))"
[routerLink]=baseUrl>{{(currentPage + 3) | number}}</a></li>
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) " class="uk-visible@l"><a
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))"
[routerLink]=baseUrl>{{(currentPage + 4) | number}}</a></li>
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
<li [class.uk-invisible]="getTotalPages() <= currentPage">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))"
[routerLink]=baseUrl aria-label="Next">
<icon name="chevron_right" ratio="1.2" [flex]="true" customClass="uk-pagination-next"></icon>
</a>
</li>
</ul>
`
})
export class PagingFormatter {
@Input() isDisabled: boolean = false;
@Input() currentPage: number = 1;
@Input() size: number = 10;
@Input() totalResults: number = 10;
@Input() baseUrl: string = "";
@Input() parameterNames: string[];
@Input() parameterValues: string[];
@Input() position: "left" | "center" | "right" = "right";
private readonly limit: number;
properties: EnvProperties = properties;
public routerHelper: RouterHelper = new RouterHelper();
constructor() {
this.limit = this.properties.pagingLimit;
}
getTotalPages() {
let total: number;
var i: number = parseInt('' + (this.totalResults / this.size));
total = (((this.totalResults / this.size) == i) ? i : (i + 1));
if ((this.currentPage == this.limit) && (total > this.limit)) {
total = this.limit;
} else if ((this.currentPage > this.limit) && (total > this.limit)) {
total = this.currentPage;
}
return total;
}
}