[DSC-1988][DSC-1989] Limit the number of metadata values of truncatab…

…le component based on its collapsible status (item-list-preview.component.ts, item-search-result-list-element.component.ts)
4Science · Oct 30, 2024 · ad9d674 · ad9d674
1 parent 6b21eea
commit ad9d674
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 13 deletions.
diff --git a/...ect-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.html b/...ect-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.html
@@ -18,11 +18,20 @@ <h3 [innerHTML]="dsoTitle" [ngClass]="{'lead': true,'text-muted': !item.firstMet
               <span class="item-list-date" [innerHTML]="item.firstMetadataValue('dc.date.issued') || ('mydspace.results.no-date' | translate)"></span>)
               <span *ngIf="item.hasMetadata(authorMetadata);" class="item-list-authors">
                 <span *ngIf="item.allMetadataValues(authorMetadata).length === 0">{{'mydspace.results.no-authors' | translate}}</span>
-                <span *ngFor="let author of item.limitedMetadata(authorMetadata, authorMetadataLimit); let i=index; let last=last;">
-                  <ds-metadata-link-view *ngIf="!!item && !!author" [item]="item" [metadataName]="authorMetadata"
-                                         [metadata]="author"></ds-metadata-link-view><span
-                  *ngIf="!last">; </span>
-                </span>
+                  <span *ngIf="!(isCollapsed$ | async)">
+                    <span *ngFor="let author of item.allMetadata(authorMetadata); let i=index; let last=last;">
+                      <ds-metadata-link-view *ngIf="!!item && !!author" [item]="item" [metadataName]="authorMetadata"
+                                             [metadata]="author"></ds-metadata-link-view><span
+                      *ngIf="!last">; </span>
+                    </span>
+                  </span>
+                  <span *ngIf="isCollapsed$ | async">
+                    <span *ngFor="let author of item.limitedMetadata(authorMetadata, authorMetadataLimit); let i=index; let last=last;">
+                      <ds-metadata-link-view *ngIf="!!item && !!author" [item]="item" [metadataName]="authorMetadata"
+                                             [metadata]="author"></ds-metadata-link-view><span
+                      *ngIf="!last">; </span>
+                    </span>
+                  </span>
               </span>
             </ds-truncatable-part>
           </span>

diff --git a/...-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts b/...-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts
@@ -12,6 +12,7 @@ import { TranslateLoaderMock } from '../../../mocks/translate-loader.mock';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { VarDirective } from '../../../utils/var.directive';
 import { APP_CONFIG } from '../../../../../config/app-config.interface';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
 
 let component: ItemListPreviewComponent;
 let fixture: ComponentFixture<ItemListPreviewComponent>;
