Merge pull request #433 from atmire/Entities-grid-templates

Entities grid templates

src/app/+item-page/item-page.module.ts

@@ -62,7 +62,8 @@ import { MetadataFieldWrapperComponent } from './field-components/metadata-field
     GenericItemPageFieldComponent,
     RelatedEntitiesSearchComponent,
     RelatedItemsComponent,
-    MetadataRepresentationListComponent
+    MetadataRepresentationListComponent,
+    ItemPageTitleFieldComponent
   ],
   entryComponents: [
     PublicationComponent

src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.html

+<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 [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p *ngIf="dso.hasMetadata('creativework.datePublished')" class="item-date card-text text-muted">
+        <ds-truncatable-part [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('creativework.datePublished')"></span>
+        </ds-truncatable-part>
+      </p>
+      <p *ngIf="dso.hasMetadata('journal.title')" class="item-journal-title card-text">
+        <ds-truncatable-part [id]="dso.id" [minLines]="3">
+          <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>

src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.spec.ts

+import { ItemSearchResult } from '../../../../shared/object-collection/shared/item-search-result.model';
+import { Item } from '../../../../core/shared/item.model';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { getEntityGridElementTestComponent } from '../../../../shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec';
+import { JournalIssueGridElementComponent } from './journal-issue-grid-element.component';
+
+const mockItemWithMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithMetadata.hitHighlights = {};
+mockItemWithMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ],
+    'creativework.datePublished': [
+      {
+        language: null,
+        value: '2015-06-26'
+      }
+    ],
+    'journal.title': [
+      {
+        language: 'en_US',
+        value: 'The journal title'
+      }
+    ]
+  }
+});
+
+const mockItemWithoutMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithoutMetadata.hitHighlights = {};
+mockItemWithoutMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ]
+  }
+});
+
+describe('JournalIssueGridElementComponent', getEntityGridElementTestComponent(JournalIssueGridElementComponent, mockItemWithMetadata, mockItemWithoutMetadata, ['date', 'journal-title']));

src/app/entity-groups/journal-entities/item-grid-elements/journal-issue/journal-issue-grid-element.component.ts

+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]
+})
+/**
+ * The component for displaying a grid element for an item of the type Journal Issue
+ */
+export class JournalIssueGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}

src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.html

+<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 [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p *ngIf="dso.hasMetadata('creativework.datePublished')" class="item-date card-text text-muted">
+        <ds-truncatable-part [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('creativework.datePublished')"></span>
+        </ds-truncatable-part>
+      </p>
+      <p *ngIf="dso.hasMetadata('dc.description')" class="item-description card-text">
+        <ds-truncatable-part [id]="dso.id" [minLines]="3">
+          <span [innerHTML]="firstMetadataValue('dc.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>

src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.spec.ts

+import { ItemSearchResult } from '../../../../shared/object-collection/shared/item-search-result.model';
+import { Item } from '../../../../core/shared/item.model';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { getEntityGridElementTestComponent } from '../../../../shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec';
+import { JournalVolumeGridElementComponent } from './journal-volume-grid-element.component';
+
+const mockItemWithMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithMetadata.hitHighlights = {};
+mockItemWithMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ],
+    'creativework.datePublished': [
+      {
+        language: null,
+        value: '2015-06-26'
+      }
+    ],
+    'dc.description': [
+      {
+        language: 'en_US',
+        value: 'A description for the journal volume'
+      }
+    ]
+  }
+});
+
+const mockItemWithoutMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithoutMetadata.hitHighlights = {};
+mockItemWithoutMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ]
+  }
+});
+
+describe('JournalVolumeGridElementComponent', getEntityGridElementTestComponent(JournalVolumeGridElementComponent, mockItemWithMetadata, mockItemWithoutMetadata, ['date', 'description']));

src/app/entity-groups/journal-entities/item-grid-elements/journal-volume/journal-volume-grid-element.component.ts

+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]
+})
+/**
+ * The component for displaying a grid element for an item of the type Journal Volume
+ */
+export class JournalVolumeGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}

src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.html

