From 687390e3b9ac0e03738f27403b88ecda56d631f4 Mon Sep 17 00:00:00 2001 From: George Kalampokis Date: Fri, 28 Feb 2020 12:58:42 +0200 Subject: [PATCH] Add Search bar for the language Editor and fixed some minor bugs on it --- .../language-editor.component.html | 6 +++ .../language-editor.component.scss | 20 +++++++++- .../language-editor.component.ts | 37 +++++++++++++++---- 3 files changed, 55 insertions(+), 8 deletions(-) diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.html b/dmp-frontend/src/app/ui/language-editor/language-editor.component.html index c099433a3..de69a3e23 100644 --- a/dmp-frontend/src/app/ui/language-editor/language-editor.component.html +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.html @@ -1,6 +1,12 @@
+
diff --git a/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss b/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss index 70914c152..eed5b1556 100644 --- a/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss +++ b/dmp-frontend/src/app/ui/language-editor/language-editor.component.scss @@ -18,7 +18,25 @@ .sticky { position: fixed; left: 200px; - right: 150px; + right: 200px; 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; + } } 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 2fb2cecab..171b81379 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 @@ -16,6 +16,7 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On readonly rowHeight = 100; readonly maxElements = 12; + allkeys = []; keys = []; visibleKeys = []; startIndex = 0; @@ -56,8 +57,13 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On 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); } @@ -71,7 +77,7 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit, On continue; } else { form.addControl(prop, this.formBuilder.control(obj[prop])); - this.keys.push(key); + this.allkeys.push(key); } } return; @@ -103,13 +109,30 @@ onCallbackError(error: any) { 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); + 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).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); +} + }