Advanced search: WIP POC, UI/UX.

SVN:b1162[5436]

js/search/search_form_criteria.js

@@ -164,6 +164,10 @@ $(function()
 		//   - Open / Close criteria
 		_open: function()
 		{
+			// Inform handler that a criteria is opening
+			this.handler.triggerHandler('itop.search.criteria.opening');
+
+			// Open criteria
 			this._resetOperators();
 			this.element.addClass('opened');
 
@@ -476,7 +480,7 @@ $(function()
 			});
 			// - Apply on "enter" key hit
 			oOpContentElem.on('keyup', function(oEvent){
-				// Check operator's radio if not already
+				// Check operator's radio if not already (typically when focusing in input via "tab" key)
 				if(oOpElem.find('.sfc_op_radio').prop('checked') === false)
 				{
 					oOpElem.find('.sfc_op_radio').prop('checked', true)

js/search/search_form_criteria_string.js

@@ -70,5 +70,26 @@ $(function()
 		//------------------
 
 		// DOM element helpers
+		// TODO: Remove this function after UX tests
+		_prepareOperators: function()
+		{
+			this._super();
+
+			if(this.options.ref === 'UserRequest.ref')
+			{
+				// Remove starts/ends_with
+				this.element.find('.sfc_fg_operator[data-operator-code*="with"]').remove();
+				// Modify contains with a dropdown
+				this.element.find('.sfc_fg_operator[data-operator-code="contains"] .sfc_op_name').html('<select style="    padding: 2px 0px;"><option>Contains</option><option>Starts with</option><option>Ends with</option></select>');
+				// Remove click event on dropdown
+				this.element.find('.sfc_fg_operator[data-operator-code="contains"] .sfc_op_name').on('click', function(oEvent){
+					oEvent.preventDefault();
+					oEvent.stopPropagation();
+				});
+				this.element.find('.sfc_fg_operator[data-operator-code="contains"] .sfc_op_name select').on('change', function(){
+					$(this).closest('.sfc_fg_operator').find('.sfc_op_content input:first').trigger('focus');
+				});
+			}
+		},
 	});
 });

js/search/search_form_handler.js

@@ -134,6 +134,9 @@ $(function()
 			});
 
 			// Criteria events
+			this.element.on('itop.search.criteria.opening', function(oEvent, oData){
+				me._onCriteriaOpening(oData);
+			});
 			this.element.on('itop.search.criteria.value_changed', function(oEvent, oData){
 				me._onCriteriaValueChanged(oData);
 			});
@@ -168,6 +171,9 @@ $(function()
 		_openMoreCriterion: function()
 		{
 			this.elements.more_criterion.addClass('opened');
+			this.elements.active_criterion.find('.search_form_criteria').each(function(){
+				$(this).triggerHandler('itop.search.criteria.close');
+			});
 		},
 		_closeMoreCriterion: function()
 		{
@@ -175,7 +181,15 @@ $(function()
 		},
 		_toggleMoreCriterion: function()
 		{
-			this.elements.more_criterion.toggleClass('opened');
+			// Calling methods instead of toggling the class so additional processing are done.
+			if(this.elements.more_criterion.hasClass('opened'))
+			{
+				this._closeMoreCriterion();
+			}
+			else
+			{
+				this._openMoreCriterion();
+			}
 		},
 
 		// DOM helpers
@@ -381,6 +395,10 @@ $(function()
 			return 'search_form_criteria' + '_' + (($.itop['search_form_criteria_'+sType] !== undefined) ? sType : 'raw');
 		},
 		// Criteria handlers
+		_onCriteriaOpening: function(oData)
+		{
+			this._closeMoreCriterion();
+		},
 		_onCriteriaValueChanged: function(oData)
 		{
 			this._updateSearch();