feat(core): allow changing app language to english and italian

client/package.json

@@ -9,7 +9,7 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "test:ci": "ng test --no-watch --no-progress --code-coverage --browsers=ChromeHeadless",
-    "i18n:extract": "transloco-keys-manager extract -d \"\" -l de -R",
+    "i18n:extract": "transloco-keys-manager extract -d \"\" -l de en it -R",
     "i18n:find": "transloco-keys-manager find",
     "cypress": "cypress open",
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org localcrag --project localcrag-client ./dist/client && sentry-cli sourcemaps upload --org localcrag --project localcrag-client ./dist/client",

client/src/app/models/account-settings.ts

@@ -1,15 +1,20 @@
+import { LanguageCode } from '../utility/types/language';
+
 export class AccountSettings {
   commentReplyMailsEnabled: boolean;
+  language: LanguageCode;
 
   public static deserialize(payload: any): AccountSettings {
     const accountSettings = new AccountSettings();
     accountSettings.commentReplyMailsEnabled = payload.commentReplyMailsEnabled;
+    accountSettings.language = payload.language;
     return accountSettings;
   }
 
   public static serialize(accountSettings: AccountSettings): any {
     return {
       commentReplyMailsEnabled: accountSettings.commentReplyMailsEnabled,
+      language: accountSettings.language,
     };
   }
 }

client/src/app/models/comment.ts

@@ -72,17 +72,4 @@ export class Comment extends AbstractModel {
       parentId: comment.parentId ?? null,
     };
   }
-
-  // TODO not used
-  public static serializeForUpdate(comment: Comment): any {
-    return {
-      message: comment.message,
-    };
-  }
-}
-
-// TODO not used
-export interface PaginatedComments {
-  items: Comment[];
-  hasNext: boolean;
 }

client/src/app/models/instance-settings.ts

@@ -1,6 +1,7 @@
 import { File } from './file';
 import { FaDefaultFormat } from '../enums/fa-default-format';
 import { StartingPosition } from '../enums/starting-position';
