adding i18n to loading and errror messages (wip)

resources/i18n/en.json

@@ -78,5 +78,25 @@
     "results": {
       "title": "Search Results"
     }
+  },
+  "loader": {
+    "default": "Loading...",
+    "top-level-communities": "Loading top level communities...",
+    "community": "Loading community...",
+    "collection": "Loading collection...",
+    "sub-collection": "Loading sub-collections...",
+    "items": "Loading items...",
+    "item": "Loading item...",
+    "object-list": "Loading..."
+  },
+  "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",
+    "items": "Error fetching items",
+    "item": "Error fetching item",
+    "object-list": "Error fetching"
   }
 }

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

src/app/+item-page/full/full-item-page.component.html

 <div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
-  <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
-  <div class="simple-view-link">
-    <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + (item.payload | async)?.id]">
-      {{"item.page.link.simple" | translate}}
-    </a>
+  <div *ngIf="item.payload | async; let itemPayload">
+    <ds-item-page-title-field [item]="itemPayload | async"></ds-item-page-title-field>
+    <div class="simple-view-link">
+      <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + itemPayload.id]">
+        {{"item.page.link.simple" | translate}}
+      </a>
+    </div>
+    <table class="table table-responsive table-striped">
+      <tbody>
+        <tr *ngFor="let metadatum of (metadata | async)">
+          <td>{{metadatum.key}}</td>
+          <td>{{metadatum.value}}</td>
+          <td>{{metadatum.language}}</td>
+        </tr>
+      </tbody>
+    </table>
+    <ds-item-page-full-file-section [item]="itemPayload"></ds-item-page-full-file-section>
+    <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
   </div>
-  <table class="table table-responsive table-striped">
-    <tbody>
-      <tr *ngFor="let metadatum of (metadata | async)">
-        <td>{{metadatum.key}}</td>
-        <td>{{metadatum.value}}</td>
-        <td>{{metadatum.language}}</td>
-      </tr>
-    </tbody>
-  </table>
-  <ds-item-page-full-file-section [item]="item.payload | async"></ds-item-page-full-file-section>
-  <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
 </div>
 <ds-error *ngIf="item.hasFailed | async" message="Error fetching item"></ds-error>
 <ds-loading *ngIf="item.isLoading | async" message="Loading item..."></ds-loading>

src/app/shared/error/error.component.html

 <div>
-  <span>{{ message }}</span>
+  <label>{{ message }}</label>
 </div>

src/app/shared/error/error.component.spec.ts

@@ -22,8 +22,8 @@ describe('ErrorComponent (inline template)', () => {
 
     comp = fixture.componentInstance; // ErrorComponent test instance
 
-    // query for the message <span> by CSS element selector
-    de = fixture.debugElement.query(By.css('span'));
+    // query for the message <label> by CSS element selector
+    de = fixture.debugElement.query(By.css('label'));
     el = de.nativeElement;
   });
 

src/app/shared/loading/loading.component.html

 <div>
-  <span>{{ message }}</span>
+  <label>{{ message }}</label>
   <div class="loader">
     <span class="l-1"></span>
     <span class="l-2"></span>

src/app/shared/loading/loading.component.spec.ts

@@ -22,8 +22,8 @@ describe('LoadingComponent (inline template)', () => {
 
     comp = fixture.componentInstance; // LoadingComponent test instance
 
-    // query for the message <span> by CSS element selector
-    de = fixture.debugElement.query(By.css('span'));
+    // query for the message <label> by CSS element selector
+    de = fixture.debugElement.query(By.css('label'));
     el = de.nativeElement;
   });