3654: add selection dropdown to collections pages
[arvados.git] / apps / workbench / app / assets / javascripts / selection.js
1 //= require jquery
2 //= require jquery_ujs
3
4 /** Javascript for local persistent selection. */
5
6 get_selection_list = null;
7 form_selection_sources = {};
8
9 jQuery(function($){
10     var storage = localStorage; // sessionStorage
11
12     get_selection_list = function() {
13         if (!storage.persistentSelection) {
14             storage.persistentSelection = JSON.stringify([]);
15         }
16         return JSON.parse(storage.persistentSelection);
17     }
18
19     var put_storage = function(lst) {
20         storage.persistentSelection = JSON.stringify(lst);
21     }
22
23     var add_selection = function(uuid, name, href, type) {
24         var lst = get_selection_list();
25         lst.push({"uuid": uuid, "name": name, "href": href, "type": type});
26         put_storage(lst);
27         update_count();
28     };
29
30     var remove_selection = function(uuid) {
31         var lst = get_selection_list();
32         for (var i = 0; i < lst.length; i++) {
33             if (lst[i].uuid == uuid) {
34                 lst.splice(i, 1);
35                 i--;
36             }
37         }
38         put_storage(lst);
39         update_count();
40     };
41
42     var remove_selection_click = function(e) {
43         remove_selection($(this).val());
44     };
45
46     var clear_selections = function() {
47         put_storage([]);
48         update_count();
49     }
50
51     var update_count = function(e) {
52         var html;
53         var this_object_uuid = $('#selection-form-content').
54             closest('form').
55             find('input[name=uuid]').val();
56         var lst = get_selection_list();
57         $("#persistent-selection-count").text(lst.length);
58         if (lst.length > 0) {
59             html = '<li><a href="#" class="btn btn-xs btn-info" id="clear_selections_button"><i class="fa fa-fw fa-ban"></i> Clear selections</a></li>';
60             html += '<li><button class="btn btn-xs btn-info" type="submit" name="combine_selected_files_into_collection" '
61                 + ' id="combine_selected_files_into_collection">'
62                 + '<i class="fa fa-fw fa-archive"></i> Combine selected collections and files into a new collection</button></li>'
63                 + '<li class="notification"><table style="width: 100%"></table></li>';
64             $('#selection-form-content').html(html);
65
66             for (var i = 0; i < lst.length; i++) {
67                 $('#selection-form-content > li > table').append("<tr>"
68                                                        + "<td>"
69                                                        + "<input class='remove-selection' name='selection[]' type='checkbox' value='" + lst[i].uuid + "' checked='true' data-stoppropagation='true' />"
70                                                        + "</td>"
71
72                                                        + "<td>"
73                                                        + "<div style='padding-left: 1em'><a href=\"" + lst[i].href + "\">" + lst[i].name + "</a></div>"
74                                                        + "</td>"
75
76                                                        + "<td style=\"vertical-align: top\">"
77                                                        + "<span style=\"padding-right: 1em\">" + lst[i].type + "</span>"
78                                                        + "</td>"
79
80                                                        + "</tr>");
81             }
82         } else {
83             $('#selection-form-content').html("<li class='notification empty'>No selections.</li>");
84         }
85
86         var checkboxes = $('.persistent-selection:checkbox');
87         for (i = 0; i < checkboxes.length; i++) {
88             for (var j = 0; j < lst.length; j++) {
89                 if (lst[j].uuid == $(checkboxes[i]).val()) {
90                     checkboxes[i].checked = true;
91                     break;
92                 }
93             }
94             if (j == lst.length) {
95                 checkboxes[i].checked = false;
96             }
97         }
98
99         $('.remove-selection').on('click', remove_selection_click);
100         $('#clear_selections_button').on('click', clear_selections);
101         $(document).trigger('selections-updated', [lst]);
102     };
103
104     $(document).
105         on('change', '.persistent-selection:checkbox', function(e) {
106             var inc = 0;
107             if ($(this).is(":checked")) {
108                 add_selection($(this).val(), $(this).attr('friendly_name'), $(this).attr('href'), $(this).attr('friendly_type'));
109             }
110             else {
111                 remove_selection($(this).val());
112             }
113         });
114
115     $(window).on('load storage', update_count);
116
117     $('#selection-form-content').on("click", function(e) {
118         e.stopPropagation();
119     });
120 });
121
122 add_form_selection_sources = null;
123 select_form_sources = null;
124
125 (function() {
126     var form_selection_sources = {};
127     add_form_selection_sources = function (src) {
128         for (var i = 0; i < src.length; i++) {
129             var t = form_selection_sources[src[i].type];
130             if (!t) {
131                 t = form_selection_sources[src[i].type] = {};
132             }
133             if (!t[src[i].uuid]) {
134                 t[src[i].uuid] = src[i];
135             }
136         }
137     };
138
139     select_form_sources = function(type) {
140         var ret = [];
141
142         if (get_selection_list) {
143             var lst = get_selection_list();
144             if (lst.length > 0) {
145                 var text = "&horbar; Selections &horbar;";
146                 var span = document.createElement('span');
147                 span.innerHTML = text;
148                 ret.push({text: span.innerHTML, value: "***invalid***"});
149
150                 for (var i = 0; i < lst.length; i++) {
151                     if (lst[i].type == type) {
152                         var n = lst[i].name;
153                         n = n.replace(/<span[^>]*>/i, "[");
154                         n = n.replace(/<\/span>/i, "]");
155                         ret.push({text: n, value: lst[i].uuid})
156                     }
157                 }
158             }
159         }
160
161         var text = "&horbar; Recent &horbar;";
162         var span = document.createElement('span');
163         span.innerHTML = text;
164         ret.push({text: span.innerHTML, value: "***invalid***"});
165
166         var t = form_selection_sources[type];
167         for (var key in t) {
168             if (t.hasOwnProperty(key)) {
169                 var obj = t[key];
170                 ret.push({text: obj.name, value: obj.uuid})
171             }
172         }
173         return ret;
174     };
175 })();
176
177 function dispatch_selection_action() {
178     // Build a new "href" attribute for this link by starting with the
179     // "data-href" attribute and appending ?foo[]=bar&foo[]=baz (or
180     // &foo=... as appropriate) to reflect the current object
181     // selections.
182     var data = [];
183     var param_name = $(this).attr('data-selection-param-name');
184     var href = $(this).attr('data-href');
185     if ($(this).closest('.disabled').length > 0) {
186         return false;
187     }
188     $(this).
189         closest('.selection-action-container').
190         find(':checkbox:checked').
191         each(function() {
192             data.push({name: param_name, value: $(this).val()});
193         });
194     if (href.indexOf('?') >= 0)
195         href += '&';
196     else
197         href += '?';
198     href += $.param(data, true);
199     $(this).attr('href', href);
200     return true;
201 }
202
203 function enable_disable_selection_actions() {
204     var $container = $(this).closest('.selection-action-container');
205     var $checked = $('.persistent-selection:checkbox:checked', $container);
206     $('[data-selection-action]').
207         closest('div.btn-group-sm').
208         find('ul li').
209         toggleClass('disabled', ($checked.length == 0));
210     $('[data-selection-action=compare]').
211         closest('li').
212         toggleClass('disabled',
213                     ($checked.filter('[value*=-d1hrv-]').length < 2) ||
214                     ($checked.not('[value*=-d1hrv-]').length > 0));
215     $('[data-selection-action=copy]').
216         closest('li').
217         toggleClass('disabled',
218                     ($checked.filter('[value*=-j7d0g-]').length > 0) ||
219                     ($checked.length < 1));
220     $('[data-selection-action=combine]').
221         closest('li').
222         toggleClass('disabled',
223                     ($checked.filter('[value*=-4zz18-]').length < 1) ||
224                     ($checked.length != $checked.filter('[value*=-4zz18-]').length));
225 }
226
227 $(document).
228     on('selections-updated ready ajax:complete', function() {
229         var $btn = $('[data-selection-action]');
230         $btn.click(dispatch_selection_action);
231         enable_disable_selection_actions.call($btn);
232     });