Merge pull request #102 from scottbot95/i18n

Internationalization Readiness

package.json

@@ -55,7 +55,8 @@
     "e2e": "npm-run-all build:prod e2e:run",
     "e2e:ci": "npm-run-all \"build:prod --progress=false\" e2e:run",
     "e2e:run": "mocha --timeout 300000 --require ts-node/register e2e/**/*.spec.ts",
-    "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
+    "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
+    "extract-i18n": "ngx-translate-extract --input ./src --output ./src/assets/i18n/*.json --clean --sort --format namespaced-json --marker _"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.13.9",
@@ -73,6 +74,7 @@
     "@angular/platform-browser": "^7.2.7",
     "@angular/platform-browser-dynamic": "^7.2.7",
     "@angular/router": "^7.2.7",
+    "@biesbjerg/ngx-translate-extract": "^2.3.4",
     "@ngx-translate/core": "11.0.1",
     "@ngx-translate/http-loader": "4.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^2.0.0",

src/app/core/services/mocks.spec.ts

@@ -11,7 +11,7 @@ import {
   SelectablePackage,
   PackageChangeset
 } from '../../main/services/package.service';
-import { Component, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Pipe, PipeTransform } from '@angular/core';
 import * as path from 'path';
 import { PackageProfile } from '../models/profile.model';
 
@@ -192,3 +192,8 @@ export class MockDialogService {
   public dialogReady() {}
   public closeDialog() {}
 }
+
+@Pipe({ name: 'translate' })
+export class MockTranslatePipe implements PipeTransform {
+  transform() {}
+}

src/app/dialogs/new-profile-dialog/new-profile-dialog.component.html

@@ -4,7 +4,7 @@
   style="height: 100%"
 >
   <h2 mat-dialog-title>
-    Create new profile
+    {{ 'PAGES.NEW_PROFILE.TITLE' | translate }}
   </h2>
   <mat-dialog-content>
     <form
@@ -16,19 +16,19 @@ <h2 mat-dialog-title>
     >
       <mat-form-field appearance="standard">
         <mat-label>
-          Profile Name
+          {{ 'PAGES.NEW_PROFILE.NAME' | translate }}
         </mat-label>
         <input matInput formControlName="name" required />
         <mat-error *ngIf="form.get('name').invalid">
-          Profile Name required
+          {{ 'PAGES.NEW_PROFILE.ERRORS.REQUIRED' | translate }}
         </mat-error>
       </mat-form-field>
       <mat-form-field appearance="standard">
         <mat-label>
-          Copy From
+          {{ 'PAGES.NEW_PROFILE.COPY_FROM' | translate }}
         </mat-label>
         <mat-select formControlName="copyFrom">
-          <mat-option>None</mat-option>
+          <mat-option>{{ 'PAGES.NEW_PROFILE.NONE' | translate }}</mat-option>
           <mat-option
             *ngFor="let profile of profiles | async"
             [value]="profile"
@@ -45,7 +45,7 @@ <h2 mat-dialog-title>
       (click)="profileForm.onSubmit()"
       [matTooltip]="getTooltip()"
     >
-      Create
+      {{ 'PAGES.NEW_PROFILE.SUBMIT_BUTTON' | translate }}
     </button>
   </mat-dialog-actions>
 </div>

src/app/dialogs/new-profile-dialog/new-profile-dialog.component.spec.ts

