initial i18n messages for loading and error components

This commit is contained in:
William Welling
2017-10-05 08:24:19 -05:00
parent 5b45871bff
commit cb72e4db07
13 changed files with 101 additions and 26 deletions

View File

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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>
<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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

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

View File

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

View File

@@ -8,7 +8,8 @@ span {
}
span[class*="l-"] {
height: 4px; width: 4px;
height: 4px;
width: 4px;
background: #000;
display: inline-block;
margin: 12px 2px;

View File

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

View File

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