Update language Editor (still not functional)

This commit is contained in:
George Kalampokis 2020-07-10 18:41:20 +03:00
parent aa930f097a
commit 8eb054f9d2
1 changed files with 101 additions and 102 deletions

View File

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