Feature/add i18n

package.json

@@ -11,7 +11,9 @@
     "build:prd": "ng build --configuration=production",
     "lint": "ng lint && npx prettier -c \"src/**/*.ts\"",
     "lint:fix": "ng lint --fix",
-    "prettier:fix": "npx prettier --write \"src/**/*.ts\""
+    "prettier:fix": "npx prettier --write \"src/**/*.ts\"",
+    "i18n:extract": "transloco-keys-manager extract --remove-extra-keys --sort",
+    "i18n:find": "transloco-keys-manager find"
   },
   "private": true,
   "dependencies": {
@@ -30,6 +32,7 @@
     "@capacitor/status-bar": "^6.0.0",
     "@ionic/angular": "^7.6.4",
     "@ionic/storage-angular": "^4.0.0",
+    "@jsverse/transloco": "^7.6.1",
     "@ngneat/until-destroy": "^10.0.0",
     "@ngrx/operators": "^18.0.2",
     "@ngrx/signals": "^18.0.2",
@@ -54,6 +57,7 @@
     "@commitlint/cli": "^18.4.4",
     "@commitlint/config-conventional": "^18.4.4",
     "@ionic/angular-toolkit": "^12.1.1",
+    "@jsverse/transloco-keys-manager": "^5.1.0",
     "@types/jasmine": "~5.1.4",
     "@types/node": "^20.11.2",
     "@typescript-eslint/eslint-plugin": "6.18.1",

src/app/business/business.store.ts

@@ -200,7 +200,7 @@ export const BusinessStore = signalStore(
   })),
 
   withHooks({
-    onInit: ({ loadBusinesses, loadBusinessStates, loadBusinessTypes }) => {
+    onInit: ({ loadBusinessStates, loadBusinessTypes }) => {
       loadBusinessStates(null);
       loadBusinessTypes(null);
     }

src/app/business/components/business-detail-text/business-detail-text.component.html

@@ -1,75 +1,79 @@
-@if (business.Description) {
-  <app-text-card
-    [title]="'Beschreibung'"
-    [HtmlText]="business.Description"
-  ></app-text-card>
-}
+<ng-container *transloco="let t; prefix:'business.detailText'">
+  @if (business.Description) {
+    <app-text-card
+      [title]="t('description')"
+      [HtmlText]="business.Description"
+    ></app-text-card>
+  }
 
-@if (business.InitialSituation) {
-  <app-text-card
-    [title]="'Ausgangslage'"
-    [HtmlText]="business.InitialSituation"
-  ></app-text-card>
-}
+  @if (business.InitialSituation) {
+    <app-text-card
+      [title]="t('initialSituation')"
+      [HtmlText]="business.InitialSituation"
+    ></app-text-card>
+  }
 
-@if (business.Proceedings) {
-  <app-text-card
-    [title]="'Verhandlungen'"
-    [HtmlText]="business.Proceedings"
-  ></app-text-card>
-}
+  @if (business.Proceedings) {
+    <app-text-card
+      [title]="t('proceedings')"
+      [HtmlText]="business.Proceedings"
+    ></app-text-card>
+  }
 
-@if (business.DraftText) {
-  <app-text-card
-    [title]="'Entwurf'"
-    [HtmlText]="business.DraftText"
-  ></app-text-card>
-}
+  @if (business.DraftText) {
+    <app-text-card
+      [title]="t('draftText')"
+      [HtmlText]="business.DraftText"
+    ></app-text-card>
+  }
 
-@if (business.SubmittedText) {
-  <app-text-card
-    [title]="'Eingereichter Text'"
-    [HtmlText]="business.SubmittedText"
-  ></app-text-card>
-}
+  @if (business.SubmittedText) {
+    <app-text-card
+      [title]="t('submittedText')"
+      [HtmlText]="business.SubmittedText"
+    ></app-text-card>
+  }
 
-@if (business.ReasonText) {
-  <app-text-card
-    [title]="'Begründung'"
-    [HtmlText]="business.ReasonText"
-  ></app-text-card>
-}
+  @if (business.ReasonText) {
+    <app-text-card
+      [title]="t('reasonText')"
+      [HtmlText]="business.ReasonText"
+    ></app-text-card>
+  }
 
-@if (business.DocumentationText) {
-  <app-text-card
-    [title]="'Dokumentation'"
-    [HtmlText]="business.DocumentationText"
-  ></app-text-card>
-}
+  @if (business.DocumentationText) {
+    <app-text-card
+      [title]="t('documentationText')"
+      [HtmlText]="business.DocumentationText"
+    ></app-text-card>
+  }
 
-@if (business.MotionText) {
-  <app-text-card
-    [title]="'Motionstext'"
-    [HtmlText]="business.MotionText"
-  ></app-text-card>
-}
+  @if (business.MotionText) {
+    <app-text-card
+      [title]="t('motionText')"
+      [HtmlText]="business.MotionText"
+    ></app-text-card>
+  }
 
-@if (business.FederalCouncilResponseText) {
-  <app-text-card
-    [title]="'Stellungnahme des Bundesrates'"
-    [HtmlText]="business.FederalCouncilResponseText"
-  ></app-text-card>
-}
+  @if (business.FederalCouncilResponseText) {
+    <app-text-card
+      [title]="t('federalCouncilResponseText')"
+      [HtmlText]="business.FederalCouncilResponseText"
+    ></app-text-card>
+  }
 
-<app-text-card
-  title="Ergänzende Informationen"
-  HtmlText="Besuchen Sie www.parlament.ch für detaillierte Informationen und Ressourcen"
+  <app-text-card
+    [title]="t('business.detailText.additionalInformation.title')"
+    [HtmlText]="t('business.detailText.additionalInformation.text')"
   >
-  <ion-button
-    expand="block"
-    size="small"
-    fill="outline"
-    (click)="openFurtherInformation()"
-    >Geschäft öffnen <ion-icon slot="end" name="link-outline"></ion-icon
-  ></ion-button>
-</app-text-card>
+    <ion-button
+      expand="block"
+      size="small"
+      fill="outline"
+      (click)="openFurtherInformation()"
+    >{{ t('business.detailText.additionalInformation.button') }}
+      <ion-icon slot="end" name="link-outline"></ion-icon
+      >
+    </ion-button>
+  </app-text-card>
+</ng-container>

src/app/business/components/business-detail-text/business-detail-text.component.ts

@@ -2,14 +2,15 @@ import { Component, Input } from '@angular/core';
 import { Browser } from '@capacitor/browser';
 import { Business } from 'swissparl';
 import { IonicModule } from '@ionic/angular';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { TextCardComponent } from '../../../shared/components/text-card/text-card.component';
 
 @Component({
   selector: 'app-business-detail-text',
   templateUrl: './business-detail-text.component.html',
   styleUrls: ['./business-detail-text.component.scss'],
   standalone: true,
-  imports: [IonicModule, TextCardComponent]
+  imports: [IonicModule, TextCardComponent, TranslocoDirective]
 })
 export class BusinessDetailTextComponent {
   @Input() business: Business;

src/app/business/components/business-filter-form/business-filter-form.component.html

@@ -1,34 +1,37 @@
-<form (ngSubmit)="onSubmit()">
-  <h3>Geschäftstyp</h3>
-  <ion-list>
-    @for (businessType of businessTypeCheckboxes(); track businessType) {
-      <ion-item>
-        <ion-checkbox
-          labelPlacement="start"
-          [name]="businessType.BusinessTypeName"
-          [(ngModel)]="businessType.checked"
-          >{{ businessType.BusinessTypeName }}</ion-checkbox
+<ng-container *transloco="let t; prefix: 'business.filterForm'">
+  <form (ngSubmit)="onSubmit()">
+    <h3>{{ t('type') }}</h3>
+    <ion-list>
+      @for (businessType of businessTypeCheckboxes(); track businessType) {
+        <ion-item>
+          <ion-checkbox
+            labelPlacement="start"
+            [name]="businessType.BusinessTypeName"
+            [(ngModel)]="businessType.checked"
+          >{{ businessType.BusinessTypeName }}
+          </ion-checkbox
           >
         </ion-item>
       }
     </ion-list>
-    <h3>Geschäftsstatus</h3>
+    <h3>{{ t('status') }}</h3>
     <ion-list>
       @for (businessStatus of businessStatusCheckboxes(); track businessStatus) {
         <ion-item>
           <ion-checkbox
             labelPlacement="start"
             [name]="businessStatus.BusinessStatusName"
             [(ngModel)]="businessStatus.checked"
-            >{{ businessStatus.BusinessStatusName }}</ion-checkbox
-            >
-          </ion-item>
-        }
-      </ion-list>
-
-      <div class="floating-button">
-        <ion-button expand="block" type="submit">Filter anwenden</ion-button>
-      </div>
-    </form>
+          >{{ businessStatus.BusinessStatusName }}
+          </ion-checkbox
+          >
+        </ion-item>
+      }
+    </ion-list>
 
+    <div class="floating-button">
+      <ion-button expand="block" type="submit">{{ t('apply') }}</ion-button>
+    </div>
+  </form>
+</ng-container>
 

src/app/business/components/business-filter-form/business-filter-form.component.ts

@@ -7,15 +7,15 @@ import {
 } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { BusinessStore } from '../../business.store';
-import { ErrorScreenComponent } from '../../../shared/components/error-screen/error-screen.component';
 
 @Component({
   selector: 'app-business-filter-form',
   templateUrl: './business-filter-form.component.html',
   styleUrls: ['./business-filter-form.component.scss'],
   standalone: true,
-  imports: [FormsModule, IonicModule, ReactiveFormsModule, ErrorScreenComponent]
+  imports: [FormsModule, IonicModule, ReactiveFormsModule, TranslocoDirective]
 })
 export class BusinessFilterFormComponent {
   readonly store = inject(BusinessStore);

src/app/business/containers/business-detail/business-detail.page.html

@@ -1,27 +1,29 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button
-        text="Zurück"
-        defaultHref="layout/business"
-      ></ion-back-button>
-    </ion-buttons>
-    <ion-title>Geschäft</ion-title>
-  </ion-toolbar>
-</ion-header>
+<ng-container *transloco="let t;">
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button
+          text="Zurück"
+          defaultHref="layout/business"
+        ></ion-back-button>
+      </ion-buttons>
+      <ion-title>{{ t('business.detail.title') }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
-<ion-content class="ion-padding">
-  @if (!store.isLoading()) {
-    @if (!store.hasError()) {
-      <app-business-card [business]="store.selectedBusiness()">
-        @if (store.selectedBusiness().Votes.length > 0) {
-          <ion-button
-            expand="block"
-            size="small"
-            fill="outline"
-            [routerLink]="['/layout/votes']"
-            [queryParams]="{ BusinessShortNumber: store.selectedBusiness().BusinessShortNumber }"
-            >Zu den Abstimmungen</ion-button
+  <ion-content class="ion-padding">
+    @if (!store.isLoading()) {
+      @if (!store.hasError()) {
+        <app-business-card [business]="store.selectedBusiness()">
+          @if (store.selectedBusiness().Votes.length > 0) {
+            <ion-button
+              expand="block"
+              size="small"
+              fill="outline"
+              [routerLink]="['/layout/votes']"
+              [queryParams]="{ BusinessShortNumber: store.selectedBusiness().BusinessShortNumber }"
+            >{{ t('business.detail.toVotes') }}
+            </ion-button
             >
           }
         </app-business-card>
@@ -35,5 +37,5 @@
       <app-loading-screen></app-loading-screen>
     }
   </ion-content>
-
+</ng-container>
 

src/app/business/containers/business-detail/business-detail.page.ts

@@ -1,6 +1,7 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { BusinessCardComponent } from '../../components/business-card/business-card.component';
 import { BusinessDetailTextComponent } from '../../components/business-detail-text/business-detail-text.component';
 import { LoadingScreenComponent } from '../../../shared/components/loading-screen/loading-screen.component';
@@ -18,7 +19,8 @@ import { BusinessStore } from '../../business.store';
     BusinessDetailTextComponent,
     LoadingScreenComponent,
     ErrorScreenComponent,
-    RouterLink
+    RouterLink,
+    TranslocoDirective
   ]
 })
 export class BusinessDetailPage implements OnInit {