[DSC-1974] Refactoring of browse most component in order to use preventMetadataSecurity projection as default

Author: atarix83

src/app/shared/browse-most-elements/abstract-browse-elements.component.ts

@@ -1,6 +1,5 @@
 import { followLink } from '../utils/follow-link-config.model';
 import { CollectionElementLinkType } from '../object-collection/collection-element-link.type';
-import { TopSection } from '../../core/layout/models/section.model';
 import { Component, Input, OnChanges, OnInit, PLATFORM_ID, inject } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
 
@@ -31,17 +30,42 @@ export abstract class AbstractBrowseElementsComponent implements OnInit, OnChang
   protected readonly platformId = inject(PLATFORM_ID);
   protected readonly searchService = inject(SearchService);
 
-  protected followThumbnailLink: boolean; // to be overridden
+  protected abstract followMetricsLink: boolean; // to be overridden
+  protected abstract followThumbnailLink: boolean; // to be overridden
 
+  /**
+   * The context of listable object
+   */
+  @Input() context: Context;
+
+  /**
+   * The pagination options
+   */
   @Input() paginatedSearchOptions: PaginatedSearchOptions;
 
-  @Input() context: Context;
+  /**
+   * Optional projection to use during the search
+   */
+  @Input() projection = 'preventMetadataSecurity';
+
+  /**
+   * Whether to show the badge label or not
+   */
+  @Input() showLabel: boolean;
 
-  @Input() topSection: TopSection;
+  /**
+   * Whether to show the metrics badges
+   */
+  @Input() showMetrics = this.appConfig.browseBy.showMetrics;
+
+  /**
+   * Whether to show the thumbnail preview
+   */
+  @Input() showThumbnails = this.appConfig.browseBy.showThumbnails;
 
   public collectionElementLinkTypeEnum = CollectionElementLinkType;
 
-  paginatedSearchOptionsBS: BehaviorSubject<PaginatedSearchOptions>;
+  paginatedSearchOptions$: BehaviorSubject<PaginatedSearchOptions>;
 
   searchResults$: Observable<RemoteData<PaginatedList<SearchResult<DSpaceObject>>>>;
 
@@ -51,13 +75,23 @@ export abstract class AbstractBrowseElementsComponent implements OnInit, OnChang
     if (isPlatformServer(this.platformId)) {
       return;
     }
