add a language switcher fixes #352

src-ui/src/app/components/manage/settings/settings.component.html

@@ -12,6 +12,21 @@
 
         <h4 i18n>Appearance</h4>
 
+        <div class="form-row form-group">
+          <div class="col-md-3 col-form-label">
+            <span i18n>Display language</span>
+          </div>
+          <div class="col">
+
+            <select class="form-control" formControlName="displayLanguage">
+              <option *ngFor="let lang of languages" [ngValue]="lang.code">{{lang.name}}</option>
+            </select>
+
+            <small class="form-text text-muted" i18n>You need to reload the page after applying a new language.</small>
+
+          </div>
+        </div>
+
         <div class="form-row form-group">
           <div class="col-md-3 col-form-label">
             <span i18n>Items per page</span>

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -22,7 +22,8 @@ export class SettingsComponent implements OnInit {
     'darkModeUseSystem': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)),
     'darkModeEnabled': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED)),
     'useNativePdfViewer': new FormControl(this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)),
-    'savedViews': this.savedViewGroup
+    'savedViews': this.savedViewGroup,
+    'displayLanguage': new FormControl(this.settings.getLanguage())
   })
 
   savedViews: PaperlessSavedView[]
@@ -63,11 +64,16 @@ export class SettingsComponent implements OnInit {
     this.settings.set(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem)
     this.settings.set(SETTINGS_KEYS.DARK_MODE_ENABLED, (this.settingsForm.value.darkModeEnabled == true).toString())
     this.settings.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, this.settingsForm.value.useNativePdfViewer)
+    this.settings.setLanguage(this.settingsForm.value.displayLanguage)
     this.documentListViewService.updatePageSize()
     this.settings.updateDarkModeSettings()
     this.toastService.showInfo($localize`Settings saved successfully.`)
   }
 
+  get languages() {
+    return this.settings.getLanguageOptions()
+  }
+
   saveSettings() {
     let x = []
     for (let id in this.savedViewGroup.value) {

src-ui/src/app/services/settings.service.ts

@@ -1,5 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
+import { CookieService } from 'ngx-cookie-service';
 
 export interface PaperlessSettings {
   key: string
@@ -34,7 +36,9 @@ export class SettingsService {
 
   constructor(
     private rendererFactory: RendererFactory2,
-    @Inject(DOCUMENT) private document
+    @Inject(DOCUMENT) private document,
+    private cookieService: CookieService,
+    private meta: Meta
   ) {
     this.renderer = rendererFactory.createRenderer(null, null);
 
@@ -55,6 +59,36 @@ export class SettingsService {
 
   }
 
+  getLanguageOptions() {
+    return [
+      {code: "", name: $localize`Use system language`},
+      {code: "en-us", name: `${$localize`English`} (English)`},
+      {code: "de", name: `${$localize`German`} (German)`},
+      {code: "nl", name: `${$localize`Dutch`} (Dutch)`},
+      {code: "fr", name: `${$localize`French`} (French)`}
+    ]
+  }
+
+  private getLanguageCookieName() {
+    let prefix = ""
+    if (this.meta.getTag('name=cookie_prefix')) {
+      prefix = this.meta.getTag('name=cookie_prefix').content
+    }
+    return `${prefix || ''}django_language`
+  }
+
+  getLanguage(): string {
+    return this.cookieService.get(this.getLanguageCookieName())
+  }
+
+  setLanguage(language: string) {
+    if (language) {
+      this.cookieService.set(this.getLanguageCookieName(), language)
+    } else {
+      this.cookieService.delete(this.getLanguageCookieName())
+    }
+  }
+
   get(key: string): any {
     let setting = SETTINGS.find(s => s.key == key)