Changeset 1780

Timestamp:

Apr 20, 2011, 11:18:45 AM (9 years ago)

Author:

robert@…

Message:

Improved querying user interface

Location:

trunk

Files:

• grails-app/views/advancedQuery/index.gsp (modified) (3 diffs)
• web-app/css/advancedQuery.css (modified) (1 diff)
• web-app/js/advancedQuery.js (modified) (5 diffs)

trunk/grails-app/views/advancedQuery/index.gsp

@@ -41 +41 @@
                                         showCriterium("${criterion.entityField().encodeAsJavaScript()}", "${criterion.value.toString().encodeAsJavaScript()}", "${criterion.operator.toString().encodeAsJavaScript()}");
                                 </g:each>
+                                                        
+                                // Show or hide the 'search mode' box (AND or OR)
+                                toggleSearchMode()
+
+                                // Enable or disable the search button
+                                toggleSearchButton()
                         });
                 </g:if>
@@ -114 +120 @@
                                 </span>
                                 <span class="addButton">
-                                        <a href="#" onClick="addCriterion(); return false;">
+                                        <a class="disabled" href="#" onClick="addCriterion(); return false;">
                                                 <img src="${fam.icon( name: 'add' )}" border="0">
                                         </a>
@@ -137 +143 @@
                 <h3><span class="nummer">3</span>Run query</h3>
                 <p>
-                        <input type="submit" value="Search" class="submitcriteria" />
+                        <input type="submit" disabled="disabled" value="Search" class="submitcriteria" />
                 </p>
         </g:form>

trunk/web-app/css/advancedQuery.css

@@ -28 +28 @@
 .searchoptions ul#criteria li { margin-left: 0; padding-left: 0; display: inline; }
 
-input.transparent { 
+input.transparent, a.disabled { 
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
         filter: alpha(opacity=30);

trunk/web-app/js/advancedQuery.js

@@ -19 +19 @@
                 },
                 select: function( event, ui ) {
-                        $( "#queryFieldText" ).val( ui.item.show );
-                        $( "#queryField" ).val( ui.item.value );
+                        selectQueryableFieldItem( ui.item );
                         //$( "#queryFieldEntity" ).html( ui.item.entity );
                         return false;
+                },
+                change: function( event, ui ) {
+                        // If the user has left the field blank, remove the field that has been selected
+                        if( $( '#queryFieldText' ).val().trim() == "" ) {
+                                selectQueryableFieldItem( null );
+                        }
+                        // If no item is selected and the user has entered some text, select the first one
+                        // See https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.selectFirst.js
+                        else if( ui.item == null ) {
+                                var el = $( '#queryFieldText' ).autocomplete().data( "autocomplete" );
+                                
+                                // Check how many fields are in the list. However, if the user first enters
+                                // a term that shows items, and afterwards continues typing, the menu items 
+                                // will remain in the list, but are hidden.
+                                // For that reason we perform an extra check to see whether the value of the
+                                // first item matches the entered text
+                                var searchResults = $.ui.autocomplete.filter( queryableFields, $( '#queryFieldText' ).val() );
+                                if( searchResults && searchResults.length > 0 ) {
+                                        selectQueryableFieldItem( searchResults[ 0 ] );
+                                } else {
+                                        // Clear the input field if nothing is in the list
+                                        selectQueryableFieldItem( null );
+                                }
+                        }
                 }
         })
@@ -33 +56 @@
 });
 
+/**
+ * Selects a field in the select combo box
+ * @param item  THe selected item or null if nothing is selected
+ */
+function selectQueryableFieldItem( item ) {
+        var show = "";
+        var value = "";
+        
+        if( item != null ) {
+                show = item.show;
+                value = item.value;
+
+                // Only hide the text if something is chosen. Otherwise, the entered
+                // text remains
+                $( "#queryFieldText" ).val( show );
+        }
+        
+        $( "#queryField" ).val( value );
+        
+        if( value == "" ) {
+                $( "#queryFieldText" ).css( "background-color", "#FDD" );
+                $( ".newCriterion .addButton a" ).addClass( "disabled" );
+        } else {
+                $( "#queryFieldText" ).css( "background-color", "white" );
+                $( ".newCriterion .addButton a" ).removeClass( "disabled" );
+        }
+        
+        // Enable or disabled the search button
+        toggleSearchButton()
+}
+
+/**
+ * Enables or disabled the search button, based on the number of criteria
+ * and the state of the input field
+ */
+function toggleSearchButton() {
+        if( $( "#criteria li:not(.newCriterion):not(.titlerow)" ).length == 0 && $( "#queryField" ).val() == "" ) {
+                $( '.submitcriteria' ).attr( 'disabled', 'disabled' );
+        } else {
+                $( '.submitcriteria' ).attr( 'disabled', '' );
+        }
+        
+}
+
 /********************************************************
  * 
@@ -51 +118 @@
         var value = $( '#searchForm input#value' ).val();
         var operator = $( '#searchForm select#operator' ).val();
+        
+        if( field_descriptor == "" ) {
+                alert( "Please select a field to search in." );
+                return;
+        }
         
         // Show the title and a remove button
@@ -61 +133 @@
         $( '#searchForm select#operator' ).val( 'equals' );
         $( '#searchForm input#value' ).val( '' );
+        $( "#searchForm .newCriterion .addButton a" ).addClass( "disabled" );
+        
 }
 
@@ -69 +143 @@
         element.remove();
         toggleSearchMode();
+        toggleSearchButton();
 }
 
 function toggleSearchMode() {
-        if( $('#criteria' ).children( 'li' ) - 2 == 0 ) {
+        if( $( "#criteria li:not(.newCriterion):not(.titlerow)" ).length == 0 ) {
                 $( '#searchMode' ).hide();
         } else {