document: dynamic loading for items informations

projects/public-search/src/app/document-detail/holdings/holding/holding.component.html

@@ -20,7 +20,7 @@
       <a href="#" class="collapse-link float-left h-100" data-toggle="collapse" aria-expanded="false"
          (click)="$event.preventDefault(); isCollapsed = !isCollapsed">
         <i [ngClass]="{ 'fa-caret-down': !isCollapsed, 'fa-caret-right': isCollapsed }"
-           [hidden]="itemsCount==0"
+           [hidden]="holding.metadata.items_count === 0"
            class="fa fa-lg" aria-hidden="true">
         </i>
       </a>
@@ -30,9 +30,9 @@
       {{ holding.metadata.circulation_category.circulation_information | getTranslatedLabel : language }}
     </div>
     <div class="col-sm-2">
-      <span [hidden]="itemsCount == 0">
-        {{ itemsCount }}
-        {{ itemsCount | i18nPlural: { '=0': 'item', '=1': 'item', 'other': 'items' } | translate }}
+      <span [hidden]="holding.metadata.items_count === 0">
+        {{ holding.metadata.items_count }}
+        {{ holding.metadata.items_count | i18nPlural: { '=0': 'item', '=1': 'item', 'other': 'items' } | translate }}
       </span>
     </div>
     <div id="holding-available-{{ holding.metadata.pid }}" class="col-sm-3">
@@ -95,6 +95,7 @@
     </div>
   </div>
 </div>
-<div class="card-body p-2" [hidden]="isCollapsed">
-  <public-search-items [holding]="holding" [viewcode]="viewcode" (eItemsCount)="eItemsCount($event)"></public-search-items>
-</div>
+<public-search-items [holding]="holding"
+                     [viewcode]="viewcode"
+                     [hidden]="isCollapsed"
+></public-search-items>

projects/public-search/src/app/document-detail/holdings/holding/holding.component.spec.ts

@@ -41,6 +41,7 @@ describe('HoldingComponent', () => {
           { label: 'default', language: 'en'}
         ]
       },
+      items_count: 5,
       holdings_type: 'serial',
       available: true,
       call_number: 'F123456',
@@ -73,7 +74,6 @@ describe('HoldingComponent', () => {
     fixture = TestBed.createComponent(HoldingComponent);
     component = fixture.componentInstance;
     component.holding = record;
-    component.itemsCount = 5;
     fixture.detectChanges();
   });
 

projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts

@@ -32,8 +32,6 @@ export class HoldingComponent {
   /** Is collapsed holdings */
   @Input() isCollapsed = true;
 
-  /** Items count */
-  itemsCount = 0;
   /** Authorized types of note */
   noteAuthorizedTypes: string[] = ['general_note'];
 
@@ -50,15 +48,4 @@ export class HoldingComponent {
    */
   constructor(private _translateService: TranslateService) {}
 
-
-  // COMPONENT FUNCTIONS ======================================================
-  /**
-   * Handler to manage event items count emitter
-   * @param event - number : the number of items for this holding
-   */
-  eItemsCount(event: number): void {
-    this.itemsCount = event;
-  }
-
-
 }

projects/public-search/src/app/document-detail/holdings/items/items.component.html

@@ -14,24 +14,33 @@
   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/>.
 -->
-<ng-container *ngIf="items.length > 0; else noItems">
-  <public-search-item *ngFor="let item of items; let index = index"
-                      context="holding"
-                      [item]="item"
-                      [viewcode]="viewcode"
-                      [index]="index">
-
-  </public-search-item>
-  <ng-container *ngIf="isLinkShowMore">
-    <button type="button" class="btn btn-link pr-1" (click)="showMore()">
-      <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
-    </button>
-    <small>({{ hiddenItems }})</small>
-  </ng-container>
+<ng-container *ngIf="!hidden">
+  <div class="card-body p-2">
+    <ng-container *ngIf="!isLoading; else loading">
+      <ng-container *ngIf="items.length > 0; else noItems">
+        <public-search-item
+          *ngFor="let item of items; let index = index"
+          context="holding"
+          [item]="item"
+          [viewcode]="viewcode"
+          [index]="index"
+        ></public-search-item>
+        <ng-container *ngIf="isLinkShowMore">
+          <button type="button" class="btn btn-link pr-1" (click)="showMore()">
+            <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
+          </button>
+          <small>({{ hiddenItems }})</small>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+  </div>
 </ng-container>
 
+<ng-template #loading>
+  <div class="pl-4"><i class="fa fa-spin fa-spinner"></i></div>
+</ng-template>
+
+
 <ng-template #noItems>
-  <div class="row">
-    <div class="col-12 pl-2" translate>No item received.</div>
-  </div>
+  <div class="card-body pl-4" translate>No item received.</div>
 </ng-template>

projects/public-search/src/app/document-detail/holdings/items/items.component.ts

@@ -14,39 +14,53 @@
  * 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, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
 import { ItemApiService } from '../../../api/item-api.service';
 import { QueryResponse } from '../../../record';
 
 @Component({
   selector: 'public-search-items',
   templateUrl: './items.component.html'
 })
-export class ItemsComponent implements OnInit {
+export class ItemsComponent {
 
   // COMPONENT ATTRIBUTES =====================================================
   /** Holding */
   @Input() holding: any;
   /** View code */
   @Input() viewcode: string;
-  /** Event items count */
-  @Output() eItemsCount: EventEmitter<number> = new EventEmitter<number>();
 
   /** Items total */
   itemsTotal = 0;
   /** Page */
   page = 1;
   /** Items records */
   items = [];
+  /** is data are loading */
+  isLoading = false;
 
   /** Items per page */
-  private itemsPerPage = 10;
+  private itemsPerPage = 1;
+  /** Is items are hidden */
+  private _hidden = true;
 
 
   // GETTER & SETTER ========================================================
+
+  /** Handler to detect change on input `hidden` property */
+  @Input() set hidden(value: boolean) {
+    this._hidden = value;
+    if (!this._hidden && this.items.length === 0 && !this.isLoading) {
+      this.isLoading = true;
+      this._loadItems();
+    }
+  }
+  get hidden(): boolean {
+    return this._hidden;
+  }
+
   /**
    * Is the link `show more items` must be displayed
    * @return boolean
@@ -81,36 +95,23 @@ export class ItemsComponent implements OnInit {
     private _translateService: TranslateService
   ) { }
 
-  /** OnInit hook */
-  ngOnInit(): void {
-    this._ItemsQuery(1).subscribe((response: QueryResponse) => {
-      const total = response.total.value;
-      this.itemsTotal = total;
-      this.eItemsCount.emit(total);
-      this.items = response.hits;
-    });
-  }
-
   // COMPONENT FUNCTIONS ==================================================
   /** Handler when 'show more items' link is clicked. */
   showMore() {
     this.page++;
-    this._ItemsQuery(this.page).subscribe((response: QueryResponse) => {
-      this.items = this.items.concat(response.hits);
-    });
+    this._loadItems();
   }
 
-  /**
-   * Return selected items by page number
-   * @param page - number
-   * @return Observable
-   */
-  private _ItemsQuery(page: number): Observable<QueryResponse> {
-    return this._itemApiService.getItemsByHoldingsAndViewcode(
+  private _loadItems(): void {
+    this._itemApiService.getItemsByHoldingsAndViewcode(
       this.holding,
       this.viewcode,
-      page,
+      this.page,
       this.itemsPerPage
-    );
+    ).subscribe((response: QueryResponse) => {
+      this.itemsTotal = response.total.value;
+      this.items = this.items.concat(response.hits);
+      this.isLoading = false;
+    });
   }
 }