From 1a58755a5d390daacb587f0920736e3bf3d2c769 Mon Sep 17 00:00:00 2001 From: Alicia Zangger Date: Wed, 18 Nov 2020 16:11:25 +0100 Subject: [PATCH] document: display cover thumbnail * Moves thumbnail logic in 'shared' library as it's used in both admin and public-search projects. * Adds thumbnails in professional brief and detailed view. * Moves 'type' field below the thumbnail in admin detailed view. * Closes rero/rero-ils#1188. Co-Authored-by: Alicia Zangger --- .../documents-brief-view.component.html | 79 ++++--- .../document-detail-view.component.html | 218 +++++++++--------- .../document-brief.component.html | 105 ++++----- .../document-brief.component.scss | 13 -- .../document-brief.component.ts | 32 --- .../src/app/record.service.spec.ts | 37 --- .../public-search/src/app/record.service.ts | 48 ---- projects/shared/src/lib/shared.module.ts | 7 +- .../view/thumbnail/thumbnail.component.html | 30 +++ .../view/thumbnail/thumbnail.component.scss | 42 ++++ .../thumbnail/thumbnail.component.spec.ts | 46 ++++ .../lib/view/thumbnail/thumbnail.component.ts | 99 ++++++++ projects/shared/src/public-api.ts | 1 + 13 files changed, 423 insertions(+), 334 deletions(-) delete mode 100644 projects/public-search/src/app/record.service.spec.ts delete mode 100644 projects/public-search/src/app/record.service.ts create mode 100644 projects/shared/src/lib/view/thumbnail/thumbnail.component.html create mode 100644 projects/shared/src/lib/view/thumbnail/thumbnail.component.scss create mode 100644 projects/shared/src/lib/view/thumbnail/thumbnail.component.spec.ts create mode 100644 projects/shared/src/lib/view/thumbnail/thumbnail.component.ts diff --git a/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html b/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html index 2e0d36b71..a97bd3608 100644 --- a/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html +++ b/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html @@ -15,41 +15,44 @@  along with this program. If not, see . --> - -
- - - {{ record.metadata.ui_title_text }} - - - {{ record.metadata.title | mainTitle }} - - - – {{ record.metadata.type | translate }}
- - - - - -
    -
  • {{ publication.value }}
    • -
- - + diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html index 67a6764a5..f13b49b55 100644 --- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html +++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html @@ -26,122 +26,124 @@ -
- - - {{ record.metadata.type | translate | titlecase }} - - - -

- -

+
+
+
+ +
+
+ +

+ +

- - - -

{{ altgr_title }}

- - + + + +

{{ altgr_title }}

+ + - - -
    -
  • - - - - {{ last ? '' : '; ' }} -
    • -
- + + +
    +
  • + + + + {{ last ? '' : '; ' }} +
    • +
+ - - - -
    -
  • - {{ value }} -
    • -
- - + + + +
    +
  • + {{ value }} +
    • +
+ + - - -
{{ record.metadata.extent }}
- + + +
{{ record.metadata.extent }}
+ - - -
    -
  • - {{ edition.value }} -
    • -
- + + +
    +
  • + {{ edition.value }} +
    • +
+ - - - -
-
- {{ getPartOfLabel(hostDocument) }} -
-
-
- - {{ getShortMainTitle(hostDocument.metadata.title) }} - - - ; -
    -
  • - {{ num }} -
    • -
- -
-
-
- - + + + +
+
+ {{ getPartOfLabel(hostDocument) }} +
+
+
+ + {{ getShortMainTitle(hostDocument.metadata.title) }} + + + ; +
    +
  • + {{ num }} +
    • +
+ +
+
+
+ + - - -
    -
  • - - -
    • -
- + + +
    +
  • + + +
    • +
+ - -
-
- - {{ subject }} - + +
+
+ + {{ subject }} + +
+
diff --git a/projects/public-search/src/app/document-brief/document-brief.component.html b/projects/public-search/src/app/document-brief/document-brief.component.html index 3d229e71b..aea420a1e 100644 --- a/projects/public-search/src/app/document-brief/document-brief.component.html +++ b/projects/public-search/src/app/document-brief/document-brief.component.html @@ -16,62 +16,55 @@ -->
-
-
- - - - - - -
{{ record.metadata.type | translate }}
-
-
-
-

- {{ record.metadata.ui_title_text }} -

-
- - + + +
+

+ {{ record.metadata.ui_title_text }} +

