Frontend feature to add items to locally-stored selection list that is session-persis...
authorPeter Amstutz <peter.amstutz@curoverse.com>
Mon, 24 Feb 2014 19:30:02 +0000 (14:30 -0500)
committerPeter Amstutz <peter.amstutz@curoverse.com>
Mon, 24 Feb 2014 19:30:02 +0000 (14:30 -0500)
apps/workbench/app/assets/javascripts/application.js
apps/workbench/app/assets/javascripts/selection.js [new file with mode: 0644]
apps/workbench/app/assets/stylesheets/application.css.scss
apps/workbench/app/models/arvados_base.rb
apps/workbench/app/models/collection.rb
apps/workbench/app/views/application/_selection_checkbox.html.erb [new file with mode: 0644]
apps/workbench/app/views/application/_show_recent.html.erb
apps/workbench/app/views/collections/_index_tbody.html.erb
apps/workbench/app/views/collections/_show_files.html.erb
apps/workbench/app/views/layouts/application.html.erb

index fb6fe9a66772e3217ad8d1bf7ab6de0803ed5b01..0535ba1db151b8ce0a04e3b05da0c176282b7819 100644 (file)
@@ -21,7 +21,7 @@
 //= require bootstrap3-editable/bootstrap-editable
 //= require_tree .
 
