From 66e421a1ebd394847eb62eddf5a8d2c668eb13d9 Mon Sep 17 00:00:00 2001 From: Lotte Hofstede Date: Tue, 28 Mar 2017 17:17:24 +0200 Subject: [PATCH] 40416: started on simple item view page --- resources/i18n/en.json | 9 ++ src/app/app.module.ts | 5 +- src/app/core/shared/dspace-object.model.ts | 116 ++++++++++-------- .../item-page-field-wrapper.component.html | 6 + .../item-page-field-wrapper.component.scss | 1 + .../item-page-field-wrapper.component.ts | 20 +++ .../item-page-field.component.html | 5 + .../item-page-field.component.scss | 1 + .../item-page-field.component.ts | 23 ++++ src/app/item-page/item-page-routing.module.ts | 14 +++ src/app/item-page/item-page.component.html | 8 ++ src/app/item-page/item-page.component.scss | 1 + src/app/item-page/item-page.component.ts | 35 ++++++ src/app/item-page/item-page.module.ts | 34 +++++ .../item-page-abstract-field.component.ts | 19 +++ .../item-page-author-field.component.ts | 22 ++++ .../date/item-page-date-field.component.ts | 19 +++ .../item-page-specific-field.component.html | 3 + .../item-page-specific-field.component.ts | 28 +++++ .../item-page-title-field.component.html | 3 + .../title/item-page-title-field.component.ts | 18 +++ .../uri/item-page-uri-field.component.html | 3 + .../uri/item-page-uri-field.component.ts | 19 +++ src/server.routes.ts | 2 +- 24 files changed, 358 insertions(+), 56 deletions(-) create mode 100644 src/app/item-page/field-wrapper/item-page-field-wrapper.component.html create mode 100644 src/app/item-page/field-wrapper/item-page-field-wrapper.component.scss create mode 100644 src/app/item-page/field-wrapper/item-page-field-wrapper.component.ts create mode 100644 src/app/item-page/generic-field/item-page-field.component.html create mode 100644 src/app/item-page/generic-field/item-page-field.component.scss create mode 100644 src/app/item-page/generic-field/item-page-field.component.ts create mode 100644 src/app/item-page/item-page-routing.module.ts create mode 100644 src/app/item-page/item-page.component.html create mode 100644 src/app/item-page/item-page.component.scss create mode 100644 src/app/item-page/item-page.component.ts create mode 100644 src/app/item-page/item-page.module.ts create mode 100644 src/app/item-page/specific-field/abstract/item-page-abstract-field.component.ts create mode 100644 src/app/item-page/specific-field/author/item-page-author-field.component.ts create mode 100644 src/app/item-page/specific-field/date/item-page-date-field.component.ts create mode 100644 src/app/item-page/specific-field/item-page-specific-field.component.html create mode 100644 src/app/item-page/specific-field/item-page-specific-field.component.ts create mode 100644 src/app/item-page/specific-field/title/item-page-title-field.component.html create mode 100644 src/app/item-page/specific-field/title/item-page-title-field.component.ts create mode 100644 src/app/item-page/specific-field/uri/item-page-uri-field.component.html create mode 100644 src/app/item-page/specific-field/uri/item-page-uri-field.component.ts diff --git a/resources/i18n/en.json b/resources/i18n/en.json index 6e181428ec..df1ee73260 100644 --- a/resources/i18n/en.json +++ b/resources/i18n/en.json @@ -11,6 +11,15 @@ "link.duraspace": "DuraSpace" }, + "item": { + "page": { + "author": "Author", + "abstract": "Abstract", + "date": "Date", + "uri": "URI" + } + }, + "nav": { "home": "Home" }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bda3ccc9ea..c6060811c2 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { CoreModule } from './core/core.module'; import { HomeModule } from './home/home.module'; +import { ItemPageModule } from './item-page/item-page.module'; import { SharedModule } from './shared/shared.module'; @@ -10,15 +11,17 @@ import { AppComponent } from './app.component'; import { HeaderComponent } from './header/header.component'; import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component'; + @NgModule({ declarations: [ AppComponent, HeaderComponent, - PageNotFoundComponent + PageNotFoundComponent, ], imports: [ SharedModule, HomeModule, + ItemPageModule, CoreModule.forRoot(), AppRoutingModule, ], diff --git a/src/app/core/shared/dspace-object.model.ts b/src/app/core/shared/dspace-object.model.ts index 395886655f..c21a8af5f4 100644 --- a/src/app/core/shared/dspace-object.model.ts +++ b/src/app/core/shared/dspace-object.model.ts @@ -8,67 +8,75 @@ import { CacheableObject } from "../cache/object-cache.reducer"; */ export abstract class DSpaceObject implements CacheableObject { - /** - * The human-readable identifier of this DSpaceObject - */ - @autoserialize - id: string; + /** + * The human-readable identifier of this DSpaceObject + */ + @autoserialize + id: string; - /** - * The universally unique identifier of this DSpaceObject - */ - @autoserialize - uuid: string; + /** + * The universally unique identifier of this DSpaceObject + */ + @autoserialize + uuid: string; - /** - * A string representing the kind of DSpaceObject, e.g. community, item, … - */ - type: string; + /** + * A string representing the kind of DSpaceObject, e.g. community, item, … + */ + type: string; - /** - * The name for this DSpaceObject - */ - @autoserialize - name: string; + /** + * The name for this DSpaceObject + */ + @autoserialize + name: string; - /** - * An array containing all metadata of this DSpaceObject - */ - @autoserializeAs(Metadatum) - metadata: Array; + /** + * An array containing all metadata of this DSpaceObject + */ + @autoserializeAs(Metadatum) + metadata: Array; - /** - * An array of DSpaceObjects that are direct parents of this DSpaceObject - */ - parents: Array; + /** + * An array of DSpaceObjects that are direct parents of this DSpaceObject + */ + parents: Array; - /** - * The DSpaceObject that owns this DSpaceObject - */ - owner: DSpaceObject; + /** + * The DSpaceObject that owns this DSpaceObject + */ + owner: DSpaceObject; - /** - * Find a metadata field by key and language - * - * This method returns the value of the first element - * in the metadata array that matches the provided - * key and language - * - * @param key - * @param language - * @return string - */ - findMetadata(key: string, language?: string): string { - const metadatum = this.metadata - .find((metadatum: Metadatum) => { - return metadatum.key === key && - (isEmpty(language) || metadatum.language === language) - }); - if (isNotEmpty(metadatum)) { - return metadatum.value; + /** + * Find a metadata field by key and language + * + * This method returns the value of the first element + * in the metadata array that matches the provided + * key and language + * + * @param key + * @param language + * @return string + */ + findMetadata(key: string, language?: string): string { + const metadatum = this.metadata + .find((metadatum: Metadatum) => { + return metadatum.key === key && + (isEmpty(language) || metadatum.language === language) + }); + if (isNotEmpty(metadatum)) { + return metadatum.value; + } + else { + return undefined; + } } - else { - return undefined; + + filterMetadata(keys: string[]): Array { + return this.metadata + .filter((metadatum: Metadatum) => { + return keys.some(key => key === metadatum.key); + }); } - } + } diff --git a/src/app/item-page/field-wrapper/item-page-field-wrapper.component.html b/src/app/item-page/field-wrapper/item-page-field-wrapper.component.html new file mode 100644 index 0000000000..638501c857 --- /dev/null +++ b/src/app/item-page/field-wrapper/item-page-field-wrapper.component.html @@ -0,0 +1,6 @@ +
+
{{ label }}
+
+ +
+
\ No newline at end of file diff --git a/src/app/item-page/field-wrapper/item-page-field-wrapper.component.scss b/src/app/item-page/field-wrapper/item-page-field-wrapper.component.scss new file mode 100644 index 0000000000..50be6f5ad0 --- /dev/null +++ b/src/app/item-page/field-wrapper/item-page-field-wrapper.component.scss @@ -0,0 +1 @@ +@import '../../../styles/variables.scss'; diff --git a/src/app/item-page/field-wrapper/item-page-field-wrapper.component.ts b/src/app/item-page/field-wrapper/item-page-field-wrapper.component.ts new file mode 100644 index 0000000000..1bcdc9d4a3 --- /dev/null +++ b/src/app/item-page/field-wrapper/item-page-field-wrapper.component.ts @@ -0,0 +1,20 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'ds-item-page-field-wrapper', + styleUrls: ['./item-page-field-wrapper.component.css'], + templateUrl: './item-page-field-wrapper.component.html' +}) +export class ItemPageFieldWrapperComponent { + + @Input() label: string; + constructor() { + this.universalInit(); + + } + + universalInit() { + + } + +} diff --git a/src/app/item-page/generic-field/item-page-field.component.html b/src/app/item-page/generic-field/item-page-field.component.html new file mode 100644 index 0000000000..795dfaf7b9 --- /dev/null +++ b/src/app/item-page/generic-field/item-page-field.component.html @@ -0,0 +1,5 @@ + + + {{metadatum.value}} + + diff --git a/src/app/item-page/generic-field/item-page-field.component.scss b/src/app/item-page/generic-field/item-page-field.component.scss new file mode 100644 index 0000000000..50be6f5ad0 --- /dev/null +++ b/src/app/item-page/generic-field/item-page-field.component.scss @@ -0,0 +1 @@ +@import '../../../styles/variables.scss'; diff --git a/src/app/item-page/generic-field/item-page-field.component.ts b/src/app/item-page/generic-field/item-page-field.component.ts new file mode 100644 index 0000000000..05402d8650 --- /dev/null +++ b/src/app/item-page/generic-field/item-page-field.component.ts @@ -0,0 +1,23 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'ds-item-page-field', + styleUrls: ['./item-page-field.component.css'], + templateUrl: './item-page-field.component.html' +}) +export class ItemPageFieldComponent { + + @Input() data: any; + @Input() separator: string; + @Input() label: string; + + constructor() { + this.universalInit(); + + } + + universalInit() { + + } + +} diff --git a/src/app/item-page/item-page-routing.module.ts b/src/app/item-page/item-page-routing.module.ts new file mode 100644 index 0000000000..b8f2d1939f --- /dev/null +++ b/src/app/item-page/item-page-routing.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { ItemPageComponent } from './item-page.component'; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { path: 'item/:id', pathMatch: 'full', component: ItemPageComponent }, + ]) + ] +}) +export class ItemPageRoutingModule { +} diff --git a/src/app/item-page/item-page.component.html b/src/app/item-page/item-page.component.html new file mode 100644 index 0000000000..d5069ce529 --- /dev/null +++ b/src/app/item-page/item-page.component.html @@ -0,0 +1,8 @@ +
+ Item page component + + + + + +
diff --git a/src/app/item-page/item-page.component.scss b/src/app/item-page/item-page.component.scss new file mode 100644 index 0000000000..da97dd7a62 --- /dev/null +++ b/src/app/item-page/item-page.component.scss @@ -0,0 +1 @@ +@import '../../styles/variables.scss'; diff --git a/src/app/item-page/item-page.component.ts b/src/app/item-page/item-page.component.ts new file mode 100644 index 0000000000..215b98cbd9 --- /dev/null +++ b/src/app/item-page/item-page.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Item } from "../core/shared/item.model"; +import { ItemDataService } from "../core/data-services/item-data.service"; +import { RemoteData } from "../core/data-services/remote-data"; + +@Component({ + selector: 'ds-item-page', + styleUrls: ['./item-page.component.css'], + templateUrl: './item-page.component.html' +}) +export class ItemPageComponent implements OnInit { + + id: number; + private sub: any; + item : RemoteData; + + constructor( private route: ActivatedRoute, private items : ItemDataService) { + this.universalInit(); + } + + universalInit() { + + } + + ngOnInit(): void { + this.sub = this.route.params.subscribe(params => { + this.id = +params['id']; + this.item = this.items.findById(params['id']); + }); + + } + + +} diff --git a/src/app/item-page/item-page.module.ts b/src/app/item-page/item-page.module.ts new file mode 100644 index 0000000000..a081afa6bb --- /dev/null +++ b/src/app/item-page/item-page.module.ts @@ -0,0 +1,34 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ItemPageComponent } from './item-page.component'; +import { ItemPageRoutingModule } from './item-page-routing.module'; +import { ItemPageFieldComponent } from './generic-field/item-page-field.component'; +import { ItemPageFieldWrapperComponent } from './field-wrapper/item-page-field-wrapper.component'; +import { ItemPageAuthorFieldComponent } from './specific-field/author/item-page-author-field.component'; +import { ItemPageDateFieldComponent } from './specific-field/date/item-page-date-field.component'; +import { ItemPageAbstractFieldComponent } from './specific-field/abstract/item-page-abstract-field.component'; +import { ItemPageUriFieldComponent } from './specific-field/uri/item-page-uri-field.component'; +import { ItemPageTitleFieldComponent } from './specific-field/title/item-page-title-field.component'; +import { ItemPageSpecificFieldComponent } from './specific-field/item-page-specific-field.component'; +import { SharedModule } from './../shared/shared.module'; + +@NgModule({ + declarations: [ + ItemPageComponent, + ItemPageFieldComponent, + ItemPageFieldWrapperComponent, + ItemPageAuthorFieldComponent, + ItemPageDateFieldComponent, + ItemPageAbstractFieldComponent, + ItemPageUriFieldComponent, + ItemPageTitleFieldComponent, + ItemPageSpecificFieldComponent, + ], + imports: [ + ItemPageRoutingModule, + CommonModule, + SharedModule + ] +}) +export class ItemPageModule { +} diff --git a/src/app/item-page/specific-field/abstract/item-page-abstract-field.component.ts b/src/app/item-page/specific-field/abstract/item-page-abstract-field.component.ts new file mode 100644 index 0000000000..6d7de927ee --- /dev/null +++ b/src/app/item-page/specific-field/abstract/item-page-abstract-field.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Item } from "../../../core/shared/item.model"; +import { Observable } from "rxjs"; +import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component"; + +@Component({ + selector: 'ds-item-page-abstract-field', + templateUrl: './../item-page-specific-field.component.html' +}) +export class ItemPageAbstractFieldComponent extends ItemPageSpecificFieldComponent implements OnInit { + + @Input() item: Observable; + + fields : string[] = [ + "dc.description.abstract" + ]; + label : string = "item.page.abstract"; + +} diff --git a/src/app/item-page/specific-field/author/item-page-author-field.component.ts b/src/app/item-page/specific-field/author/item-page-author-field.component.ts new file mode 100644 index 0000000000..15ee8c1af0 --- /dev/null +++ b/src/app/item-page/specific-field/author/item-page-author-field.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Item } from "../../../core/shared/item.model"; +import { Observable } from "rxjs"; +import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component"; + +@Component({ + selector: 'ds-item-page-author-field', + templateUrl: './../item-page-specific-field.component.html' +}) +export class ItemPageAuthorFieldComponent extends ItemPageSpecificFieldComponent implements OnInit { + + @Input() item: Observable; + + fields : string[] = [ + "dc.contributor.author", + "dc.creator", + "dc.contributor" + ]; + label : string = "item.page.author"; + separator : string = ","; + +} diff --git a/src/app/item-page/specific-field/date/item-page-date-field.component.ts b/src/app/item-page/specific-field/date/item-page-date-field.component.ts new file mode 100644 index 0000000000..097557882a --- /dev/null +++ b/src/app/item-page/specific-field/date/item-page-date-field.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Item } from "../../../core/shared/item.model"; +import { Observable } from "rxjs"; +import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component"; + +@Component({ + selector: 'ds-item-page-date-field', + templateUrl: './../item-page-specific-field.component.html' +}) +export class ItemPageDateFieldComponent extends ItemPageSpecificFieldComponent implements OnInit { + + @Input() item: Observable; + + fields : string[] = [ + "dc.date.issued" + ]; + label : string = "item.page.date"; + +} diff --git a/src/app/item-page/specific-field/item-page-specific-field.component.html b/src/app/item-page/specific-field/item-page-specific-field.component.html new file mode 100644 index 0000000000..a9ba9cd935 --- /dev/null +++ b/src/app/item-page/specific-field/item-page-specific-field.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/item-page/specific-field/item-page-specific-field.component.ts b/src/app/item-page/specific-field/item-page-specific-field.component.ts new file mode 100644 index 0000000000..e803494919 --- /dev/null +++ b/src/app/item-page/specific-field/item-page-specific-field.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Item } from "../../core/shared/item.model"; +import { Observable } from "rxjs"; + +@Component({ + templateUrl: './item-page-specific-field.component.html' +}) +export class ItemPageSpecificFieldComponent implements OnInit { + + @Input() item: Observable; + + fields : string[]; + label : string; + separator : string = "
"; + + constructor() { + this.universalInit(); + } + + universalInit() { + + } + + ngOnInit(): void { + } + + +} diff --git a/src/app/item-page/specific-field/title/item-page-title-field.component.html b/src/app/item-page/specific-field/title/item-page-title-field.component.html new file mode 100644 index 0000000000..4c8f871d6e --- /dev/null +++ b/src/app/item-page/specific-field/title/item-page-title-field.component.html @@ -0,0 +1,3 @@ +

