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

Add Search bar for the language Editor and fixed some minor bugs on it

This commit is contained in:
George Kalampokis 2020-02-28 12:58:42 +02:00
parent 1254cabbf1
commit 687390e3b9
3 changed files with 55 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,12 @@
<div *ngIf="parseFinished" class="language-editor" [style.height]="(keys.length * rowHeight) + 'px'"> <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">
<div class="search-bar">
<input class="search-text" mat-input #search placeholder="{{ 'DASHBOARD.SEARCH' | translate }}">
<button mat-button type="button" (click)="findKeys(search)">
<mat-icon>search</mat-icon>
</button>
</div>
<mat-card class="col-md-8 offset-md-2 sticky"> <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>

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

@ -18,7 +18,25 @@
.sticky { .sticky {
position: fixed; position: fixed;
left: 200px; left: 200px;
right: 150px; right: 200px;
width: 50%; width: 50%;
} }
.search-bar {
padding-top: inherit !important;
bottom: auto !important;
width: 260px !important;
top: 100px;
position: fixed;
right: 10px;
background-color: white;
border: 1px solid rgb(218, 218, 218);
border-radius: 6px;
padding-left: 10px;
}
.search-text {
border: 0px solid rgb(218, 218, 218);
border-radius: 6px;
}
} }

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

@ -16,6 +16,7 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
readonly rowHeight = 100; readonly rowHeight = 100;
readonly maxElements = 12; readonly maxElements = 12;
allkeys = [];
keys = []; keys = [];
visibleKeys = []; visibleKeys = [];
startIndex = 0; startIndex = 0;
@ -56,8 +57,13 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
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.keys.length = 0;
for (const key of this.allkeys) {
this.keys.push(key);
}
this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex); this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex);
this.parseFinished = true; this.parseFinished = true;
}; };
fr.readAsText(blob); fr.readAsText(blob);
} }
@ -71,7 +77,7 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On
continue; continue;
} else { } else {
form.addControl(prop, this.formBuilder.control(obj[prop])); form.addControl(prop, this.formBuilder.control(obj[prop]));
this.keys.push(key); this.allkeys.push(key);
} }
} }
return; return;
@ -103,6 +109,7 @@ onCallbackError(error: any) {
refreshFn = (ev: Event) => { refreshFn = (ev: Event) => {
if ((ev.srcElement as HTMLDocument).scrollingElement !== undefined) {
this.startIndex = Math.floor((ev.srcElement as HTMLDocument).scrollingElement.scrollTop / this.rowHeight); this.startIndex = Math.floor((ev.srcElement as HTMLDocument).scrollingElement.scrollTop / this.rowHeight);
this.endIndex = this.startIndex + this.maxElements; this.endIndex = this.startIndex + this.maxElements;
const tempKeys = this.keys.slice(this.startIndex, this.endIndex); const tempKeys = this.keys.slice(this.startIndex, this.endIndex);
@ -111,5 +118,21 @@ refreshFn = (ev: Event) => {
this.visibleKeys.push(key); 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).includes(ev.value));
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);
}
} }