Implement collection home page

Shows the following fields if they exist:
* title
* logo
* introductory text
* news (also referred to as sidebarText)
* copyright text
* license

Fixes https://github.com/DSpace/dspace-angular/issues/63

resources/i18n/en.json

@@ -4,6 +4,12 @@
     "link.dspace": "DSpace software",
     "link.duraspace": "DuraSpace"
   },
+  "collection": {
+    "page": {
+      "news": "News",
+      "license": "License"
+    }
+  },
   "item": {
     "page": {
       "author": "Author",

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { SharedModule } from './shared/shared.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
+import { CollectionPageModule } from './collection-page/collection-page.module';
 import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 
 
@@ -22,6 +23,7 @@ import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
     SharedModule,
     HomeModule,
     ItemPageModule,
+    CollectionPageModule,
     CoreModule.forRoot(),
     AppRoutingModule
   ],

src/app/collection-page/collection-page-routing.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CollectionPageComponent } from './collection-page.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: 'collections/:id', component: CollectionPageComponent }
+    ])
+  ]
+})
+export class CollectionPageRoutingModule { }

src/app/collection-page/collection-page.component.html

@@ -0,0 +1,16 @@
+<div class="collection-page" *ngIf="collectionData.hasSucceeded | async">
+  <ds-collection-page-name [name]="(collectionData.payload | async)?.name"></ds-collection-page-name>
+  <ds-collection-page-logo [logo]="logoData.payload | async"></ds-collection-page-logo>
+  <ds-collection-page-introductory-text
+      [introductoryText]="(collectionData.payload | async)?.introductoryText">
+  </ds-collection-page-introductory-text>
+  <ds-collection-page-news
+      [sidebarText]="(collectionData.payload | async)?.sidebarText">
+  </ds-collection-page-news>
+  <ds-collection-page-copyright
+      [copyrightText]="(collectionData.payload | async)?.copyrightText">
+  </ds-collection-page-copyright>
+  <ds-collection-page-license
+      [license]="(collectionData.payload | async)?.license">
+  </ds-collection-page-license>
+</div>

src/app/collection-page/collection-page.component.scss

@@ -0,0 +1 @@
+@import '../../styles/variables.scss';

src/app/collection-page/collection-page.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+
+import { Collection } from "../core/shared/collection.model";
+import { Bitstream } from "../core/shared/bitstream.model";
+import { RemoteData } from "../core/data/remote-data";
+import { CollectionDataService } from "../core/data/collection-data.service";
+
+@Component({
+  selector: 'ds-collection-page',
+  styleUrls: ['./collection-page.component.css'],
+  templateUrl: './collection-page.component.html',
+})
+export class CollectionPageComponent implements OnInit {
+  collectionData: RemoteData<Collection>;
+  logoData: RemoteData<Bitstream>;
+
+  constructor(
+    private collectionDataService: CollectionDataService,
+    private route: ActivatedRoute
+  ) {
+    this.universalInit();
+  }
+
+  ngOnInit(): void {
+    this.route.params.subscribe((params: Params) => {
+      this.collectionData = this.collectionDataService.findById(params['id'])
+      this.collectionData.payload
+        .subscribe(collection => this.logoData = collection.logo);
+    });
+  }
+
+  universalInit() {
+  }
+}

src/app/collection-page/collection-page.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TranslateModule } from "@ngx-translate/core";
+
+import { CollectionPageComponent } from './collection-page.component';
+import { FieldWrapperComponent } from './field-wrapper/field-wrapper.component';
+import { CollectionPageNameComponent } from './name/collection-page-name.component';
+import { CollectionPageLogoComponent } from './logo/collection-page-logo.component';
+import { CollectionPageIntroductoryTextComponent } from './introductory-text/collection-page-introductory-text.component';
+import { CollectionPageNewsComponent } from './news/collection-page-news.component';
+import { CollectionPageCopyrightComponent } from './copyright/collection-page-copyright.component';
+import { CollectionPageLicenseComponent } from './license/collection-page-license.component';
+import { CollectionPageRoutingModule } from './collection-page-routing.module';
+
+@NgModule({
+  imports: [
+    CollectionPageRoutingModule,
+    CommonModule,
+    TranslateModule,
+  ],
+  declarations: [
+    CollectionPageComponent,
+    FieldWrapperComponent,
+    CollectionPageNameComponent,
+    CollectionPageLogoComponent,
+    CollectionPageIntroductoryTextComponent,
+    CollectionPageNewsComponent,
+    CollectionPageCopyrightComponent,
+    CollectionPageLicenseComponent,
+  ]
+})
+export class CollectionPageModule { }

src/app/collection-page/copyright/collection-page-copyright.component.html

@@ -0,0 +1,3 @@
+<ds-field-wrapper *ngIf="copyrightText" class="collection-page-copyright">
+    <p [innerHtml]="copyrightText"></p>
+</ds-field-wrapper>

src/app/collection-page/copyright/collection-page-copyright.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/collection-page/copyright/collection-page-copyright.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'ds-collection-page-copyright',
+  styleUrls: ['./collection-page-copyright.component.css'],
+  templateUrl: './collection-page-copyright.component.html',
+})
+export class CollectionPageCopyrightComponent {
+  @Input() copyrightText: String;
+}

src/app/collection-page/field-wrapper/field-wrapper.component.html

@@ -0,0 +1,3 @@
+<div class="collection-page-field-wrapper">
+    <ng-content></ng-content>
+</div>

