Changeset 1780


Ignore:
Timestamp:
Apr 20, 2011, 11:18:45 AM (6 years ago)
Author:
robert@…
Message:

Improved querying user interface

Location:
trunk
Files:
3 edited

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 {
Note: See TracChangeset for help on using the changeset viewer.