-jQuery(function($){
+(function($){
     $.ajaxSetup({
         headers: {
             'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
@@ -42,82 +42,14 @@ jQuery(function($){
         targets.fadeToggle(200);
     });
 
-    var add_selection = function(v) {
-        var lst = JSON.parse(localStorage.persistentSelection);
-        lst.push(v);
-        localStorage.persistentSelection = JSON.stringify(lst);
-        update_count();
-    };
-
-    var remove_selection = function(v) {
-        var lst = JSON.parse(localStorage.persistentSelection);
-        var i = jQuery.inArray(v, lst);
-        if (i > -1) {
-            lst.splice(i, 1);
-        }
-        localStorage.persistentSelection = JSON.stringify(lst);
-        update_count();
-    };
-
-    var remove_selection_click = function(e) {
-        remove_selection($(this).attr('name'));
-    };
-
-    var update_count = function(e) {
-        var lst = JSON.parse(localStorage.persistentSelection);
-        $("#persistent-selection-count").text(lst.length);
-
-        if (lst.length > 0) {
-            $('#persistent-selection-list').empty();
-            for (var i = 0; i < lst.length; i++) {
-                $('#persistent-selection-list').append("<li role=\"presentation\"><span><a href=\"#\">" + lst[i] + "</a>"
-                                                       + "<a href=\"#\" class=\"remove-selection\" name=\"" + lst[i] + "\">" 
-                                                       + "<span class=\"glyphicon glyphicon-trash pull-right\"></span>"
-                                                       + "</a></span></li>");
-            }
-        } else {
-            $('#persistent-selection-list').html("<li role=\"presentation\">No selections.</li>");
-        }
-
-        var checkboxes = $('.persistent-selection:checkbox');
-        for (i = 0; i < checkboxes.length; i++) {
-            if (jQuery.inArray($(checkboxes[i]).val(), lst) > -1) {
-                checkboxes[i].checked = true;
-            }
-            else {
-                checkboxes[i].checked = false;
-            }
-        }
-        
-        $('.remove-selection').on('click', remove_selection_click);
-    };
-
     $(document).
         on('ajax:send', function(e, xhr) {
             $('.loading').fadeTo('fast', 1);
         }).
         on('ajax:complete', function(e, status) {
             $('.loading').fadeOut('fast', 0);
-        }).
-        on('change', '.persistent-selection:checkbox', function(e) {
-            //console.log($(this));
-            //console.log($(this).val());
-
-            if (!localStorage.persistentSelection) {
-                localStorage.persistentSelection = JSON.stringify([]);
-            }
-            
-            var inc = 0;
-            if ($(this).is(":checked")) {
-                add_selection($(this).val());
-            }
-            else {
-                remove_selection($(this).val());
-            }
         });
 
-    $(window).on('load storage', update_count);
-
     HeaderRowFixer = function(selector) {
         this.duplicateTheadTr = function() {
             $(selector).each(function() {
diff --git a/apps/workbench/app/assets/javascripts/selection.js b/apps/workbench/app/assets/javascripts/selection.js
new file mode 100644 (file)
index 0000000..5d0900a
--- /dev/null
@@ -0,0 +1,100 @@
+//= require jquery
+//= require jquery_ujs
+
+/** Javascript for local persistent selection. */
+
+(function($){
+    var get_storage = function() {
+        if (!sessionStorage.persistentSelection) {
+            sessionStorage.persistentSelection = JSON.stringify([]);
+        }
+        return JSON.parse(sessionStorage.persistentSelection);
+    }
+
+    var put_storage = function(lst) {
+        sessionStorage.persistentSelection = JSON.stringify(lst);
+    }
+
+    var add_selection = function(uuid, name, href, type) {
+        var lst = get_storage();
+        lst.push({"uuid": uuid, "name": name, "href": href, "type": type});
+        put_storage(lst);
+        update_count();
+    };
+
+    var remove_selection = function(uuid) {
+        var lst = get_storage();
+        for (var i = 0; i < lst.length; i++) {
+            if (lst[i].uuid == uuid) {
+                lst.splice(i, 1);
+                i--;
+            }
+        }
+        put_storage(lst);
+        update_count();
+    };
+
+    var remove_selection_click = function(e) {
+        remove_selection($(this).attr('name'));
+    };
+
+    var update_count = function(e) {
+        var lst = get_storage();
+        $("#persistent-selection-count").text(lst.length);
+
+        $('#persistent-selection-list > li > table').empty();
+        if (lst.length > 0) {
+            for (var i = 0; i < lst.length; i++) {
+                $('#persistent-selection-list > li > table').append("<tr>"
+                                                       + "<td style=\"vertical-align: top\">"
+                                                       + "<span style=\"padding-right: 1em\">" + lst[i].type + "</span>"
+                                                       + "</td>"
+
+                                                       + "<td>"
+                                                       + "<span><a href=\"" + lst[i].href + "\">" + lst[i].name + "</a></span>"
+                                                       + "</td>"
+
+                                                       + "<td>"
+                                                       + "<a href=\"#\" class=\"remove-selection\" name=\"" + lst[i].uuid + "\">" 
+                                                       + "<span class=\"glyphicon glyphicon-trash pull-right\"></span>"
+                                                       + "</a></span>"
+                                                       + "</td>"
+                                                       + "</tr>");
+            }
+        } else {
+            $('#persistent-selection-list > li > table').html("<tr><td>No selections.</td></tr>");
+        }
+
+        var checkboxes = $('.persistent-selection:checkbox');
+        for (i = 0; i < checkboxes.length; i++) {
+            for (var j = 0; j < lst.length; j++) {
+                if (lst[j].uuid == $(checkboxes[i]).val()) {
+                    checkboxes[i].checked = true;
+                    break;
+                }
+            }
+            if (j == lst.length) {
+                checkboxes[i].checked = false;
+            }
+        }
+        
+        $('.remove-selection').on('click', remove_selection_click);
+    };
+
+    $(document).
+        on('change', '.persistent-selection:checkbox', function(e) {
+            //console.log($(this));
+            //console.log($(this).val());
+            
+            var inc = 0;
+            if ($(this).is(":checked")) {
+                add_selection($(this).val(), $(this).attr('friendly_name'), $(this).attr('href'), $(this).attr('friendly_type'));
+            }
+            else {
+                remove_selection($(this).val());
+            }
+        });
+
+
+    $(window).on('load storage', update_count);
+})(jQuery);
\ No newline at end of file
index dbaa0630adaebeab8b62bd9fa60e1f48177d908a..c4a94abda1cdd4785a7ccc7bc7607cc93aa60f2d 100644 (file)
@@ -159,11 +159,27 @@ table.table-fixed-header-row tbody {
     top:1.5em;
 }
 
+/* Setting the height needs to be fixed with javascript. */
+.dropdown-menu {
+    padding-right: 20px;
+    max-height: 440px;
+    width: 400px;
+    overflow-y: auto;
+}
+
+#persistent-selection-list {
+    width: 500px;
+}
+
 #persistent-selection-list li {
     margin-left: 1em;
     padding: 3px 20px;
     font-weight: normal;
     line-height: 1.42857;
     color: rgb(51, 51, 51);
-    border-bottom: 1px solid rgb(221, 221, 221)
+    
+}
+
+#persistent-selection-list li table tr {
+  border-bottom: 1px solid rgb(221, 221, 221);
 }
index 72b76a522982d8e04b595b4ecda9dc0a01523504..f1d429486cd995ef09e8457da90cadb464f29b94 100644 (file)
@@ -275,6 +275,10 @@ class ArvadosBase < ActiveRecord::Base
     (name if self.respond_to? :name) || uuid
   end
 
+  def selection_label
+    friendly_link_name
+  end
+
   protected
 
   def forget_uuid!
index bda5523d8cfdd9192aefc7923b9a7ba350f05e4e..e22a5f72f4a3a062c0fc9b5cc7fa8bb287ba7fe8 100644 (file)
@@ -24,4 +24,23 @@ class Collection < ArvadosBase
   def used_by
     $arvados_api_client.api "collections/#{self.uuid}/", "used_by"
   end
+
+  # def selection_label
+  #   name = ''
+  #   i = 0 
+  #   if self.files.length > 3
+  #     m = 3
+  #   else
+  #     m = self.files.length 
+  #   end
+  #   while i < m
+  #     name += "#{self.files[i][1]}"
+  #     i += 1
+  #     name += ", " if i < m
+  #   end
+  #   if i < self.files.length
+  #     name += "&ellip;"
+  #   end
+  #   name
+  # end
 end
diff --git a/apps/workbench/app/views/application/_selection_checkbox.html.erb b/apps/workbench/app/views/application/_selection_checkbox.html.erb
new file mode 100644 (file)
index 0000000..cb0ec82
--- /dev/null
@@ -0,0 +1,6 @@
+<%= check_box_tag 'uuids[]', object.uuid, false, {
+  :class => 'persistent-selection', 
+  :friendly_type => object.class.name,
+  :friendly_name => object.selection_label,
+  :href => "#{url_for controller: object.class.name.tableize, action: 'show', id: object.uuid }" 
+} %>
index 0008d09353172d9c056e3dcc1ffe77ad825b9da1..ef4a8d1f041b5c91f00ea5e947059377c4aad185 100644 (file)
@@ -30,7 +30,7 @@
     <% @objects.each do |object| %>
     <tr data-object-uuid="<%= object.uuid %>">
       <td>
-        <%= check_box_tag 'uuids[]', object.uuid, false, :class => 'persistent-selection' %>
+        <%= render :partial => "selection_checkbox", :locals => {:object => object} %>
       </td>
 
       <% object.attributes_for_display.each do |attr, attrvalue| %>
index 0a3732a943d88fb1a22f5903dc34c36c95bcc247..57f6eeba10eaa74f45716cd26b640831c8935c1b 100644 (file)
@@ -2,7 +2,7 @@
 
 <tr class="collection">
   <td>
-    <%= check_box_tag 'uuids[]', c.uuid, false, :class => 'persistent-selection' %>
+    <%= render :partial => "selection_checkbox", :locals => {:object => c} %>
   </td>
   <td>
     <%= link_to_if_arvados_object c.uuid %>
index 385af8a27205c98be3cb43974cb0bbde5c9740ce..53fbad8152608afa2100f055d0dd475cd97d8e00 100644 (file)
@@ -1,5 +1,6 @@
 <table class="table table-condensed table-fixedlayout">
   <colgroup>
+    <col width="4%" />
     <col width="35%" />
     <col width="40%" />
     <col width="15%" />
     <% if @object then @object.files.sort_by{|f|[f[0],f[1]]}.each do |file| %>
     <% file_path = "#{file[0]}/#{file[1]}" %>
     <tr>
+      <td>
+        <% fp2 = file_path[2..-1] if file_path[0..1] == './' %>
+        <% fp2 ||= file_path %>
+<%= check_box_tag 'uuids[]', @object.uuid+file_path, false, {
+  :class => 'persistent-selection', 
+  :friendly_type => "File",
+  :friendly_name => "#{@object.uuid}/#{fp2}",
+  :href => "#{url_for controller: 'collections', action: 'show', id: @object.uuid }/#{file_path}" 
+      } %>
+      </td>
       <td>
         <%= file[0] %>
       </td>
index ecbe3db2498c824f9d1415ba25eb2a0558cc1e40..1d6a46828a06ca93bd90f5a2ded2557968ec547b 100644 (file)
     padding-top: 1.25em;
     }
 
-    /* Setting the height needs to be fixed with javascript. */
-    .dropdown-menu {
-    padding-right: 20px;
-    max-height: 440px;
-    width: 400px;
-    overflow-y: auto;
-    }
-
     @media (min-width: 768px) {
     .left-nav {
     position: fixed;
               <span class="glyphicon glyphicon-arrow-right"></span>
             </li>
             <li>
-<%= link_to controller.breadcrumb_page_name, request.fullpath %>
+              <%= link_to controller.breadcrumb_page_name, request.fullpath %>
+            </li>
+            <li style="padding: 14px 0 14px">
+              <%= form_tag do |f| %>
+                <%= render :partial => "selection_checkbox", :locals => {:object => @object} %>
+              <% end %>
             </li>
           <% end %>
         <% end %>
             <span class="caret"></span>
           </a>
           <ul class="dropdown-menu" role="menu" id="persistent-selection-list">
+            <li><table style="width:100%"></table></li>
           </ul>
         </li>