argos/dmp-frontend/src/app/ui/supportive-material-editor/supportive-material-editor.component.ts

import { Component, OnInit } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
import { TranslateService } from '@ngx-translate/core';
import { Router } from '@angular/router';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
import { environment } from 'environments/environment';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { AuthService } from '@app/core/services/auth/auth.service';
import { LanguageService } from '@app/core/services/language/language.service';
import { MatomoService } from '@app/core/services/matomo/matomo-service';
import { HttpClient } from '@angular/common/http';
import { SupportiveMaterialService } from '@app/core/services/supportive-material/supportive-material.service';
import { SupportiveMaterialFieldType } from '@app/core/common/enum/supportive-material-field-type';
import { SupportiveMaterialPersist } from '@app/core/model/supportive-material/supportive-material';
import { Guid } from '@common/types/guid';

interface VisibleMaterialType{
	name: string;
	type: SupportiveMaterialFieldType;
}

interface VisibleLangType{
	name: string;
	type: string;
}


@Component({
  selector: 'app-supportive-material-editor',
  templateUrl: './supportive-material-editor.component.html',
  styleUrls: ['./supportive-material-editor.component.scss']
})
export class SupportiveMaterialEditorComponent extends BaseComponent implements OnInit {
	public formGroup: UntypedFormGroup;
	private formBuilder: UntypedFormBuilder;

  constructor(private supportiveMaterialService: SupportiveMaterialService,
	private uiNotificationService: UiNotificationService,
	  private translate: TranslateService,
	  private router: Router,
	  private configurationService: ConfigurationService,
	  private languageService: LanguageService,
	  private httpClient: HttpClient,
		private matomoService: MatomoService
	) { super(); }


	visiblesMaterialsTypes: VisibleMaterialType[] = [
		{name: "FOOTER.FAQ", type: SupportiveMaterialFieldType.Faq},
		{name: "FOOTER.ABOUT", type: SupportiveMaterialFieldType.About},
		{name: "FOOTER.GLOSSARY", type: SupportiveMaterialFieldType.Glossary},
		{name: "FOOTER.TERMS-OF-SERVICE", type: SupportiveMaterialFieldType.TermsOfService},
		{name: "FOOTER.GUIDE", type: SupportiveMaterialFieldType.UserGuide}
	] 

	visiblesLangTypes: VisibleLangType[] = [
		{name: "GENERAL.LANGUAGES.ENGLISH", type: "en"},
		{name: "GENERAL.LANGUAGES.GREEK", type: "gr"},
		{name: "GENERAL.LANGUAGES.SPANISH", type: "es"},
		{name: "GENERAL.LANGUAGES.GERMAN", type: "de"},
		{name: "GENERAL.LANGUAGES.TURKISH", type: "tr"},
		{name: "GENERAL.LANGUAGES.SLOVAK", type: "sk"},
		{name: "GENERAL.LANGUAGES.SERBIAN", type: "sr"},
		{name: "GENERAL.LANGUAGES.PORTUGUESE", type: "pt"},
		{name: "GENERAL.LANGUAGES.CROATIAN", type: "hr"},
		{name: "GENERAL.LANGUAGES.POLISH", type: "pl"}

	] 

	selectedMaterial: VisibleMaterialType;
	selectedLang: VisibleLangType;
	materialId: Guid = null;

  ngOnInit() {
	this.selectedMaterial = this.visiblesMaterialsTypes.find(x => x.type == SupportiveMaterialFieldType.Faq);
	this.selectedLang = this.visiblesLangTypes.find(x => x.type == this.languageService.getCurrentLanguage());
	this.getSupportiveMaterialData();
	
  }

  public selectedMaterialChanged(item: VisibleMaterialType){
	this.selectedMaterial = item;
	this.getSupportiveMaterialData();
  }

  public selectedLangChanged(item: VisibleLangType){
	this.selectedLang = item;
	this.getSupportiveMaterialData();
  }

  private getSupportiveMaterialData(){
	this.matomoService.trackPageView(`Admin: ${this.selectedMaterial.name} Editor`);
	this.formBuilder = new UntypedFormBuilder();
	this.formGroup = this.formBuilder.group({
		name: [''],
		html: ['']
	});
	// this.supportiveMaterialService.getPublic(this.selectedLang.type, this.selectedMaterial.type).pipe(takeUntil(this._destroyed)).subscribe(data => {
	// 	const contentDispositionHeader = data.headers.get('Content-Disposition');
	// 	const filename = contentDispositionHeader.split(';')[1].trim().split('=')[1].replace(/"/g, '');

	// 	this.formGroup.get('name').patchValue(filename);
	// 	this.loadFile(data.body);
	// });
	const lookup = SupportiveMaterialService.DefaultSupportiveMaterialLookup();
	lookup.types = [this.selectedMaterial.type];
	lookup.languageCodes = [this.selectedLang.type];
	this.supportiveMaterialService.query(lookup).pipe(takeUntil(this._destroyed)).subscribe(data => {
		if(data.count == 1){
			this.materialId = data.items[0].id;
			this.formGroup.get('html').patchValue(data.items[0].payload);
		}
	});
  }

  private parseText(source: string): string {
	source = source.replace(/src="images/g, `src="${this.configurationService.guideAssets}`);
	source = source.replace(/\r\n +>/g, '>\n');
	const brokenElements = Array.from(new Set(source.match(/<\/\w+\d* >/g)));
	if (!isNullOrUndefined(brokenElements)) {
		brokenElements.forEach((brokenElement) => {
			const tempvalue = brokenElement.match(/\/\w+\d*/)[0];
			source = source.replace(new RegExp(brokenElement, 'g'), `<${tempvalue}>\n`);
		});
	}
	return source;
  }

//   loadFile(data: Blob) {
// 	const reader = new FileReader();
// 	reader.addEventListener('load', () => {
// 		let result = this.parseText(reader.result as string);
// 		//result = result.replace(/class="href" path="/g, 'href="#');
// 	 	this.formGroup.get('html').patchValue(result);
//   }, false);
// 	reader.readAsText(data);
//   }

  submit() {
	  let result = this.parseText(this.formGroup.get('html').value);
	  this.formGroup.get('html').patchValue(result);
	  const item = {id: this.materialId, 
					type: this.selectedMaterial.type, 
					languageCode: this.selectedLang.type,
					payload: this.formGroup.value['html']} as SupportiveMaterialPersist;
					
	this.supportiveMaterialService.persist(item).pipe(takeUntil(this._destroyed))
	.subscribe(
		complete => {
			 this.onCallbackSuccess();
		},
		error => {
			this.onCallbackError(error);
		}
	);

}

onCallbackSuccess(): void {
  this.uiNotificationService.snackBarNotification( this.translate.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
  this.router.navigate(['/reload']).then(() => this.router.navigate(['/supportive-material']));
}

onCallbackError(error: any) {
  this.uiNotificationService.snackBarNotification( error, SnackBarNotificationLevel.Error);
  //this.validateAllFormFields(this.formGroup);
}

}