gh-522 Update footer layout

package.json

@@ -7,10 +7,10 @@
     "build": "ng build",
     "dist": "ng build --configuration production --output-path=dist/mdm-ui-$npm_package_version$([ -z \"$MDM_UI_THEME_NAME\" ] && echo \"\" || echo \"-$MDM_UI_THEME_NAME\") && npm run dist-archive",
     "dist-archive": "tar zcvf dist/mdm-ui-$npm_package_version$([ -z \"$MDM_UI_THEME_NAME\" ] && echo \"\" || echo \".$MDM_UI_THEME_NAME\").tgz -C dist mdm-ui-$npm_package_version$([ -z \"$MDM_UI_THEME_NAME\" ] && echo \"\" || echo \"-$MDM_UI_THEME_NAME\")",
-    "test": "jest",
-    "test-with-coverage": "jest --coverage",
-    "test-watch": "jest --watch",
-    "test-clearCache": "jest --clearCache",
+    "test": "ng test",
+    "test:watch": "ng test --watch",
+    "test-clearCache": "ng test --clearCache",
+    "test-with-coverage": "ng test --coverage",
     "lint": "ng lint",
     "eslint": "tsc --noEmit && eslint . --ext ts --fix",
     "eslint-nofix": "tsc --noEmit && eslint . --ext ts",
@@ -19,7 +19,8 @@
     "e2e": "ng e2e",
     "postinstall": "ngcc",
     "sonar": "sonar-scanner -Dsonar.projectVersion=$npm_package_version",
