62741: Entities grid templates - publication, orgunit, person, project

This commit is contained in:
Kristof De Langhe
2019-06-06 18:00:54 +02:00
parent 4a1a64b728
commit 16bad82564
30 changed files with 271 additions and 48 deletions

View File

@@ -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]="dso.getThumbnail()" [defaultImage]="'assets/images/orgunit-placeholder.svg'">
</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('orgunit.identifier.dateestablished')"></span>
</ds-truncatable-part>
</p>
<p *ngIf="dso.hasMetadata('orgunit.identifier.country')"
class="item-location card-text">
<ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
<span *ngIf="dso.hasMetadata('orgunit.identifier.country')" class="item-date">{{dso.firstMetadataValue('orgunit.identifier.country')}}</span>
<span>, </span>
<span *ngIf="dso.hasMetadata('orgunit.identifier.city')" class="item-date">{{dso.firstMetadataValue('orgunit.identifier.city')}}</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>

View File

@@ -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('OrgUnit', ItemViewMode.Card)
@Component({
selector: 'ds-orgunit-grid-element',
styleUrls: ['./orgunit-grid-element.component.scss'],
templateUrl: './orgunit-grid-element.component.html',
animations: [focusShadow]
})
export class OrgunitGridElementComponent extends TypedItemSearchResultGridElementComponent {
}

View File

@@ -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]="dso.getThumbnail()" [defaultImage]="'assets/images/person-placeholder.svg'">
</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-email card-text text-muted">
<ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
<span *ngIf="dso.hasMetadata('person.identifier.email')">{{dso.firstMetadataValue('person.identifier.email')}}</span>
</ds-truncatable-part>
</p>
<p class="item-jobtitle card-text">
<ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
<span [innerHTML]="firstMetadataValue('person.identifier.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>

View File

@@ -0,0 +1,14 @@
import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
import { Component } from '@angular/core';
import { TypedItemSearchResultGridElementComponent } from '../../../../shared/object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
import { focusShadow } from '../../../../shared/animations/focus';
@rendersItemType('Person', ItemViewMode.Card)
@Component({
selector: 'ds-person-grid-element',
styleUrls: ['./person-grid-element.component.scss'],
templateUrl: './person-grid-element.component.html',
animations: [focusShadow]
})
export class PersonGridElementComponent extends TypedItemSearchResultGridElementComponent {
}

View File

@@ -0,0 +1,25 @@
<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]="dso.getThumbnail()" [defaultImage]="'assets/images/project-placeholder.svg'">
</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-funder card-text text-muted">
<ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
<span [innerHTML]="firstMetadataValue('project.identifier.funder')"></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>

View File

@@ -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('Project', ItemViewMode.Card)
@Component({
selector: 'ds-project-grid-element',
styleUrls: ['./project-grid-element.component.scss'],
templateUrl: './project-grid-element.component.html',
animations: [focusShadow]
})
export class ProjectGridElementComponent extends TypedItemSearchResultGridElementComponent {
}

View File

