Refactored community and collection pages to use a shared component for most of the content. This PR connect’s to #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,25 @@
 <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>
+  <!-- Introductionary text -->
+  <ds-content-with-optional-title
+      [content]="(collectionData.payload | async)?.introductoryText"
+      [hasInnerHtml]="true">
+  </ds-content-with-optional-title>
+  <!-- News -->
+  <ds-content-with-optional-title
+      [content]="(collectionData.payload | async)?.sidebarText"
+      [hasInnerHtml]="true"
+      [title]="'community.page.news'">
+  </ds-content-with-optional-title>
+  <!-- Copyright -->
+  <ds-content-with-optional-title
+      [content]="(collectionData.payload | async)?.copyrightText"
+      [hasInnerHtml]="true">>
+  </ds-content-with-optional-title>
+  <!-- Licence -->
+  <ds-content-with-optional-title
+      [content]="(collectionData.payload | async)?.license"
+      [title]="'collection.page.license'">>
+  </ds-content-with-optional-title>
 </div>

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

@@ -3,14 +3,11 @@ 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 +15,13 @@ 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/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.scss

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

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.scss

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

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/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.component.html

@@ -1,17 +1,26 @@
 <div class="community-page" *ngIf="communityData.hasSucceeded | async">
   <ds-community-page-name [name]="(communityData.payload | async)?.name"></ds-community-page-name>
   <ds-community-page-logo *ngIf="logoData" [logo]="logoData.payload | async"></ds-community-page-logo>
-  <ds-community-page-introductory-text
-      [introductoryText]="(communityData.payload | async)?.introductoryText">
-  </ds-community-page-introductory-text>
-  <ds-community-page-news
-      [sidebarText]="(communityData.payload | async)?.sidebarText">
-  </ds-community-page-news>
-  <ds-community-page-copyright
-      [copyrightText]="(communityData.payload | async)?.copyrightText">
-  </ds-community-page-copyright>
-  <ds-community-page-license
-      [license]="(communityData.payload | async)?.license">
-  </ds-community-page-license>
+  <!-- Introductionary text -->
+  <ds-content-with-optional-title 
+      [content]="(communityData.payload | async)?.introductoryText"
+      [hasInnerHtml]="true">
+  </ds-content-with-optional-title>
+  <!-- News -->
+  <ds-content-with-optional-title 
+      [content]="(communityData.payload | async)?.sidebarText"
+      [hasInnerHtml]="true"
+      [title]="'community.page.news'">
+  </ds-content-with-optional-title >
+  <!-- Copyright -->
+  <ds-content-with-optional-title
+      [content]="(communityData.payload | async)?.copyrightText"
+      [hasInnerHtml]="true">
+  </ds-content-with-optional-title>
+  <!-- Licence -->
+  <ds-content-with-optional-title
+      [content]="(communityData.payload | async)?.license"
+      [title]="'community.page.license'">
+  </ds-content-with-optional-title>
   <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
 </div>

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

@@ -4,14 +4,11 @@ import { RouterModule } from "@angular/router";
 
 import { TranslateModule } from "@ngx-translate/core";
 
+import { SharedModule } from '../shared/shared.module';
 import { CommunityPageComponent } from './community-page.component';
 import { FieldWrapperComponent } from './field-wrapper/field-wrapper.component';
 import { CommunityPageNameComponent } from './name/community-page-name.component';
 import { CommunityPageLogoComponent } from './logo/community-page-logo.component';
-import { CommunityPageIntroductoryTextComponent } from './introductory-text/community-page-introductory-text.component';
-import { CommunityPageNewsComponent } from './news/community-page-news.component';
-import { CommunityPageCopyrightComponent } from './copyright/community-page-copyright.component';
-import { CommunityPageLicenseComponent } from './license/community-page-license.component';
 import { CommunityPageSubCollectionListComponent } from './sub-collection-list/community-page-sub-collection-list.component';
 import { CommunityPageRoutingModule } from './community-page-routing.module';
 
@@ -21,16 +18,13 @@ import { CommunityPageRoutingModule } from './community-page-routing.module';
     CommonModule,
     TranslateModule,
     RouterModule,
+    SharedModule,
   ],
   declarations: [
     CommunityPageComponent,
     FieldWrapperComponent,
     CommunityPageNameComponent,
     CommunityPageLogoComponent,
-    CommunityPageIntroductoryTextComponent,
-    CommunityPageNewsComponent,
-    CommunityPageCopyrightComponent,
-    CommunityPageLicenseComponent,
     CommunityPageSubCollectionListComponent,
   ]
 })

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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(NormalizedDSOType.NormalizedBitstream)
   logo: string;
 
   /**

src/app/shared/content-with-optional-title/content-with-optional-title.component.html

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

src/app/shared/content-with-optional-title/content-with-optional-title.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-content-with-optional-title',
+  styleUrls: ['./content-with-optional-title.component.css'],
+  templateUrl: './content-with-optional-title.component.html'
+})
+export class ContentWithOptionalTitleComponent {
+
+  // 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/shared.module.ts

@@ -14,6 +14,7 @@ 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 { ContentWithOptionalTitleComponent } from "./content-with-optional-title/content-with-optional-title.component";
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -35,7 +36,8 @@ const PIPES = [
 const COMPONENTS = [
   // put shared components here
   PaginationComponent,
-  ThumbnailComponent
+  ThumbnailComponent,
+  ContentWithOptionalTitleComponent
 ];
 
 const PROVIDERS = [

src/backend/communities.ts

@@ -38,7 +38,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', '**'
 ];