feat(i18n): Configuration

pinguet62 · May 12, 2020 · 7f50c71 · 7f50c71
1 parent 3e66350
commit 7f50c71
Show file tree

Hide file tree

Showing 15 changed files with 608 additions and 118 deletions.
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
@@ -48,7 +48,7 @@ jobs:
           CI: true
         run: npm run e2e
       - working-directory: ./meet-all-ui
-        run: npm run build -- --prod
+        run: npm run build
       - working-directory: ./meet-all-ui
         run: docker build . -t pinguet62/meet-all-ui
       - if: github.ref == 'refs/heads/master'

diff --git a/meet-all-ui/angular.json b/meet-all-ui/angular.json
@@ -67,7 +67,8 @@
                 }
               ],
               "serviceWorker": true,
-              "ngswConfigPath": "ngsw-config.json"
+              "ngswConfigPath": "ngsw-config.json",
+              "i18nMissingTranslation": "error"
             },
             "ci": {
               "progress": false

diff --git a/meet-all-ui/package-lock.json b/meet-all-ui/package-lock.json
diff --git a/meet-all-ui/package.json b/meet-all-ui/package.json
@@ -9,13 +9,15 @@
     "test": "ng test  --code-coverage=true",
     "e2e": "ng e2e",
     "start": "ng serve --ssl true",
-    "build": "ng build"
+    "xi18n": "ng xi18n --out-file src/locale/messages.xlf && ng xi18n --out-file src/locale/messages.fr.xlf --i18n-locale fr",
+    "build": "ng build --prod"
   },
   "private": false,
   "dependencies": {
     "@angular/common": "~8.2.14",
     "@angular/core": "~8.2.14",
     "@angular/forms": "~8.2.14",
+    "@angular/localize": "^9.1.6",
     "@angular/platform-browser": "~8.2.14",
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/pwa": "^0.901.0",

diff --git a/meet-all-ui/src/app/conversations/conversation-list/conversation-list.component.ts b/meet-all-ui/src/app/conversations/conversation-list/conversation-list.component.ts
@@ -10,17 +10,17 @@ import {Conversation, ConversationsService} from '../conversations.service';
     template: `
         <ion-header>
             <ion-toolbar>
-                <ion-title>Conversations</ion-title>
+                <ion-title i18n="@@conversations.title">Conversations</ion-title>
             </ion-toolbar>
         </ion-header>
 
         <ion-content>
-            <ion-refresher slot="fixed" (ionRefresh)="onRefresh($event)" refreshingSpinner="circles" refreshingText="Refreshing...">
+            <ion-refresher slot="fixed" (ionRefresh)="onRefresh($event)" refreshingSpinner="circles" i18n-refreshingText="@@common.refreshing" refreshingText="Refreshing...">
                 <ion-refresher-content></ion-refresher-content>
             </ion-refresher>
             <ion-list>
                 <ion-list-header>
-                    <ion-label>Messages</ion-label>
+                    <ion-label i18n="@@conversations.messages">Messages</ion-label>
                 </ion-list-header>
                 <ion-item *ngFor="let conversation of conversations"
                           [routerLink]="['/tabs/conversations/', conversation.id, conversation.profile.id]">

diff --git a/meet-all-ui/src/app/conversations/conversation-messages/conversation-messages.component.ts b/meet-all-ui/src/app/conversations/conversation-messages/conversation-messages.component.ts
@@ -37,30 +37,29 @@ import {ConversationsService, Message, Profile} from '../conversations.service';
 
         <ion-footer>
             <ion-item>
-                <ion-input [(ngModel)]="text" type="text" [disabled]="sendingMessage" required placeholder="Message..."></ion-input>
+                <ion-input [(ngModel)]="text" type="text" [disabled]="sendingMessage" required i18n-placeholder="@@conversations.input.placeholder"
+                           placeholder="Message..."></ion-input>
                 <ion-button [disabled]="text === ''" (click)="sendMessage()">
                     <ion-icon *ngIf="!sendingMessage" name="send"></ion-icon>
                     <ion-spinner *ngIf="sendingMessage"></ion-spinner>
                 </ion-button>
             </ion-item>
         </ion-footer>
     `,
-    styles: [
-            `
-            .message {
-                max-width: 75%;
-                white-space: pre-wrap;
-            }
+    styles: [`
+        .message {
+            max-width: 75%;
+            white-space: pre-wrap;
+        }
 
-            .sent {
-                background-color: rgb(0, 162, 216)
-            }
+        .sent {
+            background-color: rgb(0, 162, 216)
+        }
 
-            .received {
-                background-color: rgb(225, 225, 225);
-            }
-        `
-    ]
+        .received {
+            background-color: rgb(225, 225, 225);
+        }
+    `]
 })
 export class ConversationMessagesComponent {
 

diff --git a/meet-all-ui/src/app/credentials/credential-create/credential-create.component.ts b/meet-all-ui/src/app/credentials/credential-create/credential-create.component.ts
@@ -12,9 +12,9 @@ import {CredentialService, Provider} from '../credential.service';
                 <ion-buttons slot="start">
                     <ion-back-button></ion-back-button>
                 </ion-buttons>
-                <ion-title>Credentials</ion-title>
+                <ion-title i18n="@@credentials.title">Credentials</ion-title>
                 <ion-buttons slot="primary">
-                    <ion-button (click)="onCreate()" [disabled]="!form.valid">
+                    <ion-button (click)="onCreate()" [disabled]="!form.valid" i18n="@@credentials.create.button">
                         Create
                         <ion-icon name="checkmark"></ion-icon>
                     </ion-button>
@@ -25,23 +25,23 @@ import {CredentialService, Provider} from '../credential.service';
         <ion-content>
             <form #form="ngForm">
                 <ion-item>
-                    <ion-label>Provider</ion-label>
+                    <ion-label i18n="@@common.model.provider">Provider</ion-label>
                     <ion-select [(ngModel)]="provider" name="provider" required placeholder="Select one">
                         <ion-select-option *ngFor="let provider of providers" [value]="provider">{{provider}}</ion-select-option>
                     </ion-select>
                 </ion-item>
 
                 <ion-item>
-                    <ion-label>Facebook email</ion-label>
+                    <ion-label i18n="@@credentials.model.email">Facebook email</ion-label>
                     <ion-input type="text" [(ngModel)]="facebookEmail" name="facebookEmail" clearInput required></ion-input>
                 </ion-item>
                 <ion-item>
-                    <ion-label>Facebook password</ion-label>
+                    <ion-label i18n="@@credentials.model.password">Facebook password</ion-label>
                     <ion-input type="password" [(ngModel)]="facebookPassword" name="facebookPassword" clearInput required></ion-input>
                 </ion-item>
 
                 <ion-item>
-                    <ion-label>Label</ion-label>
+                    <ion-label i18n="@@credentials.model.label">Label</ion-label>
                     <ion-input type="text" [(ngModel)]="label" name="label" clearInput required></ion-input>
                 </ion-item>
             </form>

diff --git a/meet-all-ui/src/app/credentials/credential-list/credential-list.component.ts b/meet-all-ui/src/app/credentials/credential-list/credential-list.component.ts
@@ -10,12 +10,12 @@ import {CredentialService, RegisteredCredential} from '../credential.service';
     template: `
         <ion-header>
             <ion-toolbar>
-                <ion-title>Credentials</ion-title>
+                <ion-title i18n="@@credentials.title">Credentials</ion-title>
             </ion-toolbar>
         </ion-header>
 
         <ion-content>
-            <ion-refresher slot="fixed" (ionRefresh)="onRefresh($event)" refreshingSpinner="circles" refreshingText="Refreshing...">
+            <ion-refresher slot="fixed" (ionRefresh)="onRefresh($event)" refreshingSpinner="circles" i18n-refreshingText="@@common.refreshing" refreshingText="Refreshing...">
                 <ion-refresher-content></ion-refresher-content>
             </ion-refresher>
             <ion-list>
@@ -28,7 +28,7 @@ import {CredentialService, RegisteredCredential} from '../credential.service';
                         <ion-icon [name]="credential.ok ? 'checkmark' : 'close-circle'"></ion-icon>
                     </ion-item>
                     <ion-item-options>
-                        <ion-item-option color="danger" (click)="onDelete(credential)">Delete</ion-item-option>
+                        <ion-item-option color="danger" (click)="onDelete(credential)" i18n="@@credentials.delete.button">Delete</ion-item-option>
                     </ion-item-options>
                 </ion-item-sliding>
             </ion-list>

diff --git a/meet-all-ui/src/app/login/login.component.ts b/meet-all-ui/src/app/login/login.component.ts
@@ -4,9 +4,15 @@ import {LoginService} from './login.service';
 @Component({
     selector: 'app-login',
     template: `
+        <ion-header>
+            <ion-toolbar>
+                <ion-title i18n="@@login.title">Login</ion-title>
+            </ion-toolbar>
+        </ion-header>
+
         <ion-content>
             <ion-item>
-                <ion-button (click)="login()" color="facebook">
+                <ion-button (click)="login()" color="facebook" i18n="@@login.facebook.button">
                     <ion-icon slot="start" name="logo-facebook"></ion-icon>
                     Continue with Facebook
                 </ion-button>

diff --git a/meet-all-ui/src/app/proposals/proposals.component.ts b/meet-all-ui/src/app/proposals/proposals.component.ts
@@ -6,26 +6,27 @@ import {processLoading} from '../loading-controller.utils';
 import {Proposal, ProposalsService} from './proposals.service';
 
 @Component({
+    selector: 'app-proposals',
     template: `
         <ion-header>
             <ion-toolbar>
-                <ion-title>Proposals</ion-title>
+                <ion-title i18n="@@proposal.title">Proposals</ion-title>
             </ion-toolbar>
         </ion-header>
 
         <ion-content *ngIf="proposals != null && proposals.length === 0">
-            <ion-refresher slot="fixed" (ionRefresh)="onRefresh($event)" refreshingSpinner="circles" refreshingText="Refreshing...">
+            <ion-refresher slot="fixed" (ionRefresh)="onRefresh($event)" refreshingSpinner="circles" i18n-refreshingText="@@common.refreshing" refreshingText="Refreshing...">
                 <ion-refresher-content></ion-refresher-content>
             </ion-refresher>
-            <h1>No proposal for this moment...</h1>
+            <h1 i18n="@@proposal.noData">No proposal for this moment...</h1>
         </ion-content>
 
         <ion-content *ngIf="proposals != null && proposals.length !== 0">
             <ion-card>
                 <ion-img [appProxifiedSrc]="currentProposal.profile.avatars[0]" style="height: 100%;"></ion-img>
                 <ion-card-header>
                     <ion-card-title>{{currentProposal.profile.name}}</ion-card-title>
-                    <ion-card-subtitle>{{currentProposal.profile.age}} ans</ion-card-subtitle>
+                    <ion-card-subtitle i18n="@@proposal.model.age">{currentProposal.profile.age, plural, =1 {1 year old} other {{{currentProposal.profile.age}} years old}}</ion-card-subtitle>
                 </ion-card-header>
             </ion-card>
 

diff --git a/meet-all-ui/src/app/tabs/tabs.component.ts b/meet-all-ui/src/app/tabs/tabs.component.ts
@@ -9,17 +9,17 @@ import {Component} from '@angular/core';
 
                 <ion-tab-button tab="proposals">
                     <ion-icon name="heart"></ion-icon>
-                    <ion-label>Proposals</ion-label>
+                    <ion-label i18n="@@proposal.title">Proposals</ion-label>
                 </ion-tab-button>
 
                 <ion-tab-button tab="conversations">
                     <ion-icon name="chatbubbles"></ion-icon>
-                    <ion-label>Conversations</ion-label>
+                    <ion-label i18n="@@conversations.title">Conversations</ion-label>
                 </ion-tab-button>
 
                 <ion-tab-button tab="credentials">
                     <ion-icon name="key"></ion-icon>
-                    <ion-label>Credentials</ion-label>
+                    <ion-label i18n="@@credentials.title">Credentials</ion-label>
                 </ion-tab-button>
 
             </ion-tab-bar>