From 9df01d980f8be0e08af5601ec234c8d177358d0b Mon Sep 17 00:00:00 2001 From: Renaud Michotte Date: Thu, 22 Jul 2021 15:08:31 +0200 Subject: [PATCH] documents: load dynamically items data When displaying the document detail view, items metadata are loaded for each holdings causing a backend call even if the holding is collapsed. Now, the items metadata are loaded only if user expands the holdings. Co-authored-by: Renaud Michotte --- .../holdings/holding/holding.component.html | 15 ++--- .../holding/holding.component.spec.ts | 2 +- .../holdings/holding/holding.component.ts | 13 ----- .../holdings/items/items.component.html | 43 ++++++++------ .../holdings/items/items.component.ts | 57 ++++++++++--------- 5 files changed, 64 insertions(+), 66 deletions(-) diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html index 81d03a712..dfd6e6401 100644 --- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html +++ b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html @@ -20,7 +20,7 @@ @@ -30,9 +30,9 @@ {{ holding.metadata.circulation_category.circulation_information | getTranslatedLabel : language }}
- - {{ itemsCount }} - {{ itemsCount | i18nPlural: { '=0': 'item', '=1': 'item', 'other': 'items' } | translate }} + + {{ holding.metadata.items_count }} + {{ holding.metadata.items_count | i18nPlural: { '=0': 'item', '=1': 'item', 'other': 'items' } | translate }}
@@ -95,6 +95,7 @@
-
- -
+ diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.spec.ts b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.spec.ts index 04a97ca9a..e0cc4cf2c 100644 --- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.spec.ts +++ b/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(); }); diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts index 581e8659e..b82d91f35 100644 --- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts +++ b/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; - } - - } diff --git a/projects/public-search/src/app/document-detail/holdings/items/items.component.html b/projects/public-search/src/app/document-detail/holdings/items/items.component.html index 8fc28bee0..7ed8c1b8e 100644 --- a/projects/public-search/src/app/document-detail/holdings/items/items.component.html +++ b/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 . --> - - - - - - - ({{ hiddenItems }}) - + +
+ + + + + + ({{ hiddenItems }}) + + + +
+ +
+ + + -
-
No item received.
-
+
No item received.
 diff --git a/projects/public-search/src/app/document-detail/holdings/items/items.component.ts b/projects/public-search/src/app/document-detail/holdings/items/items.component.ts index 7dfda1c28..b7b5e4aa5 100644 --- a/projects/public-search/src/app/document-detail/holdings/items/items.component.ts +++ b/projects/public-search/src/app/document-detail/holdings/items/items.component.ts @@ -14,10 +14,9 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -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'; @@ -25,15 +24,13 @@ import { QueryResponse } from '../../../record'; 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 = new EventEmitter(); /** Items total */ itemsTotal = 0; @@ -41,12 +38,29 @@ export class ItemsComponent implements OnInit { 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 { - 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; + }); } }