From cb72e4db0749e8ae74e3f8151b50535bbaa911ca Mon Sep 17 00:00:00 2001
From: William Welling <wwelling@library.tamu.edu>
Date: Thu, 5 Oct 2017 08:24:19 -0500
Subject: [PATCH] initial i18n messages for loading and error components

---
 resources/i18n/en.json                        | 12 ++++----
 .../collection-page.component.html            |  8 ++---
 .../community-page.component.html             |  4 +--
 ...ty-page-sub-collection-list.component.html |  4 +--
 .../top-level-community-list.component.html   |  4 +--
 .../full/full-item-page.component.html        |  4 +--
 .../simple/item-page.component.html           |  4 +--
 .../object-list/object-list.component.html    |  4 +--
 src/app/shared/error/error.component.spec.ts  | 13 ++++++++
 src/app/shared/error/error.component.ts       | 24 +++++++++++++++
 src/app/shared/loading/loading.component.scss |  3 +-
 .../shared/loading/loading.component.spec.ts  | 13 ++++++++
 src/app/shared/loading/loading.component.ts   | 30 +++++++++++++++++--
 13 files changed, 101 insertions(+), 26 deletions(-)

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index 2dfaa4dfb1..e59f758ebc 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -79,24 +79,24 @@
       "title": "Search Results"
     }
   },
-  "loader": {
+  "loading": {
     "default": "Loading...",
     "top-level-communities": "Loading top level communities...",
     "community": "Loading community...",
     "collection": "Loading collection...",
-    "sub-collection": "Loading sub-collections...",
+    "sub-collections": "Loading sub-collections...",
     "items": "Loading items...",
     "item": "Loading item...",
-    "object-list": "Loading..."
+    "objects": "Loading..."
   },
   "error": {
-    "default": "Error...",
+    "default": "Error",
     "top-level-communities": "Error fetching top level communities",
     "community": "Error fetching community",
     "collection": "Error fetching collection",
-    "sub-collection": "Error fetching sub-collections",
+    "sub-collections": "Error fetching sub-collections",
     "items": "Error fetching items",
     "item": "Error fetching item",
-    "object-list": "Error fetching"
+    "objects": "Error fetching"
   }
 }
diff --git a/src/app/+collection-page/collection-page.component.html b/src/app/+collection-page/collection-page.component.html
index 5037da99c4..e385de08b4 100644
--- a/src/app/+collection-page/collection-page.component.html
+++ b/src/app/+collection-page/collection-page.component.html
@@ -33,8 +33,8 @@
       </ds-comcol-page-content>
     </div>
   </div>
-  <ds-error *ngIf="collectionData.hasFailed | async" message="Error fetching collection"></ds-error>
-  <ds-loading *ngIf="collectionData.isLoading | async" message="Loading collection..."></ds-loading>
+  <ds-error *ngIf="collectionData.hasFailed | async" message="{{'error.collection' | translate}}"></ds-error>
+  <ds-loading *ngIf="collectionData.isLoading | async" message="{{'loading.collection' | translate}}"></ds-loading>
   <br>
   <div *ngIf="itemData.hasSucceeded | async" @fadeIn>
     <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
@@ -45,6 +45,6 @@
       [hideGear]="false">
     </ds-object-list>
   </div>
-  <ds-error *ngIf="itemData.hasFailed | async" message="Error fetching items"></ds-error>
-  <ds-loading *ngIf="itemData.isLoading | async" message="Loading items..."></ds-loading>
+  <ds-error *ngIf="itemData.hasFailed | async" message="{{'error.items' | translate}}"></ds-error>
+  <ds-loading *ngIf="itemData.isLoading | async" message="{{'loading.items' | translate}}"></ds-loading>
 </div>
diff --git a/src/app/+community-page/community-page.component.html b/src/app/+community-page/community-page.component.html
index 6795058d02..3935ffccae 100644
--- a/src/app/+community-page/community-page.component.html
+++ b/src/app/+community-page/community-page.component.html
@@ -26,5 +26,5 @@
     <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
   </div>
 </div>
