diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.html b/dmp-frontend/src/app/ui/language-editor/language-editor.component.html new file mode 100644 index 000000000..b9eaa1621 --- /dev/null +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.html @@ -0,0 +1,26 @@ +
+
+
+ +
+ +
+ + {{key}} : + + +
+
+
+ +
+ +
+
diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss b/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss new file mode 100644 index 000000000..39e04d644 --- /dev/null +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss @@ -0,0 +1,17 @@ +.language-editor { + padding-top: 5em; + padding-bottom: 2em; + + .language-area { + box-sizing: content-box; + } + + .save-btn { + padding-top: inherit !important; + top: auto !important; + width: 56px !important; + bottom: 10px; + position: fixed; + right: 10px; + } +} diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts b/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts new file mode 100644 index 000000000..68050e652 --- /dev/null +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts @@ -0,0 +1,91 @@ +import { Component, OnInit } from '@angular/core'; +import { LanguageService } from '@app/core/services/language/language.service'; +import { BaseComponent } from '@common/base/base.component'; +import { takeUntil } from 'rxjs/operators'; +import { FormGroup, FormBuilder } from '@angular/forms'; +import { TranslateService } from '@ngx-translate/core'; +import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-language-editor', + templateUrl: './language-editor.component.html', + styleUrls: ['./language-editor.component.scss'] +}) +export class LanguageEditorComponent extends BaseComponent implements OnInit { + keys = []; + parseFinished = false; + currentLang: string; + formGroup: FormGroup; + formBuilder: FormBuilder; + + constructor( + private language: LanguageService, + private uiNotificationService: UiNotificationService, + private translate: TranslateService, + private router: Router, + ) { super(); } + + ngOnInit() { + this.formBuilder = new FormBuilder(); + this.formGroup = this.formBuilder.group({}); + this.language.getCurrentLanguageJSON() + .pipe(takeUntil(this._destroyed)) + .subscribe(response => { + const blob = new Blob([response.body], { type: 'application/json' }); + this.convertBlobToJSON(blob); + + }); + } + + convertBlobToJSON(blob: Blob) { + const fr = new FileReader(); + fr.onload = ev => { + const langObj = JSON.parse(fr.result as string); + this.convertObjectToForm(langObj, '', this.formGroup); + this.currentLang = this.language.getCurrentLanguageName(); + this.parseFinished = true; + }; + fr.readAsText(blob); + } + + convertObjectToForm(obj: any, parentKey: string, form: FormGroup) { + for (let prop in obj) { + const key = parentKey !== '' ? `${parentKey}.${prop}` : prop; + if (typeof obj[prop] === 'object') { + form.addControl(prop, this.formBuilder.group({})); + this.convertObjectToForm(obj[prop], key, form.get(prop) as FormGroup); + continue; + } else { + form.addControl(prop, this.formBuilder.control(obj[prop])); + this.keys.push(key); + } + } + return; + } + + updateLang() { + const json = JSON.stringify(this.formGroup.value); + this.language.updateLanguage(json).pipe(takeUntil(this._destroyed)) + .subscribe( + complete => { + this.onCallbackSuccess(complete); + }, + error => { + this.onCallbackError(error); + } + ); + + } + + onCallbackSuccess(id?: String): void { + this.uiNotificationService.snackBarNotification( this.translate.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success); + this.router.navigate(['/reload']).then(() => this.router.navigate(['/language-editor'])); +} + +onCallbackError(error: any) { + this.uiNotificationService.snackBarNotification( error, SnackBarNotificationLevel.Error); + //this.validateAllFormFields(this.formGroup); +} + +} diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts b/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts new file mode 100644 index 000000000..ff38b4929 --- /dev/null +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { LanguageEditorComponent } from './language-editor.component'; +import { LanguageEditorRoutingModule } from './language-editor.routing'; +import { CommonUiModule } from '@common/ui/common-ui.module'; +import { CommonFormsModule } from '@common/forms/common-forms.module'; +import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module'; + + + +@NgModule({ + declarations: [LanguageEditorComponent], + imports: [ + CommonUiModule, + CommonFormsModule, + ConfirmationDialogModule, + LanguageEditorRoutingModule + ] +}) +export class LanguageEditorModule { } diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.routing.ts b/dmp-frontend/src/app/ui/language-editor/language-editor.routing.ts new file mode 100644 index 000000000..423d8dd32 --- /dev/null +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.routing.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { LanguageEditorComponent } from './language-editor.component'; + +const routes: Routes = [ + { path: '', component: LanguageEditorComponent }, + // { path: ':id', component: UserProfileComponent } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class LanguageEditorRoutingModule { }