From 22ae5a04e7959be8bd32f4aada2ba6a5a3bff23a Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Fri, 7 Jun 2019 12:51:27 +0200
Subject: [PATCH] 62741: Journal-types grid elements & grid thumbnail
 fix/improvement

---
 .../journal-issue-grid-element.component.html | 30 +++++++++++++++++
 .../journal-issue-grid-element.component.scss |  0
 ...urnal-issue-grid-element.component.spec.ts |  0
 .../journal-issue-grid-element.component.ts   | 14 ++++++++
 ...journal-volume-grid-element.component.html | 30 +++++++++++++++++
 ...journal-volume-grid-element.component.scss |  0
 ...rnal-volume-grid-element.component.spec.ts |  0
 .../journal-volume-grid-element.component.ts  | 14 ++++++++
 .../journal-grid-element.component.html       | 33 +++++++++++++++++++
 .../journal-grid-element.component.scss       |  0
 .../journal-grid-element.component.spec.ts    |  0
 .../journal/journal-grid-element.component.ts | 14 ++++++++
 .../journal-entities.module.ts                |  8 ++++-
 .../orgunit-grid-element.component.html       |  2 +-
 .../person/person-grid-element.component.html |  2 +-
 .../project-grid-element.component.html       |  2 +-
 .../publication-grid-element.component.html   |  2 +-
 .../object-grid/object-grid.component.scss    |  5 +++
 18 files changed, 151 insertions(+), 5 deletions(-)
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.html
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.scss
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.spec.ts
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.ts
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.html
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.scss
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.spec.ts
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.ts
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.html
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.scss
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.spec.ts
 create mode 100644 src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.ts

diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.html
new file mode 100644
index 0000000000..6bd296db48
--- /dev/null
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.html
@@ -0,0 +1,30 @@
+<ds-truncatable [id]="dso.id">
+  <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+    <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+      <div>
+        <ds-grid-thumbnail [thumbnail]="this.item.getThumbnail() | async">
+        </ds-grid-thumbnail>
+      </div>
+    </a>
+    <div class="card-body">
+      <ds-item-type-badge [object]="object"></ds-item-type-badge>
+      <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p class="item-date card-text text-muted">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('journalissue.issuedate')"></span>
+        </ds-truncatable-part>
+      </p>
+      <p class="item-journal-title card-text">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('journal.title')"></span>
+        </ds-truncatable-part>
+      </p>
+      <div class="text-center">
+        <a [routerLink]="['/items/' + dso.id]"
+           class="lead btn btn-primary viewButton">View</a>
+      </div>
+    </div>
+  </div>
+</ds-truncatable>
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.scss b/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.ts b/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.ts
new file mode 100644
index 0000000000..538971bf84
--- /dev/null
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
+import { Component } from '@angular/core';
+import { focusShadow } from '../../../../shared/animations/focus';
+import { TypedItemSearchResultGridElementComponent } from '../../../../shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
+
+@rendersItemType('JournalIssue', ItemViewMode.Card)
+@Component({
+  selector: 'ds-journal-issue-grid-element',
+  styleUrls: ['./journal-issue-grid-element.component.scss'],
+  templateUrl: './journal-issue-grid-element.component.html',
+  animations: [focusShadow]
+})
+export class JournalIssueGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.html
new file mode 100644
index 0000000000..e1d3cb5e0a
--- /dev/null
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.html
@@ -0,0 +1,30 @@
+<ds-truncatable [id]="dso.id">
+  <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+    <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+      <div>
+        <ds-grid-thumbnail [thumbnail]="this.item.getThumbnail() | async">
+        </ds-grid-thumbnail>
+      </div>
+    </a>
+    <div class="card-body">
+      <ds-item-type-badge [object]="object"></ds-item-type-badge>
+      <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p class="item-date card-text text-muted">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('journalvolume.issuedate')"></span>
+        </ds-truncatable-part>
+      </p>
+      <p class="item-description card-text">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="2">
+          <span [innerHTML]="firstMetadataValue('journalvolume.identifier.description')"></span>
+        </ds-truncatable-part>
+      </p>
+      <div class="text-center">
+        <a [routerLink]="['/items/' + dso.id]"
+           class="lead btn btn-primary viewButton">View</a>
+      </div>
+    </div>
+  </div>
+</ds-truncatable>
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.scss b/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.ts b/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.ts
new file mode 100644
index 0000000000..3ef4e9948e
--- /dev/null
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
+import { Component } from '@angular/core';
+import { focusShadow } from '../../../../shared/animations/focus';
+import { TypedItemSearchResultGridElementComponent } from '../../../../shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
+
+@rendersItemType('JournalVolume', ItemViewMode.Card)
+@Component({
+  selector: 'ds-journal-volume-grid-element',
+  styleUrls: ['./journal-volume-grid-element.component.scss'],
+  templateUrl: './journal-volume-grid-element.component.html',
+  animations: [focusShadow]
+})
+export class JournalVolumeGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.html
new file mode 100644
index 0000000000..54fc0e4215
--- /dev/null
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.html
@@ -0,0 +1,33 @@
+<ds-truncatable [id]="dso.id">
+  <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+    <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+      <div>
+        <ds-grid-thumbnail [thumbnail]="this.item.getThumbnail() | async">
+        </ds-grid-thumbnail>
+      </div>
+    </a>
+    <div class="card-body">
+      <ds-item-type-badge [object]="object"></ds-item-type-badge>
+      <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p *ngIf="dso.hasMetadata('journal.contributor.editor')"
+         class="item-publisher card-text text-muted">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
+          <span *ngIf="dso.hasMetadata('journal.contributor.editor')" class="item-date">{{dso.firstMetadataValue('journal.contributor.editor')}}</span>
+          <span>, </span>
+          <span *ngIf="dso.hasMetadata('journal.publisher')" class="item-date">{{dso.firstMetadataValue('journal.publisher')}}</span>
+        </ds-truncatable-part>
+      </p>
+      <p class="item-description card-text">
+        <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
+          <span [innerHTML]="firstMetadataValue('journal.identifier.description')"></span>
+        </ds-truncatable-part>
+      </p>
+      <div class="text-center">
+        <a [routerLink]="['/items/' + dso.id]"
+           class="lead btn btn-primary viewButton">View</a>
+      </div>
+    </div>
+  </div>
+</ds-truncatable>
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.scss b/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.ts b/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.ts
new file mode 100644
index 0000000000..37c0b0aad1
--- /dev/null
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.ts
@@ -0,0 +1,14 @@
+import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
+import { Component } from '@angular/core';
+import { focusShadow } from '../../../../shared/animations/focus';
+import { TypedItemSearchResultGridElementComponent } from '../../../../shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
+
+@rendersItemType('Journal', ItemViewMode.Card)
+@Component({
+  selector: 'ds-journal-grid-element',
+  styleUrls: ['./journal-grid-element.component.scss'],
+  templateUrl: './journal-grid-element.component.html',
+  animations: [focusShadow]
+})
+export class JournalGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}
diff --git a/src/app/entity-groups/journal-entities/journal-entities.module.ts b/src/app/entity-groups/journal-entities/journal-entities.module.ts
index 50ec160650..4033645e1b 100644
--- a/src/app/entity-groups/journal-entities/journal-entities.module.ts
+++ b/src/app/entity-groups/journal-entities/journal-entities.module.ts
@@ -9,6 +9,9 @@ import { JournalListElementComponent } from './item-list-elements/journal/journa
 import { JournalIssueListElementComponent } from './item-list-elements/journal-issue/journal-issue-list-element.component';
 import { JournalVolumeListElementComponent } from './item-list-elements/journal-volume/journal-volume-list-element.component';
 import { TooltipModule } from 'ngx-bootstrap';
