Merge branch 'master' into w2p-65572_Add-support-for-bundles

Conflicts: src/app/core/shared/item.model.ts src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.spec.ts src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.spec.ts src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.spec.ts src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.spec.ts src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.spec.ts src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.spec.ts src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.spec.ts src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.spec.ts src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.spec.ts src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.spec.ts src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.spec.ts src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec.ts src/app/shared/object-list/item-list-element/item-types/publication/publication-list-element.component.spec.ts src/app/shared/testing/utils.ts
2025-10-14 13:33:03 +00:00 · 2019-11-21 14:14:39 +01:00
parent 77826beb2a 981c915975
commit ed3f7dfc7b
433 changed files with 14771 additions and 4389 deletions
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
@@ -1,14 +1,17 @@
 <div class="card">
-  <a [routerLink]="['/collections/', object.id]" class="card-img-top">
+  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', object.id]" class="card-img-top">
    <ds-grid-thumbnail [thumbnail]="object.logo">
    </ds-grid-thumbnail>
  </a>
+  <span *ngIf="linkType == linkTypes.None" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="object.logo">
+    </ds-grid-thumbnail>
+  </span>
  <div class="card-body">
    <h4 class="card-title">{{object.name}}</h4>
    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
-    <div class="text-center">
-      <a [routerLink]="['/collections/', object.id]" class="lead btn btn-primary viewButton">View</a>
+    <div *ngIf="linkType != linkTypes.None" class="text-center">
+      <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', object.id]" class="lead btn btn-primary viewButton">View</a>
    </div>
-
  </div>
 </div>
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts
@@ -1,15 +1,18 @@
 import { Component, Inject } from '@angular/core';

 import { Collection } from '../../../core/shared/collection.model';
-import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { SetViewMode } from '../../view-mode';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
+import { ViewMode } from '../../../core/shared/view-mode.model';
+import { listableObjectComponent } from '../../object-collection/shared/listable-object/listable-object.decorator';

+/**
+ * Component representing a grid element for collection
+ */
@Component({
  selector: 'ds-collection-grid-element',
  styleUrls: ['./collection-grid-element.component.scss'],
  templateUrl: './collection-grid-element.component.html'
 })

-@renderElementsFor(Collection, SetViewMode.Grid)
+@listableObjectComponent(Collection, ViewMode.GridElement)
 export class CollectionGridElementComponent extends AbstractListableElementComponent<Collection> {}
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
@@ -1,14 +1,17 @@
 <div class="card">
-
-  <a [routerLink]="['/communities/', object.id]" class="card-img-top">
+  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', object.id]" class="card-img-top">
    <ds-grid-thumbnail [thumbnail]="object.logo">
    </ds-grid-thumbnail>
  </a>
+  <span *ngIf="linkType == linkTypes.None" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="object.logo">
+    </ds-grid-thumbnail>
+  </span>
  <div class="card-body">
    <h4 class="card-title">{{object.name}}</h4>
    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
-    <div class="text-center">
-      <a [routerLink]="['/communities/', object.id]" class="lead btn btn-primary viewButton">View</a>
+    <div *ngIf="linkType != linkTypes.None" class="text-center">
+      <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', object.id]" class="lead btn btn-primary viewButton">View</a>
    </div>
  </div>
 </div>
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts
@@ -1,15 +1,18 @@
-import { Component, Input, Inject } from '@angular/core';
+import { Component } from '@angular/core';

 import { Community } from '../../../core/shared/community.model';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
-import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { SetViewMode } from '../../view-mode';
+import { ViewMode } from '../../../core/shared/view-mode.model';
+import { listableObjectComponent } from '../../object-collection/shared/listable-object/listable-object.decorator';

+/**
+ * Component representing a grid element for a community
+ */
@Component({
  selector: 'ds-community-grid-element',
  styleUrls: ['./community-grid-element.component.scss'],
  templateUrl: './community-grid-element.component.html'
 })

