diff --git a/resources/i18n/en.json b/resources/i18n/en.json index e91b2776c1..e660189602 100644 --- a/resources/i18n/en.json +++ b/resources/i18n/en.json @@ -290,6 +290,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.subject": "Keywords", "item.page.uri": "URI", "item.select.confirm": "Confirm selected", diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.html b/src/app/+item-page/simple/item-types/publication/publication.component.html index b61fa6bbc1..70e46014d0 100644 --- a/src/app/+item-page/simple/item-types/publication/publication.component.html +++ b/src/app/+item-page/simple/item-types/publication/publication.component.html @@ -32,15 +32,18 @@ [representations]="(authors$ | async)?.payload?.page"> diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.ts b/src/app/+item-page/simple/item-types/publication/publication.component.ts index fa4b0988d5..16c81a1d14 100644 --- a/src/app/+item-page/simple/item-types/publication/publication.component.ts +++ b/src/app/+item-page/simple/item-types/publication/publication.component.ts @@ -1,6 +1,5 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; -import { Item } from '../../../../core/shared/item.model'; import { DEFAULT_ITEM_TYPE, ItemViewMode, rendersItemType @@ -24,26 +23,7 @@ export class PublicationComponent extends ItemComponent implements OnInit { */ authors$: Observable>>; - /** - * The projects related to this publication - */ - projects$: Observable>>; - - /** - * The organisation units related to this publication - */ - orgUnits$: Observable>>; - - /** - * The journal issues related to this publication - */ - journalIssues$: Observable>>; - ngOnInit(): void { this.authors$ = this.buildRepresentations('Person', 'dc.contributor.author', 'isAuthorOfPublication'); - - this.projects$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isProjectOfPublication'); - this.orgUnits$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isOrgUnitOfPublication'); - this.journalIssues$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalIssueOfPublication'); } } diff --git a/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts b/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts index 36c605fdc1..2a413f482d 100644 --- a/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts +++ b/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts @@ -128,7 +128,7 @@ export const paginatedRelationsToItems = (thisId: string) => ), distinctUntilChanged(compareArraysUsingIds()), map((relatedItems: Item[]) => - Object.assign(relationshipsRD, { payload: { page: relatedItems } }) + Object.assign(relationshipsRD, { payload: Object.assign(relationshipsRD.payload, { page: relatedItems } )}) ) ) }) @@ -171,7 +171,7 @@ export const relationsToRepresentations = (parentId: string, itemType: string, m }) ).pipe( distinctUntilChanged(compareArraysUsingIds()), - map((representations: MetadataRepresentation[]) => Object.assign(relRD, { payload: { page: representations } })) + map((representations: MetadataRepresentation[]) => Object.assign(relRD, { payload: Object.assign(relRD.payload, { page: representations }) })) ) ) ); 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 7b54d7316a..838508524c 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,6 +1,11 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Item } from '../../../core/shared/item.model'; import { ItemViewMode } from '../../../shared/items/item-type-decorator'; +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 { FindAllOptions } from '../../../core/data/request.models'; @Component({ selector: 'ds-related-items', @@ -9,22 +14,72 @@ import { ItemViewMode } from '../../../shared/items/item-type-decorator'; }) /** * This component is used for displaying relations between items - * It expects a list of items to display and a label to put on top + * It expects a parent item and relationship type, as well as a label to display on top */ -export class RelatedItemsComponent { +export class RelatedItemsComponent implements OnInit { /** - * A list of items to display + * The parent of the list of related items to display */ - @Input() items: Item[]; + @Input() parentItem: Item; + + /** + * The label of the relationship type to display + * Used in sending a search request to the REST API + */ + @Input() relationType: string; + + /** + * Default options to start a search request with + * Optional input, should you wish a different page size (or other options) + */ + @Input() options = Object.assign(new FindAllOptions(), { elementsPerPage: 5 }); /** * An i18n label to use as a title for the list (usually describes the relation) */ @Input() label: string; + /** + * 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} */ viewMode = ItemViewMode.Element; + + /** + * Whether or not the list is currently expanded to show all related items + */ + showingAll = false; + + constructor(public relationshipService: RelationshipService) { + } + + ngOnInit(): void { + this.items$ = this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, this.options); + } + + /** + * Expand the list to display all related items + */ + viewMore() { + this.items$ = this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, this.allOptions); + this.showingAll = true; + } + + /** + * Collapse the list to display the originally displayed items + */ + viewLess() { + this.items$ = this.relationshipService.getRelatedItemsByLabel(this.parentItem, this.relationType, this.options); + this.showingAll = false; + } } 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 4b284ad63c..20d4c6c38c 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,5 +1,11 @@ - - + +
+ {{'item.page.related-items.view-more' | translate}} +
+
+ {{'item.page.related-items.view-less' | translate}} +
diff --git a/src/app/core/data/relationship.service.ts b/src/app/core/data/relationship.service.ts index 5791ab2165..db4af49d8a 100644 --- a/src/app/core/data/relationship.service.ts +++ b/src/app/core/data/relationship.service.ts @@ -226,9 +226,10 @@ export class RelationshipService extends DataService { * and return the items as an array * @param item * @param label + * @param options */ - getRelatedItemsByLabel(item: Item, label: string): Observable>> { - return this.getItemRelationshipsByLabel(item, label).pipe(paginatedRelationsToItems(item.uuid)); + getRelatedItemsByLabel(item: Item, label: string, options?: FindAllOptions): Observable>> { + return this.getItemRelationshipsByLabel(item, label, options).pipe(paginatedRelationsToItems(item.uuid)); } /** @@ -236,11 +237,15 @@ export class RelationshipService extends DataService { * and return the items as an array * @param item * @param label + * @param options */ - getItemRelationshipsByLabel(item: Item, label: string): Observable>> { - const options = new FindAllOptions(); - options.searchParams = [ new SearchParam('label', label), new SearchParam('dso', item.id) ]; - return this.searchBy('byLabel', options); + getItemRelationshipsByLabel(item: Item, label: string, options?: FindAllOptions): Observable>> { + let findAllOptions = new FindAllOptions(); + if (options) { + findAllOptions = Object.assign(new FindAllOptions(), options); + } + findAllOptions.searchParams = [ new SearchParam('label', label), new SearchParam('dso', item.id) ]; + return this.searchBy('byLabel', findAllOptions); } /** diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html index b69827cd96..8db50e78c4 100644 --- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html +++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html @@ -29,12 +29,14 @@
>>; - - /** - * The publications related to this journal issue - */ - publications$: Observable>>; - - ngOnInit(): void { - this.volumes$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalVolumeOfIssue'); - this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfJournalIssue'); - } } diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html index 902b0e9d73..150037eccb 100644 --- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html +++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html @@ -17,11 +17,13 @@
>>; - - /** - * The journal issues related to this journal volume - */ - issues$: Observable>>; - - ngOnInit(): void { - this.journals$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalOfVolume'); - this.issues$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isIssueOfJournalVolume'); - } } diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html index ee212d9be6..d22933a657 100644 --- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html +++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html @@ -21,7 +21,8 @@
>>; - - ngOnInit(): void { - this.volumes$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isVolumeOfJournal'); - } } diff --git a/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html b/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html index 91e9fa0374..a3d2fedb10 100644 --- a/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html +++ b/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html @@ -25,15 +25,18 @@
>>; - - /** - * The projects related to this organisation unit - */ - projects$: Observable>>; - - /** - * The publications related to this organisation unit - */ - publications$: Observable>>; - - ngOnInit(): void { - this.people$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPersonOfOrgUnit'); - this.projects$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isProjectOfOrgUnit'); - this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfOrgUnit'); - } +export class OrgunitComponent extends ItemComponent { } diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html index ba6b83bbf6..3f0ca90368 100644 --- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html +++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html @@ -25,11 +25,13 @@
>>; - - /** - * The projects related to this person - */ - projects$: Observable>>; - - /** - * The organisation units related to this person - */ - orgUnits$: Observable>>; - - ngOnInit(): void { - this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfAuthor'); - this.projects$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isProjectOfPerson'); - this.orgUnits$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isOrgUnitOfPerson'); - } } diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html index c6eb0690ce..3ca36b9afd 100644 --- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html +++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html @@ -29,15 +29,18 @@
>>; - /** - * The people related to this project - */ - people$: Observable>>; - - /** - * The publications related to this project - */ - publications$: Observable>>; - - /** - * The organisation units related to this project - */ - orgUnits$: Observable>>; - ngOnInit(): void { this.contributors$ = this.buildRepresentations('OrgUnit', 'project.contributor.other', 'isOrgUnitOfProject'); - - this.people$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPersonOfProject'); - this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfProject'); - this.orgUnits$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isOrgUnitOfProject'); } }