X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/3844c251d4db322759a23a6370faefb7c8e27728..b936759134f8d2b1a68b19be06de8a3f41f782d8:/apps/workbench/app/assets/javascripts/infinite_scroll.js diff --git a/apps/workbench/app/assets/javascripts/infinite_scroll.js b/apps/workbench/app/assets/javascripts/infinite_scroll.js index 5de778688e..3e63858594 100644 --- a/apps/workbench/app/assets/javascripts/infinite_scroll.js +++ b/apps/workbench/app/assets/javascripts/infinite_scroll.js @@ -1,7 +1,45 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +// infinite_scroll.js displays a tab's content using automatic scrolling +// when the user scrolls to the bottom of the page and there is more data. +// +// Usage: +// +// 1. Adding infinite scrolling to a tab pane using "show" method +// +// The steps below describe adding scrolling to the project#show action. +// +// a. In the "app/views/projects/" folder add a file for your tab +// (ex: _show_jobs_and_pipelines.html.erb) +// In this file, add a div or tbody with data-infinite-scroller. +// Note: This page uses _show_tab_contents.html.erb so that +// several tabs can reuse this implementation. +// Also add the filters to be used for loading the tab content. +// +// b. Add a file named "_show_contents_rows.html.erb" that loads +// the data (by invoking get_objects_and_names from the controller). +// +// c. In the "app/controllers/projects_controller.rb, +// Update the show method to add a block for "params[:partial]" +// that loads the show_contents_rows partial. +// Optionally, add a "tab_counts" method that loads the total number +// of objects count to be displayed for this tab. +// +// 2. Adding infinite scrolling to the "Recent" tab in "index" page +// The steps below describe adding scrolling to the pipeline_instances index page. +// +// a. In the "app/views/pipeline_instances/_show_recent.html.erb/" file +// add a div or tbody with data-infinite-scroller. +// +// b. Add the partial "_show_recent_rows.html.erb" that displays the +// page contents on scroll using the @objects + function maybe_load_more_content(event) { - var scroller = this; // element with scroll bars - var $container; // element that receives new content - var src; // url for retrieving content + var scroller = this; + var $container = $(event.data.container); + var src; // url for retrieving content var scrollHeight; var spinner, colspan; var serial = Date.now(); @@ -11,7 +49,6 @@ function maybe_load_more_content(event) { > scrollHeight - 50) { - $container = $(event.data.container); if (!$container.attr('data-infinite-content-href0')) { // Remember the first page source url, so we can refresh // from page 1 later. @@ -39,7 +76,7 @@ function maybe_load_more_content(event) { } $container.find(".spinner").detach(); $container.append(spinner); - $container.attr('data-infinite-serial', serial); + $container.data('data-infinite-serial', serial); if (src == $container.attr('data-infinite-content-href0')) { // If we're loading the first page, collect filters from @@ -70,12 +107,12 @@ function maybe_load_more_content(event) { fail(function(jqxhr, status, error) { var $faildiv; var $container = this.container; - if ($container.attr('data-infinite-serial') != this.serial) { + if ($container.data('data-infinite-serial') != this.serial) { // A newer request is already in progress. return; } if (jqxhr.readyState == 0 || jqxhr.status == 0) { - message = "Cancelled." + message = "Cancelled."; } else if (jqxhr.responseJSON && jqxhr.responseJSON.errors) { message = jqxhr.responseJSON.errors.join("; "); } else { @@ -90,13 +127,14 @@ function maybe_load_more_content(event) { $container.find('div.spinner').replaceWith($faildiv); }). done(function(data, status, jqxhr) { - if ($container.attr('data-infinite-serial') != this.serial) { + if ($container.data('data-infinite-serial') != this.serial) { // A newer request is already in progress. return; } $container.find(".spinner").detach(); $container.append(data.content); $container.attr('data-infinite-content-href', data.next_page_href); + ping_all_scrollers(); }); } } @@ -118,7 +156,8 @@ function mergeInfiniteContentParams($container) { // For example, filterable.js writes filters in // infiniteContentParamsFilterable ("search for text foo") // without worrying about clobbering the filters set up by the - // tab pane ("only show jobs and pipelines in this tab"). + // tab pane ("only show container requests and pipeline instances + // in this tab"). $.each($container.data(), function(datakey, datavalue) { // Note: We attach these data to DOM elements using // . We store/retrieve them @@ -147,6 +186,27 @@ function mergeInfiniteContentParams($container) { return params; } +function setColumnSort( $container, $header, direction ) { + // $container should be the tbody or whatever has all the infinite table data attributes + // $header should be the th with a preset data-sort-order attribute + // direction should be "asc" or "desc" + // This function returns the order by clause for this column header as a string + + // First reset all sort directions + $('th[data-sort-order]').removeData('sort-order-direction'); + // set the current one + $header.data('sort-order-direction', direction); + // change the ordering parameter + var paramsAttr = 'infinite-content-params-' + $container.data('infinite-content-params-attr'); + var params = $container.data(paramsAttr) || {}; + params.order = $header.data('sort-order').split(",").join( ' ' + direction + ', ' ) + ' ' + direction; + $container.data(paramsAttr, params); + // show the correct icon next to the column header + $container.trigger('sort-icons'); + + return params.order; +} + $(document). on('click', 'div.infinite-retry button', function() { var $retry_div = $(this).closest('.infinite-retry'); @@ -174,6 +234,22 @@ $(document). return; $(this).addClass('infinite-scroller-ready'); + // deal with sorting if there is any, and if it was set on this page for this tab already + if( $('th[data-sort-order]').length ) { + var tabId = $(this).closest('div.tab-pane').attr('id'); + if( hasHTML5History() && history.state !== undefined && history.state !== null && history.state.order !== undefined && history.state.order[tabId] !== undefined ) { + // we will use the list of one or more table columns associated with this header to find the right element + // see sortable_columns as it is passed to render_pane in the various tab .erbs (e.g. _show_jobs_and_pipelines.html.erb) + var strippedColumns = history.state.order[tabId].replace(/\s|\basc\b|\bdesc\b/g,''); + var sortDirection = history.state.order[tabId].split(" ")[1].replace(/,/,''); + $columnHeader = $(this).closest('table').find('[data-sort-order="'+ strippedColumns +'"]'); + setColumnSort( $(this), $columnHeader, sortDirection ); + } else { + // otherwise just reset the sort icons + $(this).trigger('sort-icons'); + } + } + // $scroller is the DOM element that hears "scroll" // events: sometimes it's a div, sometimes it's // window. Here, "this" is the DOM element containing the @@ -188,4 +264,46 @@ $(document). on('scroll resize', { container: this }, maybe_load_more_content). trigger('scroll'); }); + }). + on('shown.bs.tab', 'a[data-toggle="tab"]', function(event) { + $(event.target.getAttribute('href') + ' [data-infinite-scroller]'). + trigger('scroll'); + }). + on('click', 'th[data-sort-order]', function() { + var direction = $(this).data('sort-order-direction'); + // reverse the current direction, or do ascending if none + if( direction === undefined || direction === 'desc' ) { + direction = 'asc'; + } else { + direction = 'desc'; + } + + var $container = $(this).closest('table').find('[data-infinite-content-params-attr]'); + + var order = setColumnSort( $container, $(this), direction ); + + // put it in the browser history state if browser allows it + if( hasHTML5History() ) { + var tabId = $(this).closest('div.tab-pane').attr('id'); + var state = history.state || {}; + if( state.order === undefined ) { + state.order = {}; + } + state.order[tabId] = order; + history.replaceState( state, null, null ); + } + + $container.trigger('refresh-content'); + }). + on('sort-icons', function() { + // set or reset the icon next to each sortable column header according to the current direction attribute + $('th[data-sort-order]').each(function() { + $(this).find('i').remove(); + var direction = $(this).data('sort-order-direction'); + if( direction !== undefined ) { + $(this).append(''); + } else { + $(this).append(''); + } + }); });