initial i18n messages for loading and error components

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"
   }
 }

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-error *ngIf="collectionData.hasFailed | async" message="{{'error.collection' | translate}}"></ds-error>
-  <ds-loading *ngIf="collectionData.isLoading | async" message="Loading collection..."></ds-loading>
+  <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-error *ngIf="itemData.hasFailed | async" message="{{'error.items' | translate}}"></ds-error>
-  <ds-loading *ngIf="itemData.isLoading | async" message="Loading items..."></ds-loading>
+  <ds-loading *ngIf="itemData.isLoading | async" message="{{'loading.items' | translate}}"></ds-loading>
 </div>

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-error *ngIf="communityData.hasFailed | async" message="{{'error.community' | translate}}"></ds-error>
-<ds-loading *ngIf="communityData.isLoading | async" message="Loading community..."></ds-loading>
+<ds-loading *ngIf="communityData.isLoading | async" message="{{'loading.community' | translate}}"></ds-loading>

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-error *ngIf="subCollections.hasFailed | async" message="{{'error.sub-collections' | translate}}"></ds-error>
-<ds-loading *ngIf="subCollections.isLoading | async" message="Loading sub-collections..."></ds-loading>
+<ds-loading *ngIf="subCollections.isLoading | async" message="{{'loading.sub-collections' | translate}}"></ds-loading>

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-error *ngIf="topLevelCommunities.hasFailed | async" message="{{'error.top-level-communites' | translate}}"></ds-error>
-<ds-loading *ngIf="topLevelCommunities.isLoading | async" message="Loading top level communities..."></ds-loading>
+<ds-loading *ngIf="topLevelCommunities.isLoading | async" message="{{'loading.top-level-communities' | translate}}"></ds-loading>

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-error *ngIf="item.hasFailed | async" message="{{'error.item' | translate}}"></ds-error>
-<ds-loading *ngIf="item.isLoading | async" message="Loading item..."></ds-loading>
+<ds-loading *ngIf="item.isLoading | async" message="{{'loading.item' | translate}}"></ds-loading>

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-error *ngIf="item.hasFailed | async" message="{{'error.item' | translate}}"></ds-error>
-<ds-loading *ngIf="item.isLoading | async" message="Loading item..."></ds-loading>
+<ds-loading *ngIf="item.isLoading | async" message="{{'loading.item' | translate}}"></ds-loading>

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-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
-  <ds-loading *ngIf="objects.isLoading | async" message="Loading..."></ds-loading>
+  <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
 </ds-pagination>

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
   }));
 

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();
+    }
+  }
+
 }

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;

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
   }));
 

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();
+    }
+  }
 
 }