Merge pull request #93 from artlowel/initial-home-page-content

Initial home page content

e2e/app.e2e-spec.ts

@@ -12,8 +12,8 @@ describe('protractor App', function() {
     expect(page.getPageTitleText()).toEqual('DSpace');
   });
 
-  it('should display title "Hello, World!"', () => {
+  it('should display header "Welcome to DSpace"', () => {
     page.navigateTo();
-    expect(page.getFirstPText()).toEqual('Hello, World!');
+    expect(page.getFirstHeaderText()).toEqual('Welcome to DSpace');
   });
 });

e2e/app.po.ts

@@ -12,4 +12,8 @@ export class ProtractorPage {
   getFirstPText() {
     return element(by.xpath('//p[1]')).getText();
   }
-}
+
+  getFirstHeaderText() {
+    return element(by.xpath('//h1[1]')).getText();
+  }
+}

resources/i18n/en.json

@@ -1,10 +1,4 @@
 {
-  "example": {
-    "with": {
-      "data": "{{greeting}}, {{recipient}}!"
-    }
-  },
-
   "footer": {
     "copyright": "copyright © 2002-{{ year }}",
     "link.dspace": "DSpace software",
@@ -34,5 +28,12 @@
     "link": {
       "home-page": "Take me to the home page"
     }
+  },
+
+  "home": {
+    "top-level-communities": {
+      "head": "Communities in DSpace",
+      "help": "Select a community to browse its collections."
+    }
   }
 }

src/app/app.component.html

@@ -4,12 +4,6 @@
 
     <main class="main-content">
       <div class="container-fluid">
-        <p>{{ 'example.with.data' | translate:data }}</p>
-        <p>{{ example }}</p>
-        <h2 [ngClass]="{ 'red': EnvConfig.production, 'green': !EnvConfig.production }">
-          <span *ngIf="!EnvConfig.production">development</span>
-          <span *ngIf="EnvConfig.production">production</span>
-        </h2>
         <router-outlet></router-outlet>
       </div>
     </main>

src/app/app.component.scss

@@ -15,11 +15,3 @@
 .main-content {
   flex: 1 0 auto;
 }
-
-h2.red {
-  color: red;
-}
-
-h2.green {
-  color: green;
-}

src/app/app.component.spec.ts

@@ -52,8 +52,8 @@ describe('App component', () => {
 
     comp = fixture.componentInstance; // component test instance
 
-    // query for the title <p> by CSS element selector
+    // query for the <div class="outer-wrapper"> by CSS element selector
-    de = fixture.debugElement.query(By.css('p'));
+    de = fixture.debugElement.query(By.css('div.outer-wrapper'));
     el = de.nativeElement;
   });
 

src/app/app.component.ts

@@ -3,7 +3,6 @@ import {
   ChangeDetectionStrategy,
   Inject,
   ViewEncapsulation,
-  OnDestroy,
   OnInit, HostListener
 } from "@angular/core";
 import { TranslateService } from "ng2-translate";
@@ -11,7 +10,7 @@ import { HostWindowState } from "./shared/host-window.reducer";
 import { Store } from "@ngrx/store";
 import { HostWindowResizeAction } from "./shared/host-window.actions";
 
