mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-14 05:23:06 +00:00
Split typed list/grid elements into normal and search result
This commit is contained in:
lotte
@@ -1,28 +1 @@
|
||||
<ds-truncatable [id]="object.id">
|
||||
<div class="card">
|
||||
<a [routerLink]="['/items/', object.id]" class="card-img-top">
|
||||
<ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
|
||||
</ds-grid-thumbnail>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{object.firstMetadataValue('dc.title')}}</h4>
|
||||
|
||||
<ds-truncatable-part [id]="object.id" [minLines]="2">
|
||||
<p *ngIf="object.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])" class="item-authors card-text text-muted">
|
||||
<span *ngFor="let author of object.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{author}}
|
||||
<span *ngIf="!last">; </span>
|
||||
</span>
|
||||
<span *ngIf="object.hasMetadata('dc.date.issued')" class="item-date">{{object.firstMetadataValue("dc.date.issued")}}</span>
|
||||
</p>
|
||||
</ds-truncatable-part>
|
||||
|
||||
<ds-truncatable-part [id]="object.id" [minLines]="5">
|
||||
<p *ngIf="object.hasMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.firstMetadataValue("dc.description.abstract")}}</p>
|
||||
</ds-truncatable-part>
|
||||
|
||||
<div class="text-center pt-2">
|
||||
<a [routerLink]="['/items/', object.id]" class="lead btn btn-primary viewButton">View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ds-truncatable>
|
||||
<ds-listable-object-component-loader [type]="object.firstMetadataValue('relationship.type')" [object]="object" [viewMode]="viewMode"></ds-listable-object-component-loader>
|
||||
|
||||
@@ -1,34 +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]="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(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
|
||||
class="item-authors card-text text-muted">
|
||||
<ds-truncatable-part [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 *ngIf="dso.hasMetadata('dc.description.abstract')" class="item-abstract card-text">
|
||||
<ds-truncatable-part [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-publication-search-result-grid-element [object]="{ indexableObject: object, hitHighlights: {} }"></ds-publication-search-result-grid-element>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { TypedItemSearchResultGridElementComponent } from '../typed-item-search-result-grid-element.component';
|
||||
import { Component } from '@angular/core';
|
||||
import { focusShadow } from '../../../../animations/focus';
|
||||
import { ViewMode } from '../../../../../core/shared/view-mode.model';
|
||||
import { DEFAULT_ITEM_TYPE, listableObjectComponent } from '../../../../object-collection/shared/listable-object/listable-object.decorator';
|
||||
import { AbstractListableElementComponent } from '../../../../object-collection/shared/object-collection-element/abstract-listable-element.component';
|
||||
import { Item } from '../../../../../core/shared/item.model';
|
||||
|
||||
@listableObjectComponent('Publication', ViewMode.GridElement)
|
||||
@listableObjectComponent(DEFAULT_ITEM_TYPE, ViewMode.GridElement)
|
||||
@@ -15,5 +16,5 @@ import { DEFAULT_ITEM_TYPE, listableObjectComponent } from '../../../../object-c
|
||||
/**
|
||||
* The component for displaying a grid element for an item of the type Publication
|
||||
*/
|
||||
export class PublicationGridElementComponent extends TypedItemSearchResultGridElementComponent {
|
||||
export class PublicationGridElementComponent extends AbstractListableElementComponent<Item> {
|
||||
}
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { TruncatePipe } from '../../../utils/truncate.pipe';
|
||||
import { TruncatableService } from '../../../truncatable/truncatable.service';
|
||||
import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { Item } from '../../../../core/shared/item.model';
|
||||
import { RemoteData } from '../../../../core/data/remote-data';
|
||||
import { PaginatedList } from '../../../../core/data/paginated-list';
|
||||
import { PageInfo } from '../../../../core/shared/page-info.model';
|
||||
import { ITEM } from '../../../items/switcher/listable-object-component-loader.component';
|
||||
import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
|
||||
import { createRelationshipsObservable } from '../../../../+item-page/simple/item-types/shared/item.component.spec';
|
||||
import { of as observableOf } from 'rxjs';
|
||||
import { MetadataMap } from '../../../../core/shared/metadata.models';
|
||||
import { TypedItemSearchResultGridElementComponent } from './typed-item-search-result-grid-element.component';
|
||||
|
||||
const mockItem: Item = Object.assign(new Item(), {
|
||||
bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
|
||||
metadata: [],
|
||||
relationships: createRelationshipsObservable()
|
||||
});
|
||||
const mockSearchResult = {
|
||||
indexableObject: mockItem as Item,
|
||||
hitHighlights: new MetadataMap()
|
||||
} as ItemSearchResult;
|
||||
|
||||
describe('TypedItemSearchResultGridElementComponent', () => {
|
||||
let comp: TypedItemSearchResultGridElementComponent;
|
||||
let fixture: ComponentFixture<TypedItemSearchResultGridElementComponent>;
|
||||
|
||||
describe('when injecting an Item', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [TypedItemSearchResultGridElementComponent, TruncatePipe],
|
||||
providers: [
|
||||
{provide: TruncatableService, useValue: {}},
|
||||
{provide: ITEM, useValue: mockItem}
|
||||
],
|
||||
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
}).overrideComponent(TypedItemSearchResultGridElementComponent, {
|
||||
set: {changeDetection: ChangeDetectionStrategy.Default}
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(async(() => {
|
||||
fixture = TestBed.createComponent(TypedItemSearchResultGridElementComponent);
|
||||
comp = fixture.componentInstance;
|
||||
}));
|
||||
|
||||
it('should initiate item, object and dso correctly', () => {
|
||||
expect(comp.item).toBe(mockItem);
|
||||
expect(comp.dso).toBe(mockItem);
|
||||
expect(comp.object.indexableObject).toBe(mockItem);
|
||||
})
|
||||
});
|
||||
|
||||
describe('when injecting an ItemSearchResult', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [TypedItemSearchResultGridElementComponent, TruncatePipe],
|
||||
providers: [
|
||||
{provide: TruncatableService, useValue: {}},
|
||||
{provide: ITEM, useValue: mockSearchResult}
|
||||
],
|
||||
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
}).overrideComponent(TypedItemSearchResultGridElementComponent, {
|
||||
set: {changeDetection: ChangeDetectionStrategy.Default}
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(async(() => {
|
||||
fixture = TestBed.createComponent(TypedItemSearchResultGridElementComponent);
|
||||
comp = fixture.componentInstance;
|
||||
}));
|
||||
|
||||
it('should initiate item, object and dso correctly', () => {
|
||||
expect(comp.item).toBe(mockItem);
|
||||
expect(comp.dso).toBe(mockItem);
|
||||
expect(comp.object.indexableObject).toBe(mockItem);
|
||||
})
|
||||
});
|
||||
});
|
||||
@@ -1,37 +0,0 @@
|
||||
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/listable-object-component-loader.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;
|
||||
}
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
<ds-item-type-switcher [object]="object" [viewMode]="viewMode"></ds-item-type-switcher>
|
||||
<ds-listable-object-component-loader [type]="object.indexableObject.firstMetadataValue('relationship.type') + 'SearchResult'" [object]="object" [viewMode]="viewMode"></ds-listable-object-component-loader>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
<ng-container *ngVar="object.indexableObject as item">
|
||||
<ds-truncatable [id]="item.id">
|
||||
<div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
|
||||
<a [routerLink]="['/items/' + item.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]="item.id" [minLines]="3" type="h4">
|
||||
<h4 class="card-title" [innerHTML]="item.firstMetadataValue('dc.title')"></h4>
|
||||
</ds-truncatable-part>
|
||||
<p *ngIf="item.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
|
||||
class="item-authors card-text text-muted">
|
||||
<ds-truncatable-part [id]="item.id" [minLines]="1">
|
||||
<span *ngIf="item.hasMetadata('dc.date.issued')" class="item-date">{{item.firstMetadataValue('dc.date.issued')}}</span>
|
||||
<span *ngFor="let author of item.allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
|
||||
<span [innerHTML]="author"></span>
|
||||
</span>
|
||||
</ds-truncatable-part>
|
||||
</p>
|
||||
<p *ngIf="item.hasMetadata('dc.description.abstract')" class="item-abstract card-text">
|
||||
<ds-truncatable-part [id]="item.id" [minLines]="3">
|
||||
<span [innerHTML]="firstMetadataValue('dc.description.abstract')"></span>
|
||||
</ds-truncatable-part>
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a [routerLink]="['/items/' + item.id]"
|
||||
class="lead btn btn-primary viewButton">View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ds-truncatable>
|
||||
</ng-container>
|
||||
@@ -0,0 +1,127 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { TruncatePipe } from '../../../../utils/truncate.pipe';
|
||||
import { TruncatableService } from '../../../../truncatable/truncatable.service';
|
||||
import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { PublicationSearchResultGridElementComponent } from './publication-grid-element.component';
|
||||
import { of as observableOf } from 'rxjs/internal/observable/of';
|
||||
import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
|
||||
import { Item } from '../../../../../core/shared/item.model';
|
||||
import { ITEM } from '../../../../items/switcher/listable-object-component-loader.component';
|
||||
import { createSuccessfulRemoteDataObject$ } from '../../../../testing/utils';
|
||||
import { PaginatedList } from '../../../../../core/data/paginated-list';
|
||||
import { PageInfo } from '../../../../../core/shared/page-info.model';
|
||||
|
||||
const mockItemWithMetadata: ItemSearchResult = new ItemSearchResult();
|
||||
mockItemWithMetadata.hitHighlights = {};
|
||||
mockItemWithMetadata.indexableObject = Object.assign(new Item(), {
|
||||
bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
|
||||
metadata: {
|
||||
'dc.title': [
|
||||
{
|
||||
language: 'en_US',
|
||||
value: 'This is just another title'
|
||||
}
|
||||
],
|
||||
'dc.contributor.author': [
|
||||
{
|
||||
language: 'en_US',
|
||||
value: 'Smith, Donald'
|
||||
}
|
||||
],
|
||||
'dc.date.issued': [
|
||||
{
|
||||
language: null,
|
||||
value: '2015-06-26'
|
||||
}
|
||||
],
|
||||
'dc.description.abstract': [
|
||||
{
|
||||
language: 'en_US',
|
||||
value: 'This is an abstract'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const mockItemWithoutMetadata: ItemSearchResult = new ItemSearchResult();
|
||||
mockItemWithoutMetadata.hitHighlights = {};
|
||||
mockItemWithoutMetadata.indexableObject = Object.assign(new Item(), {
|
||||
bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
|
||||
metadata: {
|
||||
'dc.title': [
|
||||
{
|
||||
language: 'en_US',
|
||||
value: 'This is just another title'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
describe('PublicationGridElementComponent', getEntityGridElementTestComponent(PublicationSearchResultGridElementComponent, mockItemWithMetadata, mockItemWithoutMetadata, ['authors', 'date', 'abstract']));
|
||||
|
||||
/**
|
||||
* Create test cases for a grid component of an entity.
|
||||
* @param component The component's class
|
||||
* @param searchResultWithMetadata An ItemSearchResult containing an item with metadata that should be displayed in the grid element
|
||||
* @param searchResultWithoutMetadata An ItemSearchResult containing an item that's missing the metadata that should be displayed in the grid element
|
||||
* @param fieldsToCheck A list of fields to check. The tests expect to find html elements with class ".item-${field}", so make sure they exist in the html template of the grid element.
|
||||
* For example: If one of the fields to check is labeled "authors", the html template should contain at least one element with class ".item-authors" that's
|
||||
* present when the author metadata is available.
|
||||
*/
|
||||
export function getEntityGridElementTestComponent(component, searchResultWithMetadata: ItemSearchResult, searchResultWithoutMetadata: ItemSearchResult, fieldsToCheck: string[]) {
|
||||
return () => {
|
||||
let comp;
|
||||
let fixture;
|
||||
|
||||
const truncatableServiceStub: any = {
|
||||
isCollapsed: (id: number) => observableOf(true),
|
||||
};
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [NoopAnimationsModule],
|
||||
declarations: [component, TruncatePipe],
|
||||
providers: [
|
||||
{ provide: TruncatableService, useValue: truncatableServiceStub },
|
||||
{provide: ITEM, useValue: searchResultWithoutMetadata}
|
||||
],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
}).overrideComponent(component, {
|
||||
set: { changeDetection: ChangeDetectionStrategy.Default }
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(async(() => {
|
||||
fixture = TestBed.createComponent(component);
|
||||
comp = fixture.componentInstance;
|
||||
}));
|
||||
|
||||
fieldsToCheck.forEach((field) => {
|
||||
describe(`when the item has "${field}" metadata`, () => {
|
||||
beforeEach(() => {
|
||||
comp.dso = searchResultWithMetadata.indexableObject;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it(`should show the "${field}" field`, () => {
|
||||
const itemAuthorField = fixture.debugElement.query(By.css(`.item-${field}`));
|
||||
expect(itemAuthorField).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe(`when the item has no "${field}" metadata`, () => {
|
||||
beforeEach(() => {
|
||||
comp.dso = searchResultWithoutMetadata.indexableObject;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it(`should not show the "${field}" field`, () => {
|
||||
const itemAuthorField = fixture.debugElement.query(By.css(`.item-${field}`));
|
||||
expect(itemAuthorField).toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { focusShadow } from '../../../../animations/focus';
|
||||
import { ViewMode } from '../../../../../core/shared/view-mode.model';
|
||||
import { listableObjectComponent } from '../../../../object-collection/shared/listable-object/listable-object.decorator';
|
||||
import { SearchResultGridElementComponent } from '../../search-result-grid-element.component';
|
||||
import { Item } from '../../../../../core/shared/item.model';
|
||||
import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
|
||||
|
||||
@listableObjectComponent('PublicationSearchResult', ViewMode.GridElement)
|
||||
@Component({
|
||||
selector: 'ds-publication-search-result-grid-element',
|
||||
styleUrls: ['./publication-search-result-grid-element.component.scss'],
|
||||
templateUrl: './publication-search-result-grid-element.component.html',
|
||||
animations: [focusShadow]
|
||||
})
|
||||
/**
|
||||
* The component for displaying a grid element for an item of the type Publication
|
||||
*/
|
||||
export class PublicationSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
|
||||
}
|
||||
@@ -18,8 +18,8 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
|
||||
dso: K;
|
||||
isCollapsed$: Observable<boolean>;
|
||||
|
||||
public constructor(@Inject('objectElementProvider') public listableObject: ListableObject, protected truncatableService: TruncatableService) {
|
||||
super(listableObject);
|
||||
public constructor(protected truncatableService: TruncatableService) {
|
||||
super();
|
||||
if (hasValue(this.object)) {
|
||||
this.dso = this.object.indexableObject;
|
||||
this.isCollapsed$ = this.isCollapsed();
|
||||
|
||||
Reference in New Issue
Block a user