#150 Initial grid/list view implementation

package.json

@@ -103,6 +103,7 @@
     "methods": "1.1.2",
     "morgan": "1.9.0",
     "ngx-pagination": "3.0.1",
+    "object-fit-images": "^3.2.3",
     "pem": "1.12.3",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",

src/app/+collection-page/collection-page.component.html

@@ -41,13 +41,13 @@
     <ng-container *ngVar="(itemRDObs | async) as itemRD">
       <div *ngIf="itemRD?.hasSucceeded" @fadeIn>
         <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
-        <ds-object-list
+        <ds-viewable-collection
           [config]="paginationConfig"
           [sortConfig]="sortConfig"
           [objects]="itemRD"
           [hideGear]="false"
           (paginationChange)="onPaginationChange($event)">
-        </ds-object-list>
+        </ds-viewable-collection>
       </div>
       <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
       <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}"></ds-loading>

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html

@@ -2,12 +2,8 @@
   <div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
     <h2>{{'community.sub-collection-list.head' | translate}}</h2>
     <ul>
-      <li *ngFor="let collection of subCollectionsRD?.payload">
+      <ds-viewable-collection [objects]="subCollectionsRD?.payload">
-        <p>
+      </ds-viewable-collection>
-          <span class="lead"><a [routerLink]="['/collections', collection.id]">{{collection.name}}</a></span><br>
-          <span class="text-muted">{{collection.shortDescription}}</span>
-        </p>
-      </li>
     </ul>
   </div>
   <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>

src/app/+home-page/top-level-community-list/top-level-community-list.component.html

@@ -2,14 +2,12 @@
   <div *ngIf="communitiesRD?.hasSucceeded " @fadeInOut>
   <h2>{{'home.top-level-communities.head' | translate}}</h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
-    <ds-object-list
+  <ds-viewable-collection
     [config]="config"
-      [sortConfig]="sortConfig"
     [objects]="communitiesRD"
-      [hideGear]="true"
+
     (paginationChange)="updatePage($event)">
-    </ds-object-list>
+  </ds-viewable-collection>
 </div>
 <ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>
-  <ds-loading *ngIf="communitiesRD?.isLoading" message="{{'loading.top-level-communities' | translate}}"></ds-loading>
+<ds-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-loading></ng-container>
-</ng-container>

src/app/+search-page/search-page.component.ts

@@ -51,7 +51,22 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     );
     this.scopeListRDObs = communityService.findAll();
     // Initial pagination config
+    const pagination: PaginationComponentOptions = new PaginationComponentOptions();
+    pagination.id = 'search-results-pagination';
+    pagination.currentPage = 1;
+    pagination.pageSize = 10;
+
+    // TODO Update to accommodate view switcher
+    this.route.queryParams.map((params) => {
+      if (isNotEmpty(params.view) && params.view == 'grid') {
+        pagination.pageSize = 12;
+      }
+    });
+
+
+    const sort: SortOptions = new SortOptions();
     this.searchOptions = this.service.searchOptions;