+ -
+
+   + available + not available +
+
+ + 
{{record.explanation|json}}
+
+
+
diff --git a/projects/public-search/src/app/document-brief/document-brief.component.scss b/projects/public-search/src/app/document-brief/document-brief.component.scss index 325c20e30..bc693f878 100644 --- a/projects/public-search/src/app/document-brief/document-brief.component.scss +++ b/projects/public-search/src/app/document-brief/document-brief.component.scss @@ -17,19 +17,6 @@ */ - .thumb-brief - img { - max-height: 122px; - width: 80px; - } - -@media (max-width: 960px) { - .thumb-brief - img { - max-width: 48px; - } - } - pre { white-space: pre-wrap; max-height: 300px; diff --git a/projects/public-search/src/app/document-brief/document-brief.component.ts b/projects/public-search/src/app/document-brief/document-brief.component.ts index d8ec18026..4852e6b96 100644 --- a/projects/public-search/src/app/document-brief/document-brief.component.ts +++ b/projects/public-search/src/app/document-brief/document-brief.component.ts @@ -16,7 +16,6 @@ */ import { Component, Input } from '@angular/core'; -import { RecordService as LocalRecordService } from '../record.service'; @Component({ selector: 'public-search-document-brief', @@ -33,20 +32,6 @@ export class DocumentBriefComponent { @Input() set record(value) { if (value !== undefined) { this._record = value; - this.coverUrl = `/static/images/icon_${value.metadata.type}.png`; - if (value.metadata.cover_art) { - this.coverUrl = value.metadata.cover_art; - } else if (value.metadata.identifiedBy) { - let isbn; - for (const identifier of value.metadata.identifiedBy) { - if (identifier.type === 'bf:Isbn') { - isbn = identifier.value; - } - } - if (isbn) { - this.getCover(isbn); - } - } } } @@ -68,21 +53,4 @@ export class DocumentBriefComponent { }); return publications; } - - constructor( - private localRecordService: LocalRecordService - ) { } - - /** - * Load cover image - * @param isbn - isbn of the document - * @returns string - url of the cover if cover exists. - */ - getCover(isbn: string) { - this.localRecordService.getCover(isbn).subscribe(result => { - if (result.success) { - this.coverUrl = result.image; - } - }); - } } diff --git a/projects/public-search/src/app/record.service.spec.ts b/projects/public-search/src/app/record.service.spec.ts deleted file mode 100644 index 384434119..000000000 --- a/projects/public-search/src/app/record.service.spec.ts +++ /dev/null @@ -1,37 +0,0 @@ -/* - -RERO ILS -Copyright (C) 2019 RERO - -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU Affero General Public License as published by -the Free Software Foundation, version 3 of the License. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU Affero General Public License for more details. - -You should have received a copy of the GNU Affero General Public License -along with this program. If not, see . - -*/ - -import { TestBed } from '@angular/core/testing'; -import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { RecordService } from './record.service'; - - -describe('myService', () => { - - beforeEach(() => TestBed.configureTestingModule({ - imports: [HttpClientTestingModule], - providers: [RecordService] - })); - - it('should be created', () => { - const service: RecordService = TestBed.get(RecordService); - expect(service).toBeTruthy(); - }); - -}); diff --git a/projects/public-search/src/app/record.service.ts b/projects/public-search/src/app/record.service.ts deleted file mode 100644 index 6244129fa..000000000 --- a/projects/public-search/src/app/record.service.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* - -RERO ILS -Copyright (C) 2019 RERO - -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU Affero General Public License as published by -the Free Software Foundation, version 3 of the License. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU Affero General Public License for more details. - -You should have received a copy of the GNU Affero General Public License -along with this program. If not, see . - -*/ - -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { catchError } from 'rxjs/operators'; -import { of } from 'rxjs'; - -@Injectable({ - providedIn: 'root' -}) -export class RecordService { - - constructor( - private http: HttpClient - ) { } - - /** - * Get cover image - * @param isbn - string, International Standard Book Number - */ - getCover(isbn: string) { - const url = `/api/cover/${isbn}`; - return this.http.get(url).pipe( - catchError(e => { - if (e.status === 404) { - return of(null); - } - }) - ); - } -} diff --git a/projects/shared/src/lib/shared.module.ts b/projects/shared/src/lib/shared.module.ts index 951fd9923..1360ebb8d 100644 --- a/projects/shared/src/lib/shared.module.ts +++ b/projects/shared/src/lib/shared.module.ts @@ -34,6 +34,7 @@ import { ContributionBriefComponent } from './view/brief/contribution-brief/cont import { ContributionSourcesComponent } from './view/brief/contribution-sources/contribution-sources.component'; import { OrganisationBriefComponent } from './view/brief/organisation-brief/organisation-brief.component'; import { PersonBriefComponent } from './view/brief/person-brief/person-brief.component'; +import { ThumbnailComponent } from './view/thumbnail/thumbnail.component'; @NgModule({ declarations: [ @@ -49,7 +50,8 @@ import { PersonBriefComponent } from './view/brief/person-brief/person-brief.com ProvisionActivityPipe, ContributionTypePipe, UrlActivePipe, - NgVarDirective + NgVarDirective, + ThumbnailComponent ], exports: [ CommonModule, @@ -65,7 +67,8 @@ import { PersonBriefComponent } from './view/brief/person-brief/person-brief.com ProvisionActivityPipe, ContributionTypePipe, UrlActivePipe, - NgVarDirective + NgVarDirective, + ThumbnailComponent ], imports: [ CommonModule, diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.html b/projects/shared/src/lib/view/thumbnail/thumbnail.component.html new file mode 100644 index 000000000..1d4cd8690 --- /dev/null +++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.html @@ -0,0 +1,30 @@ + + + +
+
+ + + + + + +
{{ record.metadata.type }}
+
+
+ diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss new file mode 100644 index 000000000..2f50e392c --- /dev/null +++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss @@ -0,0 +1,42 @@ +/* + * RERO ILS UI + * Copyright (C) 2019 RERO + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, version 3 of the License. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +.thumb-brief +img { + max-height: 122px; + width: 80px; +} + +@media (max-width: 960px) { +.thumb-brief + img { + max-width: 48px; + } +} + +.thumb-detail +img { + max-height: 244px; + width: 160px; +} + +@media (max-width: 960px) { +.thumb-detail + img { + max-width: 48px; + } +} diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.spec.ts b/projects/shared/src/lib/view/thumbnail/thumbnail.component.spec.ts new file mode 100644 index 000000000..930332295 --- /dev/null +++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.spec.ts @@ -0,0 +1,46 @@ +/* + * RERO ILS UI + * Copyright (C) 2020 RERO + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, version 3 of the License. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { HttpClientModule } from '@angular/common/http'; + +import { ThumbnailComponent } from './thumbnail.component'; + +describe('ThumbnailComponent', () => { + let component: ThumbnailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ThumbnailComponent ], + imports: [ + HttpClientModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ThumbnailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts new file mode 100644 index 000000000..4bad34af9 --- /dev/null +++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts @@ -0,0 +1,99 @@ +/* + * RERO ILS UI + * Copyright (C) 2020 RERO + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, version 3 of the License. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { HttpClient } from '@angular/common/http'; +import { Component, Input, OnInit } from '@angular/core'; +import { of } from 'rxjs'; +import { catchError } from 'rxjs/operators'; + + +@Component({ + selector: 'shared-thumbnail', + templateUrl: './thumbnail.component.html', + styleUrls: ['./thumbnail.component.scss'] +}) +export class ThumbnailComponent implements OnInit { + + /** Cover url */ + coverUrl: string; + + /** ISBN of the record */ + isbn: string; + + /** Css classes for the image */ + imageCssClass = 'img-responsive img-thumbnail border border-light'; + + /** Style for image container */ + figureStyle = 'thumb-detail'; + + /** Record to display */ + @Input() record: any; + + /** Should the thumbnail be small ? */ + @Input() isSmall = false; + + /** + * Constructor + * @param _httpClient - HttpClient + */ + constructor( + private _httpClient: HttpClient + ) { } + + /** + * Get cover url + * @returns string - url of the cover if cover exists. + */ + getCoverUrl() { + this._httpClient.get(`/api/cover/${this.isbn}`).pipe( + catchError(e => { + if (e.status === 404) { + return of(null); + } + }) + ).subscribe(result => { + if (result.success) { + this.coverUrl = result.image; + } + }); + } + + /** + * On init hook + * Set default cover image, or get cover image if exists. + */ + ngOnInit() { + if (this.record && this.record.metadata) { + this.coverUrl = `/static/images/icon_${this.record.metadata.type}.png`; + if (this.record.metadata.cover_art) { + this.coverUrl = this.record.metadata.cover_art; + } else if (this.record.metadata.identifiedBy) { + for (const identifier of this.record.metadata.identifiedBy) { + if (identifier.type === 'bf:Isbn') { + this.isbn = identifier.value; + } + } + if (this.isbn) { + this.getCoverUrl(); + } + } + if (this.isSmall) { + this.figureStyle = 'thumb-brief'; + } + } + } +} diff --git a/projects/shared/src/public-api.ts b/projects/shared/src/public-api.ts index 87c12c2e4..9e0d004c2 100644 --- a/projects/shared/src/public-api.ts +++ b/projects/shared/src/public-api.ts @@ -40,4 +40,5 @@ export * from './lib/view/brief/contribution-brief/contribution-brief.component' export * from './lib/view/brief/contribution-sources/contribution-sources.component'; export * from './lib/view/brief/organisation-brief/organisation-brief.component'; export * from './lib/view/brief/person-brief/person-brief.component'; +export * from './lib/view/thumbnail/thumbnail.component';