diff --git a/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.html b/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.html new file mode 100644 index 000000000..e4982c2a1 --- /dev/null +++ b/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.html @@ -0,0 +1,16 @@ +
+
+
+ {{'LANGUAGE.TITLE' | translate}} +
+
+ close +
+
+
+ +
+
+
+
+
diff --git a/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.scss b/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.scss new file mode 100644 index 000000000..6fbd87e8d --- /dev/null +++ b/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.scss @@ -0,0 +1,17 @@ +.form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.full-width { + width: 100%; +} + +.close-btn { + cursor: pointer; +} + +.language { + margin-bottom: 1.125rem; +} diff --git a/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.ts b/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.ts new file mode 100644 index 000000000..a43dc91bb --- /dev/null +++ b/dmp-frontend/src/app/ui/language/dialog/language-dialog.component.ts @@ -0,0 +1,31 @@ +import { Component, Inject } from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; + +@Component({ + selector: 'app-language-dialog', + templateUrl: './language-dialog.component.html', + styleUrls: ['./language-dialog.component.scss'] +}) +export class LanguageDialogComponent { + + public isDialog: boolean; + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) { + this.isDialog = data.isDialog; + } + + cancel() { + this.dialogRef.close(); + } + + send() { + this.dialogRef.close(this.data); + } + + close() { + this.dialogRef.close(false); + } +} diff --git a/dmp-frontend/src/app/ui/language/language-content/language.component.html b/dmp-frontend/src/app/ui/language/language-content/language.component.html new file mode 100644 index 000000000..d23cad05b --- /dev/null +++ b/dmp-frontend/src/app/ui/language/language-content/language.component.html @@ -0,0 +1,5 @@ + +
+ {{lang.label | translate}} +
+
diff --git a/dmp-frontend/src/app/ui/language/language-content/language.component.scss b/dmp-frontend/src/app/ui/language/language-content/language.component.scss new file mode 100644 index 000000000..aea7dec4f --- /dev/null +++ b/dmp-frontend/src/app/ui/language/language-content/language.component.scss @@ -0,0 +1,9 @@ +::ng-deep.lang-menu { + border-color: transparent; + padding: 8px; +} + +::ng-deep.lang-button { + padding-top: 15px; + padding-bottom: 15px; +} diff --git a/dmp-frontend/src/app/ui/language/language-content/language.component.ts b/dmp-frontend/src/app/ui/language/language-content/language.component.ts new file mode 100644 index 000000000..791ed94d1 --- /dev/null +++ b/dmp-frontend/src/app/ui/language/language-content/language.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { AuthService } from '@app/core/services/auth/auth.service'; +import { LanguageService } from '@app/core/services/language/language.service'; +import { UserService } from '@app/core/services/user/user.service'; +import { takeUntil } from 'rxjs/operators'; +import { BaseComponent } from '@common/base/base.component'; + +const availableLanguages: any[] = require('../../../../assets/resources/language.json'); + +@Component({ + selector: 'app-language', + templateUrl: './language.component.html', + styleUrls: ['./language.component.scss'] +}) +export class LanguageComponent extends BaseComponent implements OnInit { + + languages = availableLanguages; + + constructor( + private router: Router, + private authentication: AuthService, + private languageService: LanguageService, + private userService: UserService + ) { super(); } + + ngOnInit() { + } + + public isAuthenticated(): boolean { + return !(!this.authentication.current()); +} + + public getCurrentLanguage(): any { + const lang = this.languages.find(lang => lang.value === this.languageService.getCurrentLanguage()); + return lang; +} + + onLanguageSelected(selectedLanguage: any) { + if (this.isAuthenticated()) { + const langMap = new Map(); + langMap.set('language', selectedLanguage.value); + this.userService.updateUserSettings({language: this.languages.find(lang => lang.value === selectedLanguage.value)}) + .pipe(takeUntil(this._destroyed)) + .subscribe((response) => { + this.languageService.changeLanguage(selectedLanguage.value); + this.authentication.me() + .pipe(takeUntil(this._destroyed)) + .subscribe ( innerResponse => + {this.router.navigateByUrl(this.router.url);}); + }, + error => { + console.log(error); + }); + } else { + this.languageService.changeLanguage(selectedLanguage.value); + this.router.navigateByUrl(this.router.url); + } +} + +} diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html index 5aa660932..90b73b423 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.html +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html @@ -41,15 +41,7 @@ language - -
- {{lang.label | translate}} -
-
- - +
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.scss b/dmp-frontend/src/app/ui/navbar/navbar.component.scss index 552850e6a..fb7101ca8 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.scss +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.scss @@ -25,13 +25,3 @@ $mat-card-header-size: 40px !default; width: fit-content !important; min-width: auto !important; } - -::ng-deep.lang-menu { - border-color: transparent; - padding: 8px; -} - -::ng-deep.lang-button { - padding-top: 15px; - padding-bottom: 15px; -} diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts index 511bc566f..47ffa62d6 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts @@ -37,8 +37,7 @@ export class NavbarComponent extends BaseComponent implements OnInit { private authentication: AuthService, private dialog: MatDialog, private progressIndicationService: ProgressIndicationService, - private languageService: LanguageService, - private userService: UserService + private languageService: LanguageService ) { super(); this.location = location; @@ -211,26 +210,4 @@ export class NavbarComponent extends BaseComponent implements OnInit { position: { top: '64px', right: '1em' } }); } - - onLanguageSelected(selectedLanguage: any) { - if (this.isAuthenticated()) { - const langMap = new Map(); - langMap.set('language', selectedLanguage.value); - this.userService.updateUserSettings({language: this.languages.find(lang => lang.value === selectedLanguage.value)}) - .pipe(takeUntil(this._destroyed)) - .subscribe((response) => { - this.languageService.changeLanguage(selectedLanguage.value); - this.authentication.me() - .pipe(takeUntil(this._destroyed)) - .subscribe ( innerResponse => - {this.router.navigate([this.router.url]);}); - }, - error => { - console.log(error); - }); - } else { - this.languageService.changeLanguage(selectedLanguage.value); - this.router.navigate([this.router.url]); - } - } } diff --git a/dmp-frontend/src/app/ui/navbar/navbar.module.ts b/dmp-frontend/src/app/ui/navbar/navbar.module.ts index 4d89a8027..78fd53053 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.module.ts +++ b/dmp-frontend/src/app/ui/navbar/navbar.module.ts @@ -5,13 +5,15 @@ import { SearchComponent } from '@app/ui/misc/search/search.component'; import { NavbarComponent } from '@app/ui/navbar/navbar.component'; import { CommonFormsModule } from '@common/forms/common-forms.module'; import { CommonUiModule } from '@common/ui/common-ui.module'; +import { LanguageModule } from '../language/language.module'; @NgModule({ imports: [ CommonUiModule, CommonFormsModule, RouterModule, - BreadcrumbModule + BreadcrumbModule, + LanguageModule ], declarations: [ NavbarComponent, diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html index df25ff991..95839687b 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html @@ -29,8 +29,8 @@ @@ -64,7 +70,7 @@

{{groupMenuItem.title | translate}}