+
   }
 
   ngOnInit(): void {

src/app/+search-page/search-page.module.ts

@@ -7,6 +7,9 @@ import { SearchResultsComponent } from './search-results/search-results.componen
 import { ItemSearchResultListElementComponent } from '../object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
 import { CollectionSearchResultListElementComponent } from '../object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
 import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
+import { ItemSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
+import { CommunitySearchResultGridElementComponent } from '../object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
+import { CollectionSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
 import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
@@ -37,6 +40,10 @@ const effects = [
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
     CommunitySearchResultListElementComponent,
+    ItemSearchResultGridElementComponent,
+    CollectionSearchResultGridElementComponent,
+    CommunitySearchResultGridElementComponent,
+    CommunitySearchResultListElementComponent,
     SearchFiltersComponent,
     SearchFilterComponent,
     SearchFacetFilterComponent
@@ -49,7 +56,11 @@ const effects = [
   entryComponents: [
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
-    CommunitySearchResultListElementComponent
+    CommunitySearchResultListElementComponent,
+    ItemSearchResultGridElementComponent,
+    CollectionSearchResultGridElementComponent,
+    CommunitySearchResultGridElementComponent,
   ]
 })
-export class SearchPageModule { }
+export class SearchPageModule {
+}

src/app/+search-page/search-result.model.ts

@@ -1,6 +1,6 @@
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { Metadatum } from '../core/shared/metadatum.model';
-import { ListableObject } from '../object-list/listable-object/listable-object.model';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 export class SearchResult<T extends DSpaceObject> implements ListableObject {
 

src/app/+search-page/search-results/search-results.component.html

@@ -1,10 +1,10 @@
 <div *ngIf="searchResults?.hasSucceeded" @fadeIn>
   <h2 *ngIf="searchResults?.payload ?.length > 0">{{ 'search.results.head' | translate }}</h2>
-<ds-object-list
+<ds-viewable-collection
   [config]="searchConfig.pagination"
   [sortConfig]="searchConfig.sort"
   [objects]="searchResults"
   [hideGear]="true">
-</ds-object-list></div>
+</ds-viewable-collection></div>
 <ds-loading *ngIf="searchResults?.isLoading" message="{{'loading.search-results' | translate}}"></ds-loading>
 <ds-error *ngIf="searchResults?.hasFailed" message="{{'error.search-results' | translate}}"></ds-error>

src/app/+search-page/search-service/search.service.ts

@@ -9,10 +9,10 @@ import { SearchOptions } from '../search-options.model';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { Metadatum } from '../../core/shared/metadatum.model';
 import { Item } from '../../core/shared/item.model';
-import { ItemSearchResult } from '../../object-list/search-result-list-element/item-search-result/item-search-result.model';
 import { SearchFilterConfig } from './search-filter-config.model';
 import { FilterType } from './filter-type.model';
 import { FacetValue } from './facet-value.model';
+import { ItemSearchResult } from '../../object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
 import { RouteService } from '../../shared/route.service';

src/app/core/shared/dspace-object.model.ts

@@ -3,7 +3,7 @@ import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { CacheableObject } from '../cache/object-cache.reducer';
 import { RemoteData } from '../data/remote-data';
 import { ResourceType } from './resource-type';
-import { ListableObject } from '../../object-list/listable-object/listable-object.model';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 import { Observable } from 'rxjs/Observable';
 
 /**

src/app/object-collection/object-collection.component.html

@@ -0,0 +1,13 @@
+<ds-object-list [config]="config"
+                [sortConfig]="sortConfig"
+                [objects]="objects"
+                *ngIf="getViewMode()=='list'">
+</ds-object-list>
+
+<ds-object-grid [config]="config"
+                [sortConfig]="sortConfig"
+                [objects]="objects"
+                *ngIf="getViewMode()=='grid'">
+</ds-object-grid>
+
+

src/app/object-collection/object-collection.component.scss

@@ -0,0 +1 @@
+@import '../../styles/variables.scss';

src/app/object-collection/object-collection.component.ts

@@ -0,0 +1,113 @@
+import { Component, EventEmitter,
+  Input,
+  OnInit,
+  Output, SimpleChanges, OnChanges, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
+
+import { RemoteData } from '../core/data/remote-data';
+import { PageInfo } from '../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+
+import {  SortDirection } from '../core/cache/models/sort-options.model';
+
+import { ListableObject } from './shared/listable-object.model';
+import { hasValue, isNotEmpty } from '../shared/empty.util';
+@Component({
+  selector: 'ds-viewable-collection',
+  styleUrls: ['./object-collection.component.scss'],
+  templateUrl: './object-collection.component.html',
+})
+export class ObjectCollectionComponent implements OnChanges, OnInit {
+
+  @Input() objects: RemoteData<ListableObject[]>;
+  @Input() config?: PaginationComponentOptions;
+  pageInfo: Observable<PageInfo>;
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the page wsize is changed.
+   * Event's payload equals to the newly selected page size.
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the sort direction is changed.
+   * Event's payload equals to the newly selected sort direction.
+   */
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+
+  /**
+   * An event fired when the sort field is changed.
+   * Event's payload equals to the newly selected sort field.
+   */
+  @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+  data: any = {};
+  defaultViewMode: string ='list';
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.objects && !changes.objects.isFirstChange()) {
+      this.pageInfo = this.objects.pageInfo;
+    }
+  }
+
+  ngOnInit(): void {
+    this.pageInfo = this.objects.pageInfo;
+  }
+
+  /**
+   * @param route
+   *    Route is a singleton service provided by Angular.
+   * @param router
+   *    Router is a singleton service provided by Angular.
+   */
+  constructor(private cdRef: ChangeDetectorRef, private route: ActivatedRoute,
+              private router: Router) {
+  }
+
+  getViewMode(): string {
+    // TODO Update to accommodate view switcher
+
+    this.route.queryParams.map((params) => {
+      if (isNotEmpty(params.view) && hasValue(params.view)) {
+        return params.view;
+      } else {
+        return this.defaultViewMode;
+      }
+    });
+    return this.defaultViewMode;
+  }
+
+  setViewMode(viewMode: string) {
+    this.defaultViewMode = viewMode;
+  }
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
+
+}

src/app/object-collection/shared/item-search-result.model.ts

@@ -0,0 +1,5 @@
+import { SearchResult } from '../../+search-page/search-result.model';
+import { Item } from '../../core/shared/item.model';
+
+export class ItemSearchResult extends SearchResult<Item> {
+}

src/app/object-grid/collection-grid-element/collection-grid-element.component.html

@@ -0,0 +1,12 @@
+<div class="card">
+  <a [routerLink]="['/collections/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+
+  </div>
+</div>

src/app/object-grid/collection-grid-element/collection-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';

src/app/object-grid/collection-grid-element/collection-grid-element.component.ts

@@ -0,0 +1,14 @@
+import { Component, Inject } from '@angular/core';
+
+import { Collection } from '../../core/shared/collection.model';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { gridElementFor } from '../grid-element-decorator';
+
+@Component({
+  selector: 'ds-collection-grid-element',
+  styleUrls: ['./collection-grid-element.component.scss'],
+  templateUrl: './collection-grid-element.component.html'
+})
+
+@gridElementFor(Collection)
+export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}

