From 6fef162720a1185a608d9b7bdaa2e8bf7959bb8c Mon Sep 17 00:00:00 2001
From: Alicia Zangger <alicia.zangger@rero.ch>
Date: Tue, 12 Jan 2021 15:21:07 +0100
Subject: [PATCH] document: implement types field

* Updates 'types' field according to new transformation.
* Improves elements alignment in document brief and detailed views.

Co-Authored-by: Alicia Zangger <alicia.zangger@rero.ch>
---
 .../documents-brief-view.component.html       |  3 +-
 .../document-detail-view.component.html       | 40 ++++++++-----------
 projects/admin/src/app/routes/items-route.ts  |  3 +-
 .../document-brief.component.html             |  3 +-
 .../view/thumbnail/thumbnail.component.html   | 11 ++++-
 .../view/thumbnail/thumbnail.component.scss   |  8 ++--
 .../lib/view/thumbnail/thumbnail.component.ts | 15 ++++---
 7 files changed, 46 insertions(+), 37 deletions(-)

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 a97bd3608..23a2735e4 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
@@ -17,6 +17,7 @@
 
 <article *ngIf="record" class="card flex-row border-0">
   <shared-thumbnail
+    class="col-sm-2"
     [record]="record"
     isSmall=true>
   </shared-thumbnail>
@@ -32,7 +33,7 @@ <h5 class="mb-0 card-title">
           {{ record.metadata.title | mainTitle }}
         </ng-template>
       </a>
-    <small> &ndash; {{ record.metadata.type | translate }}</small></h5>
+    </h5>
     <ng-container class="card-text">
       <!-- contribution -->
       <ul class="list-inline mb-0" *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">
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 f42dab680..417e79770 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
@@ -1,42 +1,38 @@
 <!--
   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 <http://www.gnu.org/licenses/>.
 -->
 <!-- import button for external source importation such as BNF -->
 <div *ngIf="record && record.metadata && !record.metadata.pid && pid && source" class="float-right ml-4 mt-2 mb-4">
   <a [routerLink]="['/records', 'documents', 'new']"
-     [queryParams]="{source: source, pid: pid}"
-     class="btn btn-sm btn-outline-primary"
-     translate
-  >Import</a>
+    [queryParams]="{source: source, pid: pid}"
+    class="btn btn-sm btn-outline-primary"
+    translate>Import</a>
 </div>
 <!-- duplicate button -->
 <div *ngIf="record && record.metadata && record.metadata.pid" class="float-right mt-2 mb-4 btn-duplicate">
   <a [routerLink]="['/records', 'documents', 'duplicate']"
-     [queryParams]="{type: 'documents', pid: record.metadata.pid}"
-     class="btn btn-sm btn-outline-primary n-mr-4"
-     translate>Duplicate</a>
+    [queryParams]="{type: 'documents', pid: record.metadata.pid}"
+    class="btn btn-sm btn-outline-primary"
+    translate>Duplicate</a>
 </div>
 <ng-container *ngIf="record">
   <!-- HEADER -->
   <header class="col-10">
     <div class="row mt-3 mb-3">
-      <div class="col-2">
+      <div class="col-lg-3 d-none d-sm-block">
         <shared-thumbnail [record]="record"></shared-thumbnail>
       </div>
-      <div class="col">
+      <div class="col-lg-9">
         <!-- TITLE -->
         <h2 id="doc-title" *ngIf="record.metadata.title && record.metadata.title | mainTitle as title" class="pl-0">
           <ng-core-text-read-more
@@ -74,15 +70,15 @@ <h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
           </ul>
         </ng-container>
 
-    <!-- PUBLICATION STATEMENT -->
-    <ng-container *ngFor="let provision of provisionActivity | keyvalue | callbackArrayFilter: filterPublicationProvisionActivity">
-      <ul class="list-unstyled mb-0">
-        <li *ngFor="let value of provision.value; let i = index"
-            [attr.id]="i | idAttribute:{prefix: 'doc-publication-statement'}">
-          {{ value }}
-        </li>
-      </ul>
-    </ng-container>
+        <!-- PUBLICATION STATEMENT -->
+        <ng-container *ngFor="let provision of provisionActivity | keyvalue | callbackArrayFilter: filterPublicationProvisionActivity">
+          <ul class="list-unstyled mb-0">
+            <li *ngFor="let value of provision.value; let i = index"
+              [attr.id]="i | idAttribute:{prefix: 'doc-publication-statement'}">
+              {{ value }}
+            </li>
+          </ul>
+        </ng-container>
 
         <!-- EXTENT-->
         <ng-container *ngIf="record.metadata.extent">
@@ -443,7 +439,6 @@ <h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
         </div>
       </tab>
       <!-- END OF DESCRIPTION TAB --------------------------------------------->
