patron profile: add sort of due date in loans

Co-Authored-by: Valeria Granata <valeria@chaw.com>
rero · Mar 31, 2022 · de05524 · de05524
1 parent 9328684
commit de05524
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 34 deletions.
diff --git a/projects/public-search/src/app/api/loan-api.service.ts b/projects/public-search/src/app/api/loan-api.service.ts
@@ -48,12 +48,13 @@ export class LoanApiService extends BaseApi {
    */
   getOnLoan(
     patronPid: string, page: number,
-    itemsPerPage: number = 10, headers = BaseApi.reroJsonheaders
+    itemsPerPage: number = 20, headers = BaseApi.reroJsonheaders,
+    sort?: string
   ): Observable<Record | Error> {
     const loanStates = ['ITEM_ON_LOAN'];
     return this._recordService.getRecords(
       'loans', this._patronStateQuery(patronPid, loanStates), page, itemsPerPage,
-      undefined, undefined, headers
+      undefined, undefined, headers, sort
     );
   }
 

diff --git a/...ic-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html b/...ic-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html
@@ -14,8 +14,25 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<!-- header -->
+<!-- Due date dropdown menu -->
+<section class="container pt-1" *ngIf="paginator.getRecordsCount() > 0">
+  <div class="row">
+    <div class="col-xs-12 col-md-7 col-lg-9"></div>
+    <ng-core-sort-list
+      class="col-xs-12 col-md-5 col-lg-3 pr-0"
+      [options]="[
+      {value:'duedate', label:'Due date (earliest)' | translate, icon:'fa-sort-numeric-asc'},
+      {value:'-duedate', label:'Due date (latest)' | translate, icon:'fa-sort-numeric-desc'}
+      ]"
+      [useIcon]="true"
+      (selectChange)="selectingSortCriteria($event)">
+    </ng-core-sort-list>
+  </div>
+</section>
+
+<!-- table -->
 <section id="loans-section" class="container my-2">
+  <!-- table header -->
   <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>
@@ -24,32 +41,33 @@
       <div class="col-2">&nbsp;</div>
     </div>
   </div>
+  <!-- table content -->
+  <div>
+    <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>
+  </div>
 </section>
diff --git a/...blic-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts b/...blic-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts
@@ -37,6 +37,15 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
   /** loans records */
   records = [];
 
+  /** sort criteria */
+  sortCriteria = 'duedate';
+
+  /** paginator page */
+  page = 1;
+
+  /** number of records per paginator page */
+  nRecords = 20;
+
   /** Records paginator */
   private _paginator: Paginator;
 
@@ -57,33 +66,39 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
 
   /** OnInit hook */
   ngOnInit(): void {
+    this._initialisePaginatorAndSubscription();
+    this._initialLoad();
+  }
+
+  /** OnDestroy hook */
+  ngOnDestroy(): void {
+    this._subscription.unsubscribe();
+  }
+
+  /** Initialise paginator and subscription */
+  private _initialisePaginatorAndSubscription(): void {
     this._paginator = new Paginator();
     this._paginator
-      .setRecordsPerPage(20)
+      .setRecordsPerPage(this.nRecords)
       .setHiddenInfo(
         _('({{ count }} hidden loan)'),
         _('({{ count }} hidden loans)')
       );
+
+    this._subscription = new Subscription();
     this._subscription.add(
       this._paginator.more$.subscribe((page: number) => {
         this._loanQuery(page).subscribe((response: Record) => {
           this.records = this.records.concat(response.hits.hits);
+          this.page = page;
         });
       })
     );
     this._subscription.add(
       this._patronProfileMenuService.onChange$.subscribe(() => {
-        this._initialLoad();
+        this._resetPaginator();
       })
     );
-    this._loanQuery(1).subscribe((response: Record) => {
-      this._initialLoad();
-    });
-  }
-
-  /** OnDestroy hook */
-  ngOnDestroy(): void {
-    this._subscription.unsubscribe();
   }
 
   /** Initial records load */
@@ -103,6 +118,35 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
   private _loanQuery(page: number): Observable<Record | Error> {
     const patronPid = this._patronProfileMenuService.currentPatron.pid;
     return this._loanApiService
-      .getOnLoan(patronPid, page, this._paginator.getRecordsPerPage());
+      .getOnLoan(patronPid, page, this._paginator.getRecordsPerPage(), undefined, this.sortCriteria);
+  }
+
+  /** Reset paginator when patron profile menu has changed */
+  private _resetPaginator(){
+    this._loanQuery(1).subscribe((response: Record) => {
+      this._paginator
+        .setPage(1)
+        .setRecordsCount(response.hits.total.value);
+
+      this.records = response.hits.hits;
+      this.page = 1;
+      this.loaded = true;
+    });
   }
+
+   /**
+    * Allow to sort loans list using a sort criteria
+    * @param sortCriteria: the sort criteria to use for sorting the list
+    */
+  selectingSortCriteria(sortCriteria: string) {
+    this.sortCriteria = sortCriteria;
+    this._paginator.setRecordsPerPage(this.page * this.nRecords);
+
+    this._loanQuery(1).subscribe((response: Record) => {
+      this.records = response.hits.hits;
+      this._paginator.setRecordsPerPage(this.nRecords);
+      this.loaded = true;
+    });
+  }
+
 }