From aedd4b99eec216cce6fc63978fd1d1b6db0b6e40 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 14 Nov 2019 13:29:39 +0100 Subject: [PATCH 1/5] 66155: Show more/less incremental on item pages + loading component for entities --- resources/i18n/en.json5 | 4 +- ...etadata-representation-list.component.html | 27 +++++--- .../metadata-representation-list.component.ts | 47 ++++++++++++-- .../related-items/related-items-component.ts | 64 +++++++++++++------ .../related-items.component.html | 25 +++++--- 5 files changed, 119 insertions(+), 48 deletions(-) diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5 index 41d868dded..3923826dae 100644 --- a/resources/i18n/en.json5 +++ b/resources/i18n/en.json5 @@ -405,8 +405,8 @@ "item.page.link.full": "Full item page", "item.page.link.simple": "Simple item page", "item.page.person.search.title": "Articles by this author", - "item.page.related-items.view-more": "View more", - "item.page.related-items.view-less": "View less", + "item.page.related-items.view-more": "Show {{ amount }} more", + "item.page.related-items.view-less": "Hide last {{ amount }}", "item.page.subject": "Keywords", "item.page.uri": "URI", diff --git a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html index e9d2364ca6..07f3d88eba 100644 --- a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html +++ b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html @@ -1,11 +1,18 @@ - - - -
- {{'item.page.related-items.view-more' | translate}} -
-
- {{'item.page.related-items.view-less' | translate}} -
+ + + + + +
+
+ {{'item.page.related-items.view-more' | + translate:{ amount: (total - representations?.length < incrementBy) ? total - representations?.length : incrementBy } }} +
+
+ {{'item.page.related-items.view-less' | + translate:{ amount: (representations?.length < limit) ? limit - representations?.length : incrementBy } }} +
+
+ diff --git a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.ts b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.ts index 521a93523d..3e95c45f01 100644 --- a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.ts +++ b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { MetadataRepresentation } from '../../../core/shared/metadata-representation/metadata-representation.model'; import { ItemViewMode } from '../../../shared/items/item-type-decorator'; import { Observable } from 'rxjs/internal/Observable'; @@ -12,6 +12,8 @@ import { filter, map, switchMap } from 'rxjs/operators'; import { getSucceededRemoteData } from '../../../core/shared/operators'; import { Relationship } from '../../../core/shared/item-relationships/relationship.model'; import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model'; +import { Subscription } from 'rxjs/internal/Subscription'; +import { PaginatedList } from '../../../core/data/paginated-list'; @Component({ selector: 'ds-metadata-representation-list', @@ -23,7 +25,7 @@ import { ItemMetadataRepresentation } from '../../../core/shared/metadata-repres * It expects an itemType to resolve the metadata to a an item * It expects a label to put on top of the list */ -export class MetadataRepresentationListComponent implements OnInit { +export class MetadataRepresentationListComponent implements OnInit, OnDestroy { /** * The parent of the list of related items to display */ @@ -51,6 +53,18 @@ export class MetadataRepresentationListComponent implements OnInit { */ @Input() limit = 10; + /** + * The amount to increment the list by when clicking "view more" + * Defaults to 10 + * The default can optionally be overridden by providing the limit as input to the component + */ + @Input() incrementBy = 10; + + /** + * Is the list (re-)loading? + */ + loading = false; + /** * A list of metadata-representations to display */ @@ -73,6 +87,11 @@ export class MetadataRepresentationListComponent implements OnInit { */ total: number; + /** + * Subscription on representations used to update the "loading" property of this component + */ + representationsSub: Subscription; + constructor(public relationshipService: RelationshipService) { } @@ -88,6 +107,9 @@ export class MetadataRepresentationListComponent implements OnInit { const metadata = this.parentItem.findMetadataSortedByPlace(this.metadataField); this.total = metadata.length; this.representations$ = this.resolveMetadataRepresentations(metadata); + this.representationsSub = this.representations$.subscribe((represenations: MetadataRepresentation[]) => { + this.loading = represenations.length !== this.limit && represenations.length !== this.total; + }); } /** @@ -124,18 +146,31 @@ export class MetadataRepresentationListComponent implements OnInit { } /** - * Expand the list to display all metadata representations + * Expand the list to display more metadata representations */ viewMore() { - this.limit = 9999; + this.limit = this.limit + this.incrementBy; + this.loading = true; this.setRepresentations(); } /** - * Collapse the list to display the originally displayed metadata representations + * Collapse the list to display less metadata representations */ viewLess() { - this.limit = this.originalLimit; + if (this.limit > this.originalLimit) { + this.limit = this.limit - this.incrementBy; + } + this.loading = true; this.setRepresentations(); } + + /** + * Unsubscribe from the representations subscription + */ + ngOnDestroy(): void { + if (this.representationsSub) { + this.representationsSub.unsubscribe(); + } + } } diff --git a/src/app/+item-page/simple/related-items/related-items-component.ts b/src/app/+item-page/simple/related-items/related-items-component.ts index 5b4376bab0..074c2f6716 100644 --- a/src/app/+item-page/simple/related-items/related-items-component.ts +++ b/src/app/+item-page/simple/related-items/related-items-component.ts @@ -32,10 +32,24 @@ export class RelatedItemsComponent implements OnInit, OnDestroy { @Input() relationType: string; /** - * Default options to start a search request with - * Optional input, should you wish a different page size (or other options) + * The max amount of relations to display + * Defaults to 5 + * The default can optionally be overridden by providing the limit as input to the component */ - @Input() options = Object.assign(new FindAllOptions(), { elementsPerPage: 5 }); + @Input() limit = 5; + + /** + * The amount to increment the list by when clicking "view more" + * Defaults to 5 + * The default can optionally be overridden by providing the limit as input to the component + */ + @Input() incrementBy = 5; + + /** + * Default options to start a search request with + * Optional input + */ + @Input() options = new FindAllOptions(); /** * An i18n label to use as a title for the list (usually describes the relation) @@ -43,20 +57,15 @@ export class RelatedItemsComponent implements OnInit, OnDestroy { @Input() label: string; /** - * Completely hide the component until there's at least one item visible + * Is the list (re-)loading? */ - @HostBinding('class.d-none') hidden = true; + loading = false; /** * The list of related items */ items$: Observable>>; - /** - * Search options for displaying all elements in a list - */ - allOptions = Object.assign(new FindAllOptions(), { elementsPerPage: 9999 }); - /** * The view-mode we're currently on * @type {ElementViewMode} @@ -64,12 +73,13 @@ export class RelatedItemsComponent implements OnInit, OnDestroy { viewMode = ItemViewMode.Element; /** - * Whether or not the list is currently expanded to show all related items + * The originally provided limit + * Used for comparing the current size with the original */ - showingAll = false; + originalLimit: number; /** - * Subscription on items used to update the "hidden" property of this component + * Subscription on items used to update the "loading" property of this component */ itemSub: Subscription; @@ -77,26 +87,38 @@ export class RelatedItemsComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.items$ = this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, this.options); + this.originalLimit = this.limit; + this.reloadItems(); + } + + /** + * Reload the current list of items (using the current limit) + */ + reloadItems() { + this.items$ = this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, Object.assign(this.options, { elementsPerPage: this.limit })); this.itemSub = this.items$.subscribe((itemsRD: RemoteData>) => { - this.hidden = !(itemsRD.hasSucceeded && itemsRD.payload && itemsRD.payload.page.length > 0); + this.loading = !(itemsRD.hasSucceeded && itemsRD.payload && itemsRD.payload.page.length > 0); }); } /** - * Expand the list to display all related items + * Expand the list to display more */ viewMore() { - this.items$ = this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, this.allOptions); - this.showingAll = true; + this.limit = this.limit + this.incrementBy; + this.loading = true; + this.reloadItems(); } /** - * Collapse the list to display the originally displayed items + * Collapse the list to display less */ viewLess() { - this.items$ = this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, this.options); - this.showingAll = false; + if (this.limit > this.originalLimit) { + this.limit = this.limit - this.incrementBy; + } + this.loading = true; + this.reloadItems(); } /** diff --git a/src/app/+item-page/simple/related-items/related-items.component.html b/src/app/+item-page/simple/related-items/related-items.component.html index a4baee9825..97be4150ad 100644 --- a/src/app/+item-page/simple/related-items/related-items.component.html +++ b/src/app/+item-page/simple/related-items/related-items.component.html @@ -1,11 +1,18 @@ - - + + - - - + + +
+ + +
+ From 4bddbb6c62bd3b8ba7a8d4b940e51418353cde63 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 14 Nov 2019 14:02:40 +0100 Subject: [PATCH 2/5] 66155: Test fixes --- ...data-representation-list.component.spec.ts | 15 ++++++++----- .../related-items.component.spec.ts | 21 +++++++++---------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts index 120e846523..5b5ccd31ef 100644 --- a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts +++ b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts @@ -7,6 +7,7 @@ import { Item } from '../../../core/shared/item.model'; import { Relationship } from '../../../core/shared/item-relationships/relationship.model'; import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils'; import { TranslateModule } from '@ngx-translate/core'; +import { VarDirective } from '../../../shared/utils/var.directive'; const itemType = 'Person'; const metadataField = 'dc.contributor.author'; @@ -64,7 +65,7 @@ describe('MetadataRepresentationListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], - declarations: [MetadataRepresentationListComponent], + declarations: [MetadataRepresentationListComponent, VarDirective], providers: [ { provide: RelationshipService, useValue: relationshipService } ], @@ -93,12 +94,16 @@ describe('MetadataRepresentationListComponent', () => { }); describe('when viewMore is called', () => { + let originalLimit; + beforeEach(() => { + // Store the original value of limit + originalLimit = comp.limit; comp.viewMore(); }); - it('should set the limit to a high number in order to retrieve all metadata representations', () => { - expect(comp.limit).toBeGreaterThanOrEqual(999); + it('should increment the limit with incrementBy', () => { + expect(comp.limit).toEqual(originalLimit + comp.incrementBy); }); }); @@ -108,8 +113,8 @@ describe('MetadataRepresentationListComponent', () => { beforeEach(() => { // Store the original value of limit originalLimit = comp.limit; - // Set limit to a random number - comp.limit = 458; + // Increase limit with incrementBy + comp.limit = originalLimit + comp.incrementBy; comp.viewLess(); }); diff --git a/src/app/+item-page/simple/related-items/related-items.component.spec.ts b/src/app/+item-page/simple/related-items/related-items.component.spec.ts index 6637091f02..842ac32bfb 100644 --- a/src/app/+item-page/simple/related-items/related-items.component.spec.ts +++ b/src/app/+item-page/simple/related-items/related-items.component.spec.ts @@ -9,6 +9,7 @@ import { createRelationshipsObservable } from '../item-types/shared/item.compone import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils'; import { RelationshipService } from '../../../core/data/relationship.service'; import { TranslateModule } from '@ngx-translate/core'; +import { VarDirective } from '../../../shared/utils/var.directive'; const parentItem: Item = Object.assign(new Item(), { bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])), @@ -42,7 +43,7 @@ describe('RelatedItemsComponent', () => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], - declarations: [RelatedItemsComponent], + declarations: [RelatedItemsComponent, VarDirective], providers: [ { provide: RelationshipService, useValue: relationshipService } ], @@ -71,25 +72,23 @@ describe('RelatedItemsComponent', () => { }); it('should call relationship-service\'s getRelatedItemsByLabel with the correct arguments', () => { - expect(relationshipService.getRelatedItemsByLabel).toHaveBeenCalledWith(parentItem, relationType, comp.allOptions); - }); - - it('should set showingAll to true', () => { - expect(comp.showingAll).toEqual(true); + expect(relationshipService.getRelatedItemsByLabel).toHaveBeenCalledWith(parentItem, relationType, Object.assign(comp.options, { elementsPerPage: comp.limit + comp.incrementBy })); }); }); describe('when viewLess is called', () => { + let originalLimit; + beforeEach(() => { + // Store the original value of limit + originalLimit = comp.limit; + // Increase limit with incrementBy + comp.limit = originalLimit + comp.incrementBy; comp.viewLess(); }); it('should call relationship-service\'s getRelatedItemsByLabel with the correct arguments', () => { - expect(relationshipService.getRelatedItemsByLabel).toHaveBeenCalledWith(parentItem, relationType, comp.options); - }); - - it('should set showingAll to false', () => { - expect(comp.showingAll).toEqual(false); + expect(relationshipService.getRelatedItemsByLabel).toHaveBeenCalledWith(parentItem, relationType, Object.assign(comp.options, { elementsPerPage: originalLimit })); }); }); From 380e02a92d6b3693337d375bd3991ff321d9fe56 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Fri, 29 Nov 2019 10:17:11 +0100 Subject: [PATCH 3/5] 66155: Fixed 'hide last x' algorithm --- .../metadata-representation-list.component.html | 2 +- .../simple/related-items/related-items.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html index 97ee7ba4c1..e424e2c907 100644 --- a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html +++ b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html @@ -11,7 +11,7 @@
{{'item.page.related-items.view-less' | - translate:{ amount: (representations?.length < limit) ? limit - representations?.length : incrementBy } }} + translate:{ amount: (representations?.length < limit) ? (representations?.length + incrementBy) - limit : incrementBy } }}
diff --git a/src/app/+item-page/simple/related-items/related-items.component.html b/src/app/+item-page/simple/related-items/related-items.component.html index af16af3f6c..d6251e2302 100644 --- a/src/app/+item-page/simple/related-items/related-items.component.html +++ b/src/app/+item-page/simple/related-items/related-items.component.html @@ -11,7 +11,7 @@
{{'item.page.related-items.view-less' | - translate:{ amount: (itemsRD?.payload?.page?.length < limit) ? limit - itemsRD?.payload?.page?.length : incrementBy } }} + translate:{ amount: (itemsRD?.payload?.page?.length < limit) ? (itemsRD?.payload?.page?.length + incrementBy) - limit : incrementBy } }}
From 9e5508f9e50943cb546000d4ff8cd7a6f14bd00e Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Mon, 9 Dec 2019 14:48:55 +0100 Subject: [PATCH 4/5] 66155: Refactoring metadata-representation and related-item lists with abstract incremental list and loading by pages --- .../abstract-incremental-list.component.ts | 73 ++++++++++++++++ ...etadata-representation-list.component.html | 30 +++---- .../metadata-representation-list.component.ts | 84 +++---------------- .../related-items/related-items-component.ts | 81 ++---------------- .../related-items.component.html | 30 +++---- 5 files changed, 125 insertions(+), 173 deletions(-) create mode 100644 src/app/+item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts diff --git a/src/app/+item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts b/src/app/+item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts new file mode 100644 index 0000000000..e2c0823bf8 --- /dev/null +++ b/src/app/+item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts @@ -0,0 +1,73 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subscription } from 'rxjs/internal/Subscription'; +import { hasValue, isNotEmpty } from '../../../shared/empty.util'; + +@Component({ + selector: 'ds-abstract-incremental-list', + template: ``, +}) +/** + * An abstract component for displaying an incremental list of objects + */ +export class AbstractIncrementalListComponent implements OnInit, OnDestroy { + /** + * The amount to increment the list by + * Define this amount in the child component overriding this component + */ + incrementBy: number; + + /** + * All pages of objects to display as an array + */ + objects: T[]; + + /** + * A list of open subscriptions + */ + subscriptions: Subscription[]; + + ngOnInit(): void { + this.objects = []; + this.subscriptions = []; + this.increase(); + } + + /** + * Get a specific page + * > Override this method to return a specific page + * @param page The page to fetch + */ + getPage(page: number): T { + return undefined; + } + + /** + * Increase the amount displayed + */ + increase() { + const page = this.getPage(this.objects.length + 1); + if (hasValue(page)) { + this.objects.push(page); + } + } + + /** + * Decrease the amount displayed + */ + decrease() { + if (this.objects.length > 1) { + this.objects.pop(); + } + } + + /** + * Unsubscribe from any open subscriptions + */ + ngOnDestroy(): void { + if (isNotEmpty(this.subscriptions)) { + this.subscriptions.forEach((sub: Subscription) => { + sub.unsubscribe(); + }); + } + } +} diff --git a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html index e424e2c907..d1281f450a 100644 --- a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html +++ b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.html @@ -1,18 +1,20 @@ - - - - -
-
- {{'item.page.related-items.view-more' | - translate:{ amount: (total - representations?.length < incrementBy) ? total - representations?.length : incrementBy } }} + + + + + +
+
+ {{'item.page.related-items.view-more' | + translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }} +
+
+ {{'item.page.related-items.view-less' | + translate:{ amount: representations?.length } }} +
-
- {{'item.page.related-items.view-less' | - translate:{ amount: (representations?.length < limit) ? (representations?.length + incrementBy) - limit : incrementBy } }} -
-
+ diff --git a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.ts b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.ts index 02fb5e8d75..805b9747a9 100644 --- a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.ts +++ b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.ts @@ -12,7 +12,7 @@ import { getSucceededRemoteData } from '../../../core/shared/operators'; import { Relationship } from '../../../core/shared/item-relationships/relationship.model'; import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model'; import { Subscription } from 'rxjs/internal/Subscription'; -import { PaginatedList } from '../../../core/data/paginated-list'; +import { AbstractIncrementalListComponent } from '../abstract-incremental-list/abstract-incremental-list.component'; @Component({ selector: 'ds-metadata-representation-list', @@ -24,7 +24,7 @@ import { PaginatedList } from '../../../core/data/paginated-list'; * It expects an itemType to resolve the metadata to a an item * It expects a label to put on top of the list */ -export class MetadataRepresentationListComponent implements OnInit, OnDestroy { +export class MetadataRepresentationListComponent extends AbstractIncrementalListComponent> { /** * The parent of the list of related items to display */ @@ -45,13 +45,6 @@ export class MetadataRepresentationListComponent implements OnInit, OnDestroy { */ @Input() label: string; - /** - * The max amount of representations to display - * Defaults to 10 - * The default can optionally be overridden by providing the limit as input to the component - */ - @Input() limit = 10; - /** * The amount to increment the list by when clicking "view more" * Defaults to 10 @@ -59,60 +52,34 @@ export class MetadataRepresentationListComponent implements OnInit, OnDestroy { */ @Input() incrementBy = 10; - /** - * Is the list (re-)loading? - */ - loading = false; - - /** - * A list of metadata-representations to display - */ - representations$: Observable; - - /** - * The originally provided limit - * Used for resetting the limit to the original value when collapsing the list - */ - originalLimit: number; - /** * The total amount of metadata values available */ total: number; - /** - * Subscription on representations used to update the "loading" property of this component - */ - representationsSub: Subscription; - constructor(public relationshipService: RelationshipService) { - } - - ngOnInit(): void { - this.originalLimit = this.limit; - this.setRepresentations(); + super(); } /** - * Initialize the metadata representations + * Get a specific page + * @param page The page to fetch */ - setRepresentations() { + getPage(page: number): Observable { const metadata = this.parentItem.findMetadataSortedByPlace(this.metadataField); this.total = metadata.length; - this.representations$ = this.resolveMetadataRepresentations(metadata); - this.representationsSub = this.representations$.subscribe((represenations: MetadataRepresentation[]) => { - this.loading = represenations.length !== this.limit && represenations.length !== this.total; - }); + return this.resolveMetadataRepresentations(metadata, page); } /** * Resolve a list of metadata values to a list of metadata representations - * @param metadata + * @param metadata The list of all metadata values + * @param page The page to return representations for */ - resolveMetadataRepresentations(metadata: MetadataValue[]): Observable { + resolveMetadataRepresentations(metadata: MetadataValue[], page: number): Observable { return observableZip( ...metadata - .slice(0, this.limit) + .slice((this.objects.length * this.incrementBy), (this.objects.length * this.incrementBy) + this.incrementBy) .map((metadatum: any) => Object.assign(new MetadataValue(), metadatum)) .map((metadatum: MetadataValue) => { if (metadatum.isVirtual) { @@ -137,33 +104,4 @@ export class MetadataRepresentationListComponent implements OnInit, OnDestroy { }) ); } - - /** - * Expand the list to display more metadata representations - */ - viewMore() { - this.limit = this.limit + this.incrementBy; - this.loading = true; - this.setRepresentations(); - } - - /** - * Collapse the list to display less metadata representations - */ - viewLess() { - if (this.limit > this.originalLimit) { - this.limit = this.limit - this.incrementBy; - } - this.loading = true; - this.setRepresentations(); - } - - /** - * Unsubscribe from the representations subscription - */ - ngOnDestroy(): void { - if (this.representationsSub) { - this.representationsSub.unsubscribe(); - } - } } diff --git a/src/app/+item-page/simple/related-items/related-items-component.ts b/src/app/+item-page/simple/related-items/related-items-component.ts index 5698e9ab1f..c9ef8ab2a0 100644 --- a/src/app/+item-page/simple/related-items/related-items-component.ts +++ b/src/app/+item-page/simple/related-items/related-items-component.ts @@ -1,12 +1,12 @@ -import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { Item } from '../../../core/shared/item.model'; import { Observable } from 'rxjs/internal/Observable'; import { RemoteData } from '../../../core/data/remote-data'; import { PaginatedList } from '../../../core/data/paginated-list'; import { RelationshipService } from '../../../core/data/relationship.service'; import { FindListOptions } from '../../../core/data/request.models'; -import { Subscription } from 'rxjs/internal/Subscription'; import { ViewMode } from '../../../core/shared/view-mode.model'; +import { AbstractIncrementalListComponent } from '../abstract-incremental-list/abstract-incremental-list.component'; @Component({ selector: 'ds-related-items', @@ -17,7 +17,7 @@ import { ViewMode } from '../../../core/shared/view-mode.model'; * This component is used for displaying relations between items * It expects a parent item and relationship type, as well as a label to display on top */ -export class RelatedItemsComponent implements OnInit, OnDestroy { +export class RelatedItemsComponent extends AbstractIncrementalListComponent>>> { /** * The parent of the list of related items to display */ @@ -29,13 +29,6 @@ export class RelatedItemsComponent implements OnInit, OnDestroy { */ @Input() relationType: string; - /** - * The max amount of relations to display - * Defaults to 5 - * The default can optionally be overridden by providing the limit as input to the component - */ - @Input() limit = 5; - /** * The amount to increment the list by when clicking "view more" * Defaults to 5 @@ -54,77 +47,21 @@ export class RelatedItemsComponent implements OnInit, OnDestroy { */ @Input() label: string; - /** - * Is the list (re-)loading? - */ - loading = false; - - /** - * The list of related items - */ - items$: Observable>>; - /** * The view-mode we're currently on - * @type {ElementViewMode} + * @type {ViewMode} */ viewMode = ViewMode.ListElement; - /** - * The originally provided limit - * Used for comparing the current size with the original - */ - originalLimit: number; - - /** - * Subscription on items used to update the "loading" property of this component - */ - itemSub: Subscription; - constructor(public relationshipService: RelationshipService) { - } - - ngOnInit(): void { - this.originalLimit = this.limit; - this.reloadItems(); + super(); } /** - * Reload the current list of items (using the current limit) + * Get a specific page + * @param page The page to fetch */ - reloadItems() { - this.items$ = this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, Object.assign(this.options, { elementsPerPage: this.limit })); - this.itemSub = this.items$.subscribe((itemsRD: RemoteData>) => { - this.loading = !(itemsRD.hasSucceeded && itemsRD.payload && itemsRD.payload.page.length > 0); - }); - } - - /** - * Expand the list to display more - */ - viewMore() { - this.limit = this.limit + this.incrementBy; - this.loading = true; - this.reloadItems(); - } - - /** - * Collapse the list to display less - */ - viewLess() { - if (this.limit > this.originalLimit) { - this.limit = this.limit - this.incrementBy; - } - this.loading = true; - this.reloadItems(); - } - - /** - * Unsubscribe from the item subscription - */ - ngOnDestroy(): void { - if (this.itemSub) { - this.itemSub.unsubscribe(); - } + getPage(page: number): Observable>> { + return this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, Object.assign(this.options, { elementsPerPage: this.incrementBy, currentPage: page })); } } diff --git a/src/app/+item-page/simple/related-items/related-items.component.html b/src/app/+item-page/simple/related-items/related-items.component.html index d6251e2302..11cedc4040 100644 --- a/src/app/+item-page/simple/related-items/related-items.component.html +++ b/src/app/+item-page/simple/related-items/related-items.component.html @@ -1,18 +1,20 @@ - - - - -
- + From c31b1725a8ae9b43e6378dea5c4c6d556abd6628 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Mon, 9 Dec 2019 15:25:43 +0100 Subject: [PATCH 5/5] 66155: Fixed test cases and AoT build --- src/app/+item-page/item-page.module.ts | 4 ++- ...data-representation-list.component.spec.ts | 33 ++++++++----------- .../related-items.component.spec.ts | 33 +++++++++++-------- 3 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/app/+item-page/item-page.module.ts b/src/app/+item-page/item-page.module.ts index 940868a0c6..5c54becdde 100644 --- a/src/app/+item-page/item-page.module.ts +++ b/src/app/+item-page/item-page.module.ts @@ -28,6 +28,7 @@ import { MetadataValuesComponent } from './field-components/metadata-values/meta import { MetadataFieldWrapperComponent } from './field-components/metadata-field-wrapper/metadata-field-wrapper.component'; import { TabbedRelatedEntitiesSearchComponent } from './simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component'; import { StatisticsModule } from '../statistics/statistics.module'; +import { AbstractIncrementalListComponent } from './simple/abstract-incremental-list/abstract-incremental-list.component'; @NgModule({ imports: [ @@ -57,7 +58,8 @@ import { StatisticsModule } from '../statistics/statistics.module'; GenericItemPageFieldComponent, MetadataRepresentationListComponent, RelatedEntitiesSearchComponent, - TabbedRelatedEntitiesSearchComponent + TabbedRelatedEntitiesSearchComponent, + AbstractIncrementalListComponent ], exports: [ ItemComponent, diff --git a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts index d7fbd710aa..ad62ce4418 100644 --- a/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts +++ b/src/app/+item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts @@ -8,6 +8,7 @@ import { Relationship } from '../../../core/shared/item-relationships/relationsh import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils'; import { TranslateModule } from '@ngx-translate/core'; import { VarDirective } from '../../../shared/utils/var.directive'; +import { of as observableOf } from 'rxjs'; const itemType = 'Person'; const metadataField = 'dc.contributor.author'; @@ -89,37 +90,29 @@ describe('MetadataRepresentationListComponent', () => { expect(fields.length).toBe(2); }); - it('should initialize the original limit', () => { - expect(comp.originalLimit).toEqual(comp.limit); + it('should contain one page of items', () => { + expect(comp.objects.length).toEqual(1); }); - describe('when viewMore is called', () => { - let originalLimit; - + describe('when increase is called', () => { beforeEach(() => { - // Store the original value of limit - originalLimit = comp.limit; - comp.viewMore(); + comp.increase(); }); - it('should increment the limit with incrementBy', () => { - expect(comp.limit).toEqual(originalLimit + comp.incrementBy); + it('should add a new page to the list', () => { + expect(comp.objects.length).toEqual(2); }); }); - describe('when viewLess is called', () => { - let originalLimit; - + describe('when decrease is called', () => { beforeEach(() => { - // Store the original value of limit - originalLimit = comp.limit; - // Increase limit with incrementBy - comp.limit = originalLimit + comp.incrementBy; - comp.viewLess(); + // Add a second page + comp.objects.push(observableOf(undefined)); + comp.decrease(); }); - it('should reset the limit to the original value', () => { - expect(comp.limit).toEqual(originalLimit); + it('should decrease the list of pages', () => { + expect(comp.objects.length).toEqual(1); }); }); diff --git a/src/app/+item-page/simple/related-items/related-items.component.spec.ts b/src/app/+item-page/simple/related-items/related-items.component.spec.ts index 71562c4398..5b1f33c64d 100644 --- a/src/app/+item-page/simple/related-items/related-items.component.spec.ts +++ b/src/app/+item-page/simple/related-items/related-items.component.spec.ts @@ -10,6 +10,7 @@ import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils import { RelationshipService } from '../../../core/data/relationship.service'; import { TranslateModule } from '@ngx-translate/core'; import { VarDirective } from '../../../shared/utils/var.directive'; +import { of as observableOf } from 'rxjs'; const parentItem: Item = Object.assign(new Item(), { bundles: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])), @@ -66,29 +67,33 @@ describe('RelatedItemsComponent', () => { expect(fields.length).toBe(mockItems.length); }); - describe('when viewMore is called', () => { + it('should contain one page of items', () => { + expect(comp.objects.length).toEqual(1); + }); + + describe('when increase is called', () => { beforeEach(() => { - comp.viewMore(); + comp.increase(); }); - it('should call relationship-service\'s getRelatedItemsByLabel with the correct arguments', () => { - expect(relationshipService.getRelatedItemsByLabel).toHaveBeenCalledWith(parentItem, relationType, Object.assign(comp.options, { elementsPerPage: comp.limit + comp.incrementBy })); + it('should add a new page to the list', () => { + expect(comp.objects.length).toEqual(2); + }); + + it('should call relationship-service\'s getRelatedItemsByLabel with the correct arguments (second page)', () => { + expect(relationshipService.getRelatedItemsByLabel).toHaveBeenCalledWith(parentItem, relationType, Object.assign(comp.options, { elementsPerPage: comp.incrementBy, currentPage: 2 })); }); }); - describe('when viewLess is called', () => { - let originalLimit; - + describe('when decrease is called', () => { beforeEach(() => { - // Store the original value of limit - originalLimit = comp.limit; - // Increase limit with incrementBy - comp.limit = originalLimit + comp.incrementBy; - comp.viewLess(); + // Add a second page + comp.objects.push(observableOf(undefined)); + comp.decrease(); }); - it('should call relationship-service\'s getRelatedItemsByLabel with the correct arguments', () => { - expect(relationshipService.getRelatedItemsByLabel).toHaveBeenCalledWith(parentItem, relationType, Object.assign(comp.options, { elementsPerPage: originalLimit })); + it('should decrease the list of pages', () => { + expect(comp.objects.length).toEqual(1); }); });