-<ds-error *ngIf="communityData.hasFailed | async" message="Error fetching community"></ds-error>
-<ds-loading *ngIf="communityData.isLoading | async" message="Loading community..."></ds-loading>
+<ds-error *ngIf="communityData.hasFailed | async" message="{{'error.community' | translate}}"></ds-error>
+<ds-loading *ngIf="communityData.isLoading | async" message="{{'loading.community' | translate}}"></ds-loading>
diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
index 4a965d908f..31dc2cd326 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
@@ -9,5 +9,5 @@
     </li>
   </ul>
 </div>
-<ds-error *ngIf="subCollections.hasFailed | async" message="Error fetching sub-collections"></ds-error>
-<ds-loading *ngIf="subCollections.isLoading | async" message="Loading sub-collections..."></ds-loading>
+<ds-error *ngIf="subCollections.hasFailed | async" message="{{'error.sub-collections' | translate}}"></ds-error>
+<ds-loading *ngIf="subCollections.isLoading | async" message="{{'loading.sub-collections' | translate}}"></ds-loading>
diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
index 69df3b99d0..a5bd6c5c5d 100644
--- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
+++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html
@@ -9,5 +9,5 @@
     (paginationChange)="updatePage($event)">
   </ds-object-list>
 </div>
-<ds-error *ngIf="topLevelCommunities.hasFailed | async" message="Error fetching top level communities"></ds-error>
-<ds-loading *ngIf="topLevelCommunities.isLoading | async" message="Loading top level communities..."></ds-loading>
\ No newline at end of file
+<ds-error *ngIf="topLevelCommunities.hasFailed | async" message="{{'error.top-level-communites' | translate}}"></ds-error>
+<ds-loading *ngIf="topLevelCommunities.isLoading | async" message="{{'loading.top-level-communities' | translate}}"></ds-loading>
\ No newline at end of file
diff --git a/src/app/+item-page/full/full-item-page.component.html b/src/app/+item-page/full/full-item-page.component.html
index 51979ebe3f..6a209566b7 100644
--- a/src/app/+item-page/full/full-item-page.component.html
+++ b/src/app/+item-page/full/full-item-page.component.html
@@ -19,5 +19,5 @@
     <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
   </div>
 </div>
-<ds-error *ngIf="item.hasFailed | async" message="Error fetching item"></ds-error>
-<ds-loading *ngIf="item.isLoading | async" message="Loading item..."></ds-loading>
+<ds-error *ngIf="item.hasFailed | async" message="{{'error.item' | translate}}"></ds-error>
+<ds-loading *ngIf="item.isLoading | async" message="{{'loading.item' | translate}}"></ds-loading>
diff --git a/src/app/+item-page/simple/item-page.component.html b/src/app/+item-page/simple/item-page.component.html
index 8b41c9017d..10ceec2a6f 100644
--- a/src/app/+item-page/simple/item-page.component.html
+++ b/src/app/+item-page/simple/item-page.component.html
@@ -23,5 +23,5 @@
     </div>
   </div>
 </div>
-<ds-error *ngIf="item.hasFailed | async" message="Error fetching item"></ds-error>
-<ds-loading *ngIf="item.isLoading | async" message="Loading item..."></ds-loading>
+<ds-error *ngIf="item.hasFailed | async" message="{{'error.item' | translate}}"></ds-error>
+<ds-loading *ngIf="item.isLoading | async" message="{{'loading.item' | translate}}"></ds-loading>
diff --git a/src/app/object-list/object-list.component.html b/src/app/object-list/object-list.component.html
index 6ef14d103c..84c800fef4 100644
--- a/src/app/object-list/object-list.component.html
+++ b/src/app/object-list/object-list.component.html
@@ -15,6 +15,6 @@
           <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
       </li>
   </ul>
-  <ds-error *ngIf="objects.hasFailed | async" message="Error fetching"></ds-error>
-  <ds-loading *ngIf="objects.isLoading | async" message="Loading..."></ds-loading>
+  <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
+  <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
 </ds-pagination>
