From c717fc5ec815d0b29b244781b1efcf2e5b0ac0b7 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Thu, 27 May 2021 15:51:54 +0200 Subject: [PATCH] 79597: Fix thumbnails ~ item page direct request --- .../metadata-field-wrapper.component.html | 2 +- .../publication/publication.component.html | 2 +- .../item-types/shared/item.component.ts | 21 ++++++---- .../untyped-item/untyped-item.component.html | 2 +- .../journal-issue.component.html | 2 +- .../journal-volume.component.html | 2 +- .../item-pages/journal/journal.component.html | 2 +- ...-search-result-grid-element.component.html | 2 +- .../org-unit/org-unit.component.html | 2 +- .../item-pages/person/person.component.html | 2 +- .../item-pages/project/project.component.html | 2 +- src/app/thumbnail/thumbnail.component.html | 18 ++++---- src/app/thumbnail/thumbnail.component.ts | 41 ++++++++++++++----- 13 files changed, 66 insertions(+), 34 deletions(-) diff --git a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html index c791cec600..a41aa0d67a 100644 --- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html +++ b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html @@ -1,4 +1,4 @@ -
+
{{ label }}
diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.html b/src/app/+item-page/simple/item-types/publication/publication.component.html index 73219cbb8f..0758f7cda4 100644 --- a/src/app/+item-page/simple/item-types/publication/publication.component.html +++ b/src/app/+item-page/simple/item-types/publication/publication.component.html @@ -10,7 +10,7 @@
- + diff --git a/src/app/+item-page/simple/item-types/shared/item.component.ts b/src/app/+item-page/simple/item-types/shared/item.component.ts index 120eda930f..8763d8c899 100644 --- a/src/app/+item-page/simple/item-types/shared/item.component.ts +++ b/src/app/+item-page/simple/item-types/shared/item.component.ts @@ -4,8 +4,10 @@ import { environment } from '../../../../../environments/environment'; import { BitstreamDataService } from '../../../../core/data/bitstream-data.service'; import { Bitstream } from '../../../../core/shared/bitstream.model'; import { Item } from '../../../../core/shared/item.model'; -import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/operators'; +import { getFirstSucceededRemoteDataPayload, takeUntilCompletedRemoteData } from '../../../../core/shared/operators'; import { getItemPageRoute } from '../../../item-page-routing-paths'; +import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; +import { RemoteData } from '../../../../core/data/remote-data'; @Component({ selector: 'ds-item', @@ -17,6 +19,11 @@ import { getItemPageRoute } from '../../../item-page-routing-paths'; export class ItemComponent implements OnInit { @Input() object: Item; + /** + * The Item's thumbnail + */ + thumbnail$: BehaviorSubject>; + /** * Route to the item page */ @@ -28,12 +35,12 @@ export class ItemComponent implements OnInit { ngOnInit(): void { this.itemPageRoute = getItemPageRoute(this.object); - } - // TODO refactor to return RemoteData, and thumbnail template to deal with loading - getThumbnail(): Observable { - return this.bitstreamDataService.getThumbnailFor(this.object).pipe( - getFirstSucceededRemoteDataPayload() - ); + this.thumbnail$ = new BehaviorSubject>(undefined); + this.bitstreamDataService.getThumbnailFor(this.object).pipe( + takeUntilCompletedRemoteData(), + ).subscribe((rd: RemoteData) => { + this.thumbnail$.next(rd); + }); } } diff --git a/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html index 8d46a2c5a9..3e20da3094 100644 --- a/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html +++ b/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html @@ -10,7 +10,7 @@
- + diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html index 5749c5797d..af87daa243 100644 --- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html +++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html @@ -9,7 +9,7 @@
- +
- +
- +
- +
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html index 14d56d4104..67b79163ed 100644 --- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html +++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html @@ -9,7 +9,7 @@
-
- diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html index 0590c8bfe4..facecb4996 100644 --- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html +++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html @@ -10,7 +10,7 @@
diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html index 645bce9b80..593c1c10b8 100644 --- a/src/app/thumbnail/thumbnail.component.html +++ b/src/app/thumbnail/thumbnail.component.html @@ -1,10 +1,14 @@
- -
-
-
{{ placeholder | translate }}
+ + text-content + + + +
+
+
{{ placeholder | translate }}
+
-
+
- diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts index 30911644f7..ec1e7eb368 100644 --- a/src/app/thumbnail/thumbnail.component.ts +++ b/src/app/thumbnail/thumbnail.component.ts @@ -1,6 +1,8 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnChanges } from '@angular/core'; import { Bitstream } from '../core/shared/bitstream.model'; import { hasValue } from '../shared/empty.util'; +import { RemoteData } from '../core/data/remote-data'; +import { BITSTREAM } from '../core/shared/bitstream.resource-type'; /** * This component renders a given Bitstream as a thumbnail. @@ -12,11 +14,11 @@ import { hasValue } from '../shared/empty.util'; styleUrls: ['./thumbnail.component.scss'], templateUrl: './thumbnail.component.html', }) -export class ThumbnailComponent implements OnInit { +export class ThumbnailComponent implements OnChanges { /** * The thumbnail Bitstream */ - @Input() thumbnail: Bitstream; + @Input() thumbnail: Bitstream | RemoteData; /** * The default image, used if the thumbnail isn't set or can't be downloaded. @@ -27,7 +29,7 @@ export class ThumbnailComponent implements OnInit { /** * The src attribute used in the template to render the image. */ - src: string; + src: string = null; /** * i18n key of thumbnail alt text @@ -44,18 +46,37 @@ export class ThumbnailComponent implements OnInit { */ @Input() limitWidth? = true; + isLoading: boolean; + /** - * Initialize the thumbnail. + * Resolve the thumbnail. * Use a default image if no actual image is available. */ - ngOnInit(): void { - if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links) - && hasValue(this.thumbnail._links.content) - && this.thumbnail._links.content.href) { - this.src = this.thumbnail._links.content.href; + ngOnChanges(): void { + if (this.thumbnail === undefined || this.thumbnail === null) { + return; + } + if (this.thumbnail instanceof Bitstream) { + this.resolveThumbnail(this.thumbnail as Bitstream) + } else { + const thumbnailRD = this.thumbnail as RemoteData; + if (thumbnailRD.isLoading) { + this.isLoading = true; + } else { + this.resolveThumbnail(thumbnailRD.payload as Bitstream); + } + } + } + + private resolveThumbnail(thumbnail: Bitstream): void { + if (hasValue(thumbnail) && hasValue(thumbnail._links) + && hasValue(thumbnail._links.content) + && thumbnail._links.content.href) { + this.src = thumbnail._links.content.href; } else { this.src = this.defaultImage; } + this.isLoading = false; } /**