@@ -11,6 +11,9 @@ import { PersonMetadataListElementComponent } from './item-list-elements/person/
import { PersonListElementComponent } from './item-list-elements/person/person-list-element.component';
import { ProjectListElementComponent } from './item-list-elements/project/project-list-element.component';
import { TooltipModule } from 'ngx-bootstrap';
import { PersonGridElementComponent } from './item-grid-elements/person/person-grid-element.component';
import { OrgunitGridElementComponent } from './item-grid-elements/orgunit/orgunit-grid-element.component';
import { ProjectGridElementComponent } from './item-grid-elements/project/project-grid-element.component';
const ENTRY_COMPONENTS = [
OrgunitComponent,
@@ -20,7 +23,10 @@ const ENTRY_COMPONENTS = [
OrgUnitMetadataListElementComponent,
PersonListElementComponent,
PersonMetadataListElementComponent,
ProjectListElementComponent
ProjectListElementComponent,
PersonGridElementComponent,
OrgunitGridElementComponent,
ProjectGridElementComponent
];
@NgModule({

View File

@@ -3,6 +3,7 @@ import { MetadataRepresentationType } from '../../core/shared/metadata-represent
export enum ItemViewMode {
Element = 'element',
Card = 'card',
Full = 'full',
Metadata = 'metadata'
}

View File

@@ -1,4 +1,3 @@
<div class="thumbnail">
<img *ngIf="thumbnail && thumbnail.content" [src]="thumbnail.content" (error)="errorHandler($event)"/>
<img *ngIf="!(thumbnail && thumbnail.content)" [src]="holderSource | dsSafeUrl"/>
<img [src]="src | dsSafeUrl" (error)="errorHandler($event)"/>
</div>

View File

@@ -1,5 +1,6 @@
import { Component, Input } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Bitstream } from '../../../core/shared/bitstream.model';
import { hasValue } from '../../empty.util';
/**
* This component renders a given Bitstream as a thumbnail.
@@ -12,7 +13,7 @@ import { Bitstream } from '../../../core/shared/bitstream.model';
styleUrls: ['./grid-thumbnail.component.scss'],
templateUrl: './grid-thumbnail.component.html'
})
export class GridThumbnailComponent {
export class GridThumbnailComponent implements OnInit {
@Input() thumbnail: Bitstream;
@@ -21,10 +22,19 @@ export class GridThumbnailComponent {
/**
* The default 'holder.js' image
*/
holderSource = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
@Input() defaultImage? = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
src: string;
errorHandler(event) {
event.currentTarget.src = this.holderSource;
event.currentTarget.src = this.defaultImage;
}
ngOnInit(): void {
if (hasValue(this.thumbnail) && this.thumbnail.content) {
this.src = this.thumbnail.content;
} else {
this.src = this.defaultImage
}
}
}

View File

@@ -0,0 +1,34 @@
<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]="dso.getThumbnail()">
</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(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
class="item-authors card-text text-muted">
<ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
<span *ngIf="dso.hasMetadata('dc.date.issued')" class="item-date">{{dso.firstMetadataValue('dc.date.issued')}}</span>
<span *ngFor="let author of dso.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
<span [innerHTML]="author"></span>
</span>
</ds-truncatable-part>
</p>
<p class="item-abstract card-text">
<ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
<span [innerHTML]="firstMetadataValue('dc.description.abstract')"></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>

View File

@@ -0,0 +1,15 @@
import { TypedItemSearchResultGridElementComponent } from '../typed-item-search-result-grid-element.component';
import { DEFAULT_ITEM_TYPE, ItemViewMode, rendersItemType } from '../../../../items/item-type-decorator';
import { Component } from '@angular/core';
import { focusShadow } from '../../../../animations/focus';
@rendersItemType('Publication', ItemViewMode.Card)
@rendersItemType(DEFAULT_ITEM_TYPE, ItemViewMode.Card)
@Component({
selector: 'ds-publication-grid-element',
styleUrls: ['./publication-grid-element.component.scss'],
templateUrl: './publication-grid-element.component.html',
animations: [focusShadow]
})
export class PublicationGridElementComponent extends TypedItemSearchResultGridElementComponent {
}

View File

@@ -0,0 +1,37 @@
import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
import { Item } from '../../../../core/shared/item.model';
import { SearchResultGridElementComponent } from '../../search-result-grid-element/search-result-grid-element.component';
import { TruncatableService } from '../../../truncatable/truncatable.service';
import { Component, Inject } from '@angular/core';
import { ITEM } from '../../../items/switcher/item-type-switcher.component';
import { hasValue } from '../../../empty.util';
import { MetadataMap } from '../../../../core/shared/metadata.models';
/**
* A generic component for displaying item grid elements
*/
@Component({
selector: 'ds-item-search-result-grid-element',
template: ''
})
export class TypedItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
item: Item;
constructor(
protected truncatableService: TruncatableService,
@Inject(ITEM) public obj: Item | ItemSearchResult,
) {
super(undefined, truncatableService);
if (hasValue((obj as any).indexableObject)) {
this.object = obj as ItemSearchResult;
this.dso = this.object.indexableObject;
} else {
this.object = {
indexableObject: obj as Item,
hitHighlights: new MetadataMap()
};
this.dso = obj as Item;
}
this.item = this.dso;
}
}

View File