+import { LanguageCode } from '../utility/types/language';
 
 export class InstanceSettings {
   timeUpdated: Date;
@@ -28,6 +29,7 @@ export class InstanceSettings {
   defaultStartingPosition: StartingPosition;
   rankingPastWeeks: number | null;
   disableFAInAscents: boolean;
+  language: LanguageCode;
 
   public static deserialize(payload: any): InstanceSettings {
     const instanceSettings = new InstanceSettings();
@@ -65,6 +67,7 @@ export class InstanceSettings {
     instanceSettings.defaultStartingPosition = payload.defaultStartingPosition;
     instanceSettings.rankingPastWeeks = payload.rankingPastWeeks;
     instanceSettings.disableFAInAscents = payload.disableFAInAscents;
+    instanceSettings.language = payload.language;
     return instanceSettings;
   }
 
@@ -100,6 +103,7 @@ export class InstanceSettings {
       defaultStartingPosition: instanceSettings.defaultStartingPosition,
       rankingPastWeeks: instanceSettings.rankingPastWeeks,
       disableFAInAscents: instanceSettings.disableFAInAscents,
+      language: instanceSettings.language,
     };
   }
 }

client/src/app/models/user.ts

@@ -1,5 +1,6 @@
 import { AbstractModel } from './abstract-model';
 import { File } from './file';
+import { LanguageCode } from '../utility/types/language';
 
 /**
  * Model of a user.
@@ -18,6 +19,7 @@ export class User extends AbstractModel {
   member: boolean;
   activatedAt: Date;
   avatar: File;
+  accountLanguage: LanguageCode;
 
   fullname: string;
   routerLink: string;
@@ -46,6 +48,7 @@ export class User extends AbstractModel {
     user.fullname = `${user.firstname} ${user.lastname}`;
     user.avatar = payload.avatar ? File.deserialize(payload.avatar) : null;
     user.routerLink = `/users/${user.slug}`;
+    user.accountLanguage = payload.accountLanguage;
     return user;
   }
 

client/src/app/modules/archive/archive-button/archive-button.component.ts

@@ -13,7 +13,6 @@ import { ArchiveService } from '../../../services/crud/archive.service';
 import { GymModeDirective } from '../../shared/directives/gym-mode.directive';
 import { marker } from '@jsverse/transloco-keys-manager/marker';
 import { ConfirmationService } from 'primeng/api';
-import { environment } from '../../../../environments/environment';
 
 @Component({
   selector: 'lc-archive-button',
@@ -92,30 +91,28 @@ export class ArchiveButtonComponent {
   }
 
   confirmArchiveTopoImage(event: Event) {
-    this.translocoService.load(`${environment.language}`).subscribe(() => {
-      this.confirmationService.confirm({
-        target: event.target,
-        message: this.translocoService.translate(
-          this.topoImage.archived
-            ? marker('archive.askAlsoUnArchiveLines')
-            : marker('archive.askAlsoArchiveLines'),
-        ),
-        acceptLabel: this.translocoService.translate(
-          marker('archive.yesWithLines'),
-        ),
-        acceptButtonStyleClass: 'p-button-primary',
-        rejectButtonStyleClass: 'p-button-secondary',
-        rejectLabel: this.translocoService.translate(
-          marker('archive.noWithoutLines'),
-        ),
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-          this.doArchiveTopoImage(true);
-        },
-        reject: () => {
-          this.doArchiveTopoImage(false);
-        },
-      });
+    this.confirmationService.confirm({
+      target: event.target,
+      message: this.translocoService.translate(
+        this.topoImage.archived
+          ? marker('archive.askAlsoUnArchiveLines')
+          : marker('archive.askAlsoArchiveLines'),
+      ),
+      acceptLabel: this.translocoService.translate(
+        marker('archive.yesWithLines'),
+      ),
+      acceptButtonStyleClass: 'p-button-primary',
+      rejectButtonStyleClass: 'p-button-secondary',
+      rejectLabel: this.translocoService.translate(
+        marker('archive.noWithoutLines'),
+      ),
+      icon: 'pi pi-exclamation-triangle',
+      accept: () => {
+        this.doArchiveTopoImage(true);
+      },
+      reject: () => {
+        this.doArchiveTopoImage(false);
+      },
     });
   }
 

client/src/app/modules/area/area-form/area-form.component.ts

@@ -27,7 +27,6 @@ import { ConfirmationService, SelectItem } from 'primeng/api';
 import { catchError, map } from 'rxjs/operators';
 import { forkJoin, of } from 'rxjs';
 import { toastNotification } from '../../../ngrx/actions/notifications.actions';
-import { environment } from '../../../../environments/environment';
 import { marker } from '@jsverse/transloco-keys-manager/marker';
 import { Area } from '../../../models/area';
 import { AreasService } from '../../../services/crud/areas.service';
@@ -302,22 +301,18 @@ export class AreaFormComponent implements OnInit {
    * @param event Click event.
    */
   confirmDeleteArea(event: Event) {
-    this.translocoService.load(`${environment.language}`).subscribe(() => {
-      this.confirmationService.confirm({
-        target: event.target,
-        message: this.translocoService.translate(
-          marker('area.askReallyWantToDeleteArea'),
-        ),
-        acceptLabel: this.translocoService.translate(marker('area.yesDelete')),
-        acceptButtonStyleClass: 'p-button-danger',
-        rejectLabel: this.translocoService.translate(
-          marker('area.noDontDelete'),
-        ),
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-          this.deleteArea();
-        },
-      });
+    this.confirmationService.confirm({
+      target: event.target,
+      message: this.translocoService.translate(
+        marker('area.askReallyWantToDeleteArea'),
+      ),
+      acceptLabel: this.translocoService.translate(marker('area.yesDelete')),
+      acceptButtonStyleClass: 'p-button-danger',
+      rejectLabel: this.translocoService.translate(marker('area.noDontDelete')),
+      icon: 'pi pi-exclamation-triangle',
+      accept: () => {
+        this.deleteArea();
+      },
     });
   }
 

client/src/app/modules/area/area-list/area-list.component.ts

@@ -4,7 +4,6 @@ import { ConfirmationService, PrimeIcons, SelectItem } from 'primeng/api';
 import { forkJoin, Observable } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-import { environment } from '../../../../environments/environment';
 import { marker } from '@jsverse/transloco-keys-manager/marker';
 import { selectIsMobile } from '../../../ngrx/selectors/device.selectors';
 import { Area } from '../../../models/area';
@@ -99,36 +98,35 @@ export class AreaListComponent implements OnInit {
    * Loads new data.
    */
   refreshData() {
-    forkJoin([
-      this.areasService.getAreas(this.sectorSlug),
-      this.translocoService.load(`${environment.language}`),
-    ]).subscribe(([areas]) => {
-      this.areas = areas;
-      this.loading = LoadingState.DEFAULT;
-      this.sortOptions = [
-        {
-          icon: PrimeIcons.SORT_AMOUNT_DOWN_ALT,
-          label: this.translocoService.translate(marker('sortAscending')),
-          value: '!orderIndex',
-        },
-        {
-          icon: PrimeIcons.SORT_AMOUNT_DOWN,
-          label: this.translocoService.translate(marker('sortDescending')),
-          value: 'orderIndex',
-        },
-        {
-          icon: PrimeIcons.SORT_ALPHA_DOWN,
-          label: this.translocoService.translate(marker('sortAZ')),
-          value: '!name',
-        },
-        {
-          icon: 'pi pi-sort-alpha-down-alt',
-          label: this.translocoService.translate(marker('sortZA')),
-          value: 'name',
-        },
-      ];
-      this.sortKey = this.sortOptions[0];
-    });
+    forkJoin([this.areasService.getAreas(this.sectorSlug)]).subscribe(
+      ([areas]) => {
+        this.areas = areas;
+        this.loading = LoadingState.DEFAULT;
+        this.sortOptions = [
+          {
+            icon: PrimeIcons.SORT_AMOUNT_DOWN_ALT,
+            label: this.translocoService.translate(marker('sortAscending')),
+            value: '!orderIndex',
+          },
+          {
+            icon: PrimeIcons.SORT_AMOUNT_DOWN,
+            label: this.translocoService.translate(marker('sortDescending')),
+            value: 'orderIndex',
+          },
+          {
+            icon: PrimeIcons.SORT_ALPHA_DOWN,
+            label: this.translocoService.translate(marker('sortAZ')),
+            value: '!name',
+          },
+          {
+            icon: 'pi pi-sort-alpha-down-alt',
+            label: this.translocoService.translate(marker('sortZA')),
+            value: 'name',
+          },
+        ];
+        this.sortKey = this.sortOptions[0];
+      },
+    );
   }
 
   /**

client/src/app/modules/area/area/area.component.ts

@@ -29,7 +29,6 @@ import { Breadcrumb } from 'primeng/breadcrumb';
 import { Tab, TabList, Tabs } from 'primeng/tabs';
 import { SetActiveTabDirective } from '../../shared/directives/set-active-tab.directive';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Badge } from 'primeng/badge';
 
 @Component({
   selector: 'lc-area',
@@ -46,7 +45,6 @@ import { Badge } from 'primeng/badge';
     Tab,
     RouterLink,
     RouterOutlet,
-    Badge,
   ],
   providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'area' }],
 })
@@ -101,7 +99,6 @@ export class AreaComponent implements OnInit {
             }),
           ),
           this.store.pipe(select(selectIsLoggedIn), take(1)),
-          this.translocoService.load(`${environment.language}`),
         ]).subscribe(([crag, sector, area, isLoggedIn]) => {
           this.crag = crag;
           this.sector = sector;

client/src/app/modules/ascent/ascent-list/ascent-list.component.ts

@@ -351,24 +351,20 @@ export class AscentListComponent implements OnInit, OnChanges {
   }
 
   confirmDeleteAscent(event: Event, ascent: Ascent) {
-    this.translocoService.load(`${environment.language}`).subscribe(() => {
-      this.confirmationService.confirm({
-        target: event.target,
-        message: this.translocoService.translate(
-          marker('ascent.askReallyWantToDeleteAscent'),
-        ),
-        acceptLabel: this.translocoService.translate(
-          marker('ascent.yesDelete'),
-        ),
-        acceptButtonStyleClass: 'p-button-danger',
-        rejectLabel: this.translocoService.translate(
-          marker('ascent.noDontDelete'),
-        ),
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-          this.deleteAscent(ascent);
-        },
-      });
+    this.confirmationService.confirm({
+      target: event.target,
+      message: this.translocoService.translate(
+        marker('ascent.askReallyWantToDeleteAscent'),
+      ),
+      acceptLabel: this.translocoService.translate(marker('ascent.yesDelete')),
+      acceptButtonStyleClass: 'p-button-danger',
+      rejectLabel: this.translocoService.translate(
+        marker('ascent.noDontDelete'),
+      ),
+      icon: 'pi pi-exclamation-triangle',
+      accept: () => {
+        this.deleteAscent(ascent);
+      },
     });
   }
 

client/src/app/modules/blog/post-form/post-form.component.ts

@@ -15,7 +15,6 @@ import { ConfirmationService } from 'primeng/api';
 import { catchError } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { marker } from '@jsverse/transloco-keys-manager/marker';
-import { environment } from '../../../../environments/environment';
 import { toastNotification } from '../../../ngrx/actions/notifications.actions';
 import { Post } from '../../../models/post';
 import { PostsService } from '../../../services/crud/posts.service';
@@ -181,22 +180,20 @@ export class PostFormComponent implements OnInit {
    * @param event Click event.
    */
   confirmDeletePost(event: Event) {
-    this.translocoService.load(`${environment.language}`).subscribe(() => {
-      this.confirmationService.confirm({
-        target: event.target,
-        message: this.translocoService.translate(
-          marker('posts.askReallyWantToDeletePost'),
-        ),
-        acceptLabel: this.translocoService.translate(marker('posts.yesDelete')),
-        acceptButtonStyleClass: 'p-button-danger',
-        rejectLabel: this.translocoService.translate(
-          marker('posts.noDontDelete'),
-        ),
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-          this.deletePost();
-        },
-      });
+    this.confirmationService.confirm({
+      target: event.target,
+      message: this.translocoService.translate(
+        marker('posts.askReallyWantToDeletePost'),
+      ),
+      acceptLabel: this.translocoService.translate(marker('posts.yesDelete')),
+      acceptButtonStyleClass: 'p-button-danger',
+      rejectLabel: this.translocoService.translate(
+        marker('posts.noDontDelete'),
+      ),
+      icon: 'pi pi-exclamation-triangle',
+      accept: () => {
+        this.deletePost();
+      },
     });
   }