-
       <!-- LOCAL FIELDS TAB ------------------------------------------------------------>
       <tab
         *ngIf="!record.metadata.harvested && record.metadata.pid"
@@ -458,7 +453,6 @@ <h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
         </div>
       </tab>
       <!-- END OF LOCAL FIELDS TAB ---------------------------------------------------->
-
       <!-- MARC TAB ------------------------------------------------------------>
       <tab id="documents-marc-tab" tabOrder="5" *ngIf="marc$ | async as marc">
         <ng-template tabHeading>
diff --git a/projects/admin/src/app/routes/items-route.ts b/projects/admin/src/app/routes/items-route.ts
index 1ece6b432..57cf8d1f7 100644
--- a/projects/admin/src/app/routes/items-route.ts
+++ b/projects/admin/src/app/routes/items-route.ts
@@ -125,12 +125,13 @@ export class ItemsRoute extends BaseRoute implements RouteInterface {
             redirectUrl: (record: any) => this.getUrl(record),
             aggregationsBucketSize: 10,
             aggregationsOrder: [
+              'document_type',
               'library',
               'location',
               'item_type',
               'status',
             ],
-            aggregationsExpand: ['library', 'location', 'item_type', 'status'],
+            aggregationsExpand: ['document_type', 'library', 'location', 'item_type', 'status'],
             listHeaders: {
               Accept: 'application/rero+json, application/json'
             },
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 aea420a1e..b54cee4fb 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
@@ -17,8 +17,9 @@
 
 <article *ngIf="record" class="card flex-row border-0">
   <shared-thumbnail
+    class="col-sm-2"
     [record]="record"
-    (isSmall)="true">
+    isSmall="true">
   </shared-thumbnail>
   <div class="card-body w-100 py-0">
     <h4 class="card-title mb-1">
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.html b/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
index 1d4cd8690..76a550735 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
@@ -16,7 +16,7 @@
 -->
 
 <ng-container *ngIf="record && record.metadata">
-  <div class="align-self-start d-flex justify-content-center">
+  <div class="align-self-start d-flex">
     <figure class="mb-0" [ngClass]="figureStyle">
       <ng-container *ngIf="record.metadata.cover_art; else noLink">
         <a href="coverUrl"><img [ngClass]="imageCssClass" [src]="coverUrl"></a>
@@ -24,7 +24,14 @@
       <ng-template #noLink>
         <img [ngClass]="imageCssClass" [src]="coverUrl">
       </ng-template>
-      <figcaption class="text-center" translate>{{ record.metadata.type }}</figcaption>
+      <ng-container *ngFor="let type of record.metadata.type">
+        <ng-container *ngIf="type.subtype; else mainTypeBlock">
+          <figcaption class="figure-caption text-left" translate>{{ type.subtype }}</figcaption>
+        </ng-container>
+        <ng-template #mainTypeBlock>
+          <figcaption class="figure-caption text-left" translate>{{ type.main_type }}</figcaption>
+        </ng-template>
+      </ng-container>
     </figure>
   </div>
 </ng-container>
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
index 2f50e392c..16fa71355 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
@@ -18,10 +18,10 @@
 .thumb-brief
 img {
   max-height: 122px;
-  width: 80px;
+  max-width: 80px;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 768px) {
 .thumb-brief
   img {
     max-width: 48px;
@@ -31,10 +31,10 @@ img {
 .thumb-detail
 img {
   max-height: 244px;
-  width: 160px;
+  max-width: 160px;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 768px) {
 .thumb-detail
   img {
     max-width: 48px;
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
index 4bad34af9..4ea9d36d8 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
@@ -35,7 +35,7 @@ export class ThumbnailComponent implements OnInit {
   isbn: string;
 
   /** Css classes for the image */
-  imageCssClass = 'img-responsive img-thumbnail border border-light';
+  imageCssClass = 'img-thumbnail img-fluid border border-light';
 
   /** Style for image container */
   figureStyle = 'thumb-detail';
@@ -66,7 +66,7 @@ export class ThumbnailComponent implements OnInit {
         }
       })
     ).subscribe(result => {
-      if (result.success) {
+      if (result !== null && result.success) {
         this.coverUrl = result.image;
       }
     });
@@ -78,9 +78,14 @@ export class ThumbnailComponent implements OnInit {
    */
   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;
+      this.coverUrl = `/static/images/icon_${this.record.metadata.type[0].main_type}.svg`;
+      if (this.record.metadata.electronicLocator) {
+        for (const electronicLocator of this.record.metadata.electronicLocator) {
+          if (electronicLocator.content === 'coverImage' && electronicLocator.type === 'relatedResource') {
+            this.coverUrl = electronicLocator.url;
+            break;
+          }
+        }
       } else if (this.record.metadata.identifiedBy) {
         for (const identifier of this.record.metadata.identifiedBy) {
           if (identifier.type === 'bf:Isbn') {