64574: View-more/less for related-items + refactoring item pages

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",

src/app/+item-page/simple/item-types/publication/publication.component.html

@@ -32,15 +32,18 @@
       [representations]="(authors$ | async)?.payload?.page">
     </ds-metadata-representation-list>
     <ds-related-items
-      [items]="(projects$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isProjectOfPublication'"
       [label]="'relationships.isProjectOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="(orgUnits$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isOrgUnitOfPublication'"
       [label]="'relationships.isOrgUnitOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="(journalIssues$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isJournalIssueOfPublication'"
       [label]="'relationships.isJournalIssueOf' | translate">
     </ds-related-items>
     <ds-item-page-abstract-field [item]="item"></ds-item-page-abstract-field>

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<RemoteData<PaginatedList<MetadataRepresentation>>>;
 
-  /**
-   * The projects related to this publication
-   */
-  projects$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The organisation units related to this publication
-   */
-  orgUnits$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The journal issues related to this publication
-   */
-  journalIssues$: Observable<RemoteData<PaginatedList<Item>>>;
-
   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');
   }
 }

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 }) }))
         )
       )
     );

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<RemoteData<PaginatedList<Item>>>;
+
+  /**
+   * 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;
+  }
 }

src/app/+item-page/simple/related-items/related-items.component.html

@@ -1,5 +1,11 @@
-<ds-metadata-field-wrapper *ngIf="items && items.length > 0" [label]="label">
-  <ds-item-type-switcher *ngFor="let item of items"
+<ds-metadata-field-wrapper *ngIf="(items$ | async)?.payload?.page?.length > 0" [label]="label">
+  <ds-item-type-switcher *ngFor="let item of (items$ | async)?.payload?.page"
                            [object]="item" [viewMode]="viewMode">
   </ds-item-type-switcher>
+  <div *ngIf="(items$ | async)?.payload?.page?.length < (items$ | async)?.payload?.totalElements" class="mt-2">
+    <a [routerLink]="" (click)="viewMore()">{{'item.page.related-items.view-more' | translate}}</a>
+  </div>
+  <div *ngIf="showingAll" class="mt-2">
+    <a [routerLink]="" (click)="viewLess()">{{'item.page.related-items.view-less' | translate}}</a>
+  </div>
 </ds-metadata-field-wrapper>

src/app/core/data/relationship.service.ts

@@ -226,9 +226,10 @@ export class RelationshipService extends DataService<Relationship> {
    * and return the items as an array
    * @param item
    * @param label
+   * @param options
    */
