details: http://www.bx.psu.edu/hg/galaxy/rev/5761948422a8 changeset: 3121:5761948422a8 user: jeremy goecks <jeremy.goecks@emory.edu> date: Tue Nov 24 14:53:19 2009 -0500 description: Added AJAX functionality to main grid framework. Use the use_async flag to turn on AJAXing in a grid; see the history grid for an example of a grid that uses AJAX. Small changes that are needed to fully employ AJAX for a grid are: (a) using the async_compatible flag to indicate which operations can be AJAXed and which cannot; and (b) ensuring that controller code for grid handles operation names in a case-insensitive manner. Also, there are bug fixes for inserting a history link into a page. diffstat: lib/galaxy/web/controllers/history.py | 7 +- lib/galaxy/web/controllers/page.py | 12 +- lib/galaxy/web/framework/helpers/grids.py | 16 +- templates/grid_base.mako | 1162 ++++++++++++++++++++++++--------- templates/grid_base_async.mako | 709 +-------------------- templates/grid_body_async.mako | 5 - templates/grid_common.mako | 63 +- templates/grid_common_async.mako | 155 ---- templates/history/grid.mako | 2 +- templates/page/select_histories_grid.mako | 11 +- 10 files changed, 930 insertions(+), 1212 deletions(-) diffs (2379 lines): diff -r 07c1b4bc14af -r 5761948422a8 lib/galaxy/web/controllers/history.py --- a/lib/galaxy/web/controllers/history.py Mon Nov 23 17:20:01 2009 -0500 +++ b/lib/galaxy/web/controllers/history.py Tue Nov 24 14:53:19 2009 -0500 @@ -87,11 +87,11 @@ # Grid definition title = "Saved Histories" model_class = model.History - template='/grid_base.mako' + template='/history/grid.mako' default_sort_key = "-create_time" columns = [ NameColumn( "Name", key="name", model_class=model.History, - link=( lambda history: iff( history.deleted, None, dict( operation="switch", id=history.id ) ) ), + link=( lambda history: iff( history.deleted, None, dict( operation="Switch", id=history.id ) ) ), attach_popup=True, filterable="advanced" ), DatasetsByStateColumn( "Datasets (by state)", ncells=4 ), grids.TagsColumn( "Tags", "tags", model.History, model.HistoryTagAssociation, filterable="advanced"), @@ -110,7 +110,7 @@ ) operations = [ - grids.GridOperation( "Switch", allow_multiple=False, condition=( lambda item: not item.deleted ), async_compatible=True ), + grids.GridOperation( "Switch", allow_multiple=False, condition=( lambda item: not item.deleted ), async_compatible=False ), grids.GridOperation( "Share", condition=( lambda item: not item.deleted ), async_compatible=False ), grids.GridOperation( "Unshare", condition=( lambda item: not item.deleted ), async_compatible=False ), grids.GridOperation( "Rename", condition=( lambda item: not item.deleted ), async_compatible=False ), @@ -127,6 +127,7 @@ default_filter = dict( name="All", deleted="False", tags="All", shared="All" ) num_rows_per_page = 50 preserve_state = False + use_async = True use_paging = True def get_current_item( self, trans ): return trans.get_history() diff -r 07c1b4bc14af -r 5761948422a8 lib/galaxy/web/controllers/page.py --- a/lib/galaxy/web/controllers/page.py Mon Nov 23 17:20:01 2009 -0500 +++ b/lib/galaxy/web/controllers/page.py Tue Nov 24 14:53:19 2009 -0500 @@ -116,11 +116,11 @@ # Grid definition. title = "Saved Histories" - template = "/page/select_histories_grid.mako" - async_template = "grid_body_async.mako" + template = "/page/select_histories_grid.mako" model_class = model.History default_filter = { "deleted" : "False" , "shared" : "All" } default_sort_key = "-update_time" + use_async = True use_paging = True num_rows_per_page = 10 columns = [ @@ -152,15 +152,15 @@ # Handle operation if 'operation' in kwargs and 'id' in kwargs: session = trans.sa_session - operation = kwargs['operation'] + operation = kwargs['operation'].lower() ids = util.listify( kwargs['id'] ) for id in ids: item = session.query( model.Page ).get( trans.security.decode_id( id ) ) - if operation == "Delete": + if operation == "delete": item.deleted = True - elif operation == "Publish": + elif operation == "publish": item.published = True - elif operation == "Unpublish": + elif operation == "unpublish": item.published = False session.flush() # Build grid diff -r 07c1b4bc14af -r 5761948422a8 lib/galaxy/web/framework/helpers/grids.py --- a/lib/galaxy/web/framework/helpers/grids.py Mon Nov 23 17:20:01 2009 -0500 +++ b/lib/galaxy/web/framework/helpers/grids.py Tue Nov 24 14:53:19 2009 -0500 @@ -17,9 +17,11 @@ title = "" exposed = True model_class = None - # To use grid's async features, set template="grid_base_async.mako" template = "grid_base.mako" - async_template = "grid_body_async.mako" + async_template = "grid_base_async.mako" + + use_async = False + global_actions = [] columns = [] operations = [] @@ -174,6 +176,7 @@ if page_num == 0: # Show all rows in page. total_num_rows = query.count() + page_num = 1 num_pages = 1 else: # Show a limited number of rows. Before modifying query, get the total number of rows that query @@ -218,8 +221,8 @@ new_kwargs[ 'id' ] = trans.security.encode_id( id ) return url_for( **new_kwargs ) - - return trans.fill_template( iff( 'async' not in kwargs, self.template, self.async_template), + async_request = ( ( self.use_async ) and ( 'async' in kwargs ) and ( kwargs['async'] in [ 'True', 'true'] ) ) + return trans.fill_template( iff( async_request, self.async_template, self.template), grid=self, query=query, cur_page_num = page_num, @@ -233,7 +236,10 @@ ids = kwargs.get( 'id', [] ), url = url, message_type = status, - message = message ) + message = message, + # Pass back kwargs so that grid template can set and use args without grid explicitly having to pass them. + kwargs=kwargs + ) def get_ids( self, **kwargs ): id = [] if 'id' in kwargs: diff -r 07c1b4bc14af -r 5761948422a8 templates/grid_base.mako --- a/templates/grid_base.mako Mon Nov 23 17:20:01 2009 -0500 +++ b/templates/grid_base.mako Tue Nov 24 14:53:19 2009 -0500 @@ -1,4 +1,5 @@ <%! + from galaxy.web.framework.helpers.grids import TextColumn from galaxy.model import History, HistoryDatasetAssociation, User, Role, Group import galaxy.util def inherit(context): @@ -10,208 +11,727 @@ <%inherit file="${inherit(context)}"/> ## Render the grid's basic elements. Each of these elements can be subclassed. -%if message: - <p> - <div class="${message_type}message transient-message">${util.restore_text( message )}</div> - <div style="clear: both"></div> - </p> -%endif +<table> + <tr> + <td width="75%">${self.render_grid_header()}</td> + <td></td> + <td width="25%" id="grid-message" valign="top">${self.render_grid_message()}</td> + </tr> +</table> -${self.grid_header()} -${self.grid_table()} +${self.render_grid_table()} + ## Function definitions. <%def name="title()">${grid.title}</%def> <%def name="javascripts()"> - ${parent.javascripts()} - ${h.js("jquery.autocomplete", "autocomplete_tagging" )} - <script type="text/javascript"> - ## TODO: generalize and move into galaxy.base.js - $(document).ready(function() { - // Initialize grid elements. - $(".grid").each( function() { - var grid = this; - var checkboxes = $(this).find("input.grid-row-select-checkbox"); - var update = $(this).find( "span.grid-selected-count" ); - $(checkboxes).each( function() { - $(this).change( function() { - var n = $(checkboxes).filter("[checked]").size(); - update.text( n ); - }); - }) - }); - - // Initialize autocomplete for text inputs in search UI. - var t = $("#input-tags-filter"); - if (t.length) - { - - var autocomplete_options = - { selectFirst: false, autoFill: false, highlight: false, mustMatch: false }; + ${parent.javascripts()} + ${h.js("jquery.autocomplete", "autocomplete_tagging" )} + <script type="text/javascript"> + ## TODO: generalize and move into galaxy.base.js + $(document).ready(function() { + init_grid_elements(); + init_grid_controls(); + }); + ## Can this be moved into base.mako? + %if refresh_frames: + %if 'masthead' in refresh_frames: + ## Refresh masthead == user changes (backward compatibility) + if ( parent.user_changed ) { + %if trans.user: + parent.user_changed( "${trans.user.email}", ${int( app.config.is_admin_user( trans.user ) )} ); + %else: + parent.user_changed( null, false ); + %endif + } + %endif + %if 'history' in refresh_frames: + if ( parent.frames && parent.frames.galaxy_history ) { + parent.frames.galaxy_history.location.href="${h.url_for( controller='root', action='history')}"; + if ( parent.force_right_panel ) { + parent.force_right_panel( 'show' ); + } + } + %endif + %if 'tools' in refresh_frames: + if ( parent.frames && parent.frames.galaxy_tools ) { + parent.frames.galaxy_tools.location.href="${h.url_for( controller='root', action='tool_menu')}"; + if ( parent.force_left_panel ) { + parent.force_left_panel( 'show' ); + } + } + %endif + %endif + + // + // Code to handle grid operations: filtering, sorting, paging, and operations. + // + + // Operations that are not async (AJAX) compatible. + var no_async_ops = new Object(); + %for operation in grid.operations: + %if not operation.async_compatible: + no_async_ops['${operation.label.lower()}'] = "True"; + %endif + %endfor + + // Initialize grid controls + function init_grid_controls() + { + + // Initialize operation buttons. + $('input[name=operation]:submit').each(function() { + $(this).click( function() { + // Get operation name. + var operation_name = $(this).attr("value"); - t.autocomplete("${h.url_for( controller='tag', action='tag_autocomplete_data', item_class='History' )}", autocomplete_options); - } - - var t2 = $("#input-name-filter"); - if (t2.length) - { - var autocomplete_options = - { selectFirst: false, autoFill: false, highlight: false, mustMatch: false }; + // For some reason, $('input[name=id]:checked').val() does not return all ids for checked boxes. + // The code below performs this function. + var item_ids = new Array() + $('input[name=id]:checked').each(function() { + item_ids[item_ids.length] = $(this).val(); + }); + do_operation(operation_name, item_ids); + }); + }); + + // Initialize submit image elements. + $('.submit-image').each( function() + { + // On mousedown, add class to simulate click. + $(this).mousedown( function() { + $(this).addClass('gray-background'); + }); + + // On mouseup, add class to simulate click. + $(this).mouseup( function() { + $(this).removeClass('gray-background'); + }); + + }); + + // Initialize sort links. + $('.sort-link').each( function() + { + var sort_key = $(this).attr('sort_key'); + $(this).click( function() { + set_sort_condition(sort_key); + return false; + }); + + }); + + // Initialize page links. + $('.page-link > a').each( function() + { + var page_num = $(this).attr('page_num'); + $(this).click( function() { + set_page(page_num); + return false; + }); + + }); + $('#show-all-link').click( function() { + set_page('all'); + return false; + }); + + // Initialize categorical filters. + $('.categorical-filter > a').each( function() + { + $(this).click( function() { + var filter_key = $(this).attr('filter_key'); + var filter_val = $(this).attr('filter_val'); + set_categorical_filter(filter_key, filter_val); + return false; + }); + }); + + // Initialize text filters. + $('.text-filter-form').each( function() + { + $(this).submit( function() { + var column_key = $(this).attr('column_key'); + var text_input_obj = $('#input-' + column_key + '-filter'); + var text_input = text_input_obj.val(); + text_input_obj.val(''); + add_filter_condition(column_key, text_input, true); + return false; + }); + }); + + // Initialize autocomplete for text inputs in search UI. + var t = $("#input-tags-filter"); + if (t.length) + { + + var autocomplete_options = + { selectFirst: false, autoFill: false, highlight: false, mustMatch: false }; - t2.autocomplete("${h.url_for( controller='history', action='name_autocomplete_data' )}", autocomplete_options); - } - - // Initialize submit image elements. - $('.submit-image').each( function() - { - // On mousedown, add class to simulate click. - $(this).mousedown( function() { - $(this).addClass('gray-background'); - }); - - // On mouseup, add class to simulate click. - $(this).mouseup( function() { - $(this).removeClass('gray-background'); - }); - - }); - }); - ## Can this be moved into base.mako? - %if refresh_frames: - %if 'masthead' in refresh_frames: - ## Refresh masthead == user changes (backward compatibility) - if ( parent.user_changed ) { - %if trans.user: - parent.user_changed( "${trans.user.email}", ${int( app.config.is_admin_user( trans.user ) )} ); - %else: - parent.user_changed( null, false ); - %endif - } - %endif - %if 'history' in refresh_frames: - if ( parent.frames && parent.frames.galaxy_history ) { - parent.frames.galaxy_history.location.href="${h.url_for( controller='root', action='history')}"; - if ( parent.force_right_panel ) { - parent.force_right_panel( 'show' ); - } - } - %endif - %if 'tools' in refresh_frames: - if ( parent.frames && parent.frames.galaxy_tools ) { - parent.frames.galaxy_tools.location.href="${h.url_for( controller='root', action='tool_menu')}"; - if ( parent.force_left_panel ) { - parent.force_left_panel( 'show' ); - } - } - %endif - %endif - - // Filter and sort args for grid. - var filter_args = ${h.to_json_string(cur_filter_dict)}; - var sort_key = "${sort_key}"; - - // - // Add tag to grid filter. - // - function add_tag_to_grid_filter(tag_name, tag_value) - { - // Put tag name and value together. - var tag = tag_name + (tag_value != null && tag_value != "" ? ":" + tag_value : ""); - add_condition_to_grid_filter("tags", tag, true); - } - - // - // Add a filter to the current grid filter; this adds the filter and then issues a request to refresh the grid. - // - function add_condition_to_grid_filter(name, value, append) - { - // Update filter arg with new condition. - if (append) - { - // Append value. - var cur_val = filter_args[name]; - if (cur_val != "All") - cur_val = cur_val + ", " + value; - else - cur_val = value; - filter_args[name] = cur_val; - } - else - { - // Replace value. - filter_args[name] = value; - } - - // Build URL with filter args, sort key. - var filter_arg_value_strs = new Array(); - var i = 0; - for (arg in filter_args) - { - filter_arg_value_strs[i++] = "f-" + arg + "=" + filter_args[arg]; - } - var filter_str = filter_arg_value_strs.join("&"); - var url_base = "${h.url_for( action='list')}"; - var url = url_base + "?" + filter_str + "&sort=" + sort_key; - self.location = url; - } - - // - // Initiate navigation when user selects a page to view. - // - function navigate_to_page(page_select) - { - page_num = $(page_select).val(); - <% url_args = {"page" : "PAGE"} %> - var url_base = "${url( url_args )}"; - var url = url_base.replace("PAGE", page_num); - self.location = url; - } + t.autocomplete("${h.url_for( controller='tag', action='tag_autocomplete_data', item_class='History' )}", autocomplete_options); + } + + var t2 = $("#input-name-filter"); + if (t2.length) + { + var autocomplete_options = + { selectFirst: false, autoFill: false, highlight: false, mustMatch: false }; + + t2.autocomplete("${h.url_for( controller='history', action='name_autocomplete_data' )}", autocomplete_options); + } + + // Initialize advanced search toggles. + $('.advanced-search-toggle').each( function() + { + $(this).click( function() { + $('#more-search-options').slideToggle('fast'); + return false; + }); + }); + } + + // Overrides function in galaxy.base.js so that click does operation. + function make_popup_menus() + { + jQuery( "div[popupmenu]" ).each( function() { + var options = {}; + $(this).find( "a" ).each( function() { + var confirmtext = $(this).attr( "confirm" ), + href = $(this).attr( "href" ), + target = $(this).attr( "target" ); + options[ $(this).text() ] = function() { + if ( !confirmtext || confirm( confirmtext ) ) { + do_operation_from_href(href); + } + }; + }); + var b = $( "#" + $(this).attr( 'popupmenu' ) ); + make_popupmenu( b, options ); + $(this).remove(); + b.show(); + }); + } + + // Initialize grid elements. + function init_grid_elements() + { + // Initialize grid selection checkboxes. + $(".grid").each( function() { + var grid = this; + var checkboxes = $(this).find("input.grid-row-select-checkbox"); + var update = $(this).find( "span.grid-selected-count" ); + $(checkboxes).each( function() { + $(this).change( function() { + var n = $(checkboxes).filter("[checked]").size(); + update.text( n ); + }); + }) + }); + + // Initialize item labels. + $(".label").each( function() { + // If href has an operation in it, do operation when clicked. Otherwise do nothing. + var href = $(this).attr('href'); + if ( href.indexOf('operation=') != -1 ) + { + $(this).click( function() { + do_operation_from_href( $(this).attr('href') ); + return false; + }); + } + }); + + // Initialize item menu operations. + make_popup_menus(); + } + + // Filter values for categorical filters. + var categorical_filters = new Object(); + %for column in grid.columns: + %if column.filterable is not None and not isinstance( column, TextColumn ): + var ${column.key}_filters = + { + %for i, filter in enumerate( column.get_accepted_filters() ): + %if i > 0: + , + %endif + ${filter.label} : ${h.to_json_string( filter.args )} + %endfor + }; + categorical_filters['${column.key}'] = ${column.key}_filters; + %endif + %endfor + + // Initialize URL args with filter arguments. + var url_args = ${h.to_json_string( cur_filter_dict )}; + + // Place "f-" in front of all filter arguments. + var arg; + for (arg in url_args) + { + value = url_args[arg]; + delete url_args[arg]; + url_args["f-" + arg] = value; + } + + // Add sort argument to URL args. + url_args['sort'] = "${encoded_sort_key}"; + + // Add async keyword to URL args. + url_args['async'] = true; + + // Add page to URL args. + url_args['page'] = ${cur_page_num}; + + var num_pages = ${num_pages}; + + // Go back to page one; this is useful when a filter is applied. + function go_page_one() + { + // Need to go back to page 1 if not showing all. + var cur_page = url_args['page']; + if (cur_page != null && cur_page != undefined && cur_page != 'all') + url_args['page'] = 1; + } + + // Add tag to grid filter. + function add_tag_to_grid_filter(tag_name, tag_value) + { + // Put tag name and value together. + var tag = tag_name + (tag_value != null && tag_value != "" ? ":" + tag_value : ""); + $('#more-search-options').show('fast'); + add_filter_condition("tags", tag, true); + } + + // Add a condition to the grid filter; this adds the condition and refreshes the grid. + function add_filter_condition(name, value, append) + { + // Do nothing is value is empty. + if (value == "") + return false; + + // Update URL arg with new condition. + if (append) + { + // Update or append value. + var cur_val = url_args["f-" + name]; + var new_val; + if (cur_val == null || cur_val == undefined) + { + new_val = value; + } + else if (typeof(cur_val) == "string") + { + if (cur_val == "All") + new_val = value; + else + { + // Replace string with array. + var values = new Array(); + values[0] = cur_val; + values[1] = value; + new_val = values; + } + } + else { + // Current value is an array. + new_val = cur_val; + new_val[new_val.length] = value; + } + url_args["f-" + name] = new_val; + } + else + { + // Replace value. + url_args["f-" + name] = value; + } + + // Add button that displays filter and provides a button to delete it. + var t = $("<span>" + value + + " <a href='#'><img src='${h.url_for('/static/images/delete_tag_icon_gray.png')}'/></a></span>"); + t.addClass('text-filter-val'); + t.click(function() { + // Remove filter condition. + + // Remove visible element. + $(this).remove(); + + // Remove condition from URL args. + var cur_val = url_args["f-" + name]; + if (cur_val == null || cur_val == undefined) + { + // Unexpected. Throw error? + } + else if (typeof(cur_val) == "string") + { + if (cur_val == "All") + { + // Unexpected. Throw error? + } + else + // Remove condition. + delete url_args["f-" + name]; + } + else { + // Current value is an array. + var conditions = cur_val; + var index; + for (index = 0; index < conditions.length; index++) + if (conditions[index] == value) + { + conditions.splice(index, 1); + break; + } + } + + go_page_one(); + update_grid(); + }); + + var container = $('#' + name + "-filtering-criteria"); + container.append(t); + + go_page_one(); + update_grid(); + } + + // Set sort condition for grid. + function set_sort_condition(col_key) + { + // Set new sort condition. New sort is col_key if sorting new column; if reversing sort on + // currently sorted column, sort is reversed. + var cur_sort = url_args['sort']; + var new_sort = col_key; + if ( cur_sort.indexOf( col_key ) != -1) + { + // Reverse sort. + if ( cur_sort.substring(0,1) != '-' ) + new_sort = '-' + col_key; + else + { + // Sort reversed by using just col_key. + } + } + + // Remove sort arrows elements. + $('.sort-arrow').remove() + + // Add sort arrow element to new sort column. + var sort_arrow = "↑"; + if (new_sort.substring(0,1) != '-') + sort_arrow = "↓"; + var t = $("<span>" + sort_arrow + "</span>").addClass('sort-arrow'); + var th = $("#" + col_key + '-header'); + th.append(t); + + // Need to go back to page 1 if not showing all. + var cur_page = url_args['page']; + if (cur_page != null && cur_page != undefined && cur_page != 'all') + url_args['page'] = 1; + + // Update grid. + url_args['sort'] = new_sort; + go_page_one(); + update_grid(); + } + + // Set new value for categorical filter. + function set_categorical_filter(name, new_value) + { + // Update filter hyperlinks to reflect new filter value. + var category_filter = categorical_filters[name]; + var cur_value = url_args["f-" + name]; + $("." + name + "-filter").each( function() { + var text = $.trim( $(this).text() ); + var filter = category_filter[text]; + var filter_value = filter[name]; + if (filter_value == new_value) + { + // Remove filter link since grid will be using this filter. It is assumed that + // this element has a single child, a hyperlink/anchor with text. + $(this).empty(); + $(this).addClass("current-filter"); + $(this).append(text); + } + else if (filter_value == cur_value) + { + // Add hyperlink for this filter since grid will no longer be using this filter. It is assumed that + // this element has a single child, a hyperlink/anchor. + $(this).empty(); + var t = $("<a href='#'>" + text + "</a>"); + t.click(function() { + set_categorical_filter( name, filter_value ); + }); + $(this).removeClass("current-filter"); + $(this).append(t); + } + }); + + // Update grid. + url_args["f-" + name] = new_value; + go_page_one(); + update_grid(); + } + + // Set page to view. + function set_page(new_page) + { + // Update page hyperlink to reflect new page. + $(".page-link").each( function() { + var id = $(this).attr('id'); + var page_num = parseInt( id.split("-")[2] ); // Id has form 'page-link-<page_num> + var cur_page = url_args['page']; + if (page_num == new_page) + { + // Remove link to page since grid will be on this page. It is assumed that + // this element has a single child, a hyperlink/anchor with text. + var text = $(this).children().text(); + $(this).empty(); + $(this).addClass("inactive-link"); + $(this).text(text); + } + else if (page_num == cur_page) + { + // Add hyperlink to this page since grid will no longer be on this page. It is assumed that + // this element has a single child, a hyperlink/anchor. + var text = $(this).text(); + $(this).empty(); + $(this).removeClass("inactive-link"); + var t = $("<a href='#'>" + text + "</a>"); + t.click(function() { + set_page(page_num); + }); + $(this).append(t); + } + }); + + var maintain_page_links = true; + if (new_page == "all") + { + url_args['page'] = new_page; + maintain_page_links = false; + } + else + url_args['page'] = parseInt(new_page); + update_grid(maintain_page_links); + } + + // Perform a grid operation. + function do_operation(operation, item_ids) + { + operation = operation.toLowerCase(); + + // Update URL args. + url_args['operation'] = operation; + url_args['id'] = item_ids; + + // If operation cannot be performed asynchronously, redirect to location. Otherwise do operation. + var no_async = ( no_async_ops[operation] != undefined && no_async_ops[operation] != null); + if (no_async) + { + go_to_URL(); + } + else + { + update_grid(true); + delete url_args['operation']; + delete url_args['id']; + } + } + + // Perform a hyperlink click that initiates an operation. If there is no operation, ignore click. + function do_operation_from_href(href) + { + // Get operation, id in hyperlink's href. + var href_parts = href.split("?"); + if (href_parts.length > 1) + { + var href_parms_str = href_parts[1]; + var href_parms = href_parms_str.split("&"); + var operation = null; + var id = -1; + for (var index = 0; index < href_parms.length; index++) + { + if (href_parms[index].indexOf('operation') != -1) + { + // Found operation parm; get operation value. + operation = href_parms[index].split('=')[1]; + } + else if (href_parms[index].indexOf('id') != -1) + { + // Found operation parm; get operation value. + id = href_parms[index].split('=')[1]; + } + } + + // Do operation. + do_operation(operation, id); + return false; + } + + } + + // Navigate window to the URL defined by url_args. This method should be used to short-circuit grid AJAXing. + function go_to_URL() + { + // Not async request. + url_args['async'] = false; + + // Build argument string. + var arg_str = ""; + var arg; + for (arg in url_args) + arg_str = arg_str + arg + "=" + url_args[arg] + "&"; + + // Go. + window.location = encodeURI( "${h.url_for()}?" + arg_str ); + } + + // Update grid. + function update_grid(maintain_page_links) + { + ## If grid is not using async, then go to URL. + %if not grid.use_async: + go_to_URL(); + return; + %endif + + // If there's an operation in the args, do POST; otherwise, do GET. + var operation = url_args['operation']; + var method = (operation != null && operation != undefined ? "POST" : "GET" ); + $.ajax({ + type: method, + url: "${h.url_for()}", + data: url_args, + error: function() { alert( "Grid refresh failed" ) }, + success: function(response_text) { + // HACK: use a simple string to separate the elements in the + // response: (1) table body; (2) number of pages in table; and (3) message. + var parsed_response_text = response_text.split("*****"); + + // Update grid body. + var table_body = parsed_response_text[0]; + $('#grid-table-body').html(table_body); + + // Process grid body. + init_grid_elements(); + make_popup_menus(); + + // Update number of pages. + var num_pages = parseInt( parsed_response_text[1] ); + + // Rebuild page links. + if (!maintain_page_links) + { + // Remove page links. + var page_link_container = $('#page-link-container'); + page_link_container.children().remove(); + + // First page is the current page. + var t = $("<span>1</span>"); + t.addClass('page-link'); + t.addClass('inactive-link'); + t.attr('id', 'page-link-1'); + page_link_container.append(t); + + // Show all link is visible only if there are multiple pages. + var elt = $('#show-all-link-span'); + if (num_pages > 1) + elt.show(); + else + elt.hide(); + + // Subsequent pages are navigable. + for (var i = 2; i <= num_pages; i++) + { + var span = $("<span></span>"); + span.addClass('page-link'); + span.attr('id', 'page-link-' + i); + var t = $("<a href='#'>" + i + "</a>"); + t.attr('page', i); + t.click(function() { + var page = $(this).attr('page'); + set_page(page); + }); + span.append(t) + page_link_container.append(span); + } + } + + // Show message if there is one. + var message = $.trim( parsed_response_text[2] ); + if (message != "") + { + $('#grid-message').html( message ); + setTimeout("$('#grid-message').hide()", 5000); + } + } + }); + } </script> </%def> <%def name="stylesheets()"> ${h.css( "base", "autocomplete_tagging" )} <style> - ## Not generic to all grids -- move to base? - .count-box { - min-width: 1.1em; - padding: 5px; - border-width: 1px; - border-style: solid; - text-align: center; - display: inline-block; - } - .submit-image { - vertical-align: text-bottom; - margin: 0; - padding: 0; - } - .no-padding-or-margin { - margin: 0; - padding: 0; - } - .gray-background { - background-color: #DDDDDD; - } - .text-filter-val { - border: solid 1px #AAAAAA; - padding: 1px 3px 1px 3px; - margin-right: 5px; - -moz-border-radius: .5em; - -webkit-border-radius: .5em; - font-style: italic; - } + ## Not generic to all grids -- move to base? + .count-box { + min-width: 1.1em; + padding: 5px; + border-width: 1px; + border-style: solid; + text-align: center; + display: inline-block; + } + .text-filter-val { + border: solid 1px #AAAAAA; + padding: 1px 3px 1px 3px; + margin-right: 5px; + -moz-border-radius: .5em; + -webkit-border-radius: .5em; + font-style: italic; + } + .page-link a, .inactive-link { + padding: 0px 7px 0px 7px; + } + .inactive-link, .current-filter { + font-style: italic; + } + .submit-image { + vertical-align: text-bottom; + margin: 0; + padding: 0; + } + .no-padding-or-margin { + margin: 0; + padding: 0; + } + .gray-background { + background-color: #DDDDDD; + } </style> </%def> <%namespace file="./grid_common.mako" import="*" /> -## Print grid header. -<%def name="grid_header()"> +## Render grid message. +<%def name="render_grid_message()"> + %if message: + <p> + <div class="${message_type}message transient-message">${util.restore_text( message )}</div> + <div style="clear: both"></div> + </p> + %endif +</%def> + +## Render grid header. +<%def name="render_grid_header(render_title=True)"> <div class="grid-header"> - <h2>${grid.title}</h2> + %if render_title: + <h2>${grid.title}</h2> + %endif %if grid.global_actions: <ul class="manage-table-actions"> @@ -227,11 +747,11 @@ </div> </%def> -## Print grid. -<%def name="grid_table()"> - <form action="${url()}" method="post" > +## Render grid. +<%def name="render_grid_table()"> + <form action="${url()}" method="post" onsubmit="return false;"> <table class="grid"> - <thead> + <thead id="grid-table-header"> <tr> <th></th> %for column in grid.columns: @@ -251,152 +771,164 @@ href = url( sort=column.key ) %> <th\ + id="${column.key}-header" %if column.ncells > 1: colspan="${column.ncells}" %endif > %if href: - <a href="${href}">${column.label}</a> + <a href="${href}" class="sort-link" sort_key='${column.key}'>${column.label}</a> %else: ${column.label} %endif - <span>${extra}</span> + <span class="sort-arrow">${extra}</span> </th> %endif %endfor <th></th> </tr> </thead> - <tbody> - %for i, item in enumerate( query ): - <tr \ - %if current_item == item: - class="current" \ - %endif - > - ## Item selection column - <td style="width: 1.5em;"> - <input type="checkbox" name="id" value=${trans.security.encode_id( item.id )} class="grid-row-select-checkbox" /> - </td> - ## Data columns - %for column in grid.columns: - %if column.visible: - <% - # Link - link = column.get_link( trans, grid, item ) - if link: - href = url( **link ) - else: - href = None - # Value (coerced to list so we can loop) - value = column.get_value( trans, grid, item ) - if column.ncells == 1: - value = [ value ] - %> - %for cellnum, v in enumerate( value ): - <% - # Handle non-ascii chars. - if isinstance(v, str): - v = unicode(v, 'utf-8') - # Attach popup menu? - if column.attach_popup and cellnum == 0: - extra = '<a id="grid-%d-popup" class="arrow" style="display: none;"><span>▼</span></a>' % i - else: - extra = "" - %> - %if href: - <td><div class="menubutton split" style="float: left;"><a class="label" href="${href}">${v}</a>${extra}</td> - %else: - <td >${v}${extra}</td> - %endif - %endfor - %endif - %endfor - ## Actions column - <td> - <div popupmenu="grid-${i}-popup"> - %for operation in grid.operations: - %if operation.allowed( item ): - <% - target = "" - if operation.target: - target = "target='" + operation.target + "'" - %> - <a class="action-button" ${target} href="${ url( **operation.get_url_args( item ) ) }">${operation.label}</a> - %endif - %endfor - </div> - </td> - </tr> - %endfor + <tbody id="grid-table-body"> + ${render_grid_table_body_contents()} </tbody> <tfoot> - ## Row for navigating among pages. - <% - # Mapping between item class and plural term for item. - items_plural = "items" - if grid.model_class == History: - items_plural = "histories" - elif grid.model_class == HistoryDatasetAssociation: - items_plural = "datasets" - elif grid.model_class == User: - items_plural = "users" - elif grid.model_class == Role: - items_plural = "roles" - elif grid.model_class == Group: - items_plural = "groups" - %> - %if num_pages > 1: - <tr> - <td></td> - <td colspan="100"> - Page ${cur_page_num} of ${num_pages} -     Go to: - ## Next page link. - %if cur_page_num != num_pages: - <% args = { "page" : cur_page_num+1 } %> - <span><a href="${url( args )}">Next</a></span> - %endif - ## Previous page link. - %if cur_page_num != 1: - <span>|</span> - <% args = { "page" : cur_page_num-1 } %> - <span><a href="${url( args )}">Previous</a></span> - %endif - ## Go to page select box. - <span>| Select:</span> - <select id="page-select" onchange="navigate_to_page(this)"> - <option value=""></option> - %for page_index in range(1, num_pages + 1): - %if page_index == cur_page_num: - continue - %else: - <% args = { "page" : page_index } %> - <option value='${page_index}'>Page ${page_index}</option> - %endif - %endfor - </select> - ## Show all link. - <% args = { "page" : "all" } %> - <span>| <a href="${url( args )}">Show all ${items_plural} on one page</a></span> - </td> - </tr> - %endif - ## Grid operations. - %if grid.operations: - <tr> - <td></td> - <td colspan="100"> - For <span class="grid-selected-count"></span> selected ${items_plural}: - %for operation in grid.operations: - %if operation.allow_multiple: - <input type="submit" name="operation" value="${operation.label}" class="action-button"> - %endif - %endfor - </td> - </tr> - %endif + ${render_grid_table_footer_contents()} </tfoot> </table> </form> -</%def> \ No newline at end of file +</%def> + +## Render grid table body contents. +<%def name="render_grid_table_body_contents()"> + <% num_rows_rendered = 0 %> + %if query.count() == 0: + ## No results. + <tr><td></td><td><em>No Items</em></td></tr> + <% num_rows_rendered = 1 %> + %endif + %for i, item in enumerate( query ): + <tr \ + %if current_item == item: + class="current" \ + %endif + > + ## Item selection column + <td style="width: 1.5em;"> + <input type="checkbox" name="id" value=${trans.security.encode_id( item.id )} class="grid-row-select-checkbox" /> + </td> + ## Data columns + %for column in grid.columns: + %if column.visible: + <% + # Link + link = column.get_link( trans, grid, item ) + if link: + href = url( **link ) + else: + href = None + # Value (coerced to list so we can loop) + value = column.get_value( trans, grid, item ) + if column.ncells == 1: + value = [ value ] + %> + %for cellnum, v in enumerate( value ): + <% + # Handle non-ascii chars. + if isinstance(v, str): + v = unicode(v, 'utf-8') + # Attach popup menu? + if column.attach_popup and cellnum == 0: + extra = '<a id="grid-%d-popup" class="arrow" style="display: none;"><span>▼</span></a>' % i + else: + extra = "" + %> + %if href: + <td><div class="menubutton split" style="float: left;"><a class="label" href="${href}">${v}</a>${extra}</td> + %else: + <td >${v}${extra}</td> + %endif + %endfor + %endif + %endfor + ## Actions column + <td> + <div popupmenu="grid-${i}-popup"> + %for operation in grid.operations: + %if operation.allowed( item ): + <% + target = "" + if operation.target: + target = "target='" + operation.target + "'" + %> + <a class="action-button" ${target} href="${ url( **operation.get_url_args( item ) ) }">${operation.label}</a> + %endif + %endfor + </div> + </td> + </tr> + <% num_rows_rendered += 1 %> + %endfor + ## Dummy rows to prevent table for moving too much. + ##%if grid.use_paging: + ## %for i in range( num_rows_rendered , grid.num_rows_per_page ): + ## <tr><td colspan="1000"> </td></tr> + ## %endfor + ##%endif +</%def> + +## Render grid table footer contents. +<%def name="render_grid_table_footer_contents()"> + ## Row for navigating among pages. + <% + # Mapping between item class and plural term for item. + items_plural = "items" + if grid.model_class == History: + items_plural = "histories" + elif grid.model_class == HistoryDatasetAssociation: + items_plural = "datasets" + elif grid.model_class == User: + items_plural = "users" + elif grid.model_class == Role: + items_plural = "roles" + elif grid.model_class == Group: + items_plural = "groups" + %> + %if grid.use_paging and num_pages > 1: + <tr id="page-links-row"> + <td></td> + <td colspan="100"> + <span id='page-link-container'> + ## Page links. + Page: + %for page_index in range(1, num_pages + 1): + %if page_index == cur_page_num: + <span class='page-link inactive-link' id="page-link-${page_index}">${page_index}</span> + %else: + <% args = { 'page' : page_index } %> + <span class='page-link' id="page-link-${page_index}"><a href="${url( args )}" page_num='${page_index}'>${page_index}</a></span> + %endif + %endfor + </span> + + ## Show all link. + <% args = { "page" : "all" } %> + <span id='show-all-link-span'>| <a href="${url( args )}" id="show-all-link">Show all ${items_plural} on one page</a></span> + </td> + </tr> + %endif + ## Grid operations. + %if grid.operations: + <tr> + <td></td> + <td colspan="100"> + For <span class="grid-selected-count"></span> selected ${items_plural}: + %for operation in grid.operations: + %if operation.allow_multiple: + <input type="submit" name="operation" value="${operation.label}" class="action-button"> + %endif + %endfor + </td> + </tr> + %endif +</%def> + diff -r 07c1b4bc14af -r 5761948422a8 templates/grid_base_async.mako --- a/templates/grid_base_async.mako Mon Nov 23 17:20:01 2009 -0500 +++ b/templates/grid_base_async.mako Tue Nov 24 14:53:19 2009 -0500 @@ -1,704 +1,7 @@ -<%! - from galaxy.web.framework.helpers.grids import TextColumn - from galaxy.model import History, HistoryDatasetAssociation, User, Role, Group - import galaxy.util - def inherit(context): - if context.get('use_panels'): - return '/base_panels.mako' - else: - return '/base.mako' -%> -<%inherit file="${inherit(context)}"/> +<%namespace file="./grid_base.mako" import="*" /> -## Render the grid's basic elements. Each of these elements can be subclassed. -%if message: - <p> - <div class="${message_type}message transient-message">${util.restore_text( message )}</div> - <div style="clear: both"></div> - </p> -%endif - -${self.render_grid_header()} -${self.render_grid_table()} - -## Function definitions. - -<%def name="title()">${grid.title}</%def> - -<%def name="javascripts()"> - ${parent.javascripts()} - ${h.js("jquery.autocomplete", "autocomplete_tagging" )} - <script type="text/javascript"> - ## TODO: generalize and move into galaxy.base.js - $(document).ready(function() { - // Initialize grid elements. - init_grid_elements(); - - // Operations that are not async (AJAX) compatible. - var no_async_ops = new Object(); - %for operation in grid.operations: - %if not operation.async_compatible: - no_async_ops['${operation.label}'] = "True"; - %endif - %endfor - - // Initialize each operation button to do operation when clicked. - $('input[name=operation]:submit').each(function() { - $(this).click( function() { - var this_value = $(this).attr("value"); - var no_async = ( no_async_ops[this_value] != undefined && no_async_ops[this_value] != null); - do_operation(this_value, no_async); - }); - }); - - // Initialize autocomplete for text inputs in search UI. - var t = $("#input-tags-filter"); - if (t.length) - { - - var autocomplete_options = - { selectFirst: false, autoFill: false, highlight: false, mustMatch: false }; - - t.autocomplete("${h.url_for( controller='tag', action='tag_autocomplete_data', item_class='History' )}", autocomplete_options); - } - - var t2 = $("#input-name-filter"); - if (t2.length) - { - var autocomplete_options = - { selectFirst: false, autoFill: false, highlight: false, mustMatch: false }; - - t2.autocomplete("${h.url_for( controller='history', action='name_autocomplete_data' )}", autocomplete_options); - } - }); - ## Can this be moved into base.mako? - %if refresh_frames: - %if 'masthead' in refresh_frames: - ## Refresh masthead == user changes (backward compatibility) - if ( parent.user_changed ) { - %if trans.user: - parent.user_changed( "${trans.user.email}", ${int( app.config.is_admin_user( trans.user ) )} ); - %else: - parent.user_changed( null, false ); - %endif - } - %endif - %if 'history' in refresh_frames: - if ( parent.frames && parent.frames.galaxy_history ) { - parent.frames.galaxy_history.location.href="${h.url_for( controller='root', action='history')}"; - if ( parent.force_right_panel ) { - parent.force_right_panel( 'show' ); - } - } - %endif - %if 'tools' in refresh_frames: - if ( parent.frames && parent.frames.galaxy_tools ) { - parent.frames.galaxy_tools.location.href="${h.url_for( controller='root', action='tool_menu')}"; - if ( parent.force_left_panel ) { - parent.force_left_panel( 'show' ); - } - } - %endif - %endif - - // - // Code to handle grid operations: filtering, sorting, paging, and operations. - // - - // Initialize grid elements. - function init_grid_elements() - { - $(".grid").each( function() { - var grid = this; - var checkboxes = $(this).find("input.grid-row-select-checkbox"); - var update = $(this).find( "span.grid-selected-count" ); - $(checkboxes).each( function() { - $(this).change( function() { - var n = $(checkboxes).filter("[checked]").size(); - update.text( n ); - }); - }) - }); - } - - // Filter values for categorical filters. - var categorical_filters = new Object(); - %for column in grid.columns: - %if column.filterable is not None and not isinstance( column, TextColumn ): - var ${column.key}_filters = - { - %for i, filter in enumerate( column.get_accepted_filters() ): - %if i > 0: - , - %endif - ${filter.label} : ${h.to_json_string( filter.args )} - %endfor - }; - categorical_filters['${column.key}'] = ${column.key}_filters; - %endif - %endfor - - // Initialize URL args with filter arguments. - var url_args = ${h.to_json_string( cur_filter_dict )}; - - // Place "f-" in front of all filter arguments. - var arg; - for (arg in url_args) - { - value = url_args[arg]; - delete url_args[arg]; - url_args["f-" + arg] = value; - } - - // Add sort argument to URL args. - url_args['sort'] = "${encoded_sort_key}"; - - // Add async keyword to URL args. - url_args['async'] = true; - - // Add tag to grid filter. - function add_tag_to_grid_filter(tag_name, tag_value) - { - // Put tag name and value together. - var tag = tag_name + (tag_value != null && tag_value != "" ? ":" + tag_value : ""); - add_filter_condition("tags", tag, true); - } - - // Add a condition to the grid filter; this adds the condition and refreshes the grid. - function add_filter_condition(name, value, append) - { - // Update URL arg with new condition. - if (append) - { - // Update or append value. - var cur_val = url_args["f-" + name]; - var new_val; - if (cur_val == null || cur_val == undefined) - { - new_val = value; - } - else if (typeof(cur_val) == "string") - { - if (cur_val == "All") - new_val = value; - else - { - // Replace string with array. - var values = new Array(); - values[0] = cur_val; - values[1] = value; - new_val = values; - } - } - else { - // Current value is an array. - new_val = cur_val; - new_val[new_val.length] = value; - } - url_args["f-" + name] = new_val; - } - else - { - // Replace value. - url_args["f-" + name] = value; - } - - // Add button that displays filter and provides a button to delete it. - var t = $("<span>" + value + - " <a href='#'><img src='${h.url_for('/static/images/delete_tag_icon_gray.png')}'/></a></span>"); - t.addClass('text-filter-val'); - t.click(function() { - // - // Remove filter condition. - // - - // TODO: remove element. - //var tag_button = $(this).parent(); - $(this).remove(); - - // Remove condition from URL args. - var cur_val = url_args["f-" + name]; - if (cur_val == null || cur_val == undefined) - { - // Unexpected. Throw error? - } - else if (typeof(cur_val) == "string") - { - if (cur_val == "All") - { - // Unexpected. Throw error? - } - else - // Remove condition. - delete url_args["f-" + name]; - } - else { - // Current value is an array. - var conditions = cur_val; - var index; - for (index = 0; index < conditions.length; index++) - if (conditions[index] == value) - { - conditions.splice(index, 1); - break; - } - } - - update_grid(); - }); - - var container = $('#' + name + "-filtering-criteria"); - container.append(t); - - update_grid(); - } - - // Set sort condition for grid. - function set_sort_condition(col_key) - { - // Set new sort condition. New sort is col_key if sorting new column; if reversing sort on - // currently sorted column, sort is reversed. - var cur_sort = url_args['sort']; - var new_sort = col_key; - if ( cur_sort.indexOf( col_key ) != -1) - { - // Reverse sort. - if ( cur_sort.substring(0,1) != '-' ) - new_sort = '-' + col_key; - else - { - // Sort reversed by using just col_key. - } - } - - // Remove sort arrows elements. - $('.sort-arrow').remove() - - // Add sort arrow element to new sort column. - var sort_arrow = "↑"; - if (new_sort.substring(0,1) != '-') - sort_arrow = "↓"; - var t = $("<span>" + sort_arrow + "</span>").addClass('sort-arrow'); - var th = $("#" + col_key + '-header'); - th.append(t); - - // Update grid. - url_args['sort'] = new_sort; - update_grid(); - } - - // Set new value for categorical filter. - function set_categorical_filter(this_obj, name, new_value) - { - // Update filter hyperlinks to reflect new filter value. - var category_filter = categorical_filters[name]; - var cur_value = url_args["f-" + name]; - $("." + name + "-filter").each( function() { - var text = $(this).text().trim(); - var filter = category_filter[text]; - var filter_value = filter[name]; - if (filter_value == new_value) - { - // Remove filter link since grid will be using this filter. It is assumed that - // this element has a single child, a hyperlink/anchor with text. - $(this).empty(); - $(this).append("<span style='font-style: italic'>" + text + "</span>"); - } - else if (filter_value == cur_value) - { - // Add hyperlink for this filter since grid will no longer be using this filter. It is assumed that - // this element has a single child, a hyperlink/anchor. - $(this).empty(); - var t = $("<a href='#'>" + text + "</a>"); - t.click(function() { - set_categorical_filter( $(this), name, filter_value ); - }); - $(this).append(t); - } - }); - - // Need to go back to page 1 if not showing all. - var cur_page = url_args['page']; - if (cur_page != null && cur_page != undefined && cur_page != 'all') - url_args['page'] = 1; - - // Update grid. - url_args["f-" + name] = new_value; - update_grid(); - } - - var num_pages = ${num_pages}; - url_args['page'] = 1; - // Set page to view. - function set_page(new_page) - { - // Update page hyperlink to reflect new page. - $(".page-link").each( function() { - var id = $(this).attr('id'); - var page_num = parseInt( id.split("-")[2] ); // Id has form 'page-link-<page_num> - var cur_page = url_args['page']; - if (page_num == new_page) - { - // Remove link to page since grid will be on this page. It is assumed that - // this element has a single child, a hyperlink/anchor with text. - var text = $(this).children().text(); - $(this).empty(); - $(this).addClass("inactive-link"); - $(this).text(text); - } - else if (page_num == cur_page) - { - // Add hyperlink to this page since grid will no longer be on this page. It is assumed that - // this element has a single child, a hyperlink/anchor. - var text = $(this).text(); - $(this).empty(); - $(this).removeClass("inactive-link"); - var t = $("<a href='#'>" + text + "</a>"); - t.click(function() { - set_page(page_num); - }); - $(this).append(t); - } - }); - - - if (new_page == "all") - { - url_args['page'] = new_page; - $('#page-links-row').hide('slow'); - } - else - { - url_args['page'] = parseInt(new_page); - } - update_grid(true); - } - - // Perform a grid operation. TODO: this is not complete. - function do_operation(operation, no_async) - { - // For some reason, $('input[name=id]:checked').val() does not return all ids for checked boxes. - // The code below performs this function. - var item_ids = new Array() - $('input[name=id]:checked').each(function() { - item_ids[item_ids.length] = $(this).val(); - }); - - // Update URL args. - url_args['operation'] = operation; - url_args['id'] = item_ids; - - // If operation cannot be performed asynchronously, redirect to location. Otherwise do operation. - if (no_async) - { - var arg_str = ""; - var arg; - - for (arg in url_args) - arg_str = arg_str + arg + "=" + url_args[arg] + "&"; - - self.location = encodeURI( "${h.url_for()}?" + arg_str ); - } - else - update_grid(); - - } - - // Update grid. - function update_grid(maintain_page_links) - { - // If there's an operation in the args, do POST; otherwise, do GET. - var operation = url_args['operation']; - var method = (operation != null && operation != undefined ? "POST" : "GET" ); - $.ajax({ - type: method, - url: "${h.url_for()}", - data: url_args, - error: function() { alert( "Grid refresh failed" ) }, - success: function(response_text) { - // HACK: use a simple string to separate the two elements in the - // response: (1) table body and (2) number of pages in table. - var parsed_response_text = response_text.split("*****"); - - // Update grid body. - var table_body = parsed_response_text[0]; - $('#grid-table-body').html(table_body); - - // Process grid body. - init_grid_elements(); - make_popup_menus(); - - // Update pages. - var num_pages = parseInt( parsed_response_text[1] ); - - // Rebuild page links. - if (!maintain_page_links) - { - var page_link_container = $('#page-link-container'); - page_link_container.children().remove(); - if (num_pages > 1) - { - // Show page link row. - $('#page-links-row').show(); - - // First page is the current page. - var t = $("<span>1</span>"); - t.addClass('page-link'); - t.addClass('inactive-link'); - t.attr('id', 'page-link-1'); - page_link_container.append(t); - - // Subsequent pages are navigable. - for (var i = 2; i <= num_pages; i++) - { - var span = $("<span></span>"); - span.addClass('page-link'); - span.attr('id', 'page-link-' + i); - var t = $("<a href='#'>" + i + "</a>"); - var page_num = i - t.click(function() { - set_page(page_num); - }); - span.append(t) - page_link_container.append(span); - } - } - else - { - // Hide page link row. - $('#page-links-row').hide('slow'); - } - } - } - }); - } - - </script> -</%def> - -<%def name="stylesheets()"> - ${h.css( "base", "autocomplete_tagging" )} - <style> - ## Not generic to all grids -- move to base? - .count-box { - min-width: 1.1em; - padding: 5px; - border-width: 1px; - border-style: solid; - text-align: center; - display: inline-block; - } - .text-filter-val { - border: solid 1px #AAAAAA; - padding: 1px 3px 1px 3px; - margin-right: 5px; - -moz-border-radius: .5em; - -webkit-border-radius: .5em; - font-style: italic; - } - .page-link a, .inactive-link { - padding: 0px 7px 0px 7px; - } - .inactive-link { - font-style: italic; - } - </style> -</%def> - -<%namespace file="./grid_common_async.mako" import="*" /> - -## Print grid header. -<%def name="render_grid_header(include_title)"> - <div class="grid-header"> - %if include_title: - <h2>${grid.title}</h2> - %endif - - %if grid.global_actions: - <ul class="manage-table-actions"> - %for action in grid.global_actions: - <li> - <a class="action-button" href="${h.url_for( **action.url_args )}">${action.label}</a> - </li> - %endfor - </ul> - %endif - - ${render_grid_filters()} - </div> -</%def> - -## Print grid. -<%def name="render_grid_table()"> - <form action="${url()}" method="post" onsubmit="return false;"> - <table class="grid"> - <thead id="grid-table-header"> - <tr> - <th></th> - %for column in grid.columns: - %if column.visible: - <% - href = "" - extra = "" - if column.sortable: - if sort_key == column.key: - if sort_order == "asc": - href = url( sort=( "-" + column.key ) ) - extra = "↓" - else: - href = url( sort=( column.key ) ) - extra = "↑" - else: - href = url( sort=column.key ) - %> - <th\ - id="${column.key}-header" - %if column.ncells > 1: - colspan="${column.ncells}" - %endif - > - %if href: - <a href="${href}" onclick="set_sort_condition('${column.key}');return false;">${column.label}</a> - %else: - ${column.label} - %endif - <span class="sort-arrow">${extra}</span> - </th> - %endif - %endfor - <th></th> - </tr> - </thead> - <tbody id="grid-table-body"> - ${render_grid_table_body_contents()} - </tbody> - <tfoot id="grid-table-footer"> - ${render_grid_table_footer_contents()} - </tfoot> - </table> - </form> -</%def> - -<%def name="render_grid_table_body_contents()"> - %if query.count() == 0: - ## No results. - <tr><td></td><td><em>No Items</em></td></tr> - %endif - %for i, item in enumerate( query ): - <tr \ - %if current_item == item: - class="current" \ - %endif - > - ## Item selection column - <td style="width: 1.5em;"> - <input type="checkbox" name="id" value=${trans.security.encode_id( item.id )} class="grid-row-select-checkbox" /> - </td> - ## Data columns - %for column in grid.columns: - %if column.visible: - <% - # Link - link = column.get_link( trans, grid, item ) - if link: - href = url( **link ) - else: - href = None - # Value (coerced to list so we can loop) - value = column.get_value( trans, grid, item ) - if column.ncells == 1: - value = [ value ] - %> - %for cellnum, v in enumerate( value ): - <% - # Handle non-ascii chars. - if isinstance(v, str): - v = unicode(v, 'utf-8') - # Attach popup menu? - if column.attach_popup and cellnum == 0: - extra = '<a id="grid-%d-popup" class="arrow" style="display: none;"><span>▼</span></a>' % i - else: - extra = "" - %> - %if href: - <td><div class="menubutton split" style="float: left;"><a class="label" href="${href}">${v}</a>${extra}</td> - %else: - <td >${v}${extra}</td> - %endif - %endfor - %endif - %endfor - ## Actions column - <td> - <div popupmenu="grid-${i}-popup"> - %for operation in grid.operations: - %if operation.allowed( item ): - <% - target = "" - if operation.target: - target = "target='" + operation.target + "'" - %> - <a class="action-button" ${target} href="${ url( **operation.get_url_args( item ) ) }">${operation.label}</a> - %endif - %endfor - </div> - </td> - </tr> - %endfor -</%def> - -<%def name="render_grid_table_footer_contents()"> - ## Row for navigating among pages. - <% - # Mapping between item class and plural term for item. - items_plural = "items" - if grid.model_class == History: - items_plural = "histories" - elif grid.model_class == HistoryDatasetAssociation: - items_plural = "datasets" - elif grid.model_class == User: - items_plural = "users" - elif grid.model_class == Role: - items_plural = "roles" - elif grid.model_class == Group: - items_plural = "groups" - %> - %if num_pages > 1: - <tr id="page-links-row"> - <td></td> - <td colspan="100"> - <span id='page-link-container'> - ## Page links. - Page: - %for page_index in range(1, num_pages + 1): - %if page_index == cur_page_num: - <span class='page-link inactive-link' id="page-link-${page_index}">${page_index}</span> - %else: - <% args = { 'page' : page_index } %> - <span class='page-link' id="page-link-${page_index}"><a href="${url( args )}" onclick="set_page('${page_index}'); return false;">${page_index}</a></span> - %endif - %endfor - </span> - - ## Show all link. - <% args = { "page" : "all" } %> - <span id='show-all-link'>| <a href="${url( args )}" onclick="set_page('all');return false;">Show all ${items_plural} on one page</a></span> - </td> - </tr> - %endif - ## Grid operations. - %if grid.operations: - <tr> - <td></td> - <td colspan="100"> - For <span class="grid-selected-count"></span> selected ${items_plural}: - %for operation in grid.operations: - %if operation.allow_multiple: - <input type="submit" name="operation" value="${operation.label}" class="action-button"> - %endif - %endfor - </td> - </tr> - %endif -</%def> - +${render_grid_table_body_contents()} +***** +${num_pages} +***** +${render_grid_message()} \ No newline at end of file diff -r 07c1b4bc14af -r 5761948422a8 templates/grid_body_async.mako --- a/templates/grid_body_async.mako Mon Nov 23 17:20:01 2009 -0500 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,5 +0,0 @@ -<%namespace file="./grid_base_async.mako" import="*" /> - -${render_grid_table_body_contents()} -***** -${num_pages} \ No newline at end of file diff -r 07c1b4bc14af -r 5761948422a8 templates/grid_common.mako --- a/templates/grid_common.mako Mon Nov 23 17:20:01 2009 -0500 +++ b/templates/grid_common.mako Tue Nov 24 14:53:19 2009 -0500 @@ -11,8 +11,7 @@ <td align="left" style="padding-left: 10px">${column_label}:</td> <td> %if isinstance(column, TextColumn): - <form name="history_actions" action="${url( dict() )}" - method="get" > + <form class="text-filter-form" column_key="${column.key}" action="${url( dict() )}" method="get" > ## Carry forward filtering criteria with hidden inputs. %for temp_column in grid.columns: %if temp_column.key in cur_filter_dict: @@ -28,6 +27,7 @@ %endfor ## Print current filtering criteria and links to delete. + <span id="${column.key}-filtering-criteria"> %if column.key in cur_filter_dict: <% column_filter = cur_filter_dict[column.key] %> %if isinstance( column_filter, basestring ): @@ -54,21 +54,34 @@ %endif %endif + </span> + ## Print input field for column. <span> - <input class="no-padding-or-margin" id="input-${column.key}-filter" name="f-${column.key}" type="text" value="" size="15"/> - <input class='submit-image' type='image' src='${h.url_for('/static/images/mag_glass.png')}' alt='Filter'/></span> + <input class="no-padding-or-margin" id="input-${column.key}-filter" name="f-${column.key}" type="text" value="" size="15"/> + <input class='submit-image' type='image' src='${h.url_for('/static/images/mag_glass.png')}' alt='Filter'/> + </span> </form> %else: + <span id="${column.key}-filtering-criteria"> %for i, filter in enumerate( column.get_accepted_filters() ): + <% + # HACK: we know that each filter will have only a single argument, so get that single argument. + for key, arg in filter.args.items(): + filter_key = key + filter_arg = arg + %> %if i > 0: - <span>|</span> + | %endif %if column.key in cur_filter_dict and column.key in filter.args and cur_filter_dict[column.key] == filter.args[column.key]: - <span class="filter" style="font-style: italic">${filter.label}</span> + <span class="categorical-filter ${column.key}-filter current-filter">${filter.label}</span> %else: - <span class="filter"><a href="${url( filter.get_url_args() )}">${filter.label}</a></span> + <span class="categorical-filter ${column.key}-filter"> + <a href="${url( filter.get_url_args() )}" filter_key="${filter_key}" filter_val="${filter_arg}">${filter.label}</a> + </span> %endif %endfor + </span> %endif </td> </tr> @@ -96,31 +109,47 @@ ## Only show advanced search if there are filterable columns. <% - show_advanced_search = False + show_advanced_search_link = False for column in grid.columns: if column.filterable == "advanced": - show_advanced_search = True + show_advanced_search_link = True break endif %> - %if show_advanced_search: - | <a href="" onclick="javascript:$('#more-search-options').slideToggle('fast');return false;">Advanced Search</a> + %if show_advanced_search_link: + <% args = { "advanced-search" : True } %> + | <a href="${url( args )}" class="advanced-search-toggle">Advanced Search</a> %endif </td> </tr></table> </div> ## Advanced search. - <div id="more-search-options" style="display: none; padding-top: 5px"> + <% + # Show advanced search if flag set or if there are filters for advanced search fields. + advanced_search_display = "none" + if 'advanced-search' in kwargs and kwargs['advanced-search'] in ['True', 'true']: + advanced_search_display = "block" + + for column in grid.columns: + if column.filterable == "advanced": + ## Show div if current filter has value that is different from the default filter. + if column.key in cur_filter_dict and column.key in default_filter_dict and \ + cur_filter_dict[column.key] != default_filter_dict[column.key]: + advanced_search_display = "block" + %> + <div id="more-search-options" style="display: ${advanced_search_display}; padding-top: 5px"> <table style="border: 1px solid gray;"> <tr><td style="text-align: left" colspan="100"> Advanced Search | - <a href=""# onclick="javascript:$('#more-search-options').slideToggle('fast');return false;">Close</a> | + <% args = { "advanced-search" : False } %> + <a href="${url( args )}" class="advanced-search-toggle">Close</a> ## Link to clear all filters. - <% - no_filter = GridColumnFilter("Clear All", default_filter_dict) - %> - <a href="${url( no_filter.get_url_args() )}">${no_filter.label}</a> + ##| + ##<% + ## no_filter = GridColumnFilter("Clear All", default_filter_dict) + ##%> + ##<a href="${url( no_filter.get_url_args() )}">${no_filter.label}</a> </td></tr> %for column in grid.columns: %if column.filterable == "advanced": diff -r 07c1b4bc14af -r 5761948422a8 templates/grid_common_async.mako --- a/templates/grid_common_async.mako Mon Nov 23 17:20:01 2009 -0500 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,155 +0,0 @@ -<%! from galaxy.web.framework.helpers.grids import TextColumn, GridColumnFilter %> - -## Render an AJAX filter UI for a grid column. Filter is rendered as a table row. -<%def name="render_ajax_grid_column_filter(column)"> - <tr> - <% - column_label = column.label - if column.filterable == "advanced": - column_label = column_label.lower() - %> - <td align="left" style="padding-left: 10px">${column_label}:</td> - <td> - %if isinstance(column, TextColumn): - <form action="${url( dict() )}" id="form-filter-${column.key}" - ## Move this to doc.ready() - ##onsubmit="var text_input=$('#input-${column.key}-filter').val();$('#input-${column.key}-filter').val('');add_filter_condition('${column.key}',text_input,true);return false;" - onsubmit="var text_input=$('#input-${column.key}-filter').val();$('#input-${column.key}-filter').val('');add_filter_condition('${column.key}',text_input,true);return false;" - method="get" > - ## Carry forward filtering criteria with hidden inputs. - %for temp_column in grid.columns: - %if temp_column.key in cur_filter_dict: - <% value = cur_filter_dict[ temp_column.key ] %> - %if value != "All": - <% - if isinstance( temp_column, TextColumn ): - value = h.to_json_string( value ) - %> - <input type="hidden" id="${temp_column.key}" name="f-${temp_column.key}" value='${value}'/> - %endif - %endif - %endfor - - ## Print current filtering criteria and links to delete. - <span id="${column.key}-filtering-criteria"> - %if column.key in cur_filter_dict: - <% column_filter = cur_filter_dict[column.key] %> - %if isinstance( column_filter, basestring ): - %if column_filter != "All": - <span style="font-style: italic">${cur_filter_dict[column.key]}</span> - <% filter_all = GridColumnFilter( "", { column.key : "All" } ) %> - <a href="${url( filter_all.get_url_args() )}"><img src="${h.url_for('/static/images/delete_tag_icon_gray.png')}"/></a> - | - %endif - %elif isinstance( column_filter, list ): - %for i, filter in enumerate( column_filter ): - %if i > 0: - , - %endif - <span style="font-style: italic">${filter}</span> - <% - new_filter = list( column_filter ) - del new_filter[ i ] - new_column_filter = GridColumnFilter( "", { column.key : h.to_json_string( new_filter ) } ) - %> - <a href="${url( new_column_filter.get_url_args() )}"><img src="${h.url_for('/static/images/delete_tag_icon_gray.png')}"/></a> - %endfor - - %endif - %endif - </span> - - ## Print input field for column. - <span><input id="input-${column.key}-filter" name="f-${column.key}" type="text" value="" size="15"/></span> - </form> - %else: - <span id="${column.key}-filtering-criteria"> - %for i, filter in enumerate( column.get_accepted_filters() ): - <% - # HACK: we know that each filter will have only a single argument, so get that single argument. - for key, arg in filter.args.items(): - filter_key = key - filter_arg = arg - %> - %if i > 0: - | - %endif - %if column.key in cur_filter_dict and column.key in filter.args and cur_filter_dict[column.key] == filter.args[column.key]: - <span class="${column.key}-filter">${filter.label}</span> - %else: - <span class="${column.key}-filter"> - <a href="${url( filter.get_url_args() )}" - onclick="set_categorical_filter($(this), '${column.key}','${filter_arg}'); return false;">${filter.label}</a> - </span> - %endif - %endfor - </span> - %endif - </td> - </tr> -</%def> - -## Print grid search/filtering UI. -<%def name="render_grid_filters()"> - ## Standard search. - <div> - <table><tr> - <td> - <table> - %for column in grid.columns: - %if column.filterable == "standard": - ${render_ajax_grid_column_filter(column)} - %endif - %endfor - </table> - </td> - <td> - ## Clear the standard search. - ##| - ##<% filter_all = GridColumnFilter( "", { column.key : "All" } ) %> - ##<a href="${url( filter_all.get_url_args() )}">Clear All</a> - - ## Only show advanced search if there are filterable columns. - <% - show_advanced_search = False - for column in grid.columns: - if column.filterable == "advanced": - show_advanced_search = True - break - endif - %> - %if show_advanced_search: - | <a href="" onclick="javascript:$('#more-search-options').slideToggle('fast');return false;">Advanced Search</a> - %endif - </td> - </tr></table> - </div> - - ## Advanced search. - <div id="more-search-options" style="display: none; padding-top: 5px"> - <table style="border: 1px solid gray;"> - <tr><td style="text-align: left" colspan="100"> - Advanced Search | - <a href=""# onclick="javascript:$('#more-search-options').slideToggle('fast');return false;">Close</a> | - ## Link to clear all filters. - <% - no_filter = GridColumnFilter("Clear All", default_filter_dict) - %> - <a href="${url( no_filter.get_url_args() )}">${no_filter.label}</a> - </td></tr> - %for column in grid.columns: - %if column.filterable == "advanced": - ## Show div if current filter has value that is different from the default filter. - %if column.key in cur_filter_dict and column.key in default_filter_dict and \ - cur_filter_dict[column.key] != default_filter_dict[column.key]: - <script type="text/javascript"> - $('#more-search-options').css("display", "block"); - </script> - %endif - - ${render_ajax_grid_column_filter(column)} - %endif - %endfor - </table> - </div> -</%def> \ No newline at end of file diff -r 07c1b4bc14af -r 5761948422a8 templates/history/grid.mako --- a/templates/history/grid.mako Mon Nov 23 17:20:01 2009 -0500 +++ b/templates/history/grid.mako Tue Nov 24 14:53:19 2009 -0500 @@ -1,1 +1,1 @@ -<%inherit file="/grid_base.mako"/> +<%inherit file="../grid_base.mako"/> diff -r 07c1b4bc14af -r 5761948422a8 templates/page/select_histories_grid.mako --- a/templates/page/select_histories_grid.mako Mon Nov 23 17:20:01 2009 -0500 +++ b/templates/page/select_histories_grid.mako Tue Nov 24 14:53:19 2009 -0500 @@ -1,6 +1,13 @@ ## Template generates a grid that enables user to select histories. -<%namespace file="../grid_base_async.mako" import="*" /> +<%namespace file="../grid_base.mako" import="*" /> ${javascripts()} +${stylesheets()} ${render_grid_header(False)} -${render_grid_table()} \ No newline at end of file +${render_grid_table()} + +## Initialize the grid. +<script type="text/javascript"> + init_grid_elements(); + init_grid_controls(); +</script>