Allow reordering of categories and headings using javascript.

6 files changed, 100 insertions, 43 deletions

diff --git a/app/assets/javascripts/admin.js b/app/assets/javascripts/admin.js
index 0b5d56525..4925a65a4 100644
--- a/app/assets/javascripts/admin.js
+++ b/app/assets/javascripts/admin.js
@@ -1,7 +1,10 @@
 // ...
 //= require jquery
 //= require jquery.ui.tabs
+//= require jquery.ui.sortable
+//= require jquery.ui.effect-highlight
 //= require admin/bootstrap-collapse
 //= require admin/bootstrap-tab
 //= require admin/admin
+//= require admin/category-order
 //= require jquery_ujs
diff --git a/app/assets/javascripts/admin/category-order.js b/app/assets/javascripts/admin/category-order.js
new file mode 100644
index 000000000..6e210083c
--- /dev/null
+++ b/app/assets/javascripts/admin/category-order.js
@@ -0,0 +1,49 @@
+$(function() {
+  var endpoints = { 'heading' : '/admin/category_heading/reorder',
+                    'category' : '/admin/category/reorder' }
+  $('.save-order').each(function(index){
+
+    // identify the elements that will work together
+    var save_button = $(this);
+    var save_notice = save_button.next();
+    var save_panel = save_button.parent();
+    var list_type = save_button.data('list-type');
+    var list_element = $(save_button.data('list-id'));
+
+    // on the first list change, show that there are unsaved changes
+    list_element.sortable({
+        update: function (event, ui) {
+          if (save_button.is('.disabled')){
+            save_button.removeClass("disabled");
+            save_notice.html(save_notice.data('unsaved-text'));
+            save_panel.effect('highlight', {}, 2000);
+          }
+        }
+    });
+    // on save, POST to endpoint
+    save_button.click(function(){
+      if (!save_button.is('.disabled')){
+        var data = list_element.sortable('serialize', {'attribute': 'data-id'});
+        var endpoint = endpoints[list_type];
+        if (list_type == 'category'){
+          heading_id = save_button.data('heading-id');
+          endpoint = endpoint + "/" + heading_id;
+        }
+        var update_call = $.ajax({ data: data, type: 'POST', url: endpoint });
+
+        // on success, disable the save button again, and show success notice
+        update_call.done(function(msg) {
+          save_button.addClass('disabled');
+          save_panel.effect('highlight', {}, 2000);
+          save_notice.html(save_notice.data('success-text'));
+        })
+        // on failure, show error message
+        update_call.fail(function(jqXHR, msg) {
+          save_panel.effect('highlight', {'color': '#cc0000'}, 2000);
+          save_notice.html(save_notice.data('error-text') + jqXHR.responseText);
+        });
+      }
+      return false;
+    })
+  });
+});
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index a98db107d..863a6c808 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -110,5 +110,14 @@ body.admin {
     width: 750px;
   }
 
+  .save-notice {
+    display: inline-block;
+    padding-left: 1em;
+  }
+
+  .category-list-item {
+    padding: 3px 0;
+  }
+
 }
 
diff --git a/app/views/admin_public_body_category/_one.html.erb b/app/views/admin_public_body_category/_one.html.erb
index c2f667b9f..6b881a669 100644
--- a/app/views/admin_public_body_category/_one.html.erb
+++ b/app/views/admin_public_body_category/_one.html.erb
@@ -1,31 +1,5 @@
-  <div class="accordion-group">
-    <div class="accordion-heading accordion-toggle row">
-      <span class="item-title span6">
-        <a href="#category_<%=category.id%>" data-toggle="collapse" data-parent="requests"><%= chevron_right %></a>
+<div class="category-list-item" <% if heading %> data-id="categories_<%= category.id %>"<% end %>>
+    <%= link_to(category.title, admin_category_edit_path(category), :title => "view full details") %>
+</div>
+
 