-    this.paginatedSearchOptionsBS?.next(this.paginatedSearchOptions);
+    this.paginatedSearchOptions$?.next(this.paginatedSearchOptions);
   }
 
   ngOnInit() {
-    const followLinks = this.followThumbnailLink ? [followLink('thumbnail'), followLink('metrics')] : [followLink('metrics')];
-    this.paginatedSearchOptionsBS = new BehaviorSubject<PaginatedSearchOptions>(this.paginatedSearchOptions);
-    this.searchResults$ = this.paginatedSearchOptionsBS.asObservable().pipe(
+    const followLinks = [];
+    if (this.followThumbnailLink) {
+      followLinks.push(followLink('thumbnail'));
+    }
+    if (this.followMetricsLink) {
+      followLinks.push(followLink('metrics'));
+    }
+
+    this.paginatedSearchOptions = Object.assign(new PaginatedSearchOptions({}), this.paginatedSearchOptions, {
+      projection: this.projection
+    });
+    this.paginatedSearchOptions$ = new BehaviorSubject<PaginatedSearchOptions>(this.paginatedSearchOptions);
+    this.searchResults$ = this.paginatedSearchOptions$.asObservable().pipe(
       mergeMap((paginatedSearchOptions) =>
         this.searchService.search(paginatedSearchOptions, null, true, true, ...followLinks),
       ),

src/app/shared/browse-most-elements/browse-most-elements.component.html

@@ -3,10 +3,10 @@
   <ng-container *ngSwitchDefault>
     <ds-themed-default-browse-elements
       [showMetrics]="showMetrics"
-      [showThumbnails]="topSection.showThumbnails"
+      [showThumbnails]="showThumbnails ?? topSection.showThumbnails"
       [topSection]="topSection"
       [showLabel]="showLabel"
-      [paginatedSearchOptions]="paginatedSearchOptionsBS.asObservable() | async"
+      [paginatedSearchOptions]="paginatedSearchOptions$.asObservable() | async"
       [context]="context"
     ></ds-themed-default-browse-elements>
   </ng-container>

src/app/shared/browse-most-elements/browse-most-elements.component.ts

@@ -1,4 +1,4 @@
-import { TopSection, TopSectionTemplateType } from './../../core/layout/models/section.model';
+import { TopSection, TopSectionTemplateType } from '../../core/layout/models/section.model';
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { PaginatedSearchOptions } from '../search/models/paginated-search-options.model';
 import { Context } from '../../core/shared/context.model';
@@ -12,19 +12,42 @@ import { BehaviorSubject } from 'rxjs';
 
 export class BrowseMostElementsComponent implements OnInit, OnChanges {
 
+  /**
+   * The pagination options
+   */
   @Input() paginatedSearchOptions: PaginatedSearchOptions;
 
+  /**
+   * The context of listable object
+   */
   @Input() context: Context;
 
-  showLabel: boolean;
-
-  showMetrics = true;
-
+  /**
+   * Optional projection to use during the search
+   */
+  @Input() projection = 'preventMetadataSecurity';
+
+  /**
+   * Whether to show the badge label or not
+   */
+  @Input() showLabel: boolean;
+
+  /**
+   * Whether to show the metrics badges
+   */
+  @Input() showMetrics: boolean;
+
+  /**
+   * Whether to show the thumbnail preview
+   */
+  @Input() showThumbnails: boolean;
+
+  /*
+   * The top section object
+   */
   @Input() topSection: TopSection;
 
-  paginatedSearchOptionsBS = new BehaviorSubject<PaginatedSearchOptions>(null);
-
-  templateTypeEnum = TopSectionTemplateType;
+  paginatedSearchOptions$ = new BehaviorSubject<PaginatedSearchOptions>(null);
 
   sectionTemplateType: TopSectionTemplateType;
 
@@ -33,6 +56,6 @@ export class BrowseMostElementsComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() { // trigger change detection on child components
-    this.paginatedSearchOptionsBS.next(this.paginatedSearchOptions);
+    this.paginatedSearchOptions$.next(this.paginatedSearchOptions);
   }
 }

src/app/shared/browse-most-elements/default-browse-elements/default-browse-elements.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, OnChanges, OnInit } from '@angular/core';
 import { AbstractBrowseElementsComponent } from '../abstract-browse-elements.component';
 
 @Component({
@@ -8,17 +8,12 @@ import { AbstractBrowseElementsComponent } from '../abstract-browse-elements.com
 })
 export class DefaultBrowseElementsComponent extends AbstractBrowseElementsComponent implements OnInit, OnChanges {
 
-  /**
-   * Whether to show the metrics badges
-   */
-  @Input() showMetrics = this.appConfig.browseBy.showMetrics;
+  protected followMetricsLink: boolean;
+  protected followThumbnailLink: boolean;
 
-  /**
-   * Whether to show the thumbnail preview
-   */
-  @Input() showThumbnails = this.appConfig.browseBy.showThumbnails;
-
-  @Input() showLabel: boolean;
-
-  protected followThumbnailLink = this.appConfig.browseBy.showThumbnails;
+  ngOnInit() {
+    this.followMetricsLink = this.showMetrics ?? this.appConfig.browseBy.showMetrics;
+    this.followThumbnailLink = this.showThumbnails ?? this.appConfig.browseBy.showThumbnails;
+    super.ngOnInit();
+  }
 }

src/app/shared/browse-most-elements/default-browse-elements/themed-default-browse-elements.component.ts

@@ -25,13 +25,15 @@ export class ThemedDefaultBrowseElementsComponent extends ThemedComponent<Defaul
 
   // DefaultBrowseElementsComponent I/O variables
 
+  @Input() projection: string;
+
   @Input() showMetrics: boolean;
 
   @Input() showThumbnails: boolean;
 
   @Input() showLabel: boolean;
 
-  protected inAndOutputNames: (keyof DefaultBrowseElementsComponent & keyof this)[] = ['paginatedSearchOptions', 'context', 'topSection', 'showMetrics', 'showThumbnails', 'showLabel'];
+  protected inAndOutputNames: (keyof DefaultBrowseElementsComponent & keyof this)[] = ['paginatedSearchOptions', 'context', 'showMetrics', 'showThumbnails', 'showLabel', 'projection'];
 
   protected getComponentName(): string {
     return 'DefaultBrowseElementsComponent';

src/app/shared/browse-most-elements/themed-browse-most-elements.component.ts

@@ -1,8 +1,8 @@
-import { TopSection } from './../../core/layout/models/section.model';
+import { TopSection } from '../../core/layout/models/section.model';
 import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../theme-support/themed.component';
 import { BrowseMostElementsComponent } from './browse-most-elements.component';
-import { Context } from 'vm';
+import { Context } from '../../core/shared/context.model';
 import { PaginatedSearchOptions } from '../search/models/paginated-search-options.model';
 
 /**
@@ -19,9 +19,17 @@ export class ThemedBrowseMostElementsComponent extends ThemedComponent<BrowseMos
 
   @Input() paginatedSearchOptions: PaginatedSearchOptions;
 
+  @Input() projection = 'preventMetadataSecurity';
+
+  @Input() showLabel: boolean;
+
+  @Input() showMetrics: boolean;
+
+  @Input() showThumbnails: boolean;
+
   @Input() topSection: TopSection;
 
-  protected inAndOutputNames: (keyof BrowseMostElementsComponent & keyof this)[] = ['context', 'paginatedSearchOptions', 'topSection'];
+  protected inAndOutputNames: (keyof BrowseMostElementsComponent & keyof this)[] = ['context', 'paginatedSearchOptions', 'projection', 'showLabel', 'showMetrics', 'showThumbnails', 'topSection'];
 
   protected getComponentName(): string {
     return 'BrowseMostElementsComponent';

src/app/shared/explore/section-component/top-section/top-section.component.html

@@ -3,7 +3,11 @@
     <div *ngIf="topSection.titleKey" class="card-header">{{ 'explore.index.' + topSection.titleKey | translate }}</div>
     <div *ngIf="!topSection.titleKey" class="card-header">{{ 'explore.index.' + topSection.sortField | translate }}</div>
     <div class="card-body p-0">
-      <ds-themed-browse-most-elements [context]="context" [paginatedSearchOptions]="paginatedSearchOptions" [topSection]="topSection"></ds-themed-browse-most-elements>
+      <ds-themed-browse-most-elements [context]="context"
+                                      [paginatedSearchOptions]="paginatedSearchOptions"
+                                      [showLabel]="true"
+                                      [showMetrics]="true"
+                                      [topSection]="topSection"></ds-themed-browse-most-elements>
     </div>
   </div>
 </div>