Add language editor component

dmp-frontend/src/app/ui/language-editor/language-editor.component.html

@@ -0,0 +1,26 @@
+<div *ngIf="parseFinished" class="language-editor">
+	<form (ngSubmit)="updateLang()" [formGroup]="formGroup">
+	<div class="row">
+		<mat-card class="col-md-8 offset-md-2">
+			<mat-card-title><div [innerHTML]="currentLang"></div></mat-card-title>
+			<mat-card-content>
+				<div *ngFor="let key of keys">
+					<mat-form-field >
+						<mat-label>{{key}} :</mat-label>
+						<textarea matInput class="language-area"
+									[formControl]="formGroup.get(key)"
+									cdkTextareaAutosize
+									#autosize="cdkTextareaAutosize"
+									cdkAutosizeMinRows="1"
+									cdkAutosizeMaxRows="5"></textarea>
+					</mat-form-field >
+				</div>
+			</mat-card-content>
+		</mat-card>
+		<button mat-fab class="mat-fab-bottom-right save-btn" type="submit">
+			<mat-icon class="mat-24" title="save">save</mat-icon>
+		</button>
+	</div>
+
+</form>
+</div>

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;
+	}
+}

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);
+}
+
+}

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 { }

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 { }