-@renderElementsFor(Community, SetViewMode.Grid)
+@listableObjectComponent(Community, ViewMode.GridElement)
 export class CommunityGridElementComponent extends AbstractListableElementComponent<Community> {}
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
@@ -1,28 +0,0 @@
-<ds-truncatable [id]="object.id">
-  <div class="card">
-    <a [routerLink]="['/items/', object.id]" class="card-img-top">
-      <ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
-      </ds-grid-thumbnail>
-    </a>
-    <div class="card-body">
-      <h4 class="card-title">{{object.firstMetadataValue('dc.title')}}</h4>
-
-      <ds-truncatable-part [id]="object.id" [minLines]="2">
-        <p *ngIf="object.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])" class="item-authors card-text text-muted">
-            <span *ngFor="let author of object.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{author}}
-                <span *ngIf="!last">; </span>
-            </span>
-          <span *ngIf="object.hasMetadata('dc.date.issued')" class="item-date">{{object.firstMetadataValue("dc.date.issued")}}</span>
-        </p>
-      </ds-truncatable-part>
-
-      <ds-truncatable-part [id]="object.id" [minLines]="5">
-        <p *ngIf="object.hasMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.firstMetadataValue("dc.description.abstract")}}</p>
-      </ds-truncatable-part>
-
-      <div class="text-center pt-2">
-        <a [routerLink]="['/items/', object.id]" class="lead btn btn-primary viewButton">View</a>
-      </div>
-    </div>
-  </div>
-</ds-truncatable>
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
@@ -1 +0,0 @@
-
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts
@@ -1,114 +0,0 @@
-import { ItemGridElementComponent } from './item-grid-element.component';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { TruncatePipe } from '../../utils/truncate.pipe';
-import { Item } from '../../../core/shared/item.model';
-import { of as observableOf } from 'rxjs';
-
-let itemGridElementComponent: ItemGridElementComponent;
-let fixture: ComponentFixture<ItemGridElementComponent>;
-
-const mockItemWithAuthorAndDate: Item = Object.assign(new Item(), {
-  bundles: observableOf({}),
-  metadata: {
-    'dc.contributor.author': [
-      {
-        language: 'en_US',
-        value: 'Smith, Donald'
-      }
-    ],
-    'dc.date.issued': [
-      {
-        language: null,
-        value: '2015-06-26'
-      }
-    ]
-  }
-});
-const mockItemWithoutAuthorAndDate: Item = Object.assign(new Item(), {
-  bundles: observableOf({}),
-  metadata: {
-    'dc.title': [
-      {
-        language: 'en_US',
-        value: 'This is just another title'
-      }
-    ],
-    'dc.type': [
-      {
-        language: null,
-        value: 'Article'
-      }
-    ]
-  }
-});
-
-describe('ItemGridElementComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ItemGridElementComponent , TruncatePipe],
-      providers: [
-        { provide: 'objectElementProvider', useValue: {mockItemWithAuthorAndDate}}
-      ],
-
-      schemas: [ NO_ERRORS_SCHEMA ]
-    }).overrideComponent(ItemGridElementComponent, {
-      set: { changeDetection: ChangeDetectionStrategy.Default }
-    }).compileComponents();
-  }));
-
-  beforeEach(async(() => {
-    fixture = TestBed.createComponent(ItemGridElementComponent);
-    itemGridElementComponent = fixture.componentInstance;
-
-  }));
-
-  describe('When the item has an author', () => {
-    beforeEach(() => {
-      itemGridElementComponent.object = mockItemWithAuthorAndDate;
-      fixture.detectChanges();
-    });
-
-    it('should show the author paragraph', () => {
-      const itemAuthorField = fixture.debugElement.query(By.css('p.item-authors'));
-      expect(itemAuthorField).not.toBeNull();
-    });
-  });
-
-  describe('When the item has no author', () => {
-    beforeEach(() => {
-      itemGridElementComponent.object = mockItemWithoutAuthorAndDate;
-      fixture.detectChanges();
-    });
-
-    it('should not show the author paragraph', () => {
-      const itemAuthorField = fixture.debugElement.query(By.css('p.item-authors'));
-      expect(itemAuthorField).toBeNull();
-    });
-  });
-
-  describe('When the item has an issuedate', () => {
-    beforeEach(() => {
-      itemGridElementComponent.object = mockItemWithAuthorAndDate;
-      fixture.detectChanges();
-    });
-
-    it('should show the issuedate span', () => {
-      const itemAuthorField = fixture.debugElement.query(By.css('span.item-date'));
-      expect(itemAuthorField).not.toBeNull();
-    });
-  });
-
-  describe('When the item has no issuedate', () => {
-    beforeEach(() => {
-      itemGridElementComponent.object = mockItemWithoutAuthorAndDate;
-      fixture.detectChanges();
-    });
-
-    it('should not show the issuedate span', () => {
-      const dateField = fixture.debugElement.query(By.css('span.item-date'));
-      expect(dateField).toBeNull();
-    });
-  });
-});
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts
@@ -1,15 +0,0 @@
-import { Component, Input, Inject } from '@angular/core';
-
-import { Item } from '../../../core/shared/item.model';
-import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
-import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
-import { SetViewMode } from '../../view-mode';
-
-@Component({
-  selector: 'ds-item-grid-element',
-  styleUrls: ['./item-grid-element.component.scss'],
-  templateUrl: './item-grid-element.component.html'
-})
-
-@renderElementsFor(Item, SetViewMode.Grid)
-export class ItemGridElementComponent extends AbstractListableElementComponent<Item> {}
--- a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html
+++ b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html
@@ -1,34 +1 @@
-<ds-truncatable [id]="dso.id">
-  <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
-    <a [routerLink]="['/items/' + dso.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]="dso.id" [minLines]="3" type="h4">
-        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
-      </ds-truncatable-part>
-      <p *ngIf="dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
-         class="item-authors card-text text-muted">
-        <ds-truncatable-part [id]="dso.id" [minLines]="1">
-          <span *ngIf="dso.hasMetadata('dc.date.issued')" class="item-date">{{dso.firstMetadataValue('dc.date.issued')}}</span>
-          <span *ngFor="let author of dso.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
-                        <span [innerHTML]="author"></span>
-                    </span>
-        </ds-truncatable-part>
-      </p>
-      <p *ngIf="dso.hasMetadata('dc.description.abstract')" class="item-abstract card-text">
-        <ds-truncatable-part [id]="dso.id" [minLines]="3">
-          <span [innerHTML]="firstMetadataValue('dc.description.abstract')"></span>
-        </ds-truncatable-part>
-      </p>
-      <div class="text-center">
-        <a [routerLink]="['/items/' + dso.id]"
-           class="lead btn btn-primary viewButton">View</a>
-      </div>
-    </div>
-  </div>
-</ds-truncatable>
+<ds-publication-search-result-grid-element [object]="{ indexableObject: object, hitHighlights: {} }" [linkType]="linkType"></ds-publication-search-result-grid-element>
--- a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TruncatePipe } from '../../../../utils/truncate.pipe';
 import { TruncatableService } from '../../../../truncatable/truncatable.service';
