Footer component

resources/i18n/en.json

@@ -1,14 +1,22 @@
 {
-  "title": "DSpace",
-  "nav": {
-    "home": "Home"
-  },
   "example": {
     "with": {
       "data": "{{greeting}}, {{recipient}}!"
     }
   },
 
+  "footer": {
+    "copyright": "copyright © 2002-{{ year }}",
+    "link.dspace": "DSpace software",
+    "link.duraspace": "DuraSpace"
+  },
+
+  "nav": {
+    "home": "Home"
+  },
+
+  "title": "DSpace",
+
   "404": {
     "help": "We can't find the page you're looking for. The page may have been moved or deleted. You can use the button below to get back to the home page. ",
     "page-not-found": "page not found",

src/app/app.component.html

@@ -1,11 +1,17 @@
-<ds-header></ds-header>
+<div class="outer-wrapper">
+  <div class="inner-wrapper">
+    <ds-header></ds-header>
 
-<div class="container-fluid">
+    <main class="main-content">
-  <main>
+      <div class="container-fluid">
-    <p>{{ 'example.with.data' | translate:data }}</p>
+        <p>{{ 'example.with.data' | translate:data }}</p>
-    <p>{{ example }}</p>
+        <p>{{ example }}</p>
-    <h2 *ngIf="!env" style="color:green">development</h2>
+        <h2 *ngIf="!env" style="color:green">development</h2>
-    <h2 *ngIf="env" style="color:red">production</h2>
+        <h2 *ngIf="env" style="color:red">production</h2>
-    <router-outlet></router-outlet>
+        <router-outlet></router-outlet>
-  </main>
+      </div>
+    </main>
+
+    <ds-footer></ds-footer>
+  </div>
 </div>

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
-import { HomeModule } from './home/home.module';
 
+import { CoreModule } from './core/core.module';
+import { HomeModule } from './home/home.module';
 
 import { SharedModule } from './shared/shared.module';
 
@@ -24,6 +25,7 @@ import { effects } from './app.effects';
   ],
   imports: [
     SharedModule,
+    CoreModule,
     HomeModule,
     AppRoutingModule,
     /**
@@ -55,6 +57,7 @@ import { effects } from './app.effects';
 
     effects
   ],
+  exports: [SharedModule],
   providers: [
   ]
 })

src/app/core/core.module.ts

@@ -0,0 +1,18 @@
+import { NgModule }     from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SharedModule } from '../shared/shared.module';
+
+import { FooterComponent } from './footer/footer.component';
+
+@NgModule({
+  imports: [
+    CommonModule, // we use ngFor
+    SharedModule
+  ],
+  exports: [FooterComponent],
+  declarations: [FooterComponent],
+  providers: []
+})
+
+export class CoreModule { }

src/app/core/footer/footer.component.html

@@ -0,0 +1,9 @@
+<footer class="footer">
+  <div class="container-fluid content-container-fluid">
+    <p>
+      <a href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+      {{ 'footer.copyright' | translate:{year : dateObj | date:'y'} }}
+      <a href="http://www.duraspace.org/">{{ 'footer.link.duraspace' | translate}}</a>
+    </p>
+  </div>
+</footer>

src/app/core/footer/footer.component.scss

@@ -0,0 +1,11 @@
+@import '../../../styles/variables.scss';
+
+.footer {
+  /* just for demo */
+  background-color: #F8F8F8;
+  border-top: 1px solid #E7E7E7;
+  text-align:center;
+  padding:20px;
+  /* just for demo */
+
+}

src/app/core/footer/footer.component.spec.ts

@@ -0,0 +1,60 @@
+// ... test imports
+import {
+  async,
+  ComponentFixture,
+  inject,
+  TestBed
+} from '@angular/core/testing';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  DebugElement
+} from "@angular/core";
+import { By } from '@angular/platform-browser';
+import { TranslateModule, TranslateLoader } from "ng2-translate";
+import { Store, StoreModule } from "@ngrx/store";
+
+// Load the implementations that should be tested
+import { FooterComponent } from './footer.component';
+
+import { CommonModule } from '@angular/common';
+import { MockTranslateLoader } from "../../shared/testing/mock-translate-loader";
+
+let comp: FooterComponent;
+let fixture: ComponentFixture<FooterComponent>;
+let de: DebugElement;
+let el: HTMLElement;
+
+describe('Footer component', () => {
+
+  // async beforeEach
+  beforeEach(async(() => {
+    return TestBed.configureTestingModule({
+      imports: [CommonModule, StoreModule.provideStore({}), TranslateModule.forRoot({
+        provide: TranslateLoader,
+        useClass: MockTranslateLoader
+      })],
+      declarations: [FooterComponent], // declare the test component
+      providers: [
+        FooterComponent
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+
+    comp = fixture.componentInstance; // component test instance
+
+    // query for the title <p> by CSS element selector
+    de = fixture.debugElement.query(By.css('p'));
+    el = de.nativeElement;
+  });
+
+  it('should create footer', inject([FooterComponent], (app: FooterComponent) => {
+    // Perform test using fixture and service
+    expect(app).toBeTruthy();
+  }));
+
+});

src/app/core/footer/footer.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: 'ds-footer',
+  styleUrls: ['footer.component.css'],
+  templateUrl: 'footer.component.html'
+})
+export class FooterComponent implements OnInit {
+
+  dateObj: number = Date.now();
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/styles/main.scss

@@ -8,3 +8,22 @@ html {
   position: relative;
   min-height: 100%;
 }
+
+// Sticky Footer
+
+.outer-wrapper {
+  display: flex;
+  margin: 0;
+}
+
+.inner-wrapper {
+  flex: 1 1 auto;
+  flex-flow: column nowrap;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1 0 auto;
+}