Merge pull request #108 from christian-scheible/community-home-page

Added community home page. This PR closes #89.

resources/i18n/en.json

@@ -10,6 +10,15 @@
       "license": "License"
     }
   },
+  "community": {
+    "page": {
+      "news": "News",
+      "license": "License"
+    },
+    "sub-collection-list": {
+      "head": "Collections of this Community"
+    }
+  },
   "item": {
     "page": {
       "author": "Author",

src/app/app.module.ts

@@ -10,6 +10,7 @@ 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 { CommunityPageModule } from './community-page/community-page.module';
 import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 
 
@@ -24,6 +25,7 @@ import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
     HomeModule,
     ItemPageModule,
     CollectionPageModule,
+    CommunityPageModule,
     CoreModule.forRoot(),
     AppRoutingModule
   ],

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

@@ -1,16 +1,32 @@
 <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 *ngIf="logoData" [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>
+  <!-- Collection Name -->
+  <ds-comcol-page-header 
+        [name]="(collectionData.payload | async)?.name">
+  </ds-comcol-page-header>
+  <!-- Collection logo -->
+  <ds-comcol-page-logo *ngIf="logoData" 
+      [logo]="logoData.payload | async"
+      [alternateText]="'Collection Logo'">
+  </ds-comcol-page-logo>
+  <!-- Introductionary text -->
+  <ds-comcol-page-content
+      [content]="(collectionData.payload | async)?.introductoryText"
+      [hasInnerHtml]="true">
+  </ds-comcol-page-content>
+  <!-- News -->
+  <ds-comcol-page-content
+      [content]="(collectionData.payload | async)?.sidebarText"
+      [hasInnerHtml]="true"
+      [title]="'community.page.news'">
+  </ds-comcol-page-content>
+  <!-- Copyright -->
+  <ds-comcol-page-content
+      [content]="(collectionData.payload | async)?.copyrightText"
+      [hasInnerHtml]="true">
+  </ds-comcol-page-content>
+  <!-- Licence -->
+  <ds-comcol-page-content
+      [content]="(collectionData.payload | async)?.license"
+      [title]="'collection.page.license'">
+  </ds-comcol-page-content>
 </div>

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

@@ -3,14 +3,8 @@ import { CommonModule } from '@angular/common';
 
 import { TranslateModule } from "@ngx-translate/core";
 
+import { SharedModule } from '../shared/shared.module';
 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({
@@ -18,16 +12,10 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
     CollectionPageRoutingModule,
     CommonModule,
     TranslateModule,
+    SharedModule,
   ],
   declarations: [
     CollectionPageComponent,
-    FieldWrapperComponent,
-    CollectionPageNameComponent,
-    CollectionPageLogoComponent,
-    CollectionPageIntroductoryTextComponent,
-    CollectionPageNewsComponent,
-    CollectionPageCopyrightComponent,
-    CollectionPageLicenseComponent,
   ]
 })
 export class CollectionPageModule { }

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

@@ -1,3 +0,0 @@
-<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.ts

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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.ts

@@ -1,11 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<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.ts

@@ -1,11 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

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

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

@@ -1,13 +0,0 @@
-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.scss

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<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

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

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

@@ -1,11 +0,0 @@
-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/community-page/community-page-routing.module.ts

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

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

@@ -0,0 +1,26 @@
+<div class="community-page" *ngIf="communityData.hasSucceeded | async">
+  <!-- Community name -->
+  <ds-comcol-page-header [name]="(communityData.payload | async)?.name"></ds-comcol-page-header>
+  <!-- Community logo -->
+  <ds-comcol-page-logo *ngIf="logoData" 
+      [logo]="logoData.payload | async"
+      [alternateText]="'Community Logo'">
+  </ds-comcol-page-logo>
+  <!-- Introductionary text -->
+  <ds-comcol-page-content 
+      [content]="(communityData.payload | async)?.introductoryText"
+      [hasInnerHtml]="true">
+  </ds-comcol-page-content>
+  <!-- News -->
+  <ds-comcol-page-content 
+      [content]="(communityData.payload | async)?.sidebarText"
+      [hasInnerHtml]="true"
+      [title]="'community.page.news'">
+  </ds-comcol-page-content>
+  <!-- Copyright -->
+  <ds-comcol-page-content
+      [content]="(communityData.payload | async)?.copyrightText"
+      [hasInnerHtml]="true">
+  </ds-comcol-page-content>  
+  <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
+</div>

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

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

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

@@ -0,0 +1,41 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+
+import { Community } from "../core/shared/community.model";
+import { Bitstream } from "../core/shared/bitstream.model";
+import { RemoteData } from "../core/data/remote-data";
+import { CommunityDataService } from "../core/data/community-data.service";
+import { Subscription } from "rxjs/Subscription";
+
+@Component({
+  selector: 'ds-community-page',
+  styleUrls: ['./community-page.component.css'],
+  templateUrl: './community-page.component.html',
+})
+export class CommunityPageComponent implements OnInit, OnDestroy {
+  communityData: RemoteData<Community>;
+  logoData: RemoteData<Bitstream>;
+  private subs: Subscription[] = [];
+
+  constructor(
+    private communityDataService: CommunityDataService,
+    private route: ActivatedRoute
+  ) {
+    this.universalInit();
+  }
+
+  ngOnInit(): void {
+    this.route.params.subscribe((params: Params) => {
+      this.communityData = this.communityDataService.findById(params['id']);
+      this.subs.push(this.communityData.payload
+        .subscribe(community => this.logoData = community.logo));
+    });
+  }
+
+  ngOnDestroy(): void {
+     this.subs.forEach(sub => sub.unsubscribe());
+  }
+  
+  universalInit() {
+  }
+}

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from "@angular/router";
+
+import { TranslateModule } from "@ngx-translate/core";
+
+import { SharedModule } from '../shared/shared.module';
+import { CommunityPageComponent } from './community-page.component';
+import { CommunityPageSubCollectionListComponent } from './sub-collection-list/community-page-sub-collection-list.component';
+import { CommunityPageRoutingModule } from './community-page-routing.module';
+
+@NgModule({
+  imports: [
+    CommunityPageRoutingModule,
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    SharedModule,
+  ],
+  declarations: [
+    CommunityPageComponent,
+    CommunityPageSubCollectionListComponent,
+  ]
+})
+export class CommunityPageModule { }

src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html

@@ -0,0 +1,11 @@
+<div *ngIf="subCollections.hasSucceeded | async">
+  <h2>{{'community.sub-collection-list.head' | translate}}</h2>
+  <ul>
+    <li *ngFor="let collection of (subCollections.payload | async)">
+      <p>
+        <span class="lead"><a [routerLink]="['/collections', collection.id]">{{collection.name}}</a></span><br>
+        <span class="text-muted">{{collection.shortDescription}}</span>
+      </p>
+    </li>
+  </ul>
+</div>

src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { CollectionDataService } from "../../core/data/collection-data.service";
+import { RemoteData } from "../../core/data/remote-data";
+import { Collection } from "../../core/shared/collection.model";
+
+
+@Component({
+    selector: 'ds-community-page-sub-collection-list',
+    styleUrls: ['./community-page-sub-collection-list.component.css'],
+    templateUrl: './community-page-sub-collection-list.component.html',
+})
+export class CommunityPageSubCollectionListComponent implements OnInit {
+    subCollections: RemoteData<Collection[]>;
+
+    constructor(
+        private cds: CollectionDataService
+    ) {
+        this.universalInit();
+    }
+
+    universalInit() {
+
+    }
+
+    ngOnInit(): void {
+        this.subCollections = this.cds.findAll();
+    }
+}

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

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

src/app/shared/comcol-page-content/comcol-page-content.component.html

@@ -0,0 +1,5 @@
+<div *ngIf="content" class="content-with-optional-title">
+    <h2 *ngIf="title">{{ title | translate }}</h2>
+    <div *ngIf="hasInnerHtml" [innerHtml]="content"></div>
+    <div *ngIf="!hasInnerHtml">{{content}}</div>
+</div>

src/app/shared/comcol-page-content/comcol-page-content.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * This component renders any content inside of this component.
+ * If there is a title set it will render the title. 
+ * If hasInnerHtml is true the content will be handled as html.
+ * To see how it is used see collection-page or community-page.
+ */
+
+@Component({
+  selector: 'ds-comcol-page-content',
+  styleUrls: ['./comcol-page-content.component.css'],
+  templateUrl: './comcol-page-content.component.html'
+})
+export class ComcolPageContentComponent {
+
+  // Optional title
+  @Input() title: string;
+
+  // The content to render. Might be html
+  @Input() content: string;
+
+  // flag whether the content contains html syntax or not
+  @Input() hasInnerHtml: boolean;
+
+
+
+  constructor() {
+    this.universalInit();
+
+  }
+
+  universalInit() {
+
+  }
+
+}

src/app/shared/comcol-page-header/comcol-page-header.component.ts

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

src/app/shared/comcol-page-logo/comcol-page-logo.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="logo" class="dso-logo">
+    <img [src]="logo.url" class="img-responsive" [attr.alt]="alternateText ? alternateText : null" />
+</div>

src/app/shared/comcol-page-logo/comcol-page-logo.component.ts

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

src/app/shared/shared.module.ts

@@ -14,6 +14,9 @@ import { ThumbnailComponent } from "../thumbnail/thumbnail.component";
 import { SafeUrlPipe } from "./utils/safe-url-pipe";
 import { HostWindowService } from "./host-window.service";
 import { NativeWindowFactory, NativeWindowService } from "./window.service";
+import { ComcolPageContentComponent } from "./comcol-page-content/comcol-page-content.component";
+import { ComcolPageHeaderComponent } from "./comcol-page-header/comcol-page-header.component";
+import { ComcolPageLogoComponent } from "./comcol-page-logo/comcol-page-logo.component";
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -35,7 +38,10 @@ const PIPES = [
 const COMPONENTS = [
   // put shared components here
   PaginationComponent,
-  ThumbnailComponent
+  ThumbnailComponent,
+  ComcolPageContentComponent,
+  ComcolPageHeaderComponent,
+  ComcolPageLogoComponent
 ];
 
 const PROVIDERS = [

src/backend/communities.ts

@@ -39,7 +39,8 @@ export const COMMUNITIES = {
         },
         "collections": [
           { "href": "/collections/5179" }
-        ]
+        ],
+      "logo": { "href": "/bitstreams/4688" }
       }
     },
     {

src/server.routes.ts

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