-  getRelatedItemsByLabel(item: Item, label: string): Observable<RemoteData<PaginatedList<Item>>> {
-    return this.getItemRelationshipsByLabel(item, label).pipe(paginatedRelationsToItems(item.uuid));
+  getRelatedItemsByLabel(item: Item, label: string, options?: FindAllOptions): Observable<RemoteData<PaginatedList<Item>>> {
+    return this.getItemRelationshipsByLabel(item, label, options).pipe(paginatedRelationsToItems(item.uuid));
   }
 
   /**
@@ -236,11 +237,15 @@ export class RelationshipService extends DataService<Relationship> {
    * and return the items as an array
    * @param item
    * @param label
+   * @param options
    */
-  getItemRelationshipsByLabel(item: Item, label: string): Observable<RemoteData<PaginatedList<Relationship>>> {
-    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<RemoteData<PaginatedList<Relationship>>> {
+    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);
   }
 
   /**

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -29,12 +29,14 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="(volumes$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isJournalVolumeOfIssue'"
       [label]="'relationships.isSingleVolumeOf' | translate">
     </ds-related-items>
     <ds-related-items
       class="mb-1 mt-1"
-      [items]="(publications$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isPublicationOfJournalIssue'"
       [label]="'relationships.isPublicationOfJournalIssue' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts

@@ -1,10 +1,6 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('JournalIssue', ItemViewMode.Full)
 @Component({
@@ -16,18 +12,4 @@ import { PaginatedList } from '../../../../core/data/paginated-list';
  * The component for displaying metadata and relations of an item of the type Journal Issue
  */
 export class JournalIssueComponent extends ItemComponent {
-  /**
-   * The volumes related to this journal issue
-   */
-  volumes$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The publications related to this journal issue
-   */
-  publications$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  ngOnInit(): void {
-    this.volumes$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalVolumeOfIssue');
-    this.publications$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isPublicationOfJournalIssue');
-  }
 }

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -17,11 +17,13 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="(journals$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isJournalOfVolume'"
       [label]="'relationships.isSingleJournalOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="(issues$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isIssueOfJournalVolume'"
       [label]="'relationships.isIssueOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts

@@ -1,10 +1,6 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('JournalVolume', ItemViewMode.Full)
 @Component({
@@ -16,18 +12,4 @@ import { PaginatedList } from '../../../../core/data/paginated-list';
  * The component for displaying metadata and relations of an item of the type Journal Volume
  */
 export class JournalVolumeComponent extends ItemComponent {
-  /**
-   * The journals related to this journal volume
-   */
-  journals$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The journal issues related to this journal volume
-   */
-  issues$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  ngOnInit(): void {
-    this.journals$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isJournalOfVolume');
-    this.issues$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isIssueOfJournalVolume');
-  }
 }

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -21,7 +21,8 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="(volumes$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isVolumeOfJournal'"
       [label]="'relationships.isVolumeOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field class="item-page-fields" [item]="item"

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts

@@ -1,10 +1,6 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('Journal', ItemViewMode.Full)
 @Component({
@@ -16,12 +12,4 @@ import { PaginatedList } from '../../../../core/data/paginated-list';
  * The component for displaying metadata and relations of an item of the type Journal
  */
 export class JournalComponent extends ItemComponent {
-  /**
-   * The volumes related to this journal
-   */
-  volumes$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  ngOnInit(): void {
-    this.volumes$ = this.relationshipService.getRelatedItemsByLabel(this.item, 'isVolumeOfJournal');
-  }
 }

src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html

@@ -25,15 +25,18 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="(people$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isPersonOfOrgUnit'"
       [label]="'relationships.isPersonOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="(projects$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isProjectOfOrgUnit'"
       [label]="'relationships.isProjectOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="(publications$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isPublicationOfOrgUnit'"
       [label]="'relationships.isPublicationOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.ts

@@ -1,10 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Item } from '../../../../core/shared/item.model';
+import { Component } from '@angular/core';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('OrgUnit', ItemViewMode.Full)
 @Component({
@@ -15,25 +11,5 @@ import { PaginatedList } from '../../../../core/data/paginated-list';
 /**
  * The component for displaying metadata and relations of an item of the type Organisation Unit
  */
-export class OrgunitComponent extends ItemComponent implements OnInit {
-  /**
-   * The people related to this organisation unit
-   */
-  people$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The projects related to this organisation unit
-   */
-  projects$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The publications related to this organisation unit
-   */
-  publications$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  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 {
 }

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -25,11 +25,13 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="(projects$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isProjectOfPerson'"
       [label]="'relationships.isProjectOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="(orgUnits$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isOrgUnitOfPerson'"
       [label]="'relationships.isOrgUnitOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/research-entities/item-pages/person/person.component.ts

@@ -1,10 +1,6 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { PaginatedList } from '../../../../core/data/paginated-list';
 
 @rendersItemType('Person', ItemViewMode.Full)
 @Component({
@@ -16,24 +12,4 @@ import { PaginatedList } from '../../../../core/data/paginated-list';
  * The component for displaying metadata and relations of an item of the type Person
  */
 export class PersonComponent extends ItemComponent {
-  /**
-   * The publications related to this person
-   */
-  publications$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The projects related to this person
-   */
-  projects$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The organisation units related to this person
-   */
-  orgUnits$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  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');
-  }
 }

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -29,15 +29,18 @@
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
-      [items]="(people$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isPersonOfProject'"
       [label]="'relationships.isPersonOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="(publications$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isPublicationOfProject'"
       [label]="'relationships.isPublicationOf' | translate">
     </ds-related-items>
     <ds-related-items
-      [items]="(orgUnits$ | async)?.payload?.page"
+      [parentItem]="item"
+      [relationType]="'isOrgUnitOfProject'"
       [label]="'relationships.isOrgUnitOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"

src/app/entity-groups/research-entities/item-pages/project/project.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Item } from '../../../../core/shared/item.model';
 import { MetadataRepresentation } from '../../../../core/shared/metadata-representation/metadata-representation.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
@@ -22,26 +21,7 @@ export class ProjectComponent extends ItemComponent implements OnInit {
    */
   contributors$: Observable<RemoteData<PaginatedList<MetadataRepresentation>>>;
 
-  /**
-   * The people related to this project
-   */
-  people$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The publications related to this project
-   */
-  publications$: Observable<RemoteData<PaginatedList<Item>>>;
-
-  /**
-   * The organisation units related to this project
-   */
-  orgUnits$: Observable<RemoteData<PaginatedList<Item>>>;
-
   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');
   }
 }