Add language editor component

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

.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;

	}

}

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

}

}

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

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