+ +

diff --git a/src/app/item-page/specific-field/title/item-page-title-field.component.ts b/src/app/item-page/specific-field/title/item-page-title-field.component.ts new file mode 100644 index 0000000000..12d14074c7 --- /dev/null +++ b/src/app/item-page/specific-field/title/item-page-title-field.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Item } from "../../../core/shared/item.model"; +import { Observable } from "rxjs"; +import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component"; + +@Component({ + selector: 'ds-item-page-title-field', + templateUrl: './item-page-title-field.component.html' +}) +export class ItemPageTitleFieldComponent extends ItemPageSpecificFieldComponent implements OnInit { + + @Input() item: Observable; + + fields : string[] = [ + "dc.title" + ]; + +} diff --git a/src/app/item-page/specific-field/uri/item-page-uri-field.component.html b/src/app/item-page/specific-field/uri/item-page-uri-field.component.html new file mode 100644 index 0000000000..a9ba9cd935 --- /dev/null +++ b/src/app/item-page/specific-field/uri/item-page-uri-field.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/item-page/specific-field/uri/item-page-uri-field.component.ts b/src/app/item-page/specific-field/uri/item-page-uri-field.component.ts new file mode 100644 index 0000000000..d4d5ad250e --- /dev/null +++ b/src/app/item-page/specific-field/uri/item-page-uri-field.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Item } from "../../../core/shared/item.model"; +import { Observable } from "rxjs"; +import { ItemPageSpecificFieldComponent } from "../item-page-specific-field.component"; + +@Component({ + selector: 'ds-item-page-uri-field', + templateUrl: './../item-page-specific-field.component.html' +}) +export class ItemPageUriFieldComponent extends ItemPageSpecificFieldComponent implements OnInit { + + @Input() item: Observable; + + fields : string[] = [ + "dc.identifier.uri" + ]; + label : string = "item.page.uri"; + +} diff --git a/src/server.routes.ts b/src/server.routes.ts index 02e79e563a..a7eea48344 100644 --- a/src/server.routes.ts +++ b/src/server.routes.ts @@ -10,5 +10,5 @@ * ]; **/ export const routes: string[] = [ - 'home', '**' + 'home', 'item/:id' , '**' ];