From aedd4b99eec216cce6fc63978fd1d1b6db0b6e40 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 14 Nov 2019 13:29:39 +0100 Subject: [PATCH] 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 @@ - - + + - - - + + +
+ + +
+