src/app/object-grid/community-grid-element/community-grid-element.component.html

@@ -0,0 +1,12 @@
+<div class="card">
+
+  <a [routerLink]="['/communities/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>

src/app/object-grid/community-grid-element/community-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';

src/app/object-grid/community-grid-element/community-grid-element.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Community } from '../../core/shared/community.model';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { gridElementFor} from '../grid-element-decorator';
+
+@Component({
+  selector: 'ds-community-grid-element',
+  styleUrls: ['./community-grid-element.component.scss'],
+  templateUrl: './community-grid-element.component.html'
+})
+
+@gridElementFor(Community)
+export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}

src/app/object-grid/grid-card-styling.scss

@@ -0,0 +1,36 @@
+.card-title{
+  line-height: 1em;
+  height:3em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1em;
+  margin-bottom:10px;
+}
+.card-text.item-authors {
+  height: 1em;
+}
+.card-text.item-abstract {
+  height: 5em;
+
+}
+.viewButton{
+  display:block;
+}
+
+.card{
+  padding:10px;
+  margin-bottom: 15px;
+}
+
+.card-img-top ::ng-deep  img
+{
+  height: 120px;
+  width: 100%;
+  object-fit: cover;
+  margin-bottom: 10px;
+}

src/app/object-grid/grid-element-decorator.ts

@@ -0,0 +1,16 @@
+import { GenericConstructor } from '../core/shared/generic-constructor';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+const gridElementMap = new Map();
+export function gridElementFor(gridable: GenericConstructor<ListableObject>) {
+  return function decorator(objectElement: any) {
+    if (!objectElement) {
+      return;
+    }
+    gridElementMap.set(gridable, objectElement);
+  };
+}
+
+export function getGridElementFor(gridable: GenericConstructor<ListableObject>) {
+  return gridElementMap.get(gridable);
+}

src/app/object-grid/item-grid-element/item-grid-element.component.html

@@ -0,0 +1,20 @@
+<div class="card">
+
+  <a [routerLink]="['/items/' + object.id]" class="card-img-top">
+    <ds-thumbnail [thumbnail]="object.getThumbnail()">
+    </ds-thumbnail>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.findMetadata('dc.title')}}</h4>
+    <p *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-authors card-text">
+        <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
+            <span *ngIf="!last">; </span>
+        </span>
+    </p>
+    (<span *ngIf="object.findMetadata('dc.publisher')" class="item-list-publisher">{{object.findMetadata("dc.publisher")}}, </span><span *ngIf="object.findMetadata('dc.date.issued')" class="item-list-date">{{object.findMetadata("dc.date.issued")}}</span>)
+
+    <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+    <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>

src/app/object-grid/item-grid-element/item-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';