diff --git a/src/app/shared/error/error.component.spec.ts b/src/app/shared/error/error.component.spec.ts
index 73a4e5a26e..a0226f7f86 100644
--- a/src/app/shared/error/error.component.spec.ts
+++ b/src/app/shared/error/error.component.spec.ts
@@ -2,6 +2,10 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
+import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
+
+import { MockTranslateLoader } from '../testing/mock-translate-loader';
+
 import { ErrorComponent } from './error.component';
 
 describe('ErrorComponent (inline template)', () => {
@@ -13,7 +17,16 @@ describe('ErrorComponent (inline template)', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        }),
+      ],
       declarations: [ ErrorComponent ], // declare the test component
+      providers: [ TranslateService ]
     }).compileComponents();  // compile template and css
   }));
 
diff --git a/src/app/shared/error/error.component.ts b/src/app/shared/error/error.component.ts
index b65979f7b0..08d06c31d6 100644
--- a/src/app/shared/error/error.component.ts
+++ b/src/app/shared/error/error.component.ts
@@ -1,5 +1,9 @@
 import { Component, Input } from '@angular/core';
 
+import { TranslateService } from '@ngx-translate/core';
+
+import { Subscription } from 'rxjs/Subscription';
+
 @Component({
   selector: 'ds-error',
   styleUrls: ['./error.component.scss'],
@@ -9,4 +13,24 @@ export class ErrorComponent {
 
   @Input() message = 'Error...';
 
+  private subscription: Subscription;
+
+  constructor(private translate: TranslateService) {
+
+  }
+
+  ngOnInit() {
+    if (this.message === undefined) {
+      this.subscription = this.translate.get('error.default').subscribe((message: string) => {
+        this.message = message;
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.subscription !== undefined) {
+      this.subscription.unsubscribe();
+    }
+  }
+
 }
diff --git a/src/app/shared/loading/loading.component.scss b/src/app/shared/loading/loading.component.scss
index bb98849cae..c9ccb5b2fa 100644
--- a/src/app/shared/loading/loading.component.scss
+++ b/src/app/shared/loading/loading.component.scss
@@ -8,7 +8,8 @@ span {
 }
 
 span[class*="l-"] {
-	height: 4px; width: 4px;
+	height: 4px;
+	width: 4px;
 	background: #000;
 	display: inline-block;
 	margin: 12px 2px;
diff --git a/src/app/shared/loading/loading.component.spec.ts b/src/app/shared/loading/loading.component.spec.ts
index ed39708fbe..0b758b8218 100644
--- a/src/app/shared/loading/loading.component.spec.ts
+++ b/src/app/shared/loading/loading.component.spec.ts
@@ -2,6 +2,10 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
+import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
+
+import { MockTranslateLoader } from '../testing/mock-translate-loader';
+
 import { LoadingComponent } from './loading.component';
 
 describe('LoadingComponent (inline template)', () => {
@@ -13,7 +17,16 @@ describe('LoadingComponent (inline template)', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        }),
+      ],
       declarations: [ LoadingComponent ], // declare the test component
+      providers: [ TranslateService ]
     }).compileComponents();  // compile template and css
   }));
 
diff --git a/src/app/shared/loading/loading.component.ts b/src/app/shared/loading/loading.component.ts
index 6bc7d99f4b..8276ab574a 100644
--- a/src/app/shared/loading/loading.component.ts
+++ b/src/app/shared/loading/loading.component.ts
@@ -1,12 +1,36 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'ds-loading',
   styleUrls: ['./loading.component.scss'],
   templateUrl: './loading.component.html'
 })
-export class LoadingComponent {
+export class LoadingComponent implements OnDestroy, OnInit {
 
-  @Input() message = 'Loading...';
+  @Input() message: string;
+
+  private subscription: Subscription;
+
+  constructor(private translate: TranslateService) {
+
+  }
+
+  ngOnInit() {
+    if (this.message === undefined) {
+      this.subscription = this.translate.get('loading.default').subscribe((message: string) => {
+        this.message = message;
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.subscription !== undefined) {
+      this.subscription.unsubscribe();
+    }
+  }
 
 }