From 330a70657d5c03c52e4f0e96309ffdbfb485359c Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Fri, 5 Apr 2019 16:33:58 +0200 Subject: [PATCH] Refactored ItemDetailPreviewComponent --- resources/i18n/en.json | 5 +- .../item-detail-preview-field.component.html | 10 ++ ...tem-detail-preview-field.component.spec.ts | 98 +++++++++++++++++++ .../item-detail-preview-field.component.ts | 55 +++++++++++ .../item-detail-preview.component.html | 72 ++++++++------ .../item-detail-preview.component.spec.ts | 37 +++---- .../item-detail-preview.component.ts | 21 ++-- .../item-list-preview.component.spec.ts | 2 +- .../item-list-preview.component.ts | 3 +- src/app/shared/shared.module.ts | 2 + 10 files changed, 238 insertions(+), 67 deletions(-) create mode 100644 src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.html create mode 100644 src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.spec.ts create mode 100644 src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.ts diff --git a/resources/i18n/en.json b/resources/i18n/en.json index 0c88a39390..2731134d31 100644 --- a/resources/i18n/en.json +++ b/resources/i18n/en.json @@ -329,7 +329,10 @@ "no-title": "No title", "no-authors": "No Authors", "no-date": "No Date", - "no-abstract": "No Abstract" + "no-abstract": "No Abstract", + "no-files": "No Files", + "no-uri": "No Uri", + "no-collections": "No Collections" }, "messages": { "title": "Messages", diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.html b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.html new file mode 100644 index 0000000000..2b7e7f8f6e --- /dev/null +++ b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.html @@ -0,0 +1,10 @@ + + + + {{mdValue}} + + + + {{(placeholder | translate)}} + + diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.spec.ts b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.spec.ts new file mode 100644 index 0000000000..ff5224a1a2 --- /dev/null +++ b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.spec.ts @@ -0,0 +1,98 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +import { of as observableOf } from 'rxjs'; +import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; + +import { ItemDetailPreviewFieldComponent } from './item-detail-preview-field.component'; +import { Item } from '../../../../../core/shared/item.model'; +import { TruncatePipe } from '../../../../utils/truncate.pipe'; +import { MockTranslateLoader } from '../../../../mocks/mock-translate-loader'; +import { By } from '@angular/platform-browser'; + +let component: ItemDetailPreviewFieldComponent; +let fixture: ComponentFixture; + +const mockItemWithAuthorAndDate: Item = Object.assign(new Item(), { + bitstreams: observableOf({}), + metadata: { + 'dc.contributor.author': [ + { + language: 'en_US', + value: 'Smith, Donald' + } + ], + 'dc.date.issued': [ + { + language: null, + value: '2015-06-26' + } + ], + 'dc.title': [ + { + language: 'en_US', + value: 'This is just another title' + } + ], + 'dc.type': [ + { + language: null, + value: 'Article' + } + ] + } +}); + +describe('ItemDetailPreviewFieldComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + NoopAnimationsModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: MockTranslateLoader + } + }), + ], + declarations: [ItemDetailPreviewFieldComponent, TruncatePipe], + providers: [ + { provide: 'objectElementProvider', useValue: { mockItemWithAuthorAndDate } } + + ], + + schemas: [NO_ERRORS_SCHEMA] + }).overrideComponent(ItemDetailPreviewFieldComponent, { + set: { changeDetection: ChangeDetectionStrategy.Default } + }).compileComponents(); + })); + + beforeEach(async(() => { + fixture = TestBed.createComponent(ItemDetailPreviewFieldComponent); + component = fixture.componentInstance; + + })); + + beforeEach(() => { + component.object = { hitHighlights: {} } as any; + component.item = mockItemWithAuthorAndDate; + component.label = 'test label'; + component.metadata = 'dc.title'; + component.placeholder = 'No title'; + fixture.detectChanges(); + }); + + it('should display dc.title value', () => { + const span = fixture.debugElement.query(By.css('span')); + expect(span.nativeElement.innerHTML).toContain('This is just another title'); + }); + + it('should display placeholder when metadata has no value', () => { + component.metadata = 'dc.abstract'; + component.placeholder = 'No abstract'; + fixture.detectChanges(); + const span = fixture.debugElement.query(By.css('.text-muted')); + expect(span.nativeElement.innerHTML).toContain('No abstract'); + }); +}); diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.ts b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.ts new file mode 100644 index 0000000000..b53d0a6b2d --- /dev/null +++ b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component.ts @@ -0,0 +1,55 @@ +import { Component, Input } from '@angular/core'; + +import { Metadata } from '../../../../../core/shared/metadata.utils'; +import { MyDSpaceResult } from '../../../../../+my-dspace-page/my-dspace-result.model'; +import { Item } from '../../../../../core/shared/item.model'; + +/** + * This component show values for the given item metadata + */ +@Component({ + selector: 'ds-item-detail-preview-field', + templateUrl: './item-detail-preview-field.component.html' +}) +export class ItemDetailPreviewFieldComponent { + + /** + * The item to display + */ + @Input() item: Item; + + /** + * The mydspace result object + */ + @Input() object: MyDSpaceResult; + + /** + * The metadata label + */ + @Input() label: string; + + /** + * The metadata to show + */ + @Input() metadata: string | string[]; + + /** + * The placeholder if there are no value to show + */ + @Input() placeholder: string; + + /** + * The value's separator + */ + @Input() separator: string; + + /** + * Gets all matching metadata string values from hitHighlights or dso metadata, preferring hitHighlights. + * + * @param {string|string[]} keyOrKeys The metadata key(s) in scope. Wildcards are supported; see [[Metadata]]. + * @returns {string[]} the matching string values or an empty array. + */ + allMetadataValues(keyOrKeys: string | string[]): string[] { + return Metadata.allValues([this.object.hitHighlights, this.item.metadata], keyOrKeys); + } +} diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html index e7d960599e..04e128c49a 100644 --- a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html +++ b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html @@ -1,10 +1,10 @@ -
+

- + {{('mydspace.results.no-title' | translate)}}

@@ -12,38 +12,46 @@ - - - - {{mdValue.value}} - - - - {{('mydspace.results.no-date' | translate)}} - - - - - - {{mdValue.value}} - - - - {{('mydspace.results.no-authors' | translate)}} - - + + +
+ + {{file?.name}} + ({{(file?.sizeBytes) | dsFileSize }}) + + +
+ + {{('mydspace.results.no-files' | translate)}} + + + + +
- - - - {{mdValue.value}} - - - - {{('mydspace.results.no-abstract' | translate)}} - - + +
diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.spec.ts b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.spec.ts index 5823e9969b..d0af614a6c 100644 --- a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.spec.ts +++ b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.spec.ts @@ -1,5 +1,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { of as observableOf } from 'rxjs'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; @@ -8,13 +9,15 @@ import { TruncatePipe } from '../../../utils/truncate.pipe'; import { Item } from '../../../../core/shared/item.model'; import { ItemDetailPreviewComponent } from './item-detail-preview.component'; import { MockTranslateLoader } from '../../../mocks/mock-translate-loader'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { ItemDetailPreviewFieldComponent } from './item-detail-preview-field/item-detail-preview-field.component'; +import { FileSizePipe } from '../../../utils/file-size-pipe'; +import { VarDirective } from '../../../utils/var.directive'; let component: ItemDetailPreviewComponent; let fixture: ComponentFixture; -const mockItemWithAuthorAndDate: Item = Object.assign(new Item(), { - bitstreams: observableOf({}), +const mockItem: Item = Object.assign(new Item(), { + bitstreams: observableOf([]), metadata: { 'dc.contributor.author': [ { @@ -27,12 +30,7 @@ const mockItemWithAuthorAndDate: Item = Object.assign(new Item(), { language: null, value: '2015-06-26' } - ] - } -}); -const mockItemWithoutAuthorAndDate: Item = Object.assign(new Item(), { - bitstreams: observableOf({}), - metadata: { + ], 'dc.title': [ { language: 'en_US', @@ -60,12 +58,7 @@ describe('ItemDetailPreviewComponent', () => { } }), ], - declarations: [ItemDetailPreviewComponent, TruncatePipe], - providers: [ - { provide: 'objectElementProvider', useValue: { mockItemWithAuthorAndDate } } - - ], - + declarations: [ItemDetailPreviewComponent, ItemDetailPreviewFieldComponent, TruncatePipe, FileSizePipe, VarDirective], schemas: [NO_ERRORS_SCHEMA] }).overrideComponent(ItemDetailPreviewComponent, { set: { changeDetection: ChangeDetectionStrategy.Default } @@ -75,16 +68,16 @@ describe('ItemDetailPreviewComponent', () => { beforeEach(async(() => { fixture = TestBed.createComponent(ItemDetailPreviewComponent); component = fixture.componentInstance; + component.object = { hitHighlights: {} } as any; + component.item = mockItem; + component.separator = ', '; + spyOn(component.item, 'getFiles').and.returnValue(mockItem.bitstreams); + fixture.detectChanges(); })); - beforeEach(() => { - component.object = { hitHighlights: {} }; - component.item = mockItemWithAuthorAndDate; - fixture.detectChanges(); - }); - - it('should init thumbnail on init', () => { + it('should init thumbnail and bitstreams on init', () => { expect(component.thumbnail$).toBeDefined(); + expect(component.bitstreams$).toBeDefined(); }); }); diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.ts b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.ts index d4244f2760..d26bfc4589 100644 --- a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.ts +++ b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.ts @@ -6,7 +6,7 @@ import { Item } from '../../../../core/shared/item.model'; import { MyDspaceItemStatusType } from '../../../object-collection/shared/mydspace-item-status/my-dspace-item-status-type'; import { fadeInOut } from '../../../animations/fade'; import { Bitstream } from '../../../../core/shared/bitstream.model'; -import { Metadata } from '../../../../core/shared/metadata.utils'; +import { MyDSpaceResult } from '../../../../+my-dspace-page/my-dspace-result.model'; /** * This component show metadata for the given item object in the detail view. @@ -27,7 +27,7 @@ export class ItemDetailPreviewComponent { /** * The mydspace result object */ - @Input() object: any; + @Input() object: MyDSpaceResult; /** * Represent item's status @@ -42,23 +42,24 @@ export class ItemDetailPreviewComponent { /** * The item's thumbnail */ - public thumbnail$: Observable; + public bitstreams$: Observable; /** - * Gets all matching metadata string values from hitHighlights or dso metadata, preferring hitHighlights. - * - * @param {string|string[]} keyOrKeys The metadata key(s) in scope. Wildcards are supported; see [[Metadata]]. - * @returns {string[]} the matching string values or an empty array. + * The value's separator */ - allMetadataValues(keyOrKeys: string | string[]): string[] { - return Metadata.allValues([this.object.hitHighlights, this.item.metadata], keyOrKeys); - } + public separator = ', '; + + /** + * The item's thumbnail + */ + public thumbnail$: Observable; /** * Initialize all instance variables */ ngOnInit() { this.thumbnail$ = this.item.getThumbnail(); + this.bitstreams$ = this.item.getFiles(); } } diff --git a/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts index 9b917b56e4..17b0279c7a 100644 --- a/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts +++ b/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts @@ -78,7 +78,7 @@ describe('ItemListPreviewComponent', () => { })); beforeEach(() => { - component.object = { hitHighlights: {} }; + component.object = { hitHighlights: {} } as any; }); describe('When the item has an author', () => { diff --git a/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.ts b/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.ts index 5112069071..a92939b85e 100644 --- a/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.ts +++ b/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.ts @@ -4,6 +4,7 @@ import { Item } from '../../../../core/shared/item.model'; import { fadeInOut } from '../../../animations/fade'; import { MyDspaceItemStatusType } from '../../../object-collection/shared/mydspace-item-status/my-dspace-item-status-type'; import { Metadata } from '../../../../core/shared/metadata.utils'; +import { MyDSpaceResult } from '../../../../+my-dspace-page/my-dspace-result.model'; /** * This component show metadata for the given item object in the list view. @@ -24,7 +25,7 @@ export class ItemListPreviewComponent { /** * The mydspace result object */ - @Input() object: any; + @Input() object: MyDSpaceResult; /** * Represent item's status diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 9d017cd6ca..04c5d9e59e 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -130,6 +130,7 @@ import { MetadataValuesComponent } from '../+item-page/field-components/metadata 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'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -219,6 +220,7 @@ const COMPONENTS = [ MyDSpaceItemStatusComponent, ItemSubmitterComponent, ItemDetailPreviewComponent, + ItemDetailPreviewFieldComponent, ClaimedTaskActionsComponent, ClaimedTaskActionsApproveComponent, ClaimedTaskActionsRejectComponent,