[UXP-171] card layout for browse-elements

Author: alisaismailati

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

@@ -1,5 +1,14 @@
 <div [ngSwitch]="(sectionTemplateType | lowercase)">
 
+  <ng-container *ngSwitchCase="templateTypeEnum.CARD">
+    <ds-themed-cards-browse-elements
+      [topSection]="topSection"
+      [paginatedSearchOptions]="paginatedSearchOptionsBS.asObservable() | async"
+      [context]="context"
+    >
+    </ds-themed-cards-browse-elements>
+  </ng-container>
+
   <ng-container *ngSwitchDefault>
     <ds-themed-default-browse-elements
       [showThumbnails]="topSection.showThumbnails"

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

@@ -28,6 +28,11 @@ export class BrowseMostElementsComponent implements OnInit, OnChanges {
 
   sectionTemplateType: TopSectionTemplateType;
 
+  /**
+   * The type of the template to render
+   */
+  templateTypeEnum = TopSectionTemplateType;
+
   ngOnInit(): void {
     this.sectionTemplateType = this.topSection?.template
       ?? (this.mode === LayoutModeEnum.CARD ? TopSectionTemplateType.CARD : TopSectionTemplateType.DEFAULT);

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

@@ -0,0 +1,13 @@
+<ng-container *ngIf="(searchResults$ | async) as searchResults">
+      <ds-object-grid
+        [configStyle]="topSection?.cardStyle"
+        [columnStyle]="topSection?.cardColumnStyle"
+        [config]="paginatedSearchOptions.pagination"
+        [sortConfig]="paginatedSearchOptions.sort"
+        [objects]="searchResults"
+        [linkType]="collectionElementLinkTypeEnum.Link"
+        [context]="context"
+        [noPagination]="true"
+      >
+      </ds-object-grid>
+</ng-container>

src/app/shared/browse-most-elements/cards-browse-elements/cards-browse-elements.component.scss

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {AbstractBrowseElementsComponent} from "../abstract-browse-elements.component";
+import {CollectionElementLinkType} from "../../object-collection/collection-element-link.type";
+
+@Component({
+  selector: 'ds-cards-browse-elements',
+  templateUrl: './cards-browse-elements.component.html',
+  styleUrls: ['./cards-browse-elements.component.scss']
+})
+export class CardsBrowseElementsComponent extends AbstractBrowseElementsComponent {
+
+  public collectionElementLinkTypeEnum = CollectionElementLinkType;
+
+}

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

@@ -0,0 +1,39 @@
+import {Component, Input} from '@angular/core';
+import { ThemedComponent } from '../../theme-support/themed.component';
+import { Context } from '../../../core/shared/context.model';
+import { PaginatedSearchOptions } from '../../search/models/paginated-search-options.model';
+import { TopSection } from '../../../core/layout/models/section.model';
+import {CardsBrowseElementsComponent} from "./cards-browse-elements.component";
+
+/**
+ * This component is a wrapper for the CardsBrowseElementsComponent
+ */
+@Component({
+  selector: 'ds-themed-cards-browse-elements',
+  styleUrls: [],
+  templateUrl: './../../theme-support/themed.component.html',
+})
+export class ThemedCardsBrowseElementsComponent extends ThemedComponent<CardsBrowseElementsComponent> {
+
+  // AbstractBrowseElementsComponent I/O variables
+
+  @Input() paginatedSearchOptions: PaginatedSearchOptions;
+
+  @Input() context: Context;
+
+  @Input() topSection: TopSection;
+
+  protected inAndOutputNames: (keyof CardsBrowseElementsComponent & keyof this)[] = ['paginatedSearchOptions', 'context', 'topSection'];
+
+  protected getComponentName(): string {
+    return 'CardsBrowseElementsComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`./../../../../themes/${themeName}/app/shared/browse-most-elements/cards-browse-elements/cards-browse-elements.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./cards-browse-elements.component`);
+  }
+}

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

@@ -30,7 +30,7 @@ export class ThemedBrowseMostElementsComponent extends ThemedComponent<BrowseMos
   }
 
   protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../../themes/${themeName}/app/browse-most-elements/browse-most-elements.component`);
+    return import(`../../../themes/${themeName}/app/shared/browse-most-elements/browse-most-elements.component`);
   }
 
   protected importUnthemedComponent(): Promise<any> {

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

@@ -357,6 +357,10 @@ import { MetadataLinkViewAvatarPopoverComponent } from './metadata-link-view/met
 import { MetadataLinkViewOrcidComponent } from './metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component';
 import { DefaultBrowseElementsComponent } from './browse-most-elements/default-browse-elements/default-browse-elements.component';
 import { ThemedDefaultBrowseElementsComponent } from './browse-most-elements/default-browse-elements/themed-default-browse-elements.component';
+import { CardsBrowseElementsComponent } from './browse-most-elements/cards-browse-elements/cards-browse-elements.component';
+import {
+  ThemedCardsBrowseElementsComponent
+} from "./browse-most-elements/cards-browse-elements/themed-cards-browse-elements.component";
 
 const MODULES = [
   CommonModule,
@@ -518,6 +522,8 @@ const COMPONENTS = [
   ItemCollectionComponent,
   DefaultBrowseElementsComponent,
   ThemedDefaultBrowseElementsComponent,
+  CardsBrowseElementsComponent,
+  ThemedCardsBrowseElementsComponent,
 ];
 
 const ENTRY_COMPONENTS = [
@@ -595,6 +601,7 @@ const ENTRY_COMPONENTS = [
   RelationshipsListComponent,
   AdditionalMetadataComponent,
   ThemedDefaultBrowseElementsComponent,
+  ThemedCardsBrowseElementsComponent,
 ];
 
 const PROVIDERS = [