@@ -6,16 +6,12 @@ import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { PublicationGridElementComponent } 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/item-type-switcher.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(), {
+const mockItem = Object.assign(new Item(), {
  bundles: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
  metadata: {
    'dc.title': [
@@ -45,83 +41,41 @@ mockItemWithMetadata.indexableObject = Object.assign(new Item(), {
  }
 });

-const mockItemWithoutMetadata: ItemSearchResult = new ItemSearchResult();
-mockItemWithoutMetadata.hitHighlights = {};
-mockItemWithoutMetadata.indexableObject = Object.assign(new Item(), {
-  bundles: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
-  metadata: {
-    'dc.title': [
-      {
-        language: 'en_US',
-        value: 'This is just another title'
-      }
-    ]
-  }
-});
+describe('PublicationGridElementComponent', () => {
+  let comp;
+  let fixture;

-describe('PublicationGridElementComponent', getEntityGridElementTestComponent(PublicationGridElementComponent, mockItemWithMetadata, mockItemWithoutMetadata, ['authors', 'date', 'abstract']));
+  const truncatableServiceStub: any = {
+    isCollapsed: (id: number) => observableOf(true),
+  };

-/**
- * 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;
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      declarations: [PublicationGridElementComponent, TruncatePipe],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(PublicationGridElementComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));

-    const truncatableServiceStub: any = {
-      isCollapsed: (id: number) => observableOf(true),
-    };
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(PublicationGridElementComponent);
+    comp = fixture.componentInstance;
+  }));

-    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();
-        });
-      });
+  describe(`when the publication is rendered`, () => {
+    beforeEach(() => {
+      comp.object = mockItem;
+      fixture.detectChanges();
    });
-  }
-}
+
+    it(`should contain a PublicationGridElementComponent`, () => {
+      const publicationGridElement = fixture.debugElement.query(By.css(`ds-publication-search-result-grid-element`));
+      expect(publicationGridElement).not.toBeNull();
+    });
+  });
+});
--- a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.ts
@@ -1,10 +1,12 @@
-import { TypedItemSearchResultGridElementComponent } from '../typed-item-search-result-grid-element.component';
-import { DEFAULT_ITEM_TYPE, ItemViewMode, rendersItemType } from '../../../../items/item-type-decorator';
 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 { AbstractListableElementComponent } from '../../../../object-collection/shared/object-collection-element/abstract-listable-element.component';
+import { Item } from '../../../../../core/shared/item.model';

-@rendersItemType('Publication', ItemViewMode.Card)
-@rendersItemType(DEFAULT_ITEM_TYPE, ItemViewMode.Card)
+@listableObjectComponent('Publication', ViewMode.GridElement)
+@listableObjectComponent(Item, ViewMode.GridElement)
@Component({
  selector: 'ds-publication-grid-element',
  styleUrls: ['./publication-grid-element.component.scss'],
@@ -14,5 +16,5 @@ import { focusShadow } from '../../../../animations/focus';
 /**
 * The component for displaying a grid element for an item of the type Publication
 */
-export class PublicationGridElementComponent extends TypedItemSearchResultGridElementComponent {
+export class PublicationGridElementComponent extends AbstractListableElementComponent<Item> {
 }
--- a/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.spec.ts
@@ -1,83 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { TruncatePipe } from '../../../utils/truncate.pipe';
-import { TruncatableService } from '../../../truncatable/truncatable.service';
-import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Item } from '../../../../core/shared/item.model';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { PaginatedList } from '../../../../core/data/paginated-list';
-import { PageInfo } from '../../../../core/shared/page-info.model';
-import { ITEM } from '../../../items/switcher/item-type-switcher.component';
-import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
-import { createRelationshipsObservable } from '../../../../+item-page/simple/item-types/shared/item.component.spec';
-import { of as observableOf } from 'rxjs';
-import { MetadataMap } from '../../../../core/shared/metadata.models';
-import { TypedItemSearchResultGridElementComponent } from './typed-item-search-result-grid-element.component';
-
-const mockItem: Item = Object.assign(new Item(), {
-  bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
-  metadata: [],
-  relationships: createRelationshipsObservable()
-});
-const mockSearchResult = {
-  indexableObject: mockItem as Item,
-  hitHighlights: new MetadataMap()
-} as ItemSearchResult;
-
-describe('TypedItemSearchResultGridElementComponent', () => {
-  let comp: TypedItemSearchResultGridElementComponent;
-  let fixture: ComponentFixture<TypedItemSearchResultGridElementComponent>;
-
-  describe('when injecting an Item', () => {
-    beforeEach(async(() => {
-      TestBed.configureTestingModule({
-        declarations: [TypedItemSearchResultGridElementComponent, TruncatePipe],
-        providers: [
-          {provide: TruncatableService, useValue: {}},
-          {provide: ITEM, useValue: mockItem}
-        ],
-
-        schemas: [NO_ERRORS_SCHEMA]
-      }).overrideComponent(TypedItemSearchResultGridElementComponent, {
-        set: {changeDetection: ChangeDetectionStrategy.Default}
-      }).compileComponents();
-    }));
-
-    beforeEach(async(() => {
-      fixture = TestBed.createComponent(TypedItemSearchResultGridElementComponent);
-      comp = fixture.componentInstance;
-    }));
-
-    it('should initiate item, object and dso correctly', () => {
-      expect(comp.item).toBe(mockItem);
-      expect(comp.dso).toBe(mockItem);
-      expect(comp.object.indexableObject).toBe(mockItem);
-    })
-  });
-
-  describe('when injecting an ItemSearchResult', () => {
-    beforeEach(async(() => {
-      TestBed.configureTestingModule({
-        declarations: [TypedItemSearchResultGridElementComponent, TruncatePipe],
-        providers: [
-          {provide: TruncatableService, useValue: {}},
-          {provide: ITEM, useValue: mockSearchResult}
-        ],
-
-        schemas: [NO_ERRORS_SCHEMA]
-      }).overrideComponent(TypedItemSearchResultGridElementComponent, {
-        set: {changeDetection: ChangeDetectionStrategy.Default}
-      }).compileComponents();
-    }));
-
-    beforeEach(async(() => {
-      fixture = TestBed.createComponent(TypedItemSearchResultGridElementComponent);
-      comp = fixture.componentInstance;
-    }));
-
-    it('should initiate item, object and dso correctly', () => {
-      expect(comp.item).toBe(mockItem);
-      expect(comp.dso).toBe(mockItem);
-      expect(comp.object.indexableObject).toBe(mockItem);
-    })
-  });
-});
--- a/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component.ts
@@ -1,37 +0,0 @@
-import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
-import { Item } from '../../../../core/shared/item.model';
-import { SearchResultGridElementComponent } from '../../search-result-grid-element/search-result-grid-element.component';
-import { TruncatableService } from '../../../truncatable/truncatable.service';
-import { Component, Inject } from '@angular/core';
-import { ITEM } from '../../../items/switcher/item-type-switcher.component';
-import { hasValue } from '../../../empty.util';
-import { MetadataMap } from '../../../../core/shared/metadata.models';
-
-/**
- * A generic component for displaying item grid elements
- */
-@Component({
-  selector: 'ds-item-search-result-grid-element',
-  template: ''
-})
-export class TypedItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
-  item: Item;
-
-  constructor(
-    protected truncatableService: TruncatableService,
-    @Inject(ITEM) public obj: Item | ItemSearchResult,
-  ) {
-    super(undefined, truncatableService);
-    if (hasValue((obj as any).indexableObject)) {
-      this.object = obj as ItemSearchResult;
-      this.dso = this.object.indexableObject;
-    } else {
-      this.object = {
-        indexableObject: obj as Item,
-        hitHighlights: new MetadataMap()
-      };
-      this.dso = obj as Item;
-    }
-    this.item = this.dso;
-  }
-}
--- a/src/app/shared/object-grid/object-grid.component.html
+++ b/src/app/shared/object-grid/object-grid.component.html
@@ -13,11 +13,11 @@
    <div class="card-columns row" *ngIf="objects?.hasSucceeded">
      <div class="card-column col col-sm-6 col-lg-4" *ngFor="let column of (columns$ | async)" @fadeIn>
        <div class="card-element" *ngFor="let object of column">
-          <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
+          <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode" [context]="context" [linkType]="linkType"></ds-listable-object-component-loader>
        </div>
      </div>
    </div>
-  <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
-  <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
+  <ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error>
+  <ds-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-loading>
 </ds-pagination>

--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -1,6 +1,6 @@
 $ds-wrapper-grid-spacing: $spacer/2;

-ds-wrapper-grid-element ::ng-deep {
+:host ::ng-deep {
  div.thumbnail > img {
    height: $card-thumbnail-height;
    width: 100%;
--- a/src/app/shared/object-grid/object-grid.component.ts
+++ b/src/app/shared/object-grid/object-grid.component.ts
@@ -20,6 +20,9 @@ import { HostWindowService, WidthCategory } from '../host-window.service';
 import { ListableObject } from '../object-collection/shared/listable-object.model';

 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { ViewMode } from '../../core/shared/view-mode.model';
+import { Context } from '../../core/shared/context.model';
+import { CollectionElementLinkType } from '../object-collection/collection-element-link.type';

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
@@ -31,17 +34,57 @@ import { PaginationComponentOptions } from '../pagination/pagination-component-o
 })

 export class ObjectGridComponent implements OnInit {
+  /**
+   * The view mode of the this component
+   */
+  viewMode = ViewMode.GridElement;

+  /**
+   * The current pagination configuration
+   */
  @Input() config: PaginationComponentOptions;
+
+  /**
+   * The current sort configuration
+   */
  @Input() sortConfig: SortOptions;
+
+  /**
+   * The whether or not the gear is hidden
+   */
  @Input() hideGear = false;
+
+  /**
+   * Whether or not the pager is visible when there is only a single page of results
+   */
  @Input() hidePagerWhenSinglePage = true;
+
+  /**
+   * The link type of the listable elements
+   */
+  @Input() linkType: CollectionElementLinkType;
+
+  /**
+   * The context of the listable elements
+   */
+  @Input() context: Context;
+
+  /**
+   * Behavior subject to output the current listable objects
+   */
  private _objects$: BehaviorSubject<RemoteData<PaginatedList<ListableObject>>>;

+  /**
+   * Setter to make sure the observable is turned into an observable
+   * @param objects The new objects to output
+   */
  @Input() set objects(objects: RemoteData<PaginatedList<ListableObject>>) {
    this._objects$.next(objects);
  }

+  /**
+   * Getter to return the current objects
+   */
  get objects() {
    return this._objects$.getValue();
  }
@@ -76,7 +119,10 @@ export class ObjectGridComponent implements OnInit {
   */
  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();

-  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+  /**
+   * An event fired when on of the pagination parameters changes
+   */
+  @Output() paginationChange: EventEmitter<any> = new EventEmitter<any>();

  /**
   * An event fired when the sort field is changed.
@@ -90,6 +136,9 @@ export class ObjectGridComponent implements OnInit {
    this._objects$ = new BehaviorSubject(undefined);
  }

+  /**
+   * Initialize the instance variables
+   */
  ngOnInit(): void {
    const nbColumns$ = this.hostWindow.widthCategory.pipe(
      map((widthCat: WidthCategory) => {
@@ -133,22 +182,40 @@ export class ObjectGridComponent implements OnInit {
    }));
  }

+  /**
+   * Emits the current page when it changes
+   * @param event The new page
+   */
  onPageChange(event) {
    this.pageChange.emit(event);
  }
-
+  /**
+   * Emits the current page size when it changes
+   * @param event The new page size
+   */
  onPageSizeChange(event) {
    this.pageSizeChange.emit(event);
  }
-
+  /**
+   * Emits the current sort direction when it changes
+   * @param event The new sort direction
+   */
  onSortDirectionChange(event) {
    this.sortDirectionChange.emit(event);
  }

+  /**
+   * Emits the current sort field when it changes
+   * @param event The new sort field
+   */
  onSortFieldChange(event) {
    this.sortFieldChange.emit(event);
  }

+  /**
+   * Emits the current pagination when it changes
+   * @param event The new pagination
+   */
  onPaginationChange(event) {
    this.paginationChange.emit(event);
  }
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -1,13 +1,17 @@
 <div class="card">
-  <a [routerLink]="['/collections/', dso.id]" class="card-img-top">
+  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', dso.id]" class="card-img-top">
    <ds-grid-thumbnail [thumbnail]="dso.logo">
    </ds-grid-thumbnail>
  </a>
+  <span *ngIf="linkType == linkTypes.None" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    </ds-grid-thumbnail>
+  </span>
  <div class="card-body">
    <h4 class="card-title">{{dso.name}}</h4>
    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
-    <div class="text-center">
-      <a [routerLink]="['/collections/',  dso.id]" class="lead btn btn-primary viewButton">View</a>
+    <div *ngIf="linkType != linkTypes.None" class="text-center">
+      <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/',  dso.id]" class="lead btn btn-primary viewButton">View</a>
    </div>
  </div>
 </div>
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts
@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';

-import { renderElementsFor} from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
 import { Collection } from '../../../../core/shared/collection.model';
-import { SetViewMode } from '../../../view-mode';
 import { CollectionSearchResult } from '../../../object-collection/shared/collection-search-result.model';
+import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { listableObjectComponent } from '../../../object-collection/shared/listable-object/listable-object.decorator';

@Component({
  selector: 'ds-collection-search-result-grid-element',
  styleUrls: ['../search-result-grid-element.component.scss', 'collection-search-result-grid-element.component.scss'],
  templateUrl: 'collection-search-result-grid-element.component.html'
 })
-
-@renderElementsFor(CollectionSearchResult, SetViewMode.Grid)
+/**
+ * Component representing a grid element for a collection search result
+ */
+@listableObjectComponent(CollectionSearchResult, ViewMode.GridElement)
 export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -1,14 +1,17 @@
 <div class="card">
-
-  <a [routerLink]="['/communities/', dso.id]" class="card-img-top">
+  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', dso.id]" class="card-img-top">
    <ds-grid-thumbnail [thumbnail]="dso.logo">
    </ds-grid-thumbnail>
  </a>
+  <span *ngIf="linkType == linkTypes.None" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    </ds-grid-thumbnail>
+  </span>
  <div class="card-body">
    <h4 class="card-title">{{dso.name}}</h4>
    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
-    <div class="text-center">
-      <a [routerLink]="['/communities/', dso.id]" class="lead btn btn-primary viewButton">View</a>
+    <div *ngIf="linkType != linkTypes.None" class="text-center">
+      <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', dso.id]" class="lead btn btn-primary viewButton">View</a>
    </div>
  </div>
 </div>
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts
@@ -1,17 +1,18 @@
 import { Component } from '@angular/core';
 import { Community } from '../../../../core/shared/community.model';
-import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
-import { SetViewMode } from '../../../view-mode';
 import { CommunitySearchResult } from '../../../object-collection/shared/community-search-result.model';
+import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { listableObjectComponent } from '../../../object-collection/shared/listable-object/listable-object.decorator';

@Component({
  selector: 'ds-community-search-result-grid-element',
  styleUrls: ['../search-result-grid-element.component.scss', 'community-search-result-grid-element.component.scss'],
  templateUrl: 'community-search-result-grid-element.component.html'
 })
-
-@renderElementsFor(CommunitySearchResult, SetViewMode.Grid)
+/**
+ * Component representing a grid element for a community search result
+ */
+@listableObjectComponent(CommunitySearchResult, ViewMode.GridElement)
 export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
-
 }
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
@@ -1 +0,0 @@
-<ds-item-type-switcher [object]="object" [viewMode]="viewMode"></ds-item-type-switcher>
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
@@ -1,12 +0,0 @@
-.card {
-    a > div {
-        position: relative;
-        .thumbnail-overlay {
-            height: 100%;
-            position: absolute;
-            top: 0;
-            width: 100%;
-            background-color: map-get($theme-colors, primary);
-        }
-    }
-}
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
@@ -1,61 +0,0 @@
-import { ItemSearchResultGridElementComponent } from './item-search-result-grid-element.component';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { of as observableOf } from 'rxjs';
-import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { TruncatePipe } from '../../../utils/truncate.pipe';
-import { Item } from '../../../../core/shared/item.model';
-import { TruncatableService } from '../../../truncatable/truncatable.service';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
-import { ItemViewMode } from '../../../items/item-type-decorator';
-
-let itemSearchResultGridElementComponent: ItemSearchResultGridElementComponent;
-let fixture: ComponentFixture<ItemSearchResultGridElementComponent>;
-
-const truncatableServiceStub: any = {
-  isCollapsed: (id: number) => observableOf(true),
-};
-
-const type = 'authorOfPublication';
-
-const mockItemWithRelationshipType: ItemSearchResult = new ItemSearchResult();
-mockItemWithRelationshipType.hitHighlights = {};
-mockItemWithRelationshipType.indexableObject = Object.assign(new Item(), {
-  bitstreams: observableOf({}),
-  metadata: {
-    'relationship.type': [
-      {
-        language: 'en_US',
-        value: type
-      }
-    ]
-  }
-});
-
-describe('ItemSearchResultGridElementComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule],
-      declarations: [ItemSearchResultGridElementComponent, TruncatePipe],
-      providers: [
-        { provide: TruncatableService, useValue: truncatableServiceStub },
-        { provide: 'objectElementProvider', useValue: (mockItemWithRelationshipType) }
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).overrideComponent(ItemSearchResultGridElementComponent, {
-      set: { changeDetection: ChangeDetectionStrategy.Default }
-    }).compileComponents();
-  }));
-
-  beforeEach(async(() => {
-    fixture = TestBed.createComponent(ItemSearchResultGridElementComponent);
-    itemSearchResultGridElementComponent = fixture.componentInstance;
-  }));
-
-  it('should show send the object to item-type-switcher using viewMode "Card"', () => {
-    const itemTypeSwitcherComp = fixture.debugElement.query(By.css('ds-item-type-switcher')).componentInstance;
-    expect(itemTypeSwitcherComp.object).toBe(mockItemWithRelationshipType);
-    expect(itemTypeSwitcherComp.viewMode).toEqual(ItemViewMode.Card);
-  });
-});
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-
-import { renderElementsFor } from '../../../object-collection/shared/dso-element-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';
-import { SetViewMode } from '../../../view-mode';
-import { focusShadow } from '../../../../shared/animations/focus';
-import { ItemViewMode } from '../../../items/item-type-decorator';
-
-@Component({
-  selector: 'ds-item-search-result-grid-element',
-  styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'],
-  templateUrl: 'item-search-result-grid-element.component.html',
-  animations: [focusShadow],
-})
-
-@renderElementsFor(ItemSearchResult, SetViewMode.Grid)
-export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
-  viewMode = ItemViewMode.Card;
-}
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html
@@ -0,0 +1,41 @@
+<ds-truncatable [id]="dso.id">
+    <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
+        <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
+           class="card-img-top full-width">
+            <div>
+                <ds-grid-thumbnail [thumbnail]="this.dso.getThumbnail() | async">
+                </ds-grid-thumbnail>
+            </div>
+        </a>
+        <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
+            <div>
+                <ds-grid-thumbnail [thumbnail]="dso.getThumbnail() | async">
+                </ds-grid-thumbnail>
+            </div>
+        </span>
+        <div class="card-body">
+            <ds-item-type-badge [object]="dso"></ds-item-type-badge>
+            <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
+                <h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4>
+            </ds-truncatable-part>
+            <p *ngIf="dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
+               class="item-authors card-text text-muted">
+                <ds-truncatable-part [id]="dso.id" [minLines]="1">
+                    <span *ngIf="dso.hasMetadata('dc.date.issued')" class="item-date">{{firstMetadataValue('dc.date.issued')}}</span>
+                    <span *ngFor="let author of allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
+                        <span [innerHTML]="author"></span>
+                    </span>
+                </ds-truncatable-part>
+            </p>
+            <p *ngIf="dso.hasMetadata('dc.description.abstract')" class="item-abstract card-text">
+                <ds-truncatable-part [id]="dso.id" [minLines]="3">
+                    <span [innerHTML]="firstMetadataValue('dc.description.abstract')"></span>
+                </ds-truncatable-part>
+            </p>
+            <div *ngIf="linkType != linkTypes.None" class="text-center">
+                <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
+                   class="lead btn btn-primary viewButton">View</a>
+            </div>
+        </div>
+    </div>
+</ds-truncatable>
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.scss
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.spec.ts
@@ -0,0 +1,125 @@
+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 { 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 { createSuccessfulRemoteDataObject$ } from '../../../../testing/utils';
+import { PaginatedList } from '../../../../../core/data/paginated-list';
+import { PageInfo } from '../../../../../core/shared/page-info.model';
+import { PublicationSearchResultGridElementComponent } from './publication-search-result-grid-element.component';
+
+const mockItemWithMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithMetadata.hitHighlights = {};
+mockItemWithMetadata.indexableObject = Object.assign(new Item(), {
+  bundles: 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(), {
+  bundles: 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 },
+        ],
+        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.object = searchResultWithMetadata;
+          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.object = searchResultWithoutMetadata;
+          fixture.detectChanges();
+        });
+
+        it(`should not show the "${field}" field`, () => {
+          const itemAuthorField = fixture.debugElement.query(By.css(`.item-${field}`));
+          expect(itemAuthorField).toBeNull();
+        });
+      });
+    });
+  }
+}
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.ts
+++ b/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 search result of the type Publication
+ */
+export class PublicationSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
+}
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
@@ -1,9 +1,8 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';

 import { SearchResult } from '../../../+search-page/search-result.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
 import { TruncatableService } from '../../truncatable/truncatable.service';
 import { Observable } from 'rxjs';
 import { Metadata } from '../../../core/shared/metadata.utils';