@@ -8,7 +8,8 @@ import { ProfileService } from '../../profile/services/profile.service';
 import {
   MockProfileService,
   MockElectronService,
-  MockDialogService
+  MockDialogService,
+  MockTranslatePipe
 } from '../../core/services/mocks.spec';
 import { ElectronService } from '../../core/services/electron.service';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -20,7 +21,7 @@ describe('NewProfileDialogComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [NewProfileDialogComponent],
+      declarations: [NewProfileDialogComponent, MockTranslatePipe],
       imports: [
         ReactiveFormsModule,
         MaterialModule,

src/app/dialogs/rename-profile-dialog/rename-profile-dialog.component.html

@@ -4,32 +4,32 @@
   style="height: 100%"
 >
   <h2 mat-dialog-title>
-    Rename Profile
+    {{ 'PAGES.RENAME_PROFILE.TITLE' | translate }}
   </h2>
   <mat-dialog-content>
-    <p>Old Name: {{ oldName }}</p>
+    <p>{{ 'PAGES.RENAME_PROFILE.OLD_NAME' | translate }}: {{ oldName }}</p>
     <form
       [formGroup]="formGroup"
       (ngSubmit)="close()"
       novalidate
       #formRef="ngForm"
     >
       <mat-form-field appearance="standard">
-        <mat-label>New Name</mat-label>
+        <mat-label>{{ 'PAGES.RENAME_PROFILE.NEW_NAME' | translate }}</mat-label>
         <input matInput formControlName="newName" required />
         <mat-error *ngIf="newName.errors?.required">
-          This field is required
+          {{ 'PAGES.RENAME_PROFILE.ERRORS.REQUIRED' | translate }}
         </mat-error>
 
         <mat-error *ngIf="newName.errors?.notEqual">
-          You must specify a different name
+          {{ 'PAGES.RENAME_PROFILE.ERRORS.NEW_NAME' | translate }}
         </mat-error>
       </mat-form-field>
     </form>
   </mat-dialog-content>
   <mat-dialog-actions>
     <button mat-raised-button (click)="formRef.onSubmit()">
-      Close
+      {{ 'PAGES.RENAME_PROFILE.SUBMIT_BUTTON' | translate }}
     </button>
   </mat-dialog-actions>
 </div>

src/app/dialogs/rename-profile-dialog/rename-profile-dialog.component.spec.ts

@@ -2,7 +2,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RenameProfileDialogComponent } from './rename-profile-dialog.component';
 import { DialogService } from '../services/dialog.service';
-import { MockDialogService } from '../../core/services/mocks.spec';
+import {
+  MockDialogService,
+  MockTranslatePipe
+} from '../../core/services/mocks.spec';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from '../../shared/material.module';
 import { MatDialogModule } from '@angular/material';
@@ -15,7 +18,7 @@ describe('RenameProfileDialogComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [RenameProfileDialogComponent],
+      declarations: [RenameProfileDialogComponent, MockTranslatePipe],
       imports: [
         ReactiveFormsModule,
         MaterialModule,

src/app/main/config-editor/editor/editor.component.html

@@ -2,31 +2,31 @@
   <div fxLayout="column">
     <button
       mat-button
-      matTooltip="Return to list of known config files"
+      [matTooltip]="'PAGES.CONFIG_EDITOR.TOOLTIPS.BACK_BUTTON' | translate"
       (click)="goBack()"
     >
       <mat-icon>arrow_back</mat-icon>
-      Back to List
+      {{ 'PAGES.CONFIG_EDITOR.BACK_BUTTON' | translate }}
     </button>
   </div>
-  <h2>Editing: {{ filename }}</h2>
+  <h2>{{ 'PAGES.CONFIG_EDITOR.TITLE' | translate }}: {{ filename }}</h2>
   <span fxFlex></span>
   <div fxLayout="column" fxLayoutAlign="center">
     <button
       mat-raised-button
       [disabled]="!someSectionDirty()"
-      matTooltip="Undo all changes"
+      [matTooltip]="'PAGES.CONFIG_EDITOR.TOOLTIPS.RESET_BUTTON' | translate"
       (click)="reset()"
     >
-      Reset
+      {{ 'PAGES.CONFIG_EDITOR.RESET_BUTTON' | translate }}
     </button>
   </div>
   <span class="padding"></span>
   <div fxLayout="column" fxLayoutAlign="center">
     <button
       mat-raised-button
       [disabled]="!someSectionDirty()"
-      matTooltip="Save changes made to disk"
+      [matTooltip]="'PAGES.CONFIG_EDITOR.TOOLTIPS.BACK_BUTTON' | translate"
       (click)="saveChanges()"
     >
       Save

src/app/main/config-editor/editor/editor.component.spec.ts

@@ -3,7 +3,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { EditorComponent } from './editor.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ConfigParserService } from '../services/config-parser.service';
-import { MockConfigParserService } from '../../../core/services/mocks.spec';
+import {
+  MockConfigParserService,
+  MockTranslatePipe
+} from '../../../core/services/mocks.spec';
 import { MaterialModule } from '../../../shared/material.module';
 import { Component, Input } from '@angular/core';
 
@@ -22,7 +25,11 @@ describe('EditorComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [EditorComponent, MockConfigSectionComponent],
+      declarations: [
+        EditorComponent,
+        MockConfigSectionComponent,
+        MockTranslatePipe
+      ],
       imports: [RouterTestingModule, MaterialModule],
       providers: [
         {

src/app/main/nav-menu/nav-menu/nav-menu.component.html

@@ -7,18 +7,18 @@
     [mode]="(isHandset$ | async) ? 'over' : 'side'"
     [opened]="!(isHandset$ | async)"
   >
-    <mat-toolbar>Menu</mat-toolbar>
+    <mat-toolbar> {{ 'MENU.TITLE' | translate }} </mat-toolbar>
     <mat-divider></mat-divider>
     <mat-nav-list (click)="drawer.mode === 'over' && drawer.close()">
-      <a mat-list-item routerLinkActive="active" routerLink="/packages"
-        >Packages</a
-      >
-      <a mat-list-item routerLinkActive="active" routerLink="/config-editor"
-        >Config Editor</a
-      >
-      <a mat-list-item routerLinkActive="active" routerLink="/preferences"
-        >Preferences</a
-      >
+      <a mat-list-item routerLinkActive="active" routerLink="/packages">
+        {{ 'MENU.NAV.PACKAGES' | translate }}
+      </a>
+      <a mat-list-item routerLinkActive="active" routerLink="/config-editor">
+        {{ 'MENU.NAV.CONFIG_EDITOR' | translate }}
+      </a>
+      <a mat-list-item routerLinkActive="active" routerLink="/preferences">
+        {{ 'MENU.NAV.PREFS' | translate }}
+      </a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content fxLayout="column">
@@ -32,12 +32,12 @@
       >
         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
       </button>
-      <span>RoR2 Mod Manager {{ version }}</span>
+      <span> {{ 'MENU.TITLEBAR.TITLE' | translate }} {{ version }}</span>
       <span fxFlex></span>
       <button
         *ngIf="router.url === '/preferences'"
         mat-icon-button
-        matTooltip="Back"
+        [matTooltip]="'MENU.TOOLTIPS.BACK_BUTTON' | translate"
         (click)="goBack()"
       >
         <mat-icon>arrow_back</mat-icon>
@@ -46,17 +46,23 @@
         *ngIf="router.url !== '/preferences'"
         mat-icon-button
         routerLink="/preferences"
-        matTooltip="Preferences"
+        [matTooltip]="'MENU.TOOLTIPS.PREFERENCES' | translate"
       >
         <mat-icon>settings</mat-icon>
       </button>
       <button mat-icon-button (click)="theme.toggleDarkMode()">
-        <mat-icon *ngIf="theme.isDarkMode$ | async" matTooltip="Light Mode"
-          >brightness_7</mat-icon
+        <mat-icon
+          *ngIf="theme.isDarkMode$ | async"
+          [matTooltip]="'MENU.TOOLTIPS.LIGHT_MODE' | translate"
         >
-        <mat-icon *ngIf="!(theme.isDarkMode$ | async)" matTooltip="Dark Mode"
-          >brightness_2</mat-icon
+          brightness_7
+        </mat-icon>
+        <mat-icon
+          *ngIf="!(theme.isDarkMode$ | async)"
+          [matTooltip]="'MENU.TOOLTIPS.DARK_MODE' | translate"
         >
+          brightness_2
+        </mat-icon>
       </button>
     </mat-toolbar>
     <div fxLayout="column" fxFlex class="grow page-content">

src/app/main/nav-menu/nav-menu/nav-menu.component.spec.ts

@@ -6,15 +6,18 @@ import { MaterialModule } from '../../../shared/material.module';
 import { MatToolbarModule, MatSidenavModule } from '@angular/material';
 import { ThemeService } from '../../../core/services/theme.service';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockThemeService } from '../../../core/services/mocks.spec';
+import {
+  MockThemeService,
+  MockTranslatePipe
+} from '../../../core/services/mocks.spec';
 
 describe('NavMenuComponent', () => {
   let component: NavMenuComponent;
   let fixture: ComponentFixture<NavMenuComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [NavMenuComponent],
+      declarations: [NavMenuComponent, MockTranslatePipe],
       imports: [
         NoopAnimationsModule,
         LayoutModule,

src/app/main/package-selection/changes-table/changes-table.component.html

@@ -7,35 +7,45 @@
 >
   <!-- Name Column -->
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      {{ 'PAGES.PKG_SELECT.CONFIRM_TABLE.COLUMNS.NAME' | translate }}
+    </th>
     <td mat-cell *matCellDef="let pkg">
       {{ pkg.name | humanize: shouldHumanize }}
     </td>
   </ng-container>
 
   <!-- Author Column -->
   <ng-container matColumnDef="author">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>Author</th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      {{ 'PAGES.PKG_SELECT.CONFIRM_TABLE.COLUMNS.AUTHOR' | translate }}
+    </th>
     <td mat-cell *matCellDef="let pkg">
       {{ pkg.author | humanize: shouldHumanize }}
     </td>
   </ng-container>
 
   <!-- Action Column -->
   <ng-container matColumnDef="action">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>Action</th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      {{ 'PAGES.PKG_SELECT.CONFIRM_TABLE.COLUMNS.ACTION' | translate }}
+    </th>
     <td mat-cell *matCellDef="let pkg">{{ pkg.action | humanize }}</td>
   </ng-container>
 
   <!-- Installed Version Column -->
   <ng-container matColumnDef="installedVersion">
-    <th mat-header-cell *matHeaderCellDef>Installed Version</th>
+    <th mat-header-cell *matHeaderCellDef>
+      {{ 'PAGES.PKG_SELECT.CONFIRM_TABLE.COLUMNS.INSTALLED' | translate }}
+    </th>
     <td mat-cell *matCellDef="let pkg">{{ pkg.installedVersion || '-' }}</td>
   </ng-container>
 
   <!-- VersionToInstall Column -->
   <ng-container matColumnDef="versionToInstall">
-    <th mat-header-cell *matHeaderCellDef>Version To Install</th>
+    <th mat-header-cell *matHeaderCellDef>
+      {{ 'PAGES.PKG_SELECT.CONFIRM_TABLE.COLUMNS.TO_INSTALL' | translate }}
+    </th>
     <td mat-cell *matCellDef="let pkg">{{ pkg.versionToInstall || '-' }}</td>
   </ng-container>
 

src/app/main/package-selection/changes-table/changes-table.component.spec.ts

@@ -4,7 +4,10 @@ import { ChangesTableComponent } from './changes-table.component';
 import { MaterialModule } from '../../../shared/material.module';
 import { HumanizePipe } from '../../../shared/humanize.pipe';
 import { PackageService } from '../../services/package.service';
-import { MockPackageService } from '../../../core/services/mocks.spec';
+import {
+  MockPackageService,
+  MockTranslatePipe
+} from '../../../core/services/mocks.spec';
 import { PreferencesService } from '../../../core/services/preferences.service';
 
 describe('ChangesTableComponent', () => {
@@ -13,7 +16,7 @@ describe('ChangesTableComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ChangesTableComponent, HumanizePipe],
+      declarations: [ChangesTableComponent, HumanizePipe, MockTranslatePipe],
       imports: [MaterialModule],
       providers: [
         { provide: PackageService, useClass: MockPackageService },