MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Vastly improved Language Editor loading time (virtual scrolling)

This commit is contained in:
George Kalampokis 2020-02-26 17:23:48 +02:00
parent 4e9b804744
commit 51ade4f618
3 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,11 @@
<div *ngIf="parseFinished" class="language-editor"> <div *ngIf="parseFinished" class="language-editor" [style.height]="(keys.length * rowHeight) + 'px'">
<form (ngSubmit)="updateLang()" [formGroup]="formGroup"> <form (ngSubmit)="updateLang()" [formGroup]="formGroup">
<div class="row"> <div class="row">
<mat-card class="col-md-8 offset-md-2"> <mat-card class="col-md-8 offset-md-2 sticky">
<mat-card-title><div [innerHTML]="currentLang"></div></mat-card-title> <mat-card-title><div [innerHTML]="currentLang"></div></mat-card-title>
<mat-card-content> <mat-card-content>
<div *ngFor="let key of keys"> <div>
<div *ngFor="let key of visibleKeys">
<mat-form-field > <mat-form-field >
<mat-label>{{key}} :</mat-label> <mat-label>{{key}} :</mat-label>
<textarea matInput class="language-area" <textarea matInput class="language-area"
@ -15,6 +16,7 @@
cdkAutosizeMaxRows="5"></textarea> cdkAutosizeMaxRows="5"></textarea>
</mat-form-field > </mat-form-field >
</div> </div>
</div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<button mat-fab class="mat-fab-bottom-right save-btn" type="submit"> <button mat-fab class="mat-fab-bottom-right save-btn" type="submit">

7
dmp-frontend/src/app/ui/language-editor/language-editor.component.scss
View File

@ -14,4 +14,11 @@
position: fixed; position: fixed;
right: 10px; right: 10px;
} }
.sticky {
position: fixed;
left: 200px;
right: 150px;
width: 50%;
}
} }

28
dmp-frontend/src/app/ui/language-editor/language-editor.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { LanguageService } from '@app/core/services/language/language.service'; import { LanguageService } from '@app/core/services/language/language.service';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
@ -12,8 +12,14 @@ import { Router } from '@angular/router';
templateUrl: './language-editor.component.html', templateUrl: './language-editor.component.html',
styleUrls: ['./language-editor.component.scss'] styleUrls: ['./language-editor.component.scss']
}) })
export class LanguageEditorComponent extends BaseComponent implements OnInit { export class LanguageEditorComponent extends BaseComponent implements OnInit, OnDestroy {
readonly rowHeight = 100;
readonly maxElements = 12;
keys = []; keys = [];
visibleKeys = [];
startIndex = 0;
endIndex: number;
parseFinished = false; parseFinished = false;
currentLang: string; currentLang: string;
formGroup: FormGroup; formGroup: FormGroup;
@ -29,6 +35,8 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.formBuilder = new FormBuilder(); this.formBuilder = new FormBuilder();
this.formGroup = this.formBuilder.group({}); this.formGroup = this.formBuilder.group({});
this.endIndex = this.maxElements;
window.addEventListener('scroll', this.refreshFn, true);
this.language.getCurrentLanguageJSON() this.language.getCurrentLanguageJSON()
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(response => { .subscribe(response => {
@ -38,12 +46,17 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit {
}); });
} }
ngOnDestroy() {
window.removeEventListener('scroll', this.refreshFn, true);
}
convertBlobToJSON(blob: Blob) { convertBlobToJSON(blob: Blob) {
const fr = new FileReader(); const fr = new FileReader();
fr.onload = ev => { fr.onload = ev => {
const langObj = JSON.parse(fr.result as string); const langObj = JSON.parse(fr.result as string);
this.convertObjectToForm(langObj, '', this.formGroup); this.convertObjectToForm(langObj, '', this.formGroup);
this.currentLang = this.language.getCurrentLanguageName(); this.currentLang = this.language.getCurrentLanguageName();
this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex);
this.parseFinished = true; this.parseFinished = true;
}; };
fr.readAsText(blob); fr.readAsText(blob);
@ -88,4 +101,15 @@ onCallbackError(error: any) {
//this.validateAllFormFields(this.formGroup); //this.validateAllFormFields(this.formGroup);
} }
refreshFn = (ev: Event) => {
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);
}
}
} }