@@ -1,33 +1 @@
<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]="dso.getThumbnail()">
</ds-grid-thumbnail>
</div>
</a>
<div class="card-body">
<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(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
class="item-authors card-text text-muted">
<ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
<span *ngIf="dso.hasMetadata('dc.date.issued')" class="item-date">{{dso.firstMetadataValue('dc.date.issued')}}</span>
<span *ngFor="let author of dso.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
<span [innerHTML]="author"></span>
</span>
</ds-truncatable-part>
</p>
<p class="item-abstract card-text">
<ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
<span [innerHTML]="firstMetadataValue('dc.description.abstract')"></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>
<ds-item-type-switcher [object]="object" [viewMode]="viewMode"></ds-item-type-switcher>

View File

@@ -6,6 +6,7 @@ import { Item } from '../../../../core/shared/item.model';
import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
import { SetViewMode } from '../../../view-mode';
import { focusShadow } from '../../../../shared/animations/focus';
import { ItemViewMode } from '../../../items/item-type-decorator';
@Component({
selector: 'ds-item-search-result-grid-element',
@@ -15,4 +16,6 @@ import { focusShadow } from '../../../../shared/animations/focus';
})
@renderElementsFor(ItemSearchResult, SetViewMode.Grid)
export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}
export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
viewMode = ItemViewMode.Card;
}

View File

@@ -7,6 +7,7 @@ import { ListableObject } from '../../object-collection/shared/listable-object.m
import { TruncatableService } from '../../truncatable/truncatable.service';
import { Observable } from 'rxjs';
import { Metadata } from '../../../core/shared/metadata.utils';
import { hasValue } from '../../empty.util';
@Component({
selector: 'ds-search-result-grid-element',
@@ -16,10 +17,12 @@ import { Metadata } from '../../../core/shared/metadata.utils';
export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
dso: K;
public constructor(@Inject('objectElementProvider') public listableObject: ListableObject, private truncatableService: TruncatableService) {
public constructor(@Inject('objectElementProvider') public listableObject: ListableObject, protected truncatableService: TruncatableService) {
super(listableObject);
if (hasValue(this.object)) {
this.dso = this.object.indexableObject;
}
}
/**
* Gets all matching metadata string values from hitHighlights or dso metadata, preferring hitHighlights.

View File

@@ -11,7 +11,7 @@ import { MetadataMap } from '../../../../core/shared/metadata.models';
* A generic component for displaying item list elements
*/
@Component({
selector: 'ds-item-search-result',
selector: 'ds-item-search-result-list-element',
template: ''
})
export class TypedItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {

View File

@@ -0,0 +1,3 @@
<div *ngIf="object && object.indexableObject && object.indexableObject.firstMetadataValue('relationship.type') as type">
<span class="badge badge-light">{{ type.toLowerCase() + '.listelement.badge' | translate }}</span>
</div>

View File

@@ -0,0 +1,10 @@
import { Component, Input } from '@angular/core';
import { ListableObject } from '../../object-collection/shared/listable-object.model';
@Component({
selector: 'ds-item-type-badge',
templateUrl: './item-type-badge.component.html'
})
export class ItemTypeBadgeComponent {
@Input() object: ListableObject;
}

View File

@@ -1,4 +1,2 @@
<div *ngIf="object && object.indexableObject && object.indexableObject.firstMetadataValue('relationship.type') as type">
<span class="badge badge-light">{{ type.toLowerCase() + '.listelement.badge' | translate }}</span>
</div>
<ds-item-type-badge [object]="object"></ds-item-type-badge>
<ds-item-type-switcher [object]="object" [viewMode]="viewMode"></ds-item-type-switcher>

View File

@@ -138,6 +138,9 @@ import { RoleDirective } from './roles/role.directive';
import { UserMenuComponent } from './auth-nav-menu/user-menu/user-menu.component';
import { ClaimedTaskActionsReturnToPoolComponent } from './mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component';
import { ItemDetailPreviewFieldComponent } from './object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component';
import { TypedItemSearchResultGridElementComponent } from './object-grid/item-grid-element/item-types/typed-item-search-result-grid-element.component';
import { PublicationGridElementComponent } from './object-grid/item-grid-element/item-types/publication/publication-grid-element.component';
import { ItemTypeBadgeComponent } from './object-list/item-type-badge/item-type-badge.component';
const MODULES = [
// Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -256,8 +259,10 @@ const COMPONENTS = [
CollectionSearchResultListElementComponent,
ItemSearchResultListElementComponent,
TypedItemSearchResultListElementComponent,
TypedItemSearchResultGridElementComponent,
ItemTypeSwitcherComponent,
BrowseByComponent
BrowseByComponent,
ItemTypeBadgeComponent
];
const ENTRY_COMPONENTS = [
@@ -275,6 +280,7 @@ const ENTRY_COMPONENTS = [
CommunityGridElementComponent,
SearchResultGridElementComponent,
PublicationListElementComponent,
PublicationGridElementComponent,
BrowseEntryListElementComponent,
MyDSpaceResultDetailElementComponent,
SearchResultGridElementComponent,