src/app/collection-page/field-wrapper/field-wrapper.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/collection-page/field-wrapper/field-wrapper.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'ds-field-wrapper',
+  styleUrls: ['./field-wrapper.component.css'],
+  templateUrl: './field-wrapper.component.html',
+})
+export class FieldWrapperComponent {
+  @Input() name: String;
+}

src/app/collection-page/introductory-text/collection-page-introductory-text.component.html

@@ -0,0 +1,3 @@
+<ds-field-wrapper *ngIf="introductoryText" class="collection-page-introductory-text">
+    <p [innerHtml]="introductoryText"></p>
+</ds-field-wrapper>

src/app/collection-page/introductory-text/collection-page-introductory-text.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/collection-page/introductory-text/collection-page-introductory-text.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'ds-collection-page-introductory-text',
+  styleUrls: ['./collection-page-introductory-text.component.css'],
+  templateUrl: './collection-page-introductory-text.component.html',
+})
+export class CollectionPageIntroductoryTextComponent {
+  @Input() introductoryText: String;
+}

src/app/collection-page/license/collection-page-license.component.html

@@ -0,0 +1,4 @@
+<ds-field-wrapper *ngIf="license" class="collection-page-license">
+    <h2>{{ 'collection.page.license' | translate }}</h2>
+    <p>{{ license }}</p>
+</ds-field-wrapper>

src/app/collection-page/license/collection-page-license.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/collection-page/license/collection-page-license.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'ds-collection-page-license',
+  styleUrls: ['./collection-page-license.component.css'],
+  templateUrl: './collection-page-license.component.html',
+})
+export class CollectionPageLicenseComponent {
+  @Input() license: String;
+}

src/app/collection-page/logo/collection-page-logo.component.html

@@ -0,0 +1,3 @@
+<ds-field-wrapper *ngIf="logo" class="collection-page-logo">
+    <img [src]="logo.url" class="img-responsive" alt="Collection logo" />
+</ds-field-wrapper>

src/app/collection-page/logo/collection-page-logo.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/collection-page/logo/collection-page-logo.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+import { Bitstream } from "../../core/shared/bitstream.model";
+
+
+@Component({
+  selector: 'ds-collection-page-logo',
+  styleUrls: ['./collection-page-logo.component.css'],
+  templateUrl: './collection-page-logo.component.html',
+})
+export class CollectionPageLogoComponent {
+  @Input() logo: Bitstream;
+}

src/app/collection-page/name/collection-page-name.component.html

@@ -0,0 +1 @@
+<h1 *ngIf="name">{{ name }}</h1>

src/app/collection-page/name/collection-page-name.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/collection-page/name/collection-page-name.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'ds-collection-page-name',
+  styleUrls: ['./collection-page-name.component.css'],
+  templateUrl: './collection-page-name.component.html',
+})
+export class CollectionPageNameComponent {
+  @Input() name: String;
+}

src/app/collection-page/news/collection-page-news.component.html

@@ -0,0 +1,4 @@
+<ds-field-wrapper *ngIf="sidebarText" class="collection-page-news">
+    <h2>{{ 'collection.page.news' | translate }}</h2>
+    <p [innerHtml]="sidebarText"></p>
+</ds-field-wrapper>

src/app/collection-page/news/collection-page-news.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/collection-page/news/collection-page-news.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'ds-collection-page-news',
+  styleUrls: ['./collection-page-news.component.css'],
+  templateUrl: './collection-page-news.component.html',
+})
+export class CollectionPageNewsComponent {
+  @Input() sidebarText: String;
+}

src/app/core/cache/models/normalized-bitstream.model.ts

@@ -16,6 +16,7 @@ export class NormalizedBitstream extends NormalizedDSpaceObject {
     /**
      * The relative path to this Bitstream's file
      */
+    @autoserialize
     url: string;
 
     /**

src/app/core/cache/models/normalized-collection.model.ts

@@ -17,6 +17,8 @@ export class NormalizedCollection extends NormalizedDSpaceObject {
   /**
    * The Bitstream that represents the logo of this Collection
    */
+  @autoserialize
+  @relationship(NormalizedDSOType.NormalizedBitstream)
   logo: string;
 
   /**

src/backend/bitstreams.ts

@@ -63,5 +63,18 @@ export const BITSTREAMS = [
     ],
     "format": "Text",
     "mimetype": "text/plain"
-  }
+  },
+  {
+    "_links": {
+      "self": { "href": "/bitstreams/4688" },
+    },
+    "id": "4688",
+    "uuid": "1bb1be24-c934-41e3-a0fb-ca7a71ab0e71",
+    "type": "bitstream",
+    "name": "collection-5179-logo.png",
+    "size": 299832,
+    "url": "/bitstreams/1bb1be24-c934-41e3-a0fb-ca7a71ab0e71/retrieve",
+    "format": "PNG",
+    "mimetype": "image/png"
+  },
 ];

src/backend/collections.ts

@@ -5,7 +5,8 @@ export const COLLECTIONS = [
       "items": [
         { "href": "/items/8871" },
         { "href": "/items/9978" }
-      ]
+      ],
+      "logo": { "href": "/bitstreams/4688" }
     },
     "id": "5179",
     "uuid": "9e32a2e2-6b91-4236-a361-995ccdc14c60",

src/server.routes.ts

@@ -10,5 +10,5 @@
  * ];
  **/
 export const routes: string[] = [
-  'home', 'items/:id' , '**'
+  'home', 'items/:id' , 'collections/:id', '**'
 ];