Changeset 1780

Show
Ignore:
Timestamp:
20-04-11 11:18:45 (3 years ago)
Author:
robert@…
Message:

Improved querying user interface

Location:
trunk
Files:
3 modified

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/views/advancedQuery/index.gsp

    r1717 r1780  
    4141                                        showCriterium("${criterion.entityField().encodeAsJavaScript()}", "${criterion.value.toString().encodeAsJavaScript()}", "${criterion.operator.toString().encodeAsJavaScript()}"); 
    4242                                </g:each> 
     43                                                         
     44                                // Show or hide the 'search mode' box (AND or OR) 
     45                                toggleSearchMode() 
     46 
     47                                // Enable or disable the search button 
     48                                toggleSearchButton() 
    4349                        }); 
    4450                </g:if> 
     
    114120                                </span> 
    115121                                <span class="addButton"> 
    116                                         <a href="#" onClick="addCriterion(); return false;"> 
     122                                        <a class="disabled" href="#" onClick="addCriterion(); return false;"> 
    117123                                                <img src="${fam.icon( name: 'add' )}" border="0"> 
    118124                                        </a> 
     
    137143                <h3><span class="nummer">3</span>Run query</h3> 
    138144                <p> 
    139                         <input type="submit" value="Search" class="submitcriteria" /> 
     145                        <input type="submit" disabled="disabled" value="Search" class="submitcriteria" /> 
    140146                </p> 
    141147        </g:form> 
  • trunk/web-app/css/advancedQuery.css

    r1548 r1780  
    2828.searchoptions ul#criteria li { margin-left: 0; padding-left: 0; display: inline; } 
    2929 
    30 input.transparent {  
     30input.transparent, a.disabled {  
    3131        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
    3232        filter: alpha(opacity=30); 
  • trunk/web-app/js/advancedQuery.js

    r1682 r1780  
    1919                }, 
    2020                select: function( event, ui ) { 
    21                         $( "#queryFieldText" ).val( ui.item.show ); 
    22                         $( "#queryField" ).val( ui.item.value ); 
     21                        selectQueryableFieldItem( ui.item ); 
    2322                        //$( "#queryFieldEntity" ).html( ui.item.entity ); 
    2423                        return false; 
     24                }, 
     25                change: function( event, ui ) { 
     26                        // If the user has left the field blank, remove the field that has been selected 
     27                        if( $( '#queryFieldText' ).val().trim() == "" ) { 
     28                                selectQueryableFieldItem( null ); 
     29                        } 
     30                        // If no item is selected and the user has entered some text, select the first one 
     31                        // See https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.selectFirst.js 
     32                        else if( ui.item == null ) { 
     33                                var el = $( '#queryFieldText' ).autocomplete().data( "autocomplete" ); 
     34                                 
     35                                // Check how many fields are in the list. However, if the user first enters 
     36                                // a term that shows items, and afterwards continues typing, the menu items  
     37                                // will remain in the list, but are hidden. 
     38                                // For that reason we perform an extra check to see whether the value of the 
     39                                // first item matches the entered text 
     40                                var searchResults = $.ui.autocomplete.filter( queryableFields, $( '#queryFieldText' ).val() ); 
     41                                if( searchResults && searchResults.length > 0 ) { 
     42                                        selectQueryableFieldItem( searchResults[ 0 ] ); 
     43                                } else { 
     44                                        // Clear the input field if nothing is in the list 
     45                                        selectQueryableFieldItem( null ); 
     46                                } 
     47                        } 
    2548                } 
    2649        }) 
     
    3356}); 
    3457 
     58/** 
     59 * Selects a field in the select combo box 
     60 * @param item  THe selected item or null if nothing is selected 
     61 */ 
     62function selectQueryableFieldItem( item ) { 
     63        var show = ""; 
     64        var value = ""; 
     65         
     66        if( item != null ) { 
     67                show = item.show; 
     68                value = item.value; 
     69 
     70                // Only hide the text if something is chosen. Otherwise, the entered 
     71                // text remains 
     72                $( "#queryFieldText" ).val( show ); 
     73        } 
     74         
     75        $( "#queryField" ).val( value ); 
     76         
     77        if( value == "" ) { 
     78                $( "#queryFieldText" ).css( "background-color", "#FDD" ); 
     79                $( ".newCriterion .addButton a" ).addClass( "disabled" ); 
     80        } else { 
     81                $( "#queryFieldText" ).css( "background-color", "white" ); 
     82                $( ".newCriterion .addButton a" ).removeClass( "disabled" ); 
     83        } 
     84         
     85        // Enable or disabled the search button 
     86        toggleSearchButton() 
     87} 
     88 
     89/** 
     90 * Enables or disabled the search button, based on the number of criteria 
     91 * and the state of the input field 
     92 */ 
     93function toggleSearchButton() { 
     94        if( $( "#criteria li:not(.newCriterion):not(.titlerow)" ).length == 0 && $( "#queryField" ).val() == "" ) { 
     95                $( '.submitcriteria' ).attr( 'disabled', 'disabled' ); 
     96        } else { 
     97                $( '.submitcriteria' ).attr( 'disabled', '' ); 
     98        } 
     99         
     100} 
     101 
    35102/******************************************************** 
    36103 *  
     
    51118        var value = $( '#searchForm input#value' ).val(); 
    52119        var operator = $( '#searchForm select#operator' ).val(); 
     120         
     121        if( field_descriptor == "" ) { 
     122                alert( "Please select a field to search in." ); 
     123                return; 
     124        } 
    53125         
    54126        // Show the title and a remove button 
     
    61133        $( '#searchForm select#operator' ).val( 'equals' ); 
    62134        $( '#searchForm input#value' ).val( '' ); 
     135        $( "#searchForm .newCriterion .addButton a" ).addClass( "disabled" ); 
     136         
    63137} 
    64138 
     
    69143        element.remove(); 
    70144        toggleSearchMode(); 
     145        toggleSearchButton(); 
    71146} 
    72147 
    73148function toggleSearchMode() { 
    74         if( $('#criteria' ).children( 'li' ) - 2 == 0 ) { 
     149        if( $( "#criteria li:not(.newCriterion):not(.titlerow)" ).length == 0 ) { 
    75150                $( '#searchMode' ).hide(); 
    76151        } else {