patron profile: add sort of due date in loans

Co-Authored-by: Valeria Granata <valeria@chaw.com>
rero · Mar 16, 2022 · 3bbe84a · 3bbe84a
1 parent 6ea9ec4
commit 3bbe84a
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 37 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 = 10, 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
@@ -18,38 +18,48 @@
 <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 mt-2">Title</div>
+      <div class="col-4 mt-2">Library</div>
+      <div class="col-3" #sortdate>
+        <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>
 
+  <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
@@ -14,7 +14,7 @@
  * 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/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Error, Record } from '@rero/ng-core';
 import { Paginator } from '@rero/shared';
@@ -26,7 +26,7 @@ import { PatronProfileMenuService } from '../patron-profile-menu.service';
   selector: 'public-search-patron-profile-loans',
   templateUrl: './patron-profile-loans.component.html'
 })
-export class PatronProfileLoansComponent implements OnInit, OnDestroy {
+export class PatronProfileLoansComponent implements OnInit, AfterViewInit  {
 
   /** Observable subscription */
   private _subscription = new Subscription();
@@ -37,6 +37,12 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
   /** loans records */
   records = [];
 
+  /** sort criteria */
+  sortCriteria = 'duedate';
+
+  /** DOM select div */
+  @ViewChild("sortdate") sortdate: ElementRef;
+
   /** Records paginator */
   private _paginator: Paginator;
 
@@ -57,13 +63,26 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
 
   /** OnInit hook */
   ngOnInit(): void {
+    this._initialisePaginatorAndSubscription();
+    this._initialLoad();
+  }
+
+  /** Reset select option */
+  ngAfterViewInit(){
+    this.sortdate.nativeElement.childNodes[0].childNodes[0].lastElementChild.value = 'duedate';
+  }
+
+  /** Initialise paginator and subscription */
+  private _initialisePaginatorAndSubscription(): void {
     this._paginator = new Paginator();
     this._paginator
       .setRecordsPerPage(20)
       .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) => {
@@ -73,17 +92,10 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
     );
     this._subscription.add(
       this._patronProfileMenuService.onChange$.subscribe(() => {
-        this._initialLoad();
+        this.selectingSortCriteria('duedate');
+        this.ngAfterViewInit();
       })
     );
-    this._loanQuery(1).subscribe((response: Record) => {
-      this._initialLoad();
-    });
-  }
-
-  /** OnDestroy hook */
-  ngOnDestroy(): void {
-    this._subscription.unsubscribe();
   }
 
   /** Initial records load */
@@ -103,6 +115,18 @@ 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);
   }
+
+  /**
+   * 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._subscription.unsubscribe();
+    this._initialisePaginatorAndSubscription();
+    this._initialLoad();
+  }
+
 }
diff --git a/projects/public-search/src/app/scss/styles.scss b/projects/public-search/src/app/scss/styles.scss
@@ -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;
+}