Advanced search: UI/UX, WIP.

SVN:b1162[5587]

css/light-grey.css

@@ -802,7 +802,8 @@ input.dp-applied {
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group, .search_form_handler .sf_criterion_area .sf_more_criterion .sfc_form_group, .search_form_handler .sf_criterion_area .search_form_criteria .sfm_content, .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
   position: absolute;
   z-index: -1;
-  min-width: 100%;
+  min-width: 170px;
+  /* 100%; */
   left: 0px;
   margin-top: -1px;
 }
@@ -927,14 +928,19 @@ input.dp-applied {
   margin: 0px -8px;
   /* Compensate .sfc_opc_multichoices side padding so the hover style can take the full with */
 }
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_item {
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_items_list .sfc_opc_mc_placeholder {
+  padding: 15px 8px;
+  font-style: italic;
+  text-align: center;
+}
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_items_list .sfc_opc_mc_item {
   padding: 4px 8px;
   /* Putting back the padding remove by .sfc_opc_mc_items */
 }
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_item:hover {
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_items_list .sfc_opc_mc_item:hover {
   background-color: #fff;
 }
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_item label {
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_items_list .sfc_opc_mc_item label {
   display: inline-block;
   width: 100%;
 }

css/light-grey.scss

@@ -892,7 +892,7 @@ input.dp-applied {
 			.sfm_content{
 				position: absolute;
 				z-index: -1;
-				min-width: 100%;
+				min-width: 170px; /* 100%; */
 				left: 0px;
 				margin-top: -1px;
 			}
@@ -1033,16 +1033,23 @@ input.dp-applied {
 								overflow-y: auto;
 								margin: 0px -8px; /* Compensate .sfc_opc_multichoices side padding so the hover style can take the full with */
 
-								.sfc_opc_mc_item{
-									padding: 4px 8px; /* Putting back the padding remove by .sfc_opc_mc_items */
-
-									&:hover{
-										background-color: $search-criteria-box-hover-color;
+								.sfc_opc_mc_items_list{
+									.sfc_opc_mc_placeholder{
+										padding: 15px 8px;
+										font-style: italic;
+										text-align: center;
 									}
+									.sfc_opc_mc_item{
+										padding: 4px 8px; /* Putting back the padding remove by .sfc_opc_mc_items */
 
-									label{
-										display: inline-block;
-										width: 100%;
+										&:hover{
+											background-color: $search-criteria-box-hover-color;
+										}
+
+										label{
+											display: inline-block;
+											width: 100%;
+										}
 									}
 								}
 							}

dictionaries/en.dictionary.itop.ui.php

@@ -1392,26 +1392,6 @@ When associated with a trigger, each action is given an "order" number, specifyi
 	'UI:Search:AddCriteria:List:Others:Title' => 'Others',
 	'UI:Search:AddCriteria:List:RecentlyUsed:Placeholder' => 'None yet.',
 
-	// - Criteria operators
-	//   - Default widget
-	'UI:Search:Criteria:Operator:Default:Empty' => 'Is empty',
-	'UI:Search:Criteria:Operator:Default:NotEmpty' => 'Is not empty',
-	'UI:Search:Criteria:Operator:Default:Equals' => 'Equals',
-	'UI:Search:Criteria:Operator:Default:Between' => 'Between',
-	//   - String widget
-	'UI:Search:Criteria:Operator:String:Contains' => 'Contains',
-	'UI:Search:Criteria:Operator:String:StartsWith' => 'Starts with',
-	'UI:Search:Criteria:Operator:String:EndsWith' => 'Ends with',
-	//   - Numeric widget
-	'UI:Search:Criteria:Operator:Numeric:Equals' => 'Equals',  // => '=',
-	'UI:Search:Criteria:Operator:Numeric:GreaterThan' => 'Greater',  // => '>',
-	'UI:Search:Criteria:Operator:Numeric:GreaterThanOrEquals' => 'Greater / equals',  // > '>=',
-	'UI:Search:Criteria:Operator:Numeric:LessThan' => 'Less',  // => '<',
-	'UI:Search:Criteria:Operator:Numeric:LessThanOrEquals' => 'Less / equals',  // > '<=',
-	'UI:Search:Criteria:Operator:Numeric:Different' => 'Different',  // => '≠',
-
-
-
 	// - Criteria titles
 	//   - Default widget
 	'UI:Search:Criteria:Title:Default:Empty' => '%1$s is empty',
@@ -1438,6 +1418,10 @@ When associated with a trigger, each action is given an "order" number, specifyi
 //	'UI:Search:Criteria:Title:Numeric:Equals' => '%1$s equals %2$s',
 	//   - DateTime widget
 	'UI:Search:Criteria:Title:DateTime:Between' => '%2$s <= 1$s <= %3$s',
+	//   - Enum widget
+	'UI:Search:Criteria:Title:Enum:In' => '%1$s: %2$s',
+	'UI:Search:Criteria:Title:Enum:In:Many' => '%1$s: %2$s and %3$s others',
+	'UI:Search:Criteria:Title:Enum:In:All' => '%1$s: Any',
 	//   - External key widget
 	'UI:Search:Criteria:Title:ExternalKey:Empty' => '%1$s is defined',
 	'UI:Search:Criteria:Title:ExternalKey:NotEmpty' => '%1$s is not defined',
@@ -1445,15 +1429,33 @@ When associated with a trigger, each action is given an "order" number, specifyi
 	'UI:Search:Criteria:Title:ExternalKey:In' => '%1$s: %2$s',
 	'UI:Search:Criteria:Title:ExternalKey:In:Many' => '%1$s: %2$s and %3$s others',
 	'UI:Search:Criteria:Title:ExternalKey:In:All' => '%1$s: Any',
-	//   - Enum widget
-	'UI:Search:Criteria:Title:Enum:In' => '%1$s: %2$s',
-	'UI:Search:Criteria:Title:Enum:In:Many' => '%1$s: %2$s and %3$s others',
-	'UI:Search:Criteria:Title:Enum:In:All' => '%1$s: Any',
+
+	// - Criteria operators
+	//   - Default widget
+	'UI:Search:Criteria:Operator:Default:Empty' => 'Is empty',
+	'UI:Search:Criteria:Operator:Default:NotEmpty' => 'Is not empty',
+	'UI:Search:Criteria:Operator:Default:Equals' => 'Equals',
+	'UI:Search:Criteria:Operator:Default:Between' => 'Between',
+	//   - String widget
+	'UI:Search:Criteria:Operator:String:Contains' => 'Contains',
+	'UI:Search:Criteria:Operator:String:StartsWith' => 'Starts with',
+	'UI:Search:Criteria:Operator:String:EndsWith' => 'Ends with',
+	//   - Numeric widget
+	'UI:Search:Criteria:Operator:Numeric:Equals' => 'Equals',  // => '=',
+	'UI:Search:Criteria:Operator:Numeric:GreaterThan' => 'Greater',  // => '>',
+	'UI:Search:Criteria:Operator:Numeric:GreaterThanOrEquals' => 'Greater / equals',  // > '>=',
+	'UI:Search:Criteria:Operator:Numeric:LessThan' => 'Less',  // => '<',
+	'UI:Search:Criteria:Operator:Numeric:LessThanOrEquals' => 'Less / equals',  // > '<=',
+	'UI:Search:Criteria:Operator:Numeric:Different' => 'Different',  // => '≠',
 
 	// - Other translations
 	'UI:Search:Value:Filter:Placeholder' => 'Filter...',
 	'UI:Search:Value:Search:Placeholder' => 'Search...',
+	'UI:Search:Value:Autocomplete:StartTyping' => 'Start typing for possible values.',
+	'UI:Search:Value:Autocomplete:Wait' => 'Please wait...',
+	'UI:Search:Value:Autocomplete:NoResult' => 'No result.',
 	'UI:Search:Value:Toggler:CheckAllNone' => 'Check all / none',
+	'UI:Search:Value:Toggler:CheckAllNoneFiltered' => 'Check all / none filtered',
 
 	// - Widget other translations
 	'UI:Search:Criteria:Numeric:From' => 'From',

js/search/search_form_criteria.js

@@ -46,10 +46,11 @@ $(function()
 
 		// Operators
 		operators: {},
-
 		// Form handler
 		handler: null,
-   
+		// Keys that should not trigger an event in filter/autocomplete inputs
+		filtered_keys: [9, 16, 17, 18, 19, 27, 33, 34, 35, 36, 37, 38, 39, 40], // Tab, Shift, Ctrl, Alt, Pause, Esc, Page Up/Down, Home, End, Left/Up/Right/Down arrows
+
 		// the constructor
 		_create: function()
 		{
@@ -637,7 +638,7 @@ $(function()
 		// - Return the allowed values from the autocomplete
 		_getAutocompleteAllowedValues: function()
 		{
-			console.log('TODO: Retrieve allowed values through autocomplete (get needle in the input)');
+			// Meant for overloading.
 		},
 		// - Return current values
 		_getValues: function()
@@ -695,6 +696,11 @@ $(function()
 
 			return aParts.join('');
 		},
+		// - Return if the given keycode is among filtered
+		_isFilteredKey: function(iKeyCode)
+		{
+			return (this.filtered_keys.indexOf(iKeyCode) >= 0);
+		},
 
 
 		// Debug helpers

js/search/search_form_criteria_enum.js

@@ -32,6 +32,7 @@ $(function()
 			// Autocomplete
 			'autocomplete': {
 				'xhr_throttle': 200,
+				'min_autocomplete_chars': 3, // TODO: Pass this through widget instanciation.
 			},
 		},
 
@@ -186,6 +187,8 @@ $(function()
 			var oFilterElem = oOpElem.find('.sf_filter');
 
 			// DOM elements
+			// - Check all / none toggler
+			oOpContentElem.find('.sfc_opc_mc_toggler').remove();
 			// - Filter
 			oFilterElem.find('.sff_input_wrapper')
 				.append('<span class="sff_picto sff_filter fa fa-filter"></span>');
@@ -266,14 +269,18 @@ $(function()
 			// - Autocomplete
 			var oACXHR = null;
 			var oACTimeout = null;
-			oFilterElem.find('input').on('keyup focus', function(oEvent){
+			oFilterElem.find('input').on('keyup', function(oEvent){
 				// TODO: Move on values with up and down arrow keys; select with space or enter.
-				var sQuery = $(this).val();
+				if(me._isFilteredKey(oEvent.keyCode))
+				{
+					return false;
+				}
 
-				if(sQuery === '')
+				var sQuery = $(this).val();
+				if( (sQuery === '') || (sQuery.length <= me.options.autocomplete.min_autocomplete_chars) )
 				{
 					// TODO: Remove items and show placeholder
-					oDynamicListElem.html('TOTR: Start typing for possible values.');
+					oDynamicListElem.html('<div class="sfc_opc_mc_placeholder">' + Dict.S('UI:Search:Value:Autocomplete:StartTyping') + '</div>');
 
 					oFilterElem.find('.sff_reset').hide();
 				}
@@ -282,7 +289,7 @@ $(function()
 					clearTimeout(oACTimeout);
 					oACTimeout = setTimeout(function(){
 						// Show loader
-						oDynamicListElem.html('TOTR: Please wait...');
+						oDynamicListElem.html('<div class="sfc_opc_mc_placeholder">' + Dict.S('UI:Search:Value:Autocomplete:Wait') + '</div>');
 
 						if(oACXHR !== null)
 						{
@@ -389,29 +396,43 @@ $(function()
 		},
 
 
+		// Autocomplete helpers
+
 		// Autocomplete callbacks
 		_onACSearchSuccess: function(oResponse, oListElem)
 		{
-			// TODO: Show results
-			console.log('ok', oResponse);
-			for(var iKey in oResponse)
+			if(typeof oResponse !== 'object')
 			{
-				var oValueElem = this._makeListItemElement(iKey, oResponse[iKey]);
-				oValueElem.appendTo(oListElem);
+				this._onACSearchFail(oResponse, 'unexcepted');
+				return false;
 			}
 
+			oListElem.html('');
+			if(Object.keys(oResponse).length > 0)
+			{
+				for(var iKey in oResponse)
+				{
+					var oValueElem = this._makeListItemElement(iKey, oResponse[iKey]);
+					oValueElem.appendTo(oListElem);
+				}
+			}
+			else
+			{
+				oListElem.append('<div class="sfc_opc_mc_placeholder">' + Dict.S('UI:Search:Value:Autocomplete:NoResult') + '</div>')
+			}
 		},
 		_onACSearchFail: function(oResponse, sStatus)
 		{
 			if(sStatus !== 'abort')
 			{
-				this.element.find('.sfc_opc_mc_items_dynamic').html('TOTR: Error.');
+				var sErrorMessage = Dict.Format('Error:XHR:Fail', '');
+
+				this.element.find('.sfc_opc_mc_items_dynamic').html('<div class="sfc_opc_mc_placeholder">=/</div>');
+				this.handler.triggerHandler('itop.search.criteria.error_occured', sErrorMessage);
 			}
 		},
 		_onACSearchAlways: function()
 		{
-			// TODO: Remove loader
-			this._trace('TODO: Remove loader');
 		},
 
 

js/search/search_form_handler.js

@@ -161,6 +161,9 @@ $(function()
 			this.element.on('itop.search.criteria.removed', function(oEvent, oData){
 				me._onCriteriaRemoved(oData);
 			});
+			this.element.on('itop.search.criteria.error_occured', function(oEvent, oData){
+				me._onCriteriaErrorOccured(oData);
+			});
 		},
 		// - Update search option of the widget
 		_updateSearch: function()
@@ -748,6 +751,10 @@ $(function()
 			this._updateSearch();
 			this._submit();
 		},
+		_onCriteriaErrorOccured: function(oData)
+		{
+			this._setErrorMessage(oData);
+		},
 
 		// Field helpers
 		_hasFieldDefinition: function(sRef)