From 687390e3b9ac0e03738f27403b88ecda56d631f4 Mon Sep 17 00:00:00 2001
From: George Kalampokis <gkalampokis@cite.gr>
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 @@
 <div *ngIf="parseFinished" class="language-editor"  [style.height]="(keys.length * rowHeight) + 'px'">
 	<form (ngSubmit)="updateLang()" [formGroup]="formGroup">
 		<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-title><div [innerHTML]="currentLang"></div></mat-card-title>
 				<mat-card-content>
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);
+}
+
 }