From 82e08cc60ba4b6103146f36aa63a60aa7a69fb8e Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Fri, 26 Jul 2019 12:40:13 +0200
Subject: [PATCH] * Api: Add search feature into file select dialog

---
 api/js/etemplate/vfsSelectUI.js       | 40 ++++++++++++++++++++++++++-
 api/templates/default/etemplate2.css  | 14 +++++++++-
 api/templates/default/vfsSelectUI.xet |  1 +
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/api/js/etemplate/vfsSelectUI.js b/api/js/etemplate/vfsSelectUI.js
index 6671af5b5e..5255b13faa 100644
--- a/api/js/etemplate/vfsSelectUI.js
+++ b/api/js/etemplate/vfsSelectUI.js
@@ -17,6 +17,7 @@
 app.classes.vfsSelectUI = (function(){ "use strict"; return AppJS.extend(
 {
 	appname: 'filemanager',
+	dirContent: {},
 	vfsSelectWidget: {},
 	path_widget: {},
 	/**
@@ -54,6 +55,7 @@ app.classes.vfsSelectUI = (function(){ "use strict"; return AppJS.extend(
 	et2_ready: function(et2,name)
 	{
 		this.path_widget = this.et2.getWidgetById('path');
+		this.dirContent = this.et2.getArrayMgr('content').data.dir;
 	},
 
 	/**
@@ -310,5 +312,41 @@ app.classes.vfsSelectUI = (function(){ "use strict"; return AppJS.extend(
 		}
 
 		this.vfsSelectWidget._content(arrMgrs.content.data, _callback);
+	},
+
+	/**
+	 * search through dir content and set its content base on searched query
+	 * @returns
+	 */
+	search: function(_widget)
+	{
+		var dir = this.et2.getWidgetById('dir');
+		var query = _widget.get_value();
+		if (query == "")
+		{
+			dir.set_value({content: this.dirContent});
+			return;
+		}
+		var self = this;
+		var searchQuery = function (_query)
+		{
+			var result = {};
+			var reg = RegExp("^"+_query, 'ig');
+			var key = 0;
+			for (var i in self.dirContent)
+			{
+				if (typeof self.dirContent[i]['name'] != 'undefined' && self.dirContent[i]['name'].match(reg))
+				{
+					result[key] = self.dirContent[i];
+					key++;
+				}
+				else if (typeof self.dirContent[i]['name'] == 'undefined' && isNaN(i))
+				{
+					result[i] = self.dirContent[i];
+				}
+			}
+			return result;
+		};
+		dir.set_value({content: searchQuery(query)});
 	}
-});}).call(this);
+});}).call(this);
\ No newline at end of file
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index ddac0ba00a..2ca87d62ca 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -2961,4 +2961,16 @@ div.eml div.emlDelete:hover, div.eml div.emlEdit:hover  {
     margin-left: 0;
 }
 #api\.vfsSelectUI_app {width:177px}
-#api\.vfsSelectUI_name {padding-right: 4px;}
\ No newline at end of file
+#api\.vfsSelectUI_name {
+	padding-right: 0;
+	margin-right:0;
+}
+#api\.vfsSelectUI_search.et2_searchbox .flex{
+	width: 122px;
+	padding-right: 0px;
+}
+#api\.vfsSelectUI_path {width:100%;}
+#api\.vfsSelectUI_path .et2_textbox.et2_vfs {
+	padding-right: 0px;
+	margin-right: 0px;
+}
\ No newline at end of file
diff --git a/api/templates/default/vfsSelectUI.xet b/api/templates/default/vfsSelectUI.xet
index f201f0d325..03891a5af8 100644
--- a/api/templates/default/vfsSelectUI.xet
+++ b/api/templates/default/vfsSelectUI.xet
@@ -19,6 +19,7 @@
 						<select width="175" id="app" empty_label="Applications" no_lang="1" onchange="app.vfsSelectUI.do_action('app', widget)"/>
 						<buttononly statustext="Create directory" id="createdir" class="createDir" onclick="app.vfsSelectUI.createdir" image="button_createdir" ro_image="createdir_disabled" background_image="1"/>
 						<file id='upload_file' statustext="upload file" progress_dropdownlist = "true" multiple="true" onFinish="app.vfsSelectUI.storeFile"/>
+						<searchbox id="search" onchange="app.vfsSelectUI.search"/>
 						<vfs-name id="path" class="et2_fullWidth selectPath" align="left" onchange="app.vfsSelectUI.do_action('path', widget)"/>
 					</box>
 				</row>