+<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 [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
+      </ds-truncatable-part>
+      <p *ngIf="dso.hasMetadata('creativework.editor')"
+         class="item-publisher card-text text-muted">
+        <ds-truncatable-part [id]="dso.id" [minLines]="1">
+          <span class="item-editor">{{dso.firstMetadataValue('creativework.editor')}}</span>
+          <span *ngIf="dso.hasMetadata('creativework.publisher')" class="item-publisher">
+            <span>, </span>
+            {{dso.firstMetadataValue('creativework.publisher')}}
+          </span>
+        </ds-truncatable-part>
+      </p>
+      <p *ngIf="dso.hasMetadata('dc.description')" class="item-description card-text">
+        <ds-truncatable-part [id]="dso.id" [minLines]="3">
+          <span [innerHTML]="firstMetadataValue('dc.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>

src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.spec.ts

+import { ItemSearchResult } from '../../../../shared/object-collection/shared/item-search-result.model';
+import { Item } from '../../../../core/shared/item.model';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { getEntityGridElementTestComponent } from '../../../../shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec';
+import { JournalGridElementComponent } from './journal-grid-element.component';
+
+const mockItemWithMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithMetadata.hitHighlights = {};
+mockItemWithMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ],
+    'creativework.editor': [
+      {
+        language: 'en_US',
+        value: 'Smith, Donald'
+      }
+    ],
+    'creativework.publisher': [
+      {
+        language: 'en_US',
+        value: 'A company'
+      }
+    ],
+    'dc.description': [
+      {
+        language: 'en_US',
+        value: 'This is the description'
+      }
+    ]
+  }
+});
+
+const mockItemWithoutMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithoutMetadata.hitHighlights = {};
+mockItemWithoutMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ]
+  }
+});
+
+describe('JournalGridElementComponent', getEntityGridElementTestComponent(JournalGridElementComponent, mockItemWithMetadata, mockItemWithoutMetadata, ['editor', 'publisher', 'description']));

src/app/entity-groups/journal-entities/item-grid-elements/journal/journal-grid-element.component.ts

+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]
+})
+/**
+ * The component for displaying a grid element for an item of the type Journal
+ */
+export class JournalGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}

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({

src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.html

+<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 [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('organization.legalName')"></h4>
+      </ds-truncatable-part>
+      <p *ngIf="dso.hasMetadata('organization.foundingDate')" class="item-date card-text text-muted">
+        <ds-truncatable-part [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('organization.foundingDate')"></span>
+        </ds-truncatable-part>
+      </p>
+      <p *ngIf="dso.hasMetadata('organization.address.addressCountry')"
+         class="item-location card-text">
+        <ds-truncatable-part [id]="dso.id" [minLines]="3">
+          <span class="item-country">{{dso.firstMetadataValue('organization.address.addressCountry')}}</span>
+          <span *ngIf="dso.hasMetadata('organization.address.addressLocality')" class="item-city">
+            <span>, </span>
+            {{dso.firstMetadataValue('organization.address.addressLocality')}}
+          </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>

src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.spec.ts

+import { ItemSearchResult } from '../../../../shared/object-collection/shared/item-search-result.model';
+import { Item } from '../../../../core/shared/item.model';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { getEntityGridElementTestComponent } from '../../../../shared/object-grid/item-grid-element/item-types/publication/publication-grid-element.component.spec';
+import { OrgunitGridElementComponent } from './orgunit-grid-element.component';
+
+const mockItemWithMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithMetadata.hitHighlights = {};
+mockItemWithMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ],
+    'organization.foundingDate': [
+      {
+        language: null,
+        value: '2015-06-26'
+      }
+    ],
+    'organization.address.addressCountry': [
+      {
+        language: 'en_US',
+        value: 'Belgium'
+      }
+    ],
+    'organization.address.addressLocality': [
+      {
+        language: 'en_US',
+        value: 'Brussels'
+      }
+    ]
+  }
+});
+
+const mockItemWithoutMetadata: ItemSearchResult = new ItemSearchResult();
+mockItemWithoutMetadata.hitHighlights = {};
+mockItemWithoutMetadata.indexableObject = Object.assign(new Item(), {
+  bitstreams: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ]
+  }
+});
+
+describe('OrgunitGridElementComponent', getEntityGridElementTestComponent(OrgunitGridElementComponent, mockItemWithMetadata, mockItemWithoutMetadata, ['date', 'country', 'city']));

src/app/entity-groups/research-entities/item-grid-elements/orgunit/orgunit-grid-element.component.ts

+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('OrgUnit', ItemViewMode.Card)
+@Component({
+  selector: 'ds-orgunit-grid-element',
+  styleUrls: ['./orgunit-grid-element.component.scss'],
+  templateUrl: './orgunit-grid-element.component.html',
+  animations: [focusShadow]
+})
+/**
+ * The component for displaying a grid element for an item of the type Organisation Unit
+ */
+export class OrgunitGridElementComponent extends TypedItemSearchResultGridElementComponent {
+}

src/app/entity-groups/research-entities/item-grid-elements/person/person-grid-element.component.html

+<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 [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('person.familyName') + ', ' + dso.firstMetadataValue('person.givenName')"></h4>
+      </ds-truncatable-part>
+      <p *ngIf="dso.hasMetadata('person.email')" class="item-email card-text text-muted">
+        <ds-truncatable-part [id]="dso.id" [minLines]="1">
+          <span [innerHTML]="firstMetadataValue('person.email')"></span>
+        </ds-truncatable-part>
+      </p>
+      <p *ngIf="dso.hasMetadata('person.jobTitle')" class="item-jobtitle card-text">
+        <ds-truncatable-part [id]="dso.id" [minLines]="3">
+          <span [innerHTML]="firstMetadataValue('person.jobTitle')"></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>