+ kasuj filtr in Main menu

SE/static/p5UI/initP5MainMenuDropdown.js

@@ -2,6 +2,8 @@ if (!global.p5UI__MenuStore) throw 'Missing global.p5UI__MenuStore'
 var DBG = DBG || 0
 var DBG1 = 1
 
+// TODO: mv to React: { state: { menu items, query } }
+
 function renderLabel(item) {
 	return (item.short_label !== item.desc)
 		? item.short_label + ' <em>' + item.desc + '</em>'
@@ -191,9 +193,9 @@ function initP5MainMenuDropdown( btnNode, idSubMenu ) { // @usage: onClick="retu
 			return function (data) {
 				DBG && console.log('DBG renderP5MainMenuDropdown', {data, idSubMenu});
 
-				var query = '';
+				var mainMenuFilterCallback = makeMainMenuFilterCallback(jqDropdownMenu, idSearchBoxNode);
 				var searchBox = document.createElement('div')
-				searchBox.setAttribute('style', "padding:12px 20px");
+				searchBox.setAttribute('style', "padding:12px 20px; min-width:200px");
 				{
 					var searchBox_group = document.createElement('div')
 					searchBox_group.setAttribute('class', "input-group");
@@ -207,7 +209,7 @@ function initP5MainMenuDropdown( btnNode, idSubMenu ) { // @usage: onClick="retu
 						searchBox_group_input = document.createElement('input')
 						searchBox_group_input.setAttribute('type', "text");
 						searchBox_group_input.setAttribute('class', "form-control");
-						searchBox_group_input.setAttribute('value', query);
+						searchBox_group_input.setAttribute('value', "");
 						searchBox_group_input.setAttribute('id', idSearchBoxNode);
 						searchBox_group_input.setAttribute('autofocus', "autofocus");
 						// onChange: function (fieldName, value) {
@@ -216,10 +218,25 @@ function initP5MainMenuDropdown( btnNode, idSubMenu ) { // @usage: onClick="retu
 						jQuery(searchBox_group_input).on('keyup', function (event) {
 							event.preventDefault()
 							event.stopPropagation()
-							searchBox_delayFilter(makeMainMenuFilterCallback(jqDropdownMenu, jqDropdownTrigger), event.target.value)
+							searchBox_delayFilter(mainMenuFilterCallback, event.target.value)
 						})
 						searchBox_group.appendChild(searchBox_group_input)
 					}
+					{
+						searchBox_group_clear = document.createElement('span')
+						searchBox_group_clear.setAttribute('class', "input-group-addon");
+						searchBox_group_clear.style.display = "none";
+						searchBox_group_clear.style.cursor = "pointer";
+						searchBox_group_clear.innerHTML = '<i class="glyphicon glyphicon-remove" title="Kasuj filtr"></i>';
+						jQuery(searchBox_group_clear).on('click', function (event) {
+							event.preventDefault()
+							event.stopPropagation()
+							DBG && console.log("DBG:searchBox:clear", { value: jQuery('#' + idSearchBoxNode).value, node: jQuery('#' + idSearchBoxNode) })
+							jQuery('#' + idSearchBoxNode).val('');
+							mainMenuFilterCallback('')
+						})
+						searchBox_group.appendChild(searchBox_group_clear)
+					}
 					searchBox.appendChild(searchBox_group)
 
 					jQuery(searchBox).on('click', function (event) {
@@ -310,9 +327,11 @@ function searchBox__isMenuItemMatch(node, query) {
 	return false;
 }
 
-function makeMainMenuFilterCallback(jqDropdownMenu, jqDropdownTrigger) {
+function makeMainMenuFilterCallback(jqDropdownMenu, idSearchBoxNode) {
 	return function (query) {
-		DBG && console.log("DBG:Main menu:makeMainMenuFilterCallback", { query: query, jqDropdownMenu, jqDropdownTrigger })
+		DBG && console.log("DBG:Main menu:makeMainMenuFilterCallback", { query: query, jqDropdownMenu, idSearchBoxNode })
+
+		jQuery('#' + idSearchBoxNode).next('span').get(0).style.display = query ? 'table-cell' : 'none';
 
 		jqDropdownMenu.children('li').each(function (idx, node) {
 			node.style.display = "list-item";