src/app/object-grid/item-grid-element/item-grid-element.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Item } from '../../core/shared/item.model';
+import { gridElementFor } from '../grid-element-decorator';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+
+@Component({
+  selector: 'ds-item-grid-element',
+  styleUrls: ['./item-grid-element.component.scss'],
+  templateUrl: './item-grid-element.component.html'
+})
+
+@gridElementFor(Item)
+export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}

src/app/object-grid/object-grid-element/object-grid-element.component.scss

@@ -0,0 +1,6 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';
+:host {
+  display: block;
+  margin-bottom: $spacer;
+}

src/app/object-grid/object-grid-element/object-grid-element.component.ts

@@ -0,0 +1,14 @@
+import { Component, Inject } from '@angular/core';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-object-grid-element',
+  styleUrls: ['./object-grid-element.component.scss'],
+  templateUrl: './object-grid-element.component.html'
+})
+export class ObjectGridElementComponent <T extends ListableObject> {
+  object: T;
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    this.object = gridable as T;
+  }
+}

src/app/object-grid/object-grid.component.html

@@ -0,0 +1,23 @@
+<ds-pagination
+  [paginationOptions]="config"
+  [pageInfoState]="pageInfo"
+  [collectionSize]="(pageInfo | async)?.totalElements"
+  [sortOptions]="sortConfig"
+  [hideGear]="hideGear"
+  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+  (pageChange)="onPageChange($event)"
+  (pageSizeChange)="onPageSizeChange($event)"
+  (sortDirectionChange)="onSortDirectionChange($event)"
+  (sortFieldChange)="onSortDirectionChange($event)"
+  (paginationChange)="onPaginationChange($event)">
+  <ul *ngIf="objects.hasSucceeded | async" @fadeIn>
+    <div class="row">
+        <div class="col-lg-3 col-xs-12 col-sm-6"
+          *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
+          <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
+      </div>
+    </div>
+  </ul>
+  <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-pagination>

src/app/object-grid/object-grid.component.scss

@@ -0,0 +1 @@
+@import '../../styles/variables.scss';

src/app/object-grid/object-grid.component.ts

@@ -0,0 +1,86 @@
+import {
+  Component, EventEmitter,
+  Input,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  OnInit,
+  Output, SimpleChanges, OnChanges, ChangeDetectorRef, DoCheck
+} from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { RemoteData } from '../core/data/remote-data';
+import { PageInfo } from '../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+
+import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
+import { fadeIn } from '../shared/animations/fade';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
+  selector: 'ds-object-grid',
+  styleUrls: [ './object-grid.component.scss' ],
+  templateUrl: './object-grid.component.html',
+  animations: [fadeIn]
+})
+
+export class ObjectGridComponent implements OnChanges, OnInit  {
+
+  @Input() objects: RemoteData<ListableObject[]>;
+  @Input() config: PaginationComponentOptions;
+  @Input() sortConfig: SortOptions;
+  @Input() hideGear = false;
+  @Input() hidePagerWhenSinglePage = true;
+  pageInfo: Observable<PageInfo>;
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the page wsize is changed.
+   * Event's payload equals to the newly selected page size.
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the sort direction is changed.
+   * Event's payload equals to the newly selected sort direction.
+   */
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+
+  /**
+   * An event fired when the sort field is changed.
+   * Event's payload equals to the newly selected sort field.
+   */
+  @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+  data: any = {};
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.objects && !changes.objects.isFirstChange()) {
+      this.pageInfo = this.objects.pageInfo;
+    }
+  }
+
+  ngOnInit(): void {
+    this.pageInfo = this.objects.pageInfo;
+    this.config.pageSize = 4;
+  }
+
+  /**
+   * @param route
+   *    Route is a singleton service provided by Angular.
+   * @param router
+   *    Router is a singleton service provided by Angular.
+   */
+  constructor(private cdRef: ChangeDetectorRef) {
+  }
+
+
+}

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

@@ -0,0 +1,2 @@
+<a [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
+<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>

src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { gridElementFor } from '../../grid-element-decorator';
+import { CollectionSearchResult } from './collection-search-result.model';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Collection } from '../../../core/shared/collection.model';
+
+@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'
+})
+
+@gridElementFor(CollectionSearchResult)
+export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}

src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts

@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { Collection } from '../../../core/shared/collection.model';
+
+export class CollectionSearchResult extends SearchResult<Collection> {
+}

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

