Skip to content

Commit

Permalink
List Manager: Move multi-list functions to table header
Browse files Browse the repository at this point in the history
  • Loading branch information
@dwaring87
dwaring87 committed Jan 9, 2025
1 parent bb9c92b commit 6c7a8e7
Showing 1 changed file with 53 additions and 37 deletions.
90 changes: 53 additions & 37 deletions js/source/legacy/CXGN/List.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,11 +353,17 @@ CXGN.List.prototype = {
jQuery('#'+div+'_div').html(html);
}

// Add list type filter
// List Table Container
html += "<div class='well'>";
html += "<div style='display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 15px; margin-bottom: 15px'>";

// Table Header
html += "<div style='display: flex; flex-wrap: wrap; column-gap: 30px; justify-content: space-between; margin-bottom: 15px'>";

// Filter Container
html += "<div style='display: flex; flex-direction: column; row-gap: 15px'>"

// Filter by List Type
html += "<div style='display: flex; align-items: baseline; column-gap: 15px;'>"
html += "<p style='white-space: nowrap'><strong>Filter Lists by Type</strong>:</p>";
html += "<select id='render_lists_type' class='render_lists_filter form-control' style='max-width: 200px'>";
html += "<option value=''>Any</option>";
Expand All @@ -366,16 +372,25 @@ CXGN.List.prototype = {
html += "<option value='" + types[i][1] + "' " + selected + ">"+types[i][1]+"</option>";
}
html += "</select>";

html += "<div style='width: 30px'></div>";
html += "</div>";

// Autocreated filter
html += "<div style='display: flex; align-items: baseline; column-gap: 15px;'>";
html += "<p style='white-space: nowrap'><strong>Include Autocreated Lists</strong>:</p>";
let checked = autocreated ? 'checked' : ''
html += "<input id='render_lists_autocreated' class='render_lists_filter' type='checkbox' " + checked + " />";
html += "</div>";

// End Filter Container
html += "</div>";

// Multiple List Container
html += "<div id='list_group_select_action' style='flex-grow: 1; width: min-content; min-width: 500px;'></div>";

// End Header
html += "</div>";

// List Table
html += '<table id="private_list_data_table" class="table table-hover table-condensed">';
html += '<thead><tr><th>List Name</th><th>Description</th><th>Date Created</th><th>Date Modified</th><th>Count</th><th>Type</th><th>Validate</th><th>View</th><th>Delete</th><th>Download</th><th>Share</th><th>Group</th></tr></thead><tbody>';
for (var i = 0; i < lists.length; i++) {
Expand All @@ -399,9 +414,7 @@ CXGN.List.prototype = {
}
}
html += '</tbody></table>';
html += '<p style="color: #999; margin-top: 15px;">Select multiple lists by checking them in the <strong>Group</strong> column to delete them all, make them all public/private, or combine the list items into a new list.</p>';
html += '</div>';
html += '<div id="list_group_select_action"></div>';

jQuery('#'+div+'_div').html(html);

Expand Down Expand Up @@ -430,46 +443,49 @@ CXGN.List.prototype = {
lo.renderPublicLists('public_list_dialog_div');
});