@@ -80,6 +81,10 @@ const enviromentNoThumbs = {
   }
 };
 
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => observableOf(true),
+};
+
 describe('ItemListPreviewComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -95,7 +100,8 @@ describe('ItemListPreviewComponent', () => {
       declarations: [ItemListPreviewComponent, TruncatePipe, VarDirective],
       providers: [
         { provide: 'objectElementProvider', useValue: { mockItemWithAuthorAndDate }},
-        { provide: APP_CONFIG, useValue: environmentUseThumbs }
+        { provide: APP_CONFIG, useValue: environmentUseThumbs },
+        { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
@@ -198,6 +204,33 @@ describe('ItemListPreviewComponent', () => {
       expect(entityField).toBeNull();
     });
   });
+
+
+  describe('When truncatable section is collapsed', () => {
+    beforeEach(() => {
+      component.isCollapsed$ = observableOf(true);
+      component.item = mockItemWithAuthorAndDate;
+      fixture.detectChanges();
+    });
+
+    it('should show limitedMetadata', () => {
+      const authorElements = fixture.debugElement.queryAll(By.css('span.item-list-authors ds-metadata-link-view'));
+      expect(authorElements.length).toBe(mockItemWithAuthorAndDate.limitedMetadata(component.authorMetadata, component.authorMetadataLimit).length);
+    });
+  });
+
+  describe('When truncatable section is expanded', () => {
+    beforeEach(() => {
+      component.isCollapsed$ = observableOf(false);
+      component.item = mockItemWithAuthorAndDate;
+      fixture.detectChanges();
+    });
+
+    it('should show allMetadata', () => {
+      const authorElements = fixture.debugElement.queryAll(By.css('span.item-list-authors ds-metadata-link-view'));
+      expect(authorElements.length).toBe(mockItemWithAuthorAndDate.allMetadata(component.authorMetadata).length);
+    });
+  });
 });
 
 describe('ItemListPreviewComponent', () => {
@@ -215,7 +248,8 @@ describe('ItemListPreviewComponent', () => {
       declarations: [ItemListPreviewComponent, TruncatePipe],
       providers: [
         {provide: 'objectElementProvider', useValue: {mockItemWithAuthorAndDate}},
-        {provide: APP_CONFIG, useValue: enviromentNoThumbs}
+        {provide: APP_CONFIG, useValue: enviromentNoThumbs},
+        { provide: TruncatableService, useValue: truncatableServiceStub },
       ],
 
       schemas: [NO_ERRORS_SCHEMA]

diff --git a/...bject-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.ts b/...bject-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.ts
@@ -11,6 +11,8 @@ import {
   DuplicateMatchMetadataDetailConfig
 } from '../../../../submission/sections/detect-duplicate/models/duplicate-detail-metadata.model';
 import { environment } from '../../../../../environments/environment';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { Observable } from 'rxjs';
 
 /**
  * This component show metadata for the given item object in the list view.
@@ -79,15 +81,18 @@ export class ItemListPreviewComponent implements OnInit {
 
   authorMetadataLimit = environment.followAuthorityMetadataValuesLimit;
 
+  isCollapsed$: Observable<boolean>;
+
   constructor(
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
     public dsoNameService: DSONameService,
+    public truncateService: TruncatableService
   ) {
   }
 
   ngOnInit(): void {
     this.showThumbnails = this.showThumbnails ?? this.appConfig.browseBy.showThumbnails;
     this.dsoTitle = this.dsoNameService.getHitHighlights(this.object, this.item);
+    this.isCollapsed$ = this.truncateService.isCollapsed(this.item.uuid);
   }
-
 }
diff --git a/...element/item-search-result/item-types/item/item-search-result-list-element.component.html b/...element/item-search-result/item-types/item/item-search-result-list-element.component.html
@@ -35,9 +35,18 @@
                       [innerHTML]="firstMetadataValue('dc.date.issued')"></span>)
               </ng-container>
               <span *ngIf="dso.allMetadataValues(authorMetadata).length > 0" class="item-list-authors">
-                <span *ngFor="let author of dso.allMetadata(authorMetadata); let i=index; let last=last;">
-                  <ds-metadata-link-view [item]="dso" [metadata]="author" [metadataName]="authorMetadata"></ds-metadata-link-view><span *ngIf="!last">; </span>
-                </span>
+                <ng-container *ngVar="(isCollapsed() | async) as isCollapsed">
+                  <ng-container *ngIf="isCollapsed">
+                    <span *ngFor="let author of dso.limitedMetadata(authorMetadata, additionalMetadataLimit); let i=index; let last=last;">
+                      <ds-metadata-link-view [item]="dso" [metadata]="author" [metadataName]="authorMetadata"></ds-metadata-link-view><span *ngIf="!last">; </span>
+                    </span>
+                  </ng-container>
+                  <ng-container *ngIf="!isCollapsed">
+                     <span *ngFor="let author of dso.allMetadata(authorMetadata); let i=index; let last=last;">
+                      <ds-metadata-link-view [item]="dso" [metadata]="author" [metadataName]="authorMetadata"></ds-metadata-link-view><span *ngIf="!last">; </span>
+                    </span>
+                  </ng-container>
+                </ng-container>
               </span>
             </ds-truncatable-part>
           </span>

diff --git a/...ment/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts b/...ment/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts
@@ -186,13 +186,17 @@ const enviromentNoThumbs = {
   }
 };
 
+const truncatableServiceStub = {
+  isCollapsed: (id: number) => observableOf(true),
+};
+
 describe('ItemSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
       declarations: [ItemSearchResultListElementComponent, TruncatePipe, VarDirective],
       providers: [
-        { provide: TruncatableService, useValue: {} },
+        { provide: TruncatableService, useValue: truncatableServiceStub },
         { provide: DSONameService, useClass: DSONameServiceMock },
         { provide: APP_CONFIG, useValue: environmentUseThumbs }
       ],
@@ -247,6 +251,32 @@ describe('ItemSearchResultListElementComponent', () => {
     });
   });
 
+  describe('When the item has authors and isCollapsed is true', () => {
+    beforeEach(() => {
+      spyOn(publicationListElementComponent, 'isCollapsed').and.returnValue(observableOf(true));
+      publicationListElementComponent.object = mockItemWithMetadata;
+      fixture.detectChanges();
+    });
+
+    it('should show limitedMetadata', () => {
+      const authorElements = fixture.debugElement.queryAll(By.css('span.item-list-authors ds-metadata-link-view'));
+      expect(authorElements.length).toBe(mockItemWithMetadata.indexableObject.limitedMetadata(publicationListElementComponent.authorMetadata, publicationListElementComponent.additionalMetadataLimit).length);
+    });
+  });
+
+  describe('When the item has authors and isCollapsed is false', () => {
+    beforeEach(() => {
+      spyOn(publicationListElementComponent, 'isCollapsed').and.returnValue(observableOf(false));
+      publicationListElementComponent.object = mockItemWithMetadata;
+      fixture.detectChanges();
+    });
+
+    it('should show allMetadata', () => {
+      const authorElements = fixture.debugElement.queryAll(By.css('span.item-list-authors ds-metadata-link-view'));
+      expect(authorElements.length).toBe(mockItemWithMetadata.indexableObject.allMetadata(publicationListElementComponent.authorMetadata).length);
+    });
+  });
+
   describe('When the item has a publisher', () => {
     beforeEach(() => {
       publicationListElementComponent.object = mockItemWithMetadata;
@@ -375,7 +405,7 @@ describe('ItemSearchResultListElementComponent', () => {
       imports: [TranslateModule.forRoot()],
       declarations: [ItemSearchResultListElementComponent, TruncatePipe],
       providers: [
-        {provide: TruncatableService, useValue: {}},
+        {provide: TruncatableService, useValue: truncatableServiceStub},
         {provide: DSONameService, useClass: DSONameServiceMock},
         { provide: APP_CONFIG, useValue: enviromentNoThumbs }
       ],

diff --git a/...app/shared/object-list/search-result-list-element/search-result-list-element.component.ts b/...app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
@@ -11,6 +11,7 @@ import { TruncatableService } from '../../truncatable/truncatable.service';
 import { Metadata } from '../../../core/shared/metadata.utils';
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
+import { environment } from '../../../../environments/environment';
 
 @Component({
   selector: 'ds-search-result-list-element',
@@ -23,6 +24,11 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
   dso: K;
   dsoTitle: string;
 
+  /**
+   * Limit of additional metadata values to show
+   */
+  additionalMetadataLimit = environment.followAuthorityMetadataValuesLimit;
+
   public constructor(protected truncatableService: TruncatableService,
                      public dsoNameService: DSONameService,
                      @Inject(APP_CONFIG) protected appConfig?: AppConfig) {