Merge pull request #926 from qultoltd/#674-fix-thumbnail

#674 fix thumbnail

.editorconfig

@@ -12,3 +12,6 @@ trim_trailing_whitespace = true
 [*.md]
 insert_final_newline = false
 trim_trailing_whitespace = false
+
+[*.ts]
+quote_type = single

src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.spec.ts

@@ -13,6 +13,7 @@ import { Collection } from '../../../../../core/shared/collection.model';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { getCollectionEditRoute } from '../../../../../+collection-page/collection-page-routing-paths';
+import { LinkService } from '../../../../../core/cache/builders/link.service';
 
 describe('CollectionAdminSearchResultGridElementComponent', () => {
   let component: CollectionAdminSearchResultGridElementComponent;
@@ -26,6 +27,11 @@ describe('CollectionAdminSearchResultGridElementComponent', () => {
     searchResult.indexableObject = new Collection();
     searchResult.indexableObject.uuid = id;
   }
+
+  const linkService = jasmine.createSpyObj('linkService', {
+    resolveLink: {}
+  });
+
   beforeEach(async(() => {
     init();
     TestBed.configureTestingModule({
@@ -39,6 +45,7 @@ describe('CollectionAdminSearchResultGridElementComponent', () => {
       providers: [
         { provide: TruncatableService, useValue: mockTruncatableService },
         { provide: BitstreamDataService, useValue: {} },
+        { provide: LinkService, useValue: linkService}
       ]
     })
       .compileComponents();

src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.spec.ts

@@ -14,8 +14,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { CommunityAdminSearchResultGridElementComponent } from './community-admin-search-result-grid-element.component';
 import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
 import { Community } from '../../../../../core/shared/community.model';
-import { CommunityAdminSearchResultListElementComponent } from '../../admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component';
 import { getCommunityEditRoute } from '../../../../../+community-page/community-page-routing-paths';
+import { LinkService } from '../../../../../core/cache/builders/link.service';
 
 describe('CommunityAdminSearchResultGridElementComponent', () => {
   let component: CommunityAdminSearchResultGridElementComponent;
@@ -29,6 +29,11 @@ describe('CommunityAdminSearchResultGridElementComponent', () => {
     searchResult.indexableObject = new Community();
     searchResult.indexableObject.uuid = id;
   }
+
+  const linkService = jasmine.createSpyObj('linkService', {
+    resolveLink: {}
+  });
+
   beforeEach(async(() => {
     init();
     TestBed.configureTestingModule({
@@ -42,6 +47,7 @@ describe('CommunityAdminSearchResultGridElementComponent', () => {
       providers: [
         { provide: TruncatableService, useValue: mockTruncatableService },
         { provide: BitstreamDataService, useValue: {} },
+        { provide: LinkService, useValue: linkService}
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })

src/app/+item-page/full/full-item-page.component.spec.ts

@@ -13,7 +13,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { Item } from '../../core/shared/item.model';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { PaginatedList } from '../../core/data/paginated-list';
-import { RemoteData } from '../../core/data/remote-data';
 import { of as observableOf } from 'rxjs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';

src/app/+item-page/simple/item-page.component.spec.ts

@@ -8,7 +8,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { MetadataService } from '../../core/metadata/metadata.service';
 import { VarDirective } from '../../shared/utils/var.directive';
-import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
 import { PaginatedList } from '../../core/data/paginated-list';
 import { PageInfo } from '../../core/shared/page-info.model';

src/app/core/cache/builders/link.service.spec.ts

@@ -6,7 +6,6 @@ import { HALLink } from '../../shared/hal-link.model';
 import { HALResource } from '../../shared/hal-resource.model';
 import { ResourceType } from '../../shared/resource-type';
 import * as decorators from './build-decorators';
-import { getDataServiceFor } from './build-decorators';
 import { LinkService } from './link.service';
 
 const spyOnFunction = <T>(obj: T, func: keyof T) => {

src/app/core/cache/builders/link.service.ts

@@ -27,7 +27,7 @@ export class LinkService {
    */
   public resolveLinks<T extends HALResource>(model: T, ...linksToFollow: Array<FollowLinkConfig<T>>): T {
     linksToFollow.forEach((linkToFollow: FollowLinkConfig<T>) => {
-      this.resolveLink(model, linkToFollow);
+        this.resolveLink(model, linkToFollow);
     });
     return model;
   }

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

@@ -1,10 +1,10 @@
 <div class="card">
   <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 [thumbnail]="(object.logo | async)?.payload">
     </ds-grid-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="object.logo">
+    <ds-grid-thumbnail [thumbnail]="(object.logo | async)?.payload">
     </ds-grid-thumbnail>
   </span>
   <div class="card-body">

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

@@ -3,6 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { Collection } from '../../../core/shared/collection.model';
+import { LinkService } from '../../../core/cache/builders/link.service';
 
 let collectionGridElementComponent: CollectionGridElementComponent;
 let fixture: ComponentFixture<CollectionGridElementComponent>;
@@ -29,12 +30,17 @@ const mockCollectionWithoutAbstract: Collection = Object.assign(new Collection()
   }
 });
 
+const linkService = jasmine.createSpyObj('linkService', {
+  resolveLink: mockCollectionWithAbstract
+});
+
 describe('CollectionGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CollectionGridElementComponent ],
       providers: [
-        { provide: 'objectElementProvider', useValue: (mockCollectionWithAbstract)}
+        { provide: 'objectElementProvider', useValue: (mockCollectionWithAbstract)},
+        { provide: LinkService, useValue: linkService}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]

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

@@ -1,9 +1,11 @@
-import { Component, Inject } from '@angular/core';
-
+import { Component, Input } from '@angular/core';
 import { Collection } from '../../../core/shared/collection.model';
 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';
+import { hasNoValue, hasValue } from '../../empty.util';
+import { followLink } from '../../utils/follow-link-config.model';
+import { LinkService } from '../../../core/cache/builders/link.service';
 
 /**
  * Component representing a grid element for collection
@@ -11,8 +13,29 @@ import { listableObjectComponent } from '../../object-collection/shared/listable
 @Component({
   selector: 'ds-collection-grid-element',
   styleUrls: ['./collection-grid-element.component.scss'],
-  templateUrl: './collection-grid-element.component.html'
+  templateUrl: './collection-grid-element.component.html',
 })
-
 @listableObjectComponent(Collection, ViewMode.GridElement)
-export class CollectionGridElementComponent extends AbstractListableElementComponent<Collection> {}
+export class CollectionGridElementComponent extends AbstractListableElementComponent<
+  Collection
+> {
+  private _object: Collection;
+
+  constructor(private linkService: LinkService) {
+    super();
+  }
+
+  @Input() set object(object: Collection) {
+    this._object = object;
+    if (hasValue(this._object) && hasNoValue(this._object.logo)) {
+      this.linkService.resolveLink<Collection>(
+        this._object,
+        followLink('logo')
+      );
+    }
+  }
+
+  get object(): Collection {
+    return this._object;
+  }
+}

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

@@ -1,10 +1,10 @@
 <div class="card">
   <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 [thumbnail]="(object.logo | async)?.payload">
     </ds-grid-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="object.logo">
+    <ds-grid-thumbnail [thumbnail]="(object.logo | async)?.payload">
     </ds-grid-thumbnail>
   </span>
   <div class="card-body">

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

@@ -3,6 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { Community } from '../../../core/shared/community.model';
+import { LinkService } from '../../../core/cache/builders/link.service';
 
 let communityGridElementComponent: CommunityGridElementComponent;
 let fixture: ComponentFixture<CommunityGridElementComponent>;
@@ -29,12 +30,17 @@ const mockCommunityWithoutAbstract: Community = Object.assign(new Community(), {
   }
 });
 
+const linkService = jasmine.createSpyObj('linkService', {
+  resolveLink: mockCommunityWithAbstract
+});
+
 describe('CommunityGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CommunityGridElementComponent ],
       providers: [
-        { provide: 'objectElementProvider', useValue: (mockCommunityWithAbstract)}
+        { provide: 'objectElementProvider', useValue: (mockCommunityWithAbstract)},
+        { provide: LinkService, useValue: linkService}
       ],
 
     schemas: [ NO_ERRORS_SCHEMA ]

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

@@ -1,9 +1,11 @@
-import { Component } from '@angular/core';
-
+import { Component, Input } from '@angular/core';
 import { Community } from '../../../core/shared/community.model';
 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';
+import { followLink } from '../../utils/follow-link-config.model';
+import { LinkService } from '../../../core/cache/builders/link.service';
+import { hasNoValue, hasValue } from '../../empty.util';
 
 /**
  * Component representing a grid element for a community
@@ -15,4 +17,21 @@ import { listableObjectComponent } from '../../object-collection/shared/listable
 })
 
 @listableObjectComponent(Community, ViewMode.GridElement)
-export class CommunityGridElementComponent extends AbstractListableElementComponent<Community> {}
+export class CommunityGridElementComponent extends AbstractListableElementComponent<Community> {
+  private _object: Community;
+
+  constructor( private linkService: LinkService) {
+    super();
+  }
+
+  @Input() set object(object: Community) {
+    this._object = object;
+    if (hasValue(this._object) && hasNoValue(this._object.logo)) {
+      this.linkService.resolveLink<Community>(this._object, followLink('logo'))
+    }
+  }
+
+  get object(): Community {
+    return this._object;
+  }
+}

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

@@ -1,3 +1,3 @@
 <div class="thumbnail">
-  <img [src]="src | dsSafeUrl" (error)="errorHandler($event)"/>
+  <img [src]="src | dsSafeUrl" (error)="errorHandler($event)" />
 </div>

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

@@ -1,4 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
 import { Bitstream } from '../../../core/shared/bitstream.model';
 import { hasValue } from '../../empty.util';
 
@@ -11,10 +17,9 @@ import { hasValue } from '../../empty.util';
 @Component({
   selector: 'ds-grid-thumbnail',
   styleUrls: ['./grid-thumbnail.component.scss'],
-  templateUrl: './grid-thumbnail.component.html'
+  templateUrl: './grid-thumbnail.component.html',
 })
-export class GridThumbnailComponent implements OnInit {
-
+export class GridThumbnailComponent implements OnInit, OnChanges {
   @Input() thumbnail: Bitstream;
 
   data: any = {};
@@ -22,19 +27,47 @@ export class GridThumbnailComponent implements OnInit {
   /**
    * The default 'holder.js' image
    */
-  @Input() defaultImage? = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
+  @Input() defaultImage? =
+    'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
 
   src: string;
+
   errorHandler(event) {
     event.currentTarget.src = this.defaultImage;
   }
 
+  /**
+   * Initialize the src
+   */
   ngOnInit(): void {
-    if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links) && this.thumbnail._links.content.href) {
-      this.src = this.thumbnail._links.content.href;
-    } else {
-      this.src = this.defaultImage
+    this.src = this.defaultImage;
+
+    this.checkThumbnail(this.thumbnail);
+  }
+
+  /**
+   * If the old input is undefined and the new one is a bitsream then set src
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      !hasValue(changes.thumbnail.previousValue) &&
+      hasValue(changes.thumbnail.currentValue)
+    ) {
+      console.log('this.thumbnail', changes.thumbnail.currentValue);
+      this.checkThumbnail(changes.thumbnail.currentValue);
     }
   }
 
+  /**
+   * check if the Bitstream has any content than set the src
+   */
+  checkThumbnail(thumbnail: Bitstream) {
+    if (
+      hasValue(thumbnail) &&
+      hasValue(thumbnail._links) &&
+      thumbnail._links.content.href
+    ) {
+      this.src = thumbnail._links.content.href;
+    }
+  }
 }

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

@@ -1,10 +1,10 @@
 <div class="card">
   <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 [thumbnail]="(dso.logo | async)?.payload">
     </ds-grid-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
     </ds-grid-thumbnail>
   </span>
   <div class="card-body">

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

@@ -19,6 +19,7 @@ import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { CollectionSearchResultGridElementComponent } from './collection-search-result-grid-element.component';
 import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
+import { LinkService } from '../../../../core/cache/builders/link.service';
 
 let collectionSearchResultGridElementComponent: CollectionSearchResultGridElementComponent;
 let fixture: ComponentFixture<CollectionSearchResultGridElementComponent>;
@@ -52,6 +53,9 @@ mockCollectionWithoutAbstract.indexableObject = Object.assign(new Collection(),
     ]
   }
 });
+const linkService = jasmine.createSpyObj('linkService', {
+  resolveLink: mockCollectionWithAbstract
+});
 
 describe('CollectionSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
@@ -72,6 +76,7 @@ describe('CollectionSearchResultGridElementComponent', () => {
         { provide: DSOChangeAnalyzer, useValue: {} },
         { provide: DefaultChangeAnalyzer, useValue: {} },
         { provide: BitstreamFormatDataService, useValue: {} },
+        { provide: LinkService, useValue: linkService}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]

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

@@ -1,10 +1,14 @@
-import { Component } from '@angular/core';
-
+import { Component, Input } from '@angular/core';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
 import { Collection } from '../../../../core/shared/collection.model';
 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';
+import { hasNoValue, hasValue } from '../../../empty.util';
+import { followLink } from '../../../utils/follow-link-config.model';
+import { LinkService } from '../../../../core/cache/builders/link.service';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
 
 @Component({
   selector: 'ds-collection-search-result-grid-element',
@@ -15,4 +19,28 @@ import { listableObjectComponent } from '../../../object-collection/shared/lista
  * Component representing a grid element for a collection search result
  */
 @listableObjectComponent(CollectionSearchResult, ViewMode.GridElement)
-export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}
+export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent< CollectionSearchResult, Collection > {
+  private _dso: Collection;
+
+  constructor(
+    private linkService: LinkService,
+    protected truncatableService: TruncatableService,
+    protected bitstreamDataService: BitstreamDataService
+  ) {
+    super(truncatableService, bitstreamDataService);
+  }
+
+  @Input() set dso(dso: Collection) {
+    this._dso = dso;
+    if (hasValue(this._dso) && hasNoValue(this._dso.logo)) {
+      this.linkService.resolveLink<Collection>(
+        this._dso,
+        followLink('logo')
+      );
+    }
+  }
+
+  get dso(): Collection {
+    return this._dso;
+  }
+}

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

@@ -1,10 +1,10 @@
 <div class="card">
     <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 [thumbnail]="(dso.logo | async)?.payload">
         </ds-grid-thumbnail>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
     </ds-grid-thumbnail>
   </span>
     <div class="card-body">

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

@@ -19,6 +19,7 @@ import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { CommunitySearchResultGridElementComponent } from './community-search-result-grid-element.component';
 import { BitstreamFormatDataService } from '../../../../core/data/bitstream-format-data.service';
+import { LinkService } from '../../../../core/cache/builders/link.service';
 
 let communitySearchResultGridElementComponent: CommunitySearchResultGridElementComponent;
 let fixture: ComponentFixture<CommunitySearchResultGridElementComponent>;
@@ -52,6 +53,9 @@ mockCommunityWithoutAbstract.indexableObject = Object.assign(new Community(), {
     ]
   }
 });
+const linkService = jasmine.createSpyObj('linkService', {
+  resolveLink: mockCommunityWithAbstract
+});
 
 describe('CommunitySearchResultGridElementComponent', () => {
   beforeEach(async(() => {
@@ -72,6 +76,7 @@ describe('CommunitySearchResultGridElementComponent', () => {
         { provide: DSOChangeAnalyzer, useValue: {} },
         { provide: DefaultChangeAnalyzer, useValue: {} },
         { provide: BitstreamFormatDataService, useValue: {} },
+        { provide: LinkService, useValue: linkService}
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]

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

@@ -1,18 +1,46 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Community } from '../../../../core/shared/community.model';
 import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
 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';
+import { LinkService } from '../../../../core/cache/builders/link.service';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
+import { hasNoValue, hasValue } from '../../../empty.util';
+import { followLink } from '../../../utils/follow-link-config.model';
 
 @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'
+  styleUrls: [
+    '../search-result-grid-element.component.scss',
+    'community-search-result-grid-element.component.scss',
+  ],
+  templateUrl: 'community-search-result-grid-element.component.html',
 })
 /**
  * Component representing a grid element for a community search result
  */
 @listableObjectComponent(CommunitySearchResult, ViewMode.GridElement)
-export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
+export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult,Community> {
+  private _dso: Community;
+
+  constructor(
+    private linkService: LinkService,
+    protected truncatableService: TruncatableService,
+    protected bitstreamDataService: BitstreamDataService
+  ) {
+    super(truncatableService, bitstreamDataService);
+  }
+
+  @Input() set dso(dso: Community) {
+    this._dso = dso;
+    if (hasValue(this._dso) && hasNoValue(this._dso.logo)) {
+      this.linkService.resolveLink<Community>(this._dso, followLink('logo'));
+    }
+  }
+
+  get dso(): Community {
+    return this._dso;
+  }
 }

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

@@ -10,7 +10,7 @@
       </a>
       <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
           <div>
-              <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
+              <ds-grid-thumbnail [thumbnail]="getThumbnail()  | async">
               </ds-grid-thumbnail>
           </div>
       </span>

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

@@ -6,10 +6,10 @@ import { BitstreamDataService } from '../../../core/data/bitstream-data.service'
 import { Bitstream } from '../../../core/shared/bitstream.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { Metadata } from '../../../core/shared/metadata.utils';
-import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
 import { hasValue } from '../../empty.util';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { TruncatableService } from '../../truncatable/truncatable.service';
+import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
 
 @Component({
   selector: 'ds-search-result-grid-element',