Skip to content

Commit

Permalink
patron profile: add sort for title, library and due date
Browse files Browse the repository at this point in the history 
Co-Authored-by: Valeria Granata <valeria@chaw.com>
  • Loading branch information
@vgranata
vgranata and vgranata committed Feb 3, 2022
1 parent 0fa0669 commit f8e0abb
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 37 deletions.
76 changes: 53 additions & 23 deletions ...ic-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,38 +18,68 @@
<section id="loans-section" class="container my-2">
<div class="d-none d-lg-block">
<div class="row bg-dark rounded text-light p-2">
<div class="col-4 pl-0" translate>Title</div>
<div class="col-4" translate>Library</div>
<div class="col-2" translate>Due date</div>
<div class="col-2">&nbsp;</div>
<div class="col-4 pl-0">
<ng-core-sort-list
[options]="[
{value:'title', label:'Title' | translate, icon:'fa-sort-alpha-asc'},
{value:'-title', label:'Title (desc)' | translate, icon:'fa-sort-alpha-desc'}
]"
[useIcon]="true"
(selectChange)="selectingSortCriteria($event)">
</ng-core-sort-list>
</div>
<div class="col-4">
<ng-core-sort-list
[options]="[
{value:'library', label:'Library' | translate, icon:'fa-sort-alpha-asc'},
{value:'-library', label:'Library (desc)' | translate, icon:'fa-sort-alpha-desc'}
]"
[useIcon]="true"
(selectChange)="selectingSortCriteria($event)">
</ng-core-sort-list >
</div>
<div class="col-3">
<ng-core-sort-list
[options]="[
{value:'duedate', label:'Due date' | translate, icon:'fa-sort-numeric-asc'},
{value:'-duedate', label:'Due date (desc)' | translate, icon:'fa-sort-numeric-desc'}
]"
[useIcon]="true"
(selectChange)="selectingSortCriteria($event)">
</ng-core-sort-list>
</div>
<div class="col-1">&nbsp;</div>
</div>
</div>

<table class="table">
<tbody>
<ng-container *ngIf="!loaded; else display">
<div class="row">
<div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
</div>
</ng-container>

<ng-container *ngIf="!loaded; else display">
<div class="row">
<div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
</div>
</ng-container>

<ng-template #display>
<ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
<div id="loans-data">
<public-search-patron-profile-loan
<ng-template #display>
<ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
<div id="loans-data">
<public-search-patron-profile-loan
*ngFor="let loan of records; let index = index"
[ngClass]="{ 'bg-light': !(index % 2) }"
id="request-{{ loan.metadata.pid }}"
class="row my-1 p-2"
[record]="loan">
</public-search-patron-profile-loan>
<shared-search-show-more-pager id="show-more-loans" [paginator]="paginator"></shared-search-show-more-pager>
</div>
</ng-container>
</public-search-patron-profile-loan>
<shared-search-show-more-pager id="show-more-loans" [paginator]="paginator"></shared-search-show-more-pager>
</div>
</ng-container>

<ng-template #noRecord>
<div class="row">
<div class="col mt-2 font-weight-bold" translate>No loan</div>
</div>
<ng-template #noRecord>
<div class="row">
<div class="col mt-2 font-weight-bold" translate>No loan</div>
</div>
</ng-template>
</ng-template>
</ng-template>
</tbody>
</table>
</section>
72 changes: 58 additions & 14 deletions ...blic-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
*/
import { Component, OnDestroy, OnInit } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import moment from 'moment';
import { Error, Record } from '@rero/ng-core';
import { Paginator } from '@rero/shared';
import { Observable, Subscription } from 'rxjs';
Expand All @@ -37,6 +38,9 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
/** loans records */
records = [];

/** all loans records */
allRecords = [];

/** Records paginator */
private _paginator: Paginator;

Expand Down Expand Up @@ -65,31 +69,30 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
);
this._subscription.add(
this._paginator.more$.subscribe((page: number) => {
this._loanQuery(page).subscribe((response: Record) => {
this.records = this.records.concat(response.hits.hits);
});
this.records = this._sortedLoans();
})
);
this._subscription.add(
this._patronProfileMenuService.onChange$.subscribe(() => {
this._initialLoad();
this._initialLoadSorted();
})
);
this._loanQuery(1).subscribe((response: Record) => {
this._initialLoad();
});
this._initialLoadSorted();
}

/** OnDestroy hook */
ngOnDestroy(): void {
this._subscription.unsubscribe();
}

/** Initial records load */
private _initialLoad(): void {
this._loanQuery(1).subscribe((response: Record) => {
this._paginator.setRecordsCount(response.hits.total.value);
this.records = response.hits.hits;
/** Initial records load and sort */
private _initialLoadSorted(): void {
const pgr = this._paginator;
this._loanQueryAll().subscribe((response: Record) => {
this.allRecords = response.hits.hits;
pgr.setRecordsCount(response.hits.total.value);
this.allRecords.sort((a, b) => moment(a.metadata.end_date).diff(moment(b.metadata.end_date)));
this.records = this._sortedLoans();
this.loaded = true;
});
}
Expand All @@ -99,9 +102,50 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
* @param page - number
* @return Observable
*/
private _loanQuery(page: number): Observable<Record | Error> {
private _loanQueryAll(): Observable<Record | Error> {
const patronPid = this._patronProfileMenuService.currentPatron.pid;
return this._loanApiService
.getOnLoan(patronPid, page, this._paginator.getRecordsPerPage());
.getOnLoan(patronPid, undefined, undefined);
}

/** Sorted loans */
private _sortedLoans(): any {
const pgr = this._paginator;
const kPage = '_page';
const kRecordsPerPage = '_recordsPerPage';
const recordsShowed = pgr[kPage] * pgr[kRecordsPerPage];
this.records = this.allRecords.slice(0, recordsShowed);
return this.records;
}

/**
* Allow to sort loans list using a sort criteria
* @param sortCriteria: the srt criteria to use for sorting the list
*/
selectingSortCriteria(sortCriteria: string) {
switch (sortCriteria) {
case 'title':
this.allRecords.sort((a, b) => a.metadata.document.title[0]._text.localeCompare(b.metadata.document.title[0]._text));
break;
case '-title':
this.allRecords.sort((a, b) => a.metadata.document.title[0]._text.localeCompare(b.metadata.document.title[0]._text)).reverse();
break;
case 'library':
this.allRecords.sort((a, b) => a.metadata.library.name.localeCompare(b.metadata.library.name));
break;
case '-library':
this.allRecords.sort((a, b) => a.metadata.library.name.localeCompare(b.metadata.library.name)).reverse();
break;
case 'duedate':
this.allRecords.sort((a, b) => moment(a.metadata.end_date).diff(moment(b.metadata.end_date)));
break;
case '-duedate':
this.allRecords.sort((a, b) => moment(b.metadata.end_date).diff(moment(a.metadata.end_date)));
break;
default:
this.allRecords.sort((a, b) => moment(a.metadata.end_date).diff(moment(b.metadata.end_date)));
}
this._sortedLoans();
}

}
14 changes: 14 additions & 0 deletions projects/public-search/src/app/scss/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,17 @@
.toast-container .ngx-toastr {
width: 450px !important; // override width for all toastr message
}
.custom-select {
border: none;
background-color: transparent;
color: white;
}
select#sort-criteria.custom-select {
background-color:#343a40;
}
.input-group-text {
background-color:#343a40;
border: none;
padding: 1px;
color: white;
}

0 comments on commit f8e0abb

Please sign in to comment.