[DSC-1454] limit metadata value list in the full item page

Author: atarix83

src/app/item-page/full/full-item-page.component.html

@@ -20,11 +20,18 @@
           <table class="table  table-striped">
             <tbody>
             <ng-container *ngFor="let mdEntry of (metadata$ | async) | keyvalue">
-              <tr *ngFor="let mdValue of mdEntry.value">
+              <tr *ngFor="let mdValue of mdEntry.value | slice:0:(metadataMapLimit$ | async).get(mdEntry.key)">
                 <td>{{mdEntry.key}}</td>
                 <td>{{mdValue.value}}</td>
                 <td>{{mdValue.language}}</td>
               </tr>
+              <tr *ngIf="mdEntry.value.length > (metadataMapLimit$ | async).get(mdEntry.key)">
+                <td class="text-center" colspan="3">
+                  <button class="btn btn-link" (click)="increaseLimit(mdEntry.key)" data-test="btn-more">
+                    {{'item.truncatable-part.show-more' | translate}}
+                  </button>
+                </td>
+              </tr>
             </ng-container>
             </tbody>
           </table>

src/app/item-page/full/full-item-page.component.spec.ts

@@ -32,6 +32,77 @@ const mockItem: Item = Object.assign(new Item(), {
         language: 'en_US',
         value: 'test item'
       }
+    ],
+    'dc.contributor.author': [
+      {
+        value: 'author1'
+      },
+      {
+        value: 'author2'
+      },
+      {
+        value: 'author3'
+      },
+      {
+        value: 'author4'
+      },
+      {
+        value: 'author5'
+      },
+      {
+        value: 'author6'
+      },
+      {
+        value: 'author7'
+      },
+      {
+        value: 'author8'
+      },
+      {
+        value: 'author9'
+      },
+      {
+        value: 'author10'
+      },
+      {
+        value: 'author11'
+      },
+      {
+        value: 'author12'
+      },
+      {
+        value: 'author13'
+      },
+      {
+        value: 'author14'
+      },
+      {
+        value: 'author15'
+      },
+      {
+        value: 'author16'
+      },
+      {
+        value: 'author17'
+      },
+      {
+        value: 'author18'
+      },
+      {
+        value: 'author19'
+      },
+      {
+        value: 'author20'
+      },
+      {
+        value: 'author21'
+      },
+      {
+        value: 'author22'
+      },
+      {
+        value: 'author23'
+      }
     ]
   }
 });
@@ -142,7 +213,7 @@ describe('FullItemPageComponent', () => {
 
   it('should display the item\'s metadata', () => {
     const table = fixture.debugElement.query(By.css('table'));
-    for (const metadatum of mockItem.allMetadata(Object.keys(mockItem.metadata))) {
+    for (const metadatum of mockItem.allMetadata('dc.title')) {
       expect(table.nativeElement.innerHTML).toContain(metadatum.value);
     }
   });
@@ -227,4 +298,28 @@ describe('FullItemPageComponent', () => {
       expect(linkHeadService.addTag).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe('when the item has many metadata values', () => {
+    beforeEach(() => {
+      comp.itemRD$ = new BehaviorSubject<RemoteData<Item>>(createSuccessfulRemoteDataObject(mockItem));
+      fixture.detectChanges();
+    });
+
+    it('should not display all the item\'s metadata', () => {
+      const table = fixture.debugElement.query(By.css('table'));
+      const visibleValues = mockItem.allMetadata('dc.contributor.author').slice(0, 20);
+      const hiddenValues = mockItem.allMetadata('dc.contributor.author').slice(20, 40);
+      for (const metadatum of visibleValues) {
+        expect(table.nativeElement.innerHTML).toContain(metadatum.value);
+      }
+      for (const metadatum of hiddenValues) {
+        expect(table.nativeElement.innerHTML).not.toContain(metadatum.value);
+      }
+    });
+
+    it('should display show more button', () => {
+      const btn = fixture.debugElement.query(By.css('button[data-test="btn-more"]'));
+      expect(btn).not.toBeNull();
+    });
+  });
 });

src/app/item-page/full/full-item-page.component.ts

@@ -1,4 +1,4 @@
-import { filter, map } from 'rxjs/operators';
+import { filter, map, tap } from 'rxjs/operators';
 import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { ActivatedRoute, Data, Router } from '@angular/router';
 
@@ -38,6 +38,10 @@ export class FullItemPageComponent extends ItemPageComponent implements OnInit,
 
   metadata$: Observable<MetadataMap>;
 
+  metadataMapLimit$: BehaviorSubject<Map<string, number>> = new BehaviorSubject<Map<string, number>>(new Map<string, number>());
+
+  limitSize = 20;
+
   /**
    * True when the itemRD has been originated from its workspaceite/workflowitem, false otherwise.
    */
@@ -66,7 +70,15 @@ export class FullItemPageComponent extends ItemPageComponent implements OnInit,
     this.metadata$ = this.itemRD$.pipe(
       map((rd: RemoteData<Item>) => rd.payload),
       filter((item: Item) => hasValue(item)),
-      map((item: Item) => item.metadata),);
+      map((item: Item) => item.metadata),
+      tap((metadataMap: MetadataMap) => {
+        const metadataMapLimit: Map<string, number> = new Map<string, number>();
+        Object.keys(metadataMap).forEach((key: string) => {
+          metadataMapLimit.set(key, this.limitSize);
+        });
+        this.metadataMapLimit$.next(metadataMapLimit);
+      })
+     );
 
     this.subs.push(this.route.data.subscribe((data: Data) => {
         this.fromSubmissionObject = hasValue(data.wfi) || hasValue(data.wsi);
@@ -84,4 +96,10 @@ export class FullItemPageComponent extends ItemPageComponent implements OnInit,
   ngOnDestroy() {
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }
+
+  increaseLimit(key: string) {
+    const tmpMap: Map<string, number> = this.metadataMapLimit$.value;
+    tmpMap.set(key, tmpMap.get(key) + this.limitSize);
+    this.metadataMapLimit$.next(tmpMap);
+  }
 }