holdings: added pagination on holdings

The first five holdings are displayed and if there are more,
a link is displayed to load the next ones.

* Closes rero/rero-ils#1577

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>

projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html

@@ -69,7 +69,7 @@
             <div class="row font-weight-bold">
               <div class="col-sm-3" translate>Barcode</div>
               <div class="col-sm-2" translate>Status</div>
-              <div class="col-sm-3" translate>Label</div>
+              <div class="col-sm-3" translate>Unit</div>
               <div class="col-sm-2" translate>Call number</div>
             </div>
             <admin-serial-holding-item

projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html

@@ -31,4 +31,11 @@
 <ng-container *ngIf="holdings">
   <admin-document-holding *ngFor="let holding of holdings" [holding]="holding" (deleteHolding)="deleteHolding($event)">
   </admin-document-holding>
+  <ng-container *ngIf="isLinkShowMore">
+    <button type="button" id="show-more-{{ documentPid }}" class="btn btn-link" (click)="showMore()">
+      <i class="fa fa-arrow-circle-o-down"></i>
+        {{ 'Show more' | translate }}
+    </button>
+    <small *ngIf="isLinkShowMore">({{ hiddenHoldings }})</small>
+  </ng-container>
 </ng-container>

projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts

@@ -21,6 +21,8 @@ import { Record } from '@rero/ng-core/lib/record/record';
 import { RecordPermissionService } from 'projects/admin/src/app/service/record-permission.service';
 import { forkJoin } from 'rxjs';
 import { UserService } from '@rero/shared';
+import { map } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-holdings',
@@ -30,60 +32,98 @@ export class HoldingsComponent implements OnInit {
   /** Document pid */
   @Input() documentPid: string;
 
+  /** Holdings total */
+  holdingsTotal = 0;
+
+  /** Holdings per page */
+  private holdingsPerPage = 5;
+
+  /** Current page */
+  page = 1;
+
+  /** query */
+  query: string;
+
   /** Holdings */
-  holdings: Array<any>;
+  holdings: any[];
 
   /** Holding type related to the parent document. */
   @Input() holdingType: 'electronic' | 'serial' | 'standard';
 
   /** Can a new holding be added? */
   canAdd = false;
 
+  /**
+   * Is link show more
+   * @return boolean
+   */
+  get isLinkShowMore(): boolean {
+    return this.holdingsTotal > 0
+      && ((this.page * this.holdingsPerPage) < this.holdingsTotal);
+  }
+
+  /**
+   * Hidden holdings count
+   * @return string
+   */
+  get hiddenHoldings(): string {
+    let count = this.holdingsTotal - (this.page * this.holdingsPerPage);
+    if (count < 0) {
+      count = 0;
+    }
+    const linkText = (count > 1)
+      ? '{{ counter }} hidden holdings'
+      : '{{ counter }} hidden holding';
+    const linkTextTranslate = this._translateService.instant(linkText);
+    return linkTextTranslate.replace('{{ counter }}', count);
+  }
+
   /**
    * Constructor
    * @param _userService - UserService
    * @param _recordService - RecordService
    * @param _recordUiService - RecordUiService
+   * @param _recordPermissionService - RecordPermissionService
+   * @param _translateService - TranslateService
    */
   constructor(
     private _userService: UserService,
     private _recordService: RecordService,
     private _recordUiService: RecordUiService,
-    private _recordPermissionService: RecordPermissionService
+    private _recordPermissionService: RecordPermissionService,
+    private _translateService: TranslateService
   ) { }
 
   /** Init */
   ngOnInit() {
     const orgPid = this._userService.user.currentOrganisation;
-    const query = `document.pid:${this.documentPid} AND organisation.pid:${orgPid}`;
-    const holdingRecordsRef = this._recordService.getRecords(
-      'holdings',
-      query,
-      1,
-      RecordService.MAX_REST_RESULTS_SIZE,
-      undefined,
-      undefined,
-      undefined,
-      'library_location'
-    );
+    this.query = `document.pid:${this.documentPid} AND organisation.pid:${orgPid}`;
+    const holdingsRecords = this._holdingsQuery(1, this.query);
+    const holdingsCount = this._holdingsCountQuery(1, this.query);
     const permissionsRef = this._recordPermissionService.getPermission('holdings');
-    forkJoin([holdingRecordsRef, permissionsRef]).subscribe(
-      (result: [Record, any]) => {
-        const holdingsData = result[0];
-        const permissions = result[1];
-        if (this._recordService.totalHits(holdingsData.hits.total) > 0) {
-          this.holdings = holdingsData.hits.hits;
-        }
+    forkJoin([holdingsRecords, holdingsCount, permissionsRef]).subscribe(
+      (result: [any[], number, any]) => {
+        this.holdings = result[0];
+        this.holdingsTotal = result[1];
+        const permissions = result[2];
         this.canAdd = permissions.create.can;
       }
     );
   }
 
-  /** Delete a given holding.
-   *
+  /** Show more */
+  showMore() {
+    this.page++;
+    this._holdingsQuery(this.page, this.query).subscribe((holdings: any[]) => {
+      this.holdings = this.holdings.concat(holdings);
+    });
+  }
+
+  /**
+   * Delete a given holding.
    * @param data: object with 2 keys :
    *          * 'holding' : the holding to delete
-   *          * 'callBakend' : boolean if backend API should be called
+   *          * 'callBackend' : boolean if backend API should be called
    */
   deleteHolding(data: { holding: any, callBackend: boolean }) {
     const holding = data.holding;
@@ -102,4 +142,34 @@ export class HoldingsComponent implements OnInit {
         });
     }
   }
+
+  /**
+   * Holdings count query
+   * @param page - number
+   * @param query - string
+   * @return Observable
+   */
+  private _holdingsCountQuery(page: number, query: string) {
+    return this._recordService.getRecords(
+      'holdings', query, 1, 1,
+      undefined, undefined, undefined, 'library_location'
+    ).pipe(
+      map((holdings: Record) => this._recordService.totalHits(holdings.hits.total))
+    );
+  }
+
+  /**
+   * Return a selected Holdings record
+   * @param page - number
+   * @param query - string
+   * @return Observable
+   */
+  private _holdingsQuery(page: number, query: string) {
+    return this._recordService.getRecords(
+      'holdings', query, page, this.holdingsPerPage,
+      undefined, undefined, undefined, 'library_location'
+    ).pipe(map((holdings: Record) => {
+      return holdings.hits.hits;
+    }));
+  }
 }

projects/admin/src/manual_translations.ts

@@ -150,3 +150,5 @@ _('{{ counter }} hidden issue');
 _('{{ counter }} hidden issues');
 _('{{ counter }} hidden item');
 _('{{ counter }} hidden items');
+_('{{ counter }} hidden holding');
+_('{{ counter }} hidden holdings');