jQuery('body').on("click", "input[name='list_select_checkbox']", function() {
function render_selected_lists_container() {
var total=jQuery("input[name='list_select_checkbox']:checked").length;
var list_group_select_action_html='';
if (total == 0) {
list_group_select_action_html += '';
} else {
if (total > 1) {
var selected = [];
jQuery("input[name='list_select_checkbox']:checked").each(function() {
selected.push(jQuery(this).attr('value'));
});

list_group_select_action_html = '<hr><div class="well well-sm" style="padding: 20px">';
if (total > 0) {
list_group_select_action_html += '<div class="row">';
list_group_select_action_html += '<div class="col-sm-4"><p><strong>Modify Selected Lists:</strong></p></div>';
list_group_select_action_html += '<div class="col-sm-8">';
list_group_select_action_html += '<a id="delete_selected_list_group" class="btn btn-primary btn-sm" style="color:white" href="javascript:deleteSelectedListGroup(['+selected+'])">Delete</a>&nbsp;<a id="make_public_selected_list_group" class="btn btn-primary btn-sm" style="color:white" href="javascript:makePublicSelectedListGroup(['+selected+'])">Make Public</a>&nbsp;<a id="make_private_selected_list_group" class="btn btn-primary btn-sm" style="color:white" href="javascript:makePrivateSelectedListGroup(['+selected+'])">Make Private</a>';
list_group_select_action_html += '</div>'; // end column
list_group_select_action_html += '</div>'; // end row
}
if (total > 1) {
var unionIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 256"><path fill="currentColor" d="M172.91 83.09a78 78 0 1 0-89.82 89.82a78 78 0 1 0 89.82-89.82M226 160a65 65 0 0 1-.62 8.9l-53.76-53.77A77.8 77.8 0 0 0 174 96v-.49A66.1 66.1 0 0 1 226 160M45.31 53.79l55.5 55.5a77.9 77.9 0 0 0-12 19L34 73.48a66 66 0 0 1 11.31-19.69m88.92 96l-28-28a66.5 66.5 0 0 1 15.52-15.52l28 28a66.5 66.5 0 0 1-15.52 15.48ZM162 96a65.6 65.6 0 0 1-6 27.49L132.51 100A65.6 65.6 0 0 1 160 94h1.95c.05.7.05 1.35.05 2m-52.71 4.81l-55.5-55.5A66 66 0 0 1 73.48 34l54.8 54.81a77.9 77.9 0 0 0-18.99 12M94 160a65.6 65.6 0 0 1 6-27.49L123.49 156A65.6 65.6 0 0 1 96 162c-.65 0-1.3 0-2-.05zm52.71-4.81l55.5 55.5A66 66 0 0 1 182.52 222l-54.8-54.81a77.9 77.9 0 0 0 18.99-12m8.48-8.48a77.9 77.9 0 0 0 12-19L222 182.52a66 66 0 0 1-11.35 19.69Zm5.3-64.7H160a77.8 77.8 0 0 0-19.13 2.38L87.1 30.62A65 65 0 0 1 96 30a66.1 66.1 0 0 1 64.49 52ZM30 96a65 65 0 0 1 .62-8.9l53.76 53.77A77.8 77.8 0 0 0 82 160v.49A66.1 66.1 0 0 1 30 96m65.51 78H96a77.8 77.8 0 0 0 19.13-2.38l53.77 53.76a65 65 0 0 1-8.9.62a66.1 66.1 0 0 1-64.49-52"/></svg>';
var intersectionIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 256"><path fill="currentColor" d="M174.63 81.37a80 80 0 1 0-93.26 93.26a80 80 0 1 0 93.26-93.26M100.69 136L120 155.31A63.5 63.5 0 0 1 96 160a63.5 63.5 0 0 1 4.69-24m33.75 11.13l-25.57-25.57a64.7 64.7 0 0 1 12.69-12.69l25.57 25.57a64.7 64.7 0 0 1-12.69 12.69M155.31 120L136 100.69A63.5 63.5 0 0 1 160 96a63.5 63.5 0 0 1-4.69 24M32 96a64 64 0 0 1 126-16a80.08 80.08 0 0 0-77.95 78A64.11 64.11 0 0 1 32 96m128 128a64.11 64.11 0 0 1-62-48a80.08 80.08 0 0 0 78-78a64 64 0 0 1-16 126"/></svg>';

list_group_select_action_html += '<div class="row" style="margin-top: 15px">';
list_group_select_action_html += '<div class="col-sm-4"><p><strong>Combine List Items From Selected Lists to a New List:</strong></p></div>';
list_group_select_action_html += '<div class="col-sm-8">';
list_group_select_action_html += '<div class="input-group input-group-sm">'
list_group_select_action_html += '<input type="text" class="form-control" id="new_combined_list_name" placeholder="New List Name"><span class="input-group-btn">';
list_group_select_action_html += '<button id="combine_selected_list_group_union" class="btn btn-primary btn-sm" style="color:white; display: inline-flex; align-items: center; gap: 5px;" onclick="javascript:combineSelectedListGroup(['+selected+'], \'union\')">' + unionIcon + 'Union</button>';
list_group_select_action_html += '<button id="combine_selected_list_group_intersection" class="btn btn-primary btn-sm" style="color:white; display: inline-flex; align-items: center; gap: 5px;" onclick="javascript:combineSelectedListGroup(['+selected+'], \'intersection\')">' + intersectionIcon + 'Intersection</button>';
list_group_select_action_html += '</input></span>';
list_group_select_action_html += '</div>'; // End input group
list_group_select_action_html += '</div>'; // end column
list_group_select_action_html += '</div>'; // end row
}
list_group_select_action_html += '</div>'; // End well
// Delete / Public / Private Functions
list_group_select_action_html += '<div class="row">';
list_group_select_action_html += '<div class="col-sm-4"><p><strong>Modify Selected Lists:</strong></p></div>';
list_group_select_action_html += '<div class="col-sm-8">';
list_group_select_action_html += '<a id="delete_selected_list_group" class="btn btn-primary btn-sm" style="color:white" href="javascript:deleteSelectedListGroup(['+selected+'])">Delete</a>&nbsp;<a id="make_public_selected_list_group" class="btn btn-primary btn-sm" style="color:white" href="javascript:makePublicSelectedListGroup(['+selected+'])">Make Public</a>&nbsp;<a id="make_private_selected_list_group" class="btn btn-primary btn-sm" style="color:white" href="javascript:makePrivateSelectedListGroup(['+selected+'])">Make Private</a>';
list_group_select_action_html += '</div>'; // end column
list_group_select_action_html += '</div>'; // end row

// Union / Intersection Icons
var unionIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 256"><path fill="currentColor" d="M172.91 83.09a78 78 0 1 0-89.82 89.82a78 78 0 1 0 89.82-89.82M226 160a65 65 0 0 1-.62 8.9l-53.76-53.77A77.8 77.8 0 0 0 174 96v-.49A66.1 66.1 0 0 1 226 160M45.31 53.79l55.5 55.5a77.9 77.9 0 0 0-12 19L34 73.48a66 66 0 0 1 11.31-19.69m88.92 96l-28-28a66.5 66.5 0 0 1 15.52-15.52l28 28a66.5 66.5 0 0 1-15.52 15.48ZM162 96a65.6 65.6 0 0 1-6 27.49L132.51 100A65.6 65.6 0 0 1 160 94h1.95c.05.7.05 1.35.05 2m-52.71 4.81l-55.5-55.5A66 66 0 0 1 73.48 34l54.8 54.81a77.9 77.9 0 0 0-18.99 12M94 160a65.6 65.6 0 0 1 6-27.49L123.49 156A65.6 65.6 0 0 1 96 162c-.65 0-1.3 0-2-.05zm52.71-4.81l55.5 55.5A66 66 0 0 1 182.52 222l-54.8-54.81a77.9 77.9 0 0 0 18.99-12m8.48-8.48a77.9 77.9 0 0 0 12-19L222 182.52a66 66 0 0 1-11.35 19.69Zm5.3-64.7H160a77.8 77.8 0 0 0-19.13 2.38L87.1 30.62A65 65 0 0 1 96 30a66.1 66.1 0 0 1 64.49 52ZM30 96a65 65 0 0 1 .62-8.9l53.76 53.77A77.8 77.8 0 0 0 82 160v.49A66.1 66.1 0 0 1 30 96m65.51 78H96a77.8 77.8 0 0 0 19.13-2.38l53.77 53.76a65 65 0 0 1-8.9.62a66.1 66.1 0 0 1-64.49-52"/></svg>';
var intersectionIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 256"><path fill="currentColor" d="M174.63 81.37a80 80 0 1 0-93.26 93.26a80 80 0 1 0 93.26-93.26M100.69 136L120 155.31A63.5 63.5 0 0 1 96 160a63.5 63.5 0 0 1 4.69-24m33.75 11.13l-25.57-25.57a64.7 64.7 0 0 1 12.69-12.69l25.57 25.57a64.7 64.7 0 0 1-12.69 12.69M155.31 120L136 100.69A63.5 63.5 0 0 1 160 96a63.5 63.5 0 0 1-4.69 24M32 96a64 64 0 0 1 126-16a80.08 80.08 0 0 0-77.95 78A64.11 64.11 0 0 1 32 96m128 128a64.11 64.11 0 0 1-62-48a80.08 80.08 0 0 0 78-78a64 64 0 0 1-16 126"/></svg>';

// Union / Intersection Functions
list_group_select_action_html += '<div class="row" style="margin-top: 15px">';
list_group_select_action_html += '<div class="col-sm-4"><p><strong>Combine List Items From Selected Lists to a New List:</strong></p></div>';
list_group_select_action_html += '<div class="col-sm-8">';
list_group_select_action_html += '<div class="input-group input-group-sm">'
list_group_select_action_html += '<input type="text" class="form-control" id="new_combined_list_name" placeholder="New List Name"><span class="input-group-btn">';
list_group_select_action_html += '<button id="combine_selected_list_group_union" class="btn btn-primary btn-sm" style="color:white; display: inline-flex; align-items: center; gap: 5px;" onclick="javascript:combineSelectedListGroup(['+selected+'], \'union\')">' + unionIcon + 'Union</button>';
list_group_select_action_html += '<button id="combine_selected_list_group_intersection" class="btn btn-primary btn-sm" style="color:white; display: inline-flex; align-items: center; gap: 5px;" onclick="javascript:combineSelectedListGroup(['+selected+'], \'intersection\')">' + intersectionIcon + 'Intersection</button>';
list_group_select_action_html += '</input></span>';
list_group_select_action_html += '</div>'; // End input group
list_group_select_action_html += '</div>'; // end column
list_group_select_action_html += '</div>'; // end row
}
else {
list_group_select_action_html += '<div style="width: 100%; text-align: right">';
list_group_select_action_html += '<p><em>Select 2 or more lists in the <strong>Group</strong> column to modify or combine them</em></p>';
list_group_select_action_html += '</div>';
}
jQuery("#list_group_select_action").html(list_group_select_action_html);
});
}
jQuery('body').on("click", "input[name='list_select_checkbox']", render_selected_lists_container);
render_selected_lists_container();

jQuery(".render_lists_filter").on("change", function() {
render_lists_page = 0;
Expand Down

0 comments on commit 6c7a8e7

Please sign in to comment.