-import { GLOBAL_CONFIG, GlobalConfig } from '../config';
+import { EnvConfig, GLOBAL_CONFIG, GlobalConfig } from '../config';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -20,15 +19,7 @@ import { GLOBAL_CONFIG, GlobalConfig } from '../config';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnDestroy, OnInit {
+export class AppComponent implements OnInit {
-  private translateSubscription: any;
-
-  example: string;
-
-  data: any = {
-    greeting: 'Hello',
-    recipient: 'World'
-  };
 
   constructor(
     @Inject(GLOBAL_CONFIG) public EnvConfig: GlobalConfig,
@@ -42,15 +33,9 @@ export class AppComponent implements OnDestroy, OnInit {
   }
 
   ngOnInit() {
-    this.translateSubscription = this.translate.get('example.with.data', { greeting: 'Hello', recipient: 'DSpace' }).subscribe((translation: string) => {
+    const env: string = EnvConfig.production ? "Production" : "Development";
-      this.example = translation;
+    const color: string = EnvConfig.production ? "red" : "green";
-    });
+    console.info(`Environment: %c${env}`,  `color: ${color}; font-weight: bold;`);
-  }
-
-  ngOnDestroy() {
-    if (this.translateSubscription) {
-      this.translateSubscription.unsubscribe();
-    }
   }
 
   @HostListener('window:resize', ['$event'])

src/app/home/home-news/home-news.component.html

@@ -0,0 +1,19 @@
+<!--.row to offset the app component's .container-fluid padding-->
+<div class="row">
+  <div class="jumbotron jumbotron-fluid">
+    <div class="container-fluid">
+      <h1 class="display-3">Welcome to DSpace</h1>
+      <p class="lead">DSpace is an open source software platform that enables organisations to:</p>
+      <ul>
+        <li>capture and describe digital material using a submission workflow module, or a variety
+          of
+          programmatic ingest options
+        </li>
+        <li>distribute an organisation's digital assets over the web through a search and retrieval
+          system
+        </li>
+        <li>preserve digital assets over the long term</li>
+      </ul>
+    </div>
+  </div>
+</div>

src/app/home/home-news/home-news.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ds-home-news',
+  styleUrls: ['./home-news.component.css'],
+  templateUrl: './home-news.component.html'
+})
+export class HomeNewsComponent implements OnInit {
+  constructor() {
+    this.universalInit();
+  }
+
+  universalInit() {
+
+  }
+
+  ngOnInit(): void {
+  }
+}

src/app/home/home.component.html

@@ -1,3 +1,2 @@
-<div class="home">
+<ds-home-news></ds-home-news>
-  Home component
+<ds-top-level-community-list></ds-top-level-community-list>
-</div>

src/app/home/home.component.ts

@@ -1,16 +1,11 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Default,
-  encapsulation: ViewEncapsulation.Emulated,
   selector: 'ds-home',
   styleUrls: ['./home.component.css'],
   templateUrl: './home.component.html'
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
-
-  data: any = {};
-
   constructor() {
     this.universalInit();
   }
@@ -19,4 +14,6 @@ export class HomeComponent {
 
   }
 
+  ngOnInit(): void {
+  }
 }

src/app/home/home.module.ts

@@ -3,14 +3,22 @@ import { NgModule } from '@angular/core';
 import { HomeComponent } from './home.component';
 import { HomeRoutingModule } from './home-routing.module';
 import { CommonModule } from "@angular/common";
+import { TopLevelCommunityListComponent } from "./top-level-community-list/top-level-community-list.component";
+import { HomeNewsComponent } from "./home-news/home-news.component";
+import { RouterModule } from "@angular/router";
+import { TranslateModule } from "ng2-translate";
 
 @NgModule({
   imports: [
     CommonModule,
-    HomeRoutingModule
+    HomeRoutingModule,
+    RouterModule,
+    TranslateModule
   ],
   declarations: [
-    HomeComponent
+    HomeComponent,
+    TopLevelCommunityListComponent,
+    HomeNewsComponent
   ]
 })
 export class HomeModule { }

src/app/home/top-level-community-list/top-level-community-list.component.html

@@ -0,0 +1,12 @@
+<div *ngIf="topLevelCommunities.hasSucceeded | async">
+  <h2>{{'home.top-level-communities.head' | translate}}</h2>
+  <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
+  <ul>
+    <li *ngFor="let community of (topLevelCommunities.payload | async)">
+      <p>
+        <span class="lead"><a [routerLink]="['/communities', community.id]">{{community.name}}</a></span><br>
+        <span class="text-muted">{{community.shortDescription}}</span>
+      </p>
+    </li>
+  </ul>
+</div>

src/app/home/top-level-community-list/top-level-community-list.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { CommunityDataService } from "../../core/data/community-data.service";
+import { RemoteData } from "../../core/data/remote-data";
+import { Community } from "../../core/shared/community.model";
+
+@Component({
+  selector: 'ds-top-level-community-list',
+  styleUrls: ['./top-level-community-list.component.css'],
+  templateUrl: './top-level-community-list.component.html'
+})
+export class TopLevelCommunityListComponent implements OnInit {
+  topLevelCommunities: RemoteData<Community[]>;
+
+  constructor(
+    private cds: CommunityDataService
+  ) {
+    this.universalInit();
+  }
+
+  universalInit() {
+
+  }
+
+  ngOnInit(): void {
+    this.topLevelCommunities = this.cds.findAll();
+  }
+}