-    "license-check": "license-check-and-add -f license-check-and-add-config.json"
+    "license-check": "license-check-and-add -f license-check-and-add-config.json",
+    "pr-checks": "npm run license-check check && npm run eslint && npm run test"
   },
   "private": true,
   "dependencies": {

src/app/about/about.component.html

@@ -17,8 +17,18 @@
 SPDX-License-Identifier: Apache-2.0
 -->
 <div class="container">
-    <ngx-skeleton-loader *ngIf="isLoadingContent" count="3"></ngx-skeleton-loader>
-    <h2><span *ngIf="!isLoadingContent" [innerHTML]="applicationName | safe:'html'"></span> &nbsp;<span style="font-size: 14px;">version {{appVersion}}</span></h2>
-    <div *ngIf="!isLoadingContent" [innerHTML]="content | safe:'html'"></div>
-    <p *ngIf="!isLoadingContent" [innerHTML]="contactDetails | safe:'html'"></p>
+  <ngx-skeleton-loader *ngIf="isLoadingContent" count="3"></ngx-skeleton-loader>
+  <h2>
+    <span
+      *ngIf="!isLoadingContent"
+      [innerHTML]="applicationName | safe: 'html'"
+    ></span>
+    &nbsp;<span style="font-size: 14px">version {{ appVersion }}</span>
+  </h2>
+  <div
+    *ngIf="!isLoadingContent"
+    [innerHTML]="content | safe: 'html'"
+    class="clearfix"
+  ></div>
+  <p *ngIf="!isLoadingContent" [innerHTML]="contactDetails | safe: 'html'"></p>
 </div>

src/app/app.component.html

@@ -17,13 +17,18 @@
 SPDX-License-Identifier: Apache-2.0
 -->
 <div class="mdm-root" [class]="themeCssSelector">
-    <div class="mat-typography mdm-app-component">
-        <mdm-navbar></mdm-navbar>
+  <div class="mat-typography mdm-app-component">
+    <mdm-navbar></mdm-navbar>
 
-        <main ui-view></main>
+    <main ui-view></main>
 
-        <mdm-footer class="mdm-footer"></mdm-footer>
+    <mdm-footer
+      class="app-footer"
+      [version]="appVersion"
+      [copyright]="copyright"
+      [links]="footerLinks"
+    ></mdm-footer>
 
-        <mdm-loading-indicator></mdm-loading-indicator>
-    </div>
-</div>
+    <mdm-loading-indicator></mdm-loading-indicator>
+  </div>
+</div>

src/app/app.component.ts

@@ -18,14 +18,28 @@ SPDX-License-Identifier: Apache-2.0
 */
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import {
+  ApiProperty,
+  ApiPropertyIndexResponse
+} from '@maurodatamapper/mdm-resources';
 import { UserIdleService } from 'angular-user-idle';
 import { ToastrService } from 'ngx-toastr';
-import { forkJoin, of, Subject } from 'rxjs';
-import { switchMap, takeUntil } from 'rxjs/operators';
-import { BroadcastService, StateHandlerService, UserSettingsHandlerService } from './services';
+import { forkJoin, Observable, of, Subject } from 'rxjs';
+import { catchError, map, switchMap, takeUntil } from 'rxjs/operators';
+import { MdmResourcesService } from './modules/resources';
+import {
+  BroadcastService,
+  StateHandlerService,
+  UserSettingsHandlerService
+} from './services';
 import { EditingService } from './services/editing.service';
+import { FeaturesService } from './services/features.service';
 import { SharedService } from './services/shared.service';
 import { ThemingService } from './services/theming.service';
+import { FooterLink } from './shared/footer/footer.component';
+
+const defaultCopyright =
+  'Clinical Informatics, NIHR Oxford Biomedical Research Centre';
 
 @Component({
   selector: 'mdm-root',
@@ -38,22 +52,28 @@ export class AppComponent implements OnInit, OnDestroy {
   themeCssSelector: string;
   lastUserIdleCheck: Date = new Date();
 
+  footerLinks: FooterLink[] = [];
+  appVersion?: string;
+  copyright?: string;
+
   /**
    * Signal to attach to subscriptions to trigger when they should be unsubscribed.
    */
   private unsubscribe$ = new Subject();
 
   constructor(
     private userIdle: UserIdleService,
-    private sharedService: SharedService,
+    private shared: SharedService,
     private editingService: EditingService,
     private theming: ThemingService,
     private overlayContainer: OverlayContainer,
     private broadcast: BroadcastService,
     private toastr: ToastrService,
     private stateHandler: StateHandlerService,
-    private userSettingsHandler: UserSettingsHandlerService) { }
-
+    private userSettingsHandler: UserSettingsHandlerService,
+    private resources: MdmResourcesService,
+    private features: FeaturesService
+  ) {}
 
   @HostListener('window:mousemove', ['$event'])
   onMouseMove() {
@@ -80,22 +100,25 @@ export class AppComponent implements OnInit, OnDestroy {
       .onUserLoggedIn()
       .pipe(
         takeUntil(this.unsubscribe$),
-        switchMap(args => {
+        switchMap((args) => {
           const settings$ = this.userSettingsHandler.loadForCurrentUser();
-          return forkJoin([
-            of(args),
-            settings$
-          ]);
+          return forkJoin([of(args), settings$]);
         })
       )
       .subscribe(([args, _]) => {
         // To remove any ngToast messages specifically sessionExpiry,...
-        this.toastr.toasts.forEach(x => this.toastr.clear(x.toastId));
+        this.toastr.toasts.forEach((x) => this.toastr.clear(x.toastId));
         if (args && args.nextRoute) {
-          this.stateHandler.Go(args.nextRoute, {}, { reload: true, inherit: false, notify: true });
+          this.stateHandler.Go(
+            args.nextRoute,
+            {},
+            { reload: true, inherit: false, notify: true }
+          );
         }
       });
 
+    this.setupFooter();
+
     this.setupIdleTimer();
   }
 
@@ -104,21 +127,65 @@ export class AppComponent implements OnInit, OnDestroy {
     this.unsubscribe$.complete();
   }
 
+  private setupFooter() {
+    const request$: Observable<ApiPropertyIndexResponse> = this.resources.apiProperties.listPublic();
+
+    request$
+      .pipe(
+        catchError(() => []),
+        map((response: ApiPropertyIndexResponse) => response.body.items),
+        map((apiProperties: ApiProperty[]) => {
+          return {
+            copyright: apiProperties.find(
+              (p) => p.key === 'content.footer.copyright'
+            ),
+            documentationUrl: this.shared.documentation?.url,
+            issueReportingUrl:
+              this.features.useIssueReporting &&
+              this.shared.issueReporting?.defaultUrl
+          };
+        })
+      )
+      .subscribe((config) => {
+        if (config.documentationUrl) {
+          this.footerLinks.push({
+            label: 'Documentation',
+            href: config.documentationUrl,
+            target: '_blank'
+          });
+        }
+
+        if (config.issueReportingUrl) {
+          this.footerLinks.push({
+            label: 'Report issue',
+            href: config.issueReportingUrl,
+            target: '_blank'
+          });
+        }
+
+        this.appVersion = this.shared.appVersion;
+        this.copyright = config.copyright?.value ?? defaultCopyright;
+      });
+  }
+
   private setupIdleTimer() {
     this.userIdle.startWatching();
     this.userIdle
       .onTimerStart()
       .pipe(takeUntil(this.unsubscribe$))
-      .subscribe(() => { });
+      .subscribe(() => {});
 
     this.userIdle
       .onTimeout()
       .pipe(takeUntil(this.unsubscribe$))
       .subscribe(() => {
         const now = new Date();
 
-        if (now.valueOf() - this.lastUserIdleCheck.valueOf() > this.sharedService.checkSessionExpiryTimeout) {
-          this.sharedService.handleExpiredSession();
+        if (
+          now.valueOf() - this.lastUserIdleCheck.valueOf() >
+          this.shared.checkSessionExpiryTimeout
+        ) {
+          this.shared.handleExpiredSession();
           this.userIdle.resetTimer();
         }
 
@@ -131,7 +198,11 @@ export class AppComponent implements OnInit, OnDestroy {
 
     // Material theme is wrapped inside a CSS class but the overlay container is not part of Angular
     // Material. Have to manually set the correct theme class to this container too
-    this.overlayContainer.getContainerElement().classList.add(this.themeCssSelector);
-    this.overlayContainer.getContainerElement().classList.add('overlay-container');
+    this.overlayContainer
+      .getContainerElement()
+      .classList.add(this.themeCssSelector);
+    this.overlayContainer
+      .getContainerElement()
+      .classList.add('overlay-container');
   }
 }

src/app/modules/shared/shared.module.ts

@@ -91,7 +91,8 @@ import { ElementIconComponent } from '@mdm/shared/element-icon/element-icon.comp
     FlexLayoutModule,
     ReactiveFormsModule,
     NgxSkeletonLoaderModule,
-    CodemirrorModule
+    CodemirrorModule,
+    UIRouterModule
   ],
   exports: [
     EditableFormButtonsComponent,

src/app/shared/footer/footer.component.html

@@ -16,24 +16,34 @@
 
 SPDX-License-Identifier: Apache-2.0
 -->
-<footer>
-    <div class="container">
-        <div class="footer--container" flex fxLayout="row" fxLayoutAlign="space-between">
-            <div class="footer--logo">
-                <p class="text-muted">Powered by:</p>
-                <img class="mdm-logo" src="assets/images/mdm-logo.png" alt="Mauro Data Mapper logo" />
-            </div>
-            <div>
-                <div class="footer--box" flex fxLayout="column" fxLayoutAlign="space-between">
-                    <div class="footer--links">
-                        <a *ngIf="documentation && documentation.url" href="{{documentation.url}}" target="_blank" rel="noopener">Documentation</a>
-                        <a *ngIf="features.useIssueReporting && issueReporting.defaultUrl && issueReporting.defaultUrl.length > 0" href="{{issueReporting.defaultUrl}}" target="_blank" rel="noopener">Report Issue</a>
-                    </div>
-                </div>
-                <div class="footer--box mt-2">
-                    <small class="text-muted">{{copyright}}</small>
-                </div>
-            </div>
-        </div>
+<footer class="mdm-footer">
+  <div class="mdm-footer__container">
+    <div class="mdm-footer__main">
+      <div *ngIf="links" class="mdm-footer__main--links">
+        <ul>
+          <li *ngFor="let link of links">
+            <a
+              *ngIf="link.href"
+              [href]="link.href"
+              [target]="link.target ?? '_blank'"
+              >{{ link.label }}</a
+            >
+            <a
+              [id]="link.routerLink"
+              *ngIf="link.routerLink"
+              [uiSref]="link.routerLink"
+              [target]="link.target ?? '_blank'"
+              >{{ link.label }}</a
+            >
+          </li>
+        </ul>
+      </div>
+      <div *ngIf="version" class="mdm-footer__main--text">
+        <small>Version {{ version }}</small>
+      </div>
+      <div class="mdm-footer__main--text">
+        <small>Copyright &copy; {{ year }} {{ copyright }}</small>
+      </div>
     </div>
+  </div>
 </footer>

src/app/shared/footer/footer.component.scss

@@ -16,3 +16,71 @@ limitations under the License.
 
 SPDX-License-Identifier: Apache-2.0
 */
+@use '~@angular/material' as mat;
+
+@mixin mdm-footer-theme($theme) {
+  $primary: map-get($theme, primary);
+
+  .mdm-footer {
+    background-color: mat.get-color-from-palette($primary);
+  }
+}
+
+$footer-gap: 3rem;
+$muted-text-color: #6c757d;
+$link-color: white;
+$link-fontweight: 400;
+$link-fontsize: 80%;
+
+.mdm-footer {
+  padding: 0 $footer-gap;
+  margin: $footer-gap 0 0;
+
+  &__container {
+    border-top: 1px solid $muted-text-color;
+    padding: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  &__main {
+    &--links {
+      flex: 1;
+      width: 100%;
+
+      & > ul {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        list-style-image: none;
+        padding-inline-start: 0;
+
+        & > li {
+          padding: 0rem 0;
+          white-space: nowrap;
+
+          & > a {
+            display: flex;
+            flex-direction: column;
+            align-items: initial;
+            justify-content: left;
+            text-align: left;
+            padding: 0 2.2rem 0 0;
+            color: $link-color;
+            font-size: $link-fontsize;
+            font-weight: $link-fontweight;
+          }
+        }
+      }
+    }
+
+    &--text {
+      & > small {
+        color: $link-color;
+        font-size: $link-fontsize;
+        font-weight: $link-fontweight;
+      }
+    }
+  }
+}