From 8eb054f9d2e6a306e5c7de5701f06ce5745de99b Mon Sep 17 00:00:00 2001 From: George Kalampokis Date: Fri, 10 Jul 2020 18:41:20 +0300 Subject: [PATCH] Update language Editor (still not functional) --- .../language-editor.component.ts | 203 +++++++++--------- 1 file changed, 101 insertions(+), 102 deletions(-) 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 index 21dbbe559..dcf941546 100644 --- a/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.ts @@ -8,9 +8,9 @@ import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/serv import { Router } from '@angular/router'; @Component({ - selector: 'app-language-editor', - templateUrl: './language-editor.component.html', - styleUrls: ['./language-editor.component.scss'] + selector: 'app-language-editor', + templateUrl: './language-editor.component.html', + styleUrls: ['./language-editor.component.scss'] }) export class LanguageEditorComponent extends BaseComponent implements OnInit, OnDestroy { readonly rowHeight = 100; @@ -26,113 +26,112 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On formGroup: FormGroup; formBuilder: FormBuilder; - constructor( - private language: LanguageService, - private uiNotificationService: UiNotificationService, - private translate: TranslateService, - private router: Router, - ) { super(); } + 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.endIndex = this.maxElements; - window.addEventListener('scroll', this.refreshFn, true); - this.language.getCurrentLanguageJSON() - .pipe(takeUntil(this._destroyed)) - .subscribe(response => { - const blob = new Blob([response.body], { type: 'application/json' }); - this.convertBlobToJSON(blob); + ngOnInit() { + this.formBuilder = new FormBuilder(); + this.formGroup = this.formBuilder.group({}); + this.endIndex = this.maxElements; + window.addEventListener('scroll', this.refreshFn, true); + this.language.getCurrentLanguageJSON() + .pipe(takeUntil(this._destroyed)) + .subscribe(response => { + const blob = new Blob([response.body], { type: 'application/json' }); + this.convertBlobToJSON(blob); - }); - } + }); + } - ngOnDestroy() { - window.removeEventListener('scroll', this.refreshFn, true); - } + ngOnDestroy() { + window.removeEventListener('scroll', this.refreshFn, true); + } - 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(); + 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.keys.length = 0; + for (const key of this.allkeys) { + this.keys.push(key); + } + this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex); + 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.allkeys.push(key); + } + } + return; + } + + updateLang() { + const json = JSON.stringify(this.formGroup.value, null, " "); + 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); + } + + refreshFn = (ev: Event) => { + if (document.scrollingElement !== undefined) { + this.startIndex = Math.floor(document.scrollingElement.scrollTop / this.rowHeight); + this.endIndex = this.startIndex + this.maxElements; + const tempKeys = this.keys.slice(this.startIndex, this.endIndex); + this.visibleKeys.length = 0; + for (const key of tempKeys) { + this.visibleKeys.push(key); + } + } + } + + findKeys(ev: any) { + let tempKeys = []; + if (ev.value === "") { + tempKeys = this.allkeys; + } else { + tempKeys = this.allkeys.filter((key) => (this.formGroup.get(key).value as string).toLowerCase().includes(ev.value.toLowerCase())); + window.scrollTo({ top: 0 }); + } this.keys.length = 0; - for (const key of this.allkeys) { + for (const key of tempKeys) { this.keys.push(key); } this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex); - 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.allkeys.push(key); - } - } - return; - } - - updateLang() { - const json = JSON.stringify(this.formGroup.value, null, " "); - 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); -} - -refreshFn = (ev: Event) => { - - if ((ev.srcElement as HTMLDocument).scrollingElement !== undefined) { - this.startIndex = Math.floor((ev.srcElement as HTMLDocument).scrollingElement.scrollTop / this.rowHeight); - this.endIndex = this.startIndex + this.maxElements; - const tempKeys = this.keys.slice(this.startIndex, this.endIndex); - this.visibleKeys.length = 0; - for (const key of tempKeys) { - this.visibleKeys.push(key); - } } -} - -findKeys(ev: any) { - let tempKeys = []; - if (ev.value === "") { - tempKeys = this.allkeys; - } else { - tempKeys = this.allkeys.filter((key) => (this.formGroup.get(key).value as string).toLowerCase().includes(ev.value.toLowerCase())); - window.scrollTo({top: 0}); - } - this.keys.length = 0; - for (const key of tempKeys) { - this.keys.push(key); - } - this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex); -} }