@@ -0,0 +1,2 @@
+<a [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
+<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>

src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { CommunitySearchResult } from './community-search-result.model';
+import { Community } from '../../../core/shared/community.model';
+import { gridElementFor } from '../../grid-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+
+@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'
+})
+
+@gridElementFor(CommunitySearchResult)
+export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
+
+}

src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts

@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { Community } from '../../../core/shared/community.model';
+
+export class CommunitySearchResult extends SearchResult<Community> {
+}

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

@@ -0,0 +1,27 @@
+<div class="card">
+  <a [routerLink]="['/items/' + dso.id]" class="card-img-top">
+    <ds-thumbnail [thumbnail]="dso.getThumbnail()">
+    </ds-thumbnail>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{dso.findMetadata('dc.title')}}</h4>
+
+    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);"
+       class="item-authors card-text">
+        <span
+          *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
+            <span *ngIf="!last">; </span>
+        </span>
+    </p>
+    (<span *ngIf="dso.findMetadata('dc.publisher')"
+           class="item-list-publisher">{{dso.findMetadata("dc.publisher")}}, </span><span
+    *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>)
+
+    <p *ngIf="dso.findMetadata('dc.description.abstract')" class="item-abstract card-text">
+      {{dso.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+  </div>
+  <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+
+</div>
+

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

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables.scss';
+@import '../../grid-card-styling.scss';

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { gridElementFor } from '../../grid-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';
+
+@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'
+})
+
+@gridElementFor(ItemSearchResult)
+export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}

src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss

@@ -0,0 +1,8 @@
+ @import '../../../styles/variables.scss';
+ @import '../grid-card-styling.scss';
+:host {
+    /deep/ em {
+        font-weight: bold;
+        font-style: normal;
+    }
+}

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

@@ -0,0 +1,57 @@
+import { Component, Inject } from '@angular/core';
+
+import { SearchResult } from '../../+search-page/search-result.model';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { Metadatum } from '../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-search-result-grid-element',
+  template: ``
+})
+
+export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends ObjectGridElementComponent<T> {
+  dso: K;
+
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    super(gridable);
+    this.dso = this.object.dspaceObject;
+  }
+
+  getValues(keys: string[]): string[] {
+    const results: string[] = new Array<string>();
+    this.object.hitHighlights.forEach(
+      (md: Metadatum) => {
+        if (keys.indexOf(md.key) > -1) {
+          results.push(md.value);
+        }
+      }
+    );
+    if (isEmpty(results)) {
+      this.dso.filterMetadata(keys).forEach(
+        (md: Metadatum) => {
+          results.push(md.value);
+        }
+      );
+    }
+    return results;
+  }
+
+  getFirstValue(key: string): string {
+    let result: string;
+    this.object.hitHighlights.some(
+      (md: Metadatum) => {
+        if (key === md.key) {
+          result =  md.value;
+          return true;
+        }
+      }
+    );
+    if (hasNoValue(result)) {
+      result = this.dso.findMetadata(key);
+    }
+    return result;
+  }
+}

src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html

@@ -0,0 +1 @@
+<ng-container *ngComponentOutlet="getGridElement(); injector: objectInjector;"></ng-container>

src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../styles/variables.scss';
+@import '../grid-card-styling.scss';

