742cfd3293
* Implemented a basic jump bar for the library view. This currently just interacts with existing pagination controls and is not inlined with infinite scroll yet. This is a first pass implementation. * Refactored time estimates into the reading service. * Cleaned up when the jump bar is shown to mimic pagination controls * Cleanup up code in reader service. * Scroll to card when selecting a jump key that is shown on the current page. * Ensure estimated times always has the smaller number on left hand side. * Fixed a bug with a missing vertical rule * Fixed an off by 1 pixel for search overlay
99 lines
No EOL
4.5 KiB
HTML
99 lines
No EOL
4.5 KiB
HTML
|
|
<div class="row mt-2 g-0 pb-2" *ngIf="header !== undefined && header.length > 0">
|
|
<div class="col me-auto">
|
|
<h2 style="display: inline-block">
|
|
<span *ngIf="actions.length > 0" class="">
|
|
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>
|
|
</span>
|
|
<span *ngIf="header !== undefined && header.length > 0">
|
|
{{header}}
|
|
<span class="badge bg-primary rounded-pill" attr.aria-label="{{pagination.totalItems}} total items" *ngIf="pagination != undefined">{{pagination.totalItems}}</span>
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<app-metadata-filter [filterSettings]="filterSettings" [filterOpen]="filterOpen" (applyFilter)="applyMetadataFilter($event)"></app-metadata-filter>
|
|
|
|
<ng-container [ngTemplateOutlet]="paginationTemplate" [ngTemplateOutletContext]="{ id: 'top' }"></ng-container>
|
|
|
|
<div>
|
|
<ng-container [ngTemplateOutlet]="cardTemplate"></ng-container>
|
|
</div>
|
|
|
|
<ng-container [ngTemplateOutlet]="paginationTemplate" [ngTemplateOutletContext]="{ id: 'bottom' }"></ng-container>
|
|
|
|
<ng-template #cardTemplate>
|
|
|
|
<div class="card-container row g-0 mt-3 mb-3" >
|
|
<div class="card col-auto mt-2 mb-2" *ngFor="let item of items; trackBy:trackByIdentity; index as i" id="jumpbar-index--{{i}}" [attr.jumpbar-index]="i">
|
|
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
|
|
</div>
|
|
</div>
|
|
<p *ngIf="items.length === 0 && !isLoading">
|
|
<ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
|
|
</p>
|
|
</ng-template>
|
|
|
|
<ng-template #paginationTemplate let-id="id">
|
|
<ng-container *ngIf="pagination && items.length > 0 && id == 'bottom' && pagination.totalPages > 1 ">
|
|
<div class="jump-bar d-flex justify-content-center">
|
|
<button *ngFor="let jumpKey of jumpBarKeys" class="btn btn-link" (click)="scrollTo(jumpKey)">
|
|
{{jumpKey.title}}
|
|
</button>
|
|
</div>
|
|
</ng-container>
|
|
<div class="d-flex justify-content-center mb-0" *ngIf="pagination && items.length > 0">
|
|
<ngb-pagination
|
|
*ngIf="pagination.totalPages > 1"
|
|
[maxSize]="8"
|
|
[rotate]="true"
|
|
[ellipses]="false"
|
|
[(page)]="pagination.currentPage"
|
|
[pageSize]="pagination.itemsPerPage"
|
|
(pageChange)="onPageChange($event)"
|
|
[collectionSize]="pagination.totalItems">
|
|
|
|
<ng-template ngbPaginationPages let-page let-pages="pages" *ngIf="pagination.totalItems / pagination.itemsPerPage > 20">
|
|
<li class="ngb-custom-pages-item" *ngIf="pagination.totalPages > 1">
|
|
<div class="d-flex flex-nowrap px-2">
|
|
<label
|
|
id="paginationInputLabel-{{id}}"
|
|
for="paginationInput-{{id}}"
|
|
class="col-form-label me-2 ms-1 form-label"
|
|
>Page</label>
|
|
<input #i
|
|
type="text"
|
|
inputmode="numeric"
|
|
pattern="[0-9]*"
|
|
class="form-control custom-pages-input"
|
|
id="paginationInput-{{id}}"
|
|
[value]="page"
|
|
(keyup.enter)="selectPageStr(i.value)"
|
|
(blur)="selectPageStr(i.value)"
|
|
(input)="formatInput($any($event).target)"
|
|
attr.aria-labelledby="paginationInputLabel-{{id}} paginationDescription-{{id}}"
|
|
[ngStyle]="{width: (0.5 + pagination.currentPage + '').length + 'rem'} "
|
|
/>
|
|
<span id="paginationDescription-{{id}}" class="col-form-label text-nowrap px-2">
|
|
of {{pagination.totalPages}}</span>
|
|
</div>
|
|
</li>
|
|
</ng-template>
|
|
|
|
</ngb-pagination>
|
|
</div>
|
|
<ng-container *ngIf="pagination && items.length > 0 && id == 'top' && pagination.totalPages > 1">
|
|
<div class="jump-bar d-flex justify-content-center">
|
|
<button *ngFor="let jumpKey of jumpBarKeys" class="btn btn-link" (click)="scrollTo(jumpKey)">
|
|
{{jumpKey.title}}
|
|
</button>
|
|
</div>
|
|
</ng-container>
|
|
</ng-template>
|
|
|
|
<div class="mx-auto" *ngIf="isLoading" style="width: 200px;">
|
|
<div class="spinner-border text-secondary loading" role="status">
|
|
<span class="invisible">Loading...</span>
|
|
</div>
|
|
</div> |