-        <%= link_to(category.title, admin_category_edit_path(category), :title => "view full details")%>
-      </span>
-      <span class="item-metadata span6">
-        <span class="label label-info tag">
-            <%= category.category_tag %>
-        </span>
-      </span>
-  </div>
-  <div id="category_<%= category.id %>" class="item-detail accordion-body collapse row">
-      <div>
-          <span class="span6">
-              <b>name</b>
-          </span>
-          <span class="span6">
-              <%= h category.title %>&nbsp;
-          </span>
-      </div>
-      <div>
-          <span class="span6">
-              <b>description</b>
-          </span>
-          <span class="span6">
-              <%= h category.description %>&nbsp;
-          </span>
-      </div>
-  </div>
\ No newline at end of file
diff --git a/app/views/admin_public_body_category/_one_list.html.erb b/app/views/admin_public_body_category/_one_list.html.erb
index a8c349faa..1c7856c10 100644
--- a/app/views/admin_public_body_category/_one_list.html.erb
+++ b/app/views/admin_public_body_category/_one_list.html.erb
@@ -1,12 +1,31 @@
-<div class="accordion" id="categories">
+
+
+<div class="accordion" id="category_list">
   <% for heading in category_headings %>
-    <h3>
-        <%= link_to(heading.name, admin_heading_edit_path(heading), :title => "view full details")%>
-    </h3>
-    <div>
-        <% for category in heading.public_body_categories %>
-          <%= render :partial => 'one', :locals => { :category => category } %>
-        <% end %>
+    <div class="accordion-group" data-id="headings_<%=heading.id%>">
+      <div class="accordion-heading accordion-toggle row">
+        <span class="item-title span6">
+          <a href="#heading_<%=heading.id%>_categories" data-toggle="collapse" data-parent="#categories" ><%= chevron_right %></a>
+          <strong><%= link_to(heading.name, admin_heading_edit_path(heading), :title => "view full details") %></strong>
+        </span>
+      </div>
+
+      <div id="heading_<%= heading.id %>_categories" class="accordion-body collapse row ">
+        <div class="well">
+          <div class="span12" id="heading_<%= heading.id %>_category_list" class="category-list">
+          <% heading.public_body_categories.each do |category| %>
+            <%= render :partial => 'one', :locals => { :category => category, :heading => heading } %>
+          <% end %>
+          </div>
+
+          <div class="form-actions save-panel">
+          <%= link_to "Save", '#', :class => "btn btn-primary disabled save-order", "data-heading-id" => heading.id, "data-list-id" => "#heading_#{heading.id}_category_list",  'data-list-type' => 'category' %><p class="save-notice" data-unsaved-text="There are unsaved changes to the order of categories." data-success-text="Changes saved." data-error-text="There was an error saving your changes: ">Drag and drop to change the order of categories.</p>
+          </div>
+        </div>
+      </div>
+
+
     </div>
   <% end %>
-</div>
\ No newline at end of file
+
+</div>
diff --git a/app/views/admin_public_body_category/index.html.erb b/app/views/admin_public_body_category/index.html.erb
index 8f152cf58..85f2282ab 100644
--- a/app/views/admin_public_body_category/index.html.erb
+++ b/app/views/admin_public_body_category/index.html.erb
@@ -11,15 +11,18 @@
   </div>
 </div>
 
-<h2>All categories</h2>
-
+<h2>All category headings</h2>
+<div>
 <%= render :partial => 'one_list', :locals => { :category_headings => @category_headings, :table_name => 'exact' } %>
 
 <% if @without_heading.count > 0 %>
 
-    <h3>No heading</h3>
+    <h3>Categories with no heading</h3>
 
     <% @without_heading.each do |category| %>
-          <%= render :partial => 'one', :locals => { :category => category } %>
+          <%= render :partial => 'one', :locals => { :category => category, :heading => nil } %>
     <% end %>
 <% end %>
+<div class="form-actions save-panel">
+<%= link_to "Save", '#', :class => "btn btn-primary disabled save-order", "data-list-id" => '#category_list', 'data-list-type' => 'heading' %><p class="save-notice" data-unsaved-text="There are unsaved changes to the order of category headings." data-success-text="Changes saved." data-error-text="There was an error saving your changes: ">Drag and drop to change the order of category headings.</p>
+</div>