src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { getGridElementFor } from '../grid-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;
+
+  constructor(private injector: Injector) {}
+
+  ngOnInit(): void {
+    this.objectInjector = ReflectiveInjector.resolveAndCreate(
+      [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
+
+  }
+
+  getGridElement(): string {
+    const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
+    return getGridElementFor(f);
+  }
+}

src/app/object-list/list-element-decorator.ts

@@ -1,5 +1,5 @@
-import { ListableObject } from './listable-object/listable-object.model';
 import { GenericConstructor } from '../core/shared/generic-constructor';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 const listElementMap = new Map();
 export function listElementFor(listable: GenericConstructor<ListableObject>) {

src/app/object-list/object-list-element/object-list-element.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { ListableObject } from '../listable-object/listable-object.model';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-object-list-element',

src/app/object-list/object-list.component.ts

@@ -11,9 +11,8 @@ import { SortDirection, SortOptions } from '../core/cache/models/sort-options.mo
 
 import { RemoteData } from '../core/data/remote-data';
 import { PageInfo } from '../core/shared/page-info.model';
-import { ListableObject } from '../object-list/listable-object/listable-object.model';
-
 import { fadeIn } from '../shared/animations/fade';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { hasValue } from '../shared/empty.util';
 
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
@@ -83,6 +82,7 @@ export class ObjectListComponent {
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
 
+
   onPageChange(event) {
     this.pageChange.emit(event);
   }

src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 
 import { listElementFor } from '../../list-element-decorator';
-import { ItemSearchResult } from './item-search-result.model';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 import { Item } from '../../../core/shared/item.model';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
 
 @Component({
   selector: 'ds-item-search-result-list-element',

src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts

@@ -1,5 +0,0 @@
-import { SearchResult } from '../../../+search-page/search-result.model';
-import { Item } from '../../../core/shared/item.model';
-
-export class ItemSearchResult extends SearchResult<Item> {
-}

src/app/object-list/search-result-list-element/search-result-list-element.component.ts

@@ -1,11 +1,11 @@
 import { Component, Inject } from '@angular/core';
 
 import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
-import { ListableObject } from '../listable-object/listable-object.model';
 import { SearchResult } from '../../+search-page/search-result.model';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Metadatum } from '../../core/shared/metadatum.model';
 import { isEmpty, hasNoValue } from '../../shared/empty.util';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-search-result-list-element',

src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
-import { ListableObject } from '../listable-object/listable-object.model';
 import { getListElementFor } from '../list-element-decorator'
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-wrapper-list-element',

src/app/shared/shared.module.ts

@@ -15,20 +15,30 @@ import { SafeUrlPipe } from './utils/safe-url-pipe';
 import { TruncatePipe } from './utils/truncate.pipe';
 
 import { CollectionListElementComponent } from '../object-list/collection-list-element/collection-list-element.component';
+import { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
+import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
+import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
+import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
+import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
+import { ObjectListComponent } from '../object-list/object-list.component';
+
+import { CollectionGridElementComponent} from '../object-grid/collection-grid-element/collection-grid-element.component'
+import { CommunityGridElementComponent} from '../object-grid/community-grid-element/community-grid-element.component'
+import { ItemGridElementComponent} from '../object-grid/item-grid-element/item-grid-element.component'
+import { ObjectGridElementComponent} from '../object-grid/object-grid-element/object-grid-element.component'
+import { WrapperGridElementComponent} from '../object-grid/wrapper-grid-element/wrapper-grid-element.component'
+import { ObjectGridComponent } from '../object-grid/object-grid.component';
+import { ObjectCollectionComponent } from '../object-collection/object-collection.component';
 import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
 import { ComcolPageHeaderComponent } from './comcol-page-header/comcol-page-header.component';
 import { ComcolPageLogoComponent } from './comcol-page-logo/comcol-page-logo.component';
-import { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
 import { ErrorComponent } from './error/error.component';
 import { LoadingComponent } from './loading/loading.component';
-import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
+
-import { ObjectListComponent } from '../object-list/object-list.component';
-import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
-import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
 import { SearchFormComponent } from './search-form/search-form.component';
-import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
+import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
 
@@ -60,6 +70,11 @@ const COMPONENTS = [
   LoadingComponent,
   ObjectListComponent,
   ObjectListElementComponent,
+  WrapperListElementComponent,
+  ObjectGridComponent,
+  ObjectGridElementComponent,
+  WrapperGridElementComponent,
+  ObjectCollectionComponent,
   PaginationComponent,
   SearchFormComponent,
   ThumbnailComponent,
@@ -69,10 +84,14 @@ const COMPONENTS = [
 
 const ENTRY_COMPONENTS = [
   // put shared entry components (components that are created dynamically) here
+  ItemListElementComponent,
   CollectionListElementComponent,
   CommunityListElementComponent,
-  ItemListElementComponent,
+  SearchResultListElementComponent,
-  SearchResultListElementComponent
+  ItemGridElementComponent,
+  CollectionGridElementComponent,
+  CommunityGridElementComponent,
+  SearchResultGridElementComponent
 ];
 
 const DIRECTIVES = [

src/styles/_mixins.scss

@@ -2,3 +2,4 @@
 @import '../../node_modules/bootstrap/scss/mixins.scss';
 
 /* Custom mixins go here */
+

yarn.lock

@@ -4804,6 +4804,10 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-fit-images@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.3.tgz#4089f6d0070a3b5563d3c1ab6f1b28d61331f0ac"
+
 object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"