+import { JournalIssueGridElementComponent } from './item-grid-elements/journal-issue/journal-issue-grid-element.component';
+import { JournalVolumeGridElementComponent } from './item-grid-elements/journal-volume/journal-volume-grid-element.component';
+import { JournalGridElementComponent } from './item-grid-elements/journal/journal-grid-element.component';
 
 const ENTRY_COMPONENTS = [
   JournalComponent,
@@ -16,7 +19,10 @@ const ENTRY_COMPONENTS = [
   JournalVolumeComponent,
   JournalListElementComponent,
   JournalIssueListElementComponent,
-  JournalVolumeListElementComponent
+  JournalVolumeListElementComponent,
+  JournalIssueGridElementComponent,
+  JournalVolumeGridElementComponent,
+  JournalGridElementComponent
 ];
 
 @NgModule({
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.html
index afb7f8da09..cb5d9b59af 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.html
@@ -2,7 +2,7 @@
   <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
     <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()" [defaultImage]="'assets/images/orgunit-placeholder.svg'">
+        <ds-grid-thumbnail [thumbnail]="this.item.getThumbnail() | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'">
         </ds-grid-thumbnail>
       </div>
     </a>
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.html
index 05f1eefda1..463007d099 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.html
@@ -2,7 +2,7 @@
   <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
     <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()" [defaultImage]="'assets/images/person-placeholder.svg'">
+        <ds-grid-thumbnail [thumbnail]="this.item.getThumbnail() | async" [defaultImage]="'assets/images/person-placeholder.svg'">
         </ds-grid-thumbnail>
       </div>
     </a>
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.html
index f01f0334d3..1f122895ee 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/project/project-grid-element.component.html
@@ -2,7 +2,7 @@
   <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
     <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()" [defaultImage]="'assets/images/project-placeholder.svg'">
+        <ds-grid-thumbnail [thumbnail]="this.item.getThumbnail() | async" [defaultImage]="'assets/images/project-placeholder.svg'">
         </ds-grid-thumbnail>
       </div>
     </a>
diff --git a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html
index b0509eb5df..06cf8496c4 100644
--- a/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html
+++ b/src/app/shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.html
@@ -2,7 +2,7 @@
   <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
     <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
+        <ds-grid-thumbnail [thumbnail]="this.item.getThumbnail() | async">
         </ds-grid-thumbnail>
       </div>
     </a>
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index ff78634863..fdd6c6e7ac 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -7,6 +7,11 @@ ds-wrapper-grid-element ::ng-deep {
   div.thumbnail > img {
     height: $card-thumbnail-height;
     width: 100%;
+    display: block;
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+    object-position: 50% 15%;
   }
   div.card {
     margin-top: $ds-wrapper-grid-spacing;