Split typed list/grid elements into normal and search result

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html

@@ -1 +1 @@
-<ds-item-type-switcher [object]="object" [viewMode]="viewMode"></ds-item-type-switcher>
+<ds-listable-object-component-loader [type]="object.indexableObject.firstMetadataValue('relationship.type') + 'SearchResult'" [object]="object" [viewMode]="viewMode"></ds-listable-object-component-loader>

src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html

@@ -0,0 +1,36 @@
+<ng-container *ngVar="object.indexableObject as item">
+    <ds-truncatable [id]="item.id">
+        <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
+            <a [routerLink]="['/items/' + item.id]" class="card-img-top full-width">
+                <div>
+                    <ds-grid-thumbnail [thumbnail]="this.item.getThumbnail() | async">
+                    </ds-grid-thumbnail>
+                </div>
+            </a>
+            <div class="card-body">
+                <ds-item-type-badge [object]="object"></ds-item-type-badge>
+                <ds-truncatable-part [id]="item.id" [minLines]="3" type="h4">
+                    <h4 class="card-title" [innerHTML]="item.firstMetadataValue('dc.title')"></h4>
+                </ds-truncatable-part>
+                <p *ngIf="item.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
+                   class="item-authors card-text text-muted">
+                    <ds-truncatable-part [id]="item.id" [minLines]="1">
+                        <span *ngIf="item.hasMetadata('dc.date.issued')" class="item-date">{{item.firstMetadataValue('dc.date.issued')}}</span>
+                        <span *ngFor="let author of item.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
+                        <span [innerHTML]="author"></span>
+                    </span>
+                    </ds-truncatable-part>
+                </p>
+                <p *ngIf="item.hasMetadata('dc.description.abstract')" class="item-abstract card-text">
+                    <ds-truncatable-part [id]="item.id" [minLines]="3">
+                        <span [innerHTML]="firstMetadataValue('dc.description.abstract')"></span>
+                    </ds-truncatable-part>
+                </p>
+                <div class="text-center">
+                    <a [routerLink]="['/items/' + item.id]"
+                       class="lead btn btn-primary viewButton">View</a>
+                </div>
+            </div>
+        </div>
+    </ds-truncatable>
+</ng-container>

src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.spec.ts

@@ -0,0 +1,127 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TruncatePipe } from '../../../../utils/truncate.pipe';
+import { TruncatableService } from '../../../../truncatable/truncatable.service';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { PublicationSearchResultGridElementComponent } from './publication-grid-element.component';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
+import { Item } from '../../../../../core/shared/item.model';
+import { ITEM } from '../../../../items/switcher/listable-object-component-loader.component';
+import { createSuccessfulRemoteDataObject$ } from '../../../../testing/utils';
+import { PaginatedList } from '../../../../../core/data/paginated-list';
+import { PageInfo } from '../../../../../core/shared/page-info.model';
+
+const mockItemWithMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithMetadata.hitHighlights = {};
+mockItemWithMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ],
+    'dc.contributor.author': [
+      {
+        language: 'en_US',
+        value: 'Smith, Donald'
+      }
+    ],
+    'dc.date.issued': [
+      {
+        language: null,
+        value: '2015-06-26'
+      }
+    ],
+    'dc.description.abstract': [
+      {
+        language: 'en_US',
+        value: 'This is an abstract'
+      }
+    ]
+  }
+});
+
+const mockItemWithoutMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithoutMetadata.hitHighlights = {};
+mockItemWithoutMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ]
+  }
+});
+
+describe('PublicationGridElementComponent', getEntityGridElementTestComponent(PublicationSearchResultGridElementComponent, mockItemWithMetadata, mockItemWithoutMetadata, ['authors', 'date', 'abstract']));
+
+/**
+ * Create test cases for a grid component of an entity.
+ * @param component                     The component's class
+ * @param searchResultWithMetadata      An ItemSearchResult containing an item with metadata that should be displayed in the grid element
+ * @param searchResultWithoutMetadata   An ItemSearchResult containing an item that's missing the metadata that should be displayed in the grid element
+ * @param fieldsToCheck                 A list of fields to check. The tests expect to find html elements with class ".item-${field}", so make sure they exist in the html template of the grid element.
+ *                                      For example: If one of the fields to check is labeled "authors", the html template should contain at least one element with class ".item-authors" that's
+ *                                      present when the author metadata is available.
+ */
+export function getEntityGridElementTestComponent(component, searchResultWithMetadata: ItemSearchResult, searchResultWithoutMetadata: ItemSearchResult, fieldsToCheck: string[]) {
+  return () => {
+    let comp;
+    let fixture;
+
+    const truncatableServiceStub: any = {
+      isCollapsed: (id: number) => observableOf(true),
+    };
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [NoopAnimationsModule],
+        declarations: [component, TruncatePipe],
+        providers: [
+          { provide: TruncatableService, useValue: truncatableServiceStub },
+          {provide: ITEM, useValue: searchResultWithoutMetadata}
+        ],
+        schemas: [NO_ERRORS_SCHEMA]
+      }).overrideComponent(component, {
+        set: { changeDetection: ChangeDetectionStrategy.Default }
+      }).compileComponents();
+    }));
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(component);
+      comp = fixture.componentInstance;
+    }));
+
+    fieldsToCheck.forEach((field) => {
+      describe(`when the item has "${field}" metadata`, () => {
+        beforeEach(() => {
+          comp.dso = searchResultWithMetadata.indexableObject;
+          fixture.detectChanges();
+        });
+
+        it(`should show the "${field}" field`, () => {
+          const itemAuthorField = fixture.debugElement.query(By.css(`.item-${field}`));
+          expect(itemAuthorField).not.toBeNull();
+        });
+      });
+
+      describe(`when the item has no "${field}" metadata`, () => {
+        beforeEach(() => {
+          comp.dso = searchResultWithoutMetadata.indexableObject;
+          fixture.detectChanges();
+        });
+
+        it(`should not show the "${field}" field`, () => {
+          const itemAuthorField = fixture.debugElement.query(By.css(`.item-${field}`));
+          expect(itemAuthorField).toBeNull();
+        });
+      });
+    });
+  }
+}

src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { focusShadow } from '../../../../animations/focus';
+import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { listableObjectComponent } from '../../../../object-collection/shared/listable-object/listable-object.decorator';
+import { SearchResultGridElementComponent } from '../../search-result-grid-element.component';
+import { Item } from '../../../../../core/shared/item.model';
+import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
+
+@listableObjectComponent('PublicationSearchResult', ViewMode.GridElement)
+@Component({
+  selector: 'ds-publication-search-result-grid-element',
+  styleUrls: ['./publication-search-result-grid-element.component.scss'],
+  templateUrl: './publication-search-result-grid-element.component.html',
+  animations: [focusShadow]
+})
+/**
+ * The component for displaying a grid element for an item of the type Publication
+ */
+export class PublicationSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
+}

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts

@@ -18,8 +18,8 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
   dso: K;
   isCollapsed$: Observable<boolean>;
 
-  public constructor(@Inject('objectElementProvider') public listableObject: ListableObject, protected truncatableService: TruncatableService) {
-    super(listableObject);
+  public constructor(protected truncatableService: TruncatableService) {
+    super();
     if (hasValue(this.object)) {
       this.dso = this.object.indexableObject;
       this.isCollapsed$ = this.isCollapsed();