@@ -14,15 +13,30 @@ import { hasValue } from '../../empty.util';
  template: ``
 })

-export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
+export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> implements OnInit {
+  /**
+   * The DSpaceObject of the search result
+   */
  dso: K;
+
+  /**
+   * Whether or not the grid element is currently collapsed
+   */
  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.isCollapsed$ = this.isCollapsed();
+    }
+  }
+
+  /**
+   * Retrieve the dso from the search result
+   */
+  ngOnInit(): void {
    if (hasValue(this.object)) {
      this.dso = this.object.indexableObject;
-      this.isCollapsed$ = this.isCollapsed();
    }
  }

@@ -49,5 +63,4 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
  private isCollapsed(): Observable<boolean> {
    return this.truncatableService.isCollapsed(this.dso.id);
  }
-
 }
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.html
@@ -1 +0,0 @@
-<ng-container *ngComponentOutlet="gridElement; injector: objectInjector;"></ng-container>
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -1 +0,0 @@
-
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts
@@ -1,43 +0,0 @@
-import { WrapperGridElementComponent } from './wrapper-grid-element.component';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { of as observableOf } from 'rxjs';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RouterStub } from '../../testing/router-stub';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { By } from '@angular/platform-browser';
-
-let wrapperGridElementComponent: WrapperGridElementComponent;
-let fixture: ComponentFixture<WrapperGridElementComponent>;
-const queryParam = 'test query';
-const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
-const activatedRouteStub = {
-  queryParams: observableOf({
-    query: queryParam,
-    scope: scopeParam
-  })
-};
-
-describe('WrapperGridElementComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WrapperGridElementComponent ],
-      providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: 'objectElementProvider', useFactory: (wrapperGridElementComponent)}
-      ],
-
-      schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();  // compile template and css
-  }));
-
-  beforeEach(async(() => {
-    fixture = TestBed.createComponent(WrapperGridElementComponent);
-    wrapperGridElementComponent = fixture.componentInstance;
-
-  }));
-
-  it('should show the wrapper element containing the cards',() => {
-    expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
-  })
-})
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts
@@ -1,32 +0,0 @@
-import { Component, Injector, Input, OnInit } from '@angular/core';
-import { SetViewMode } from '../../view-mode';
-import { GenericConstructor } from '../../../core/shared/generic-constructor';
-import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
-
-@Component({
-  selector: 'ds-wrapper-grid-element',
-  styleUrls: ['./wrapper-grid-element.component.scss'],
-  templateUrl: './wrapper-grid-element.component.html'
-})
-export class WrapperGridElementComponent implements OnInit {
-  @Input() object: ListableObject;
-  objectInjector: Injector;
-  gridElement: any;
-
-  constructor(private injector: Injector) {
-  }
-
-  ngOnInit(): void {
-    this.objectInjector = Injector.create({
-      providers: [{ provide: 'objectElementProvider', useFactory: () => (this.object), deps:[] }],
-      parent: this.injector
-    });
-    this.gridElement = this.getGridElement();
-  }
-
-  getGridElement(): string {
-    const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
-    return rendersDSOType(f, SetViewMode.Grid);
-  }
-}
				`@@ -1 +0,0 @@`
				`<ds-item-type-switcher [object]="object" [viewMode]="viewMode"></ds-item-type-switcher>`
				`@@ -1 +0,0 @@`
				`<ng-container *ngComponentOutlet="gridElement; injector: objectInjector;"></ng-container>`