Add alphabetical sort to file manager, fix #929

app/assets/javascripts/curation_concerns/curation_concerns.js

@@ -10,6 +10,7 @@
 //= require curation_concerns/collections
 //= require curation_concerns/file_manager
 //= require curation_concerns/boot
+//= require babel/polyfill
 
 // Initialize plugins and Bootstrap dropdowns on jQuery's ready event as well as
 // Turbolinks's page change event.

app/assets/javascripts/curation_concerns/file_manager/sorting.es6

@@ -5,6 +5,7 @@ export default class SortManager {
     this.initialize_sort()
     this.element.data("current-order", this.order)
     this.save_manager = save_manager
+    this.initialize_alpha_sort_button()
   }
 
   initialize_sort() {
@@ -42,17 +43,21 @@ export default class SortManager {
     return this.element.children().index(item)
   }
 
+  register_order_change() {
+    if(this.order.toString() != this.element.data("current-order").toString()) {
+      this.save_manager.push_changed(this)
+    } else {
+      this.save_manager.mark_unchanged(this)
+    }
+  }
+
   get stopped_sorting() {
     return (event, ui) => {
       this.sorting_info.end = this.get_sort_position($(ui.item))
       if(this.sorting_info.end == this.sorting_info.start) {
         return
       }
-      if(this.order.toString() != this.element.data("current-order").toString()) {
-        this.save_manager.push_changed(this)
-      } else {
-        this.save_manager.mark_unchanged(this)
-      }
+      this.register_order_change()
     }
   }
 
@@ -82,4 +87,38 @@ export default class SortManager {
       }
     ).toArray()
   }
+
+  get alpha_sort_button() {
+    return $("*[data-action='alpha-sort-action']")
+  }
+
+  initialize_alpha_sort_button() {
+    let that = this
+    this.alpha_sort_button.click(function() { that.sort_alpha() } )
+  }
+
+  sort_alpha() {
+    // create array of { title, element } objects
+    let array = []
+    let children = this.element.children().get()
+    children.forEach(function(child) {
+      let title = $(child).find("input.title").val()
+      array.push(
+        { title: title,
+          element: child }
+      )
+    })
+    // sort array by title of each object
+    array.sort(function(o1, o2) {
+      let a = o1.title.toLowerCase()
+      let b = o2.title.toLowerCase()
+      return a < b ? -1 : (a > b ? 1 : 0);
+    });
+    // replace contents of #sortable with elements from the array
+    this.element.empty()
+    for (let child of array) {
+      this.element.append(child.element)
+    }
+    this.register_order_change()
+  }
 }

app/views/curation_concerns/base/_file_manager_actions.html.erb

@@ -1,4 +1,5 @@
   <div class="actions form-horizontal panel panel-default">
     <%= button_tag "Save", class: "btn btn-primary disabled", data: { action: "save-actions" }%>
+    <%= button_tag "Sort alphabetically", class: "btn btn-primary", data: { action: "alpha-sort-action" }%>
   </div>
   <%= render "file_manager_resource_form" %>

spec/javascripts/file_manager_sorting_spec.coffee

@@ -0,0 +1,23 @@
+describe "FileManagerSorting", ->
+  sortm = require('curation_concerns/file_manager/sorting')
+  sort_manager = null
+  save_manager = null
+  titles = null
+  beforeEach () ->
+    loadFixtures('sortable.html')
+    save_manager = {
+      push_changed: () -> {},
+      mark_unchanged: () -> {}
+    }
+    sort_manager= new sortm(save_manager)
+  describe "sort_alpha", ->
+    it "sorts correctly, ignoring capitalization", ->
+      expect(sort_manager.order).toEqual(sort_manager.element.data("current-order"))
+      sort_manager.sort_alpha()
+      # order has changed
+      expect(sort_manager.order).not.toEqual(sort_manager.element.data("current-order"))
+      # order is now alphabetical
+      titles = $("input.title").map( ->
+        return $(@).val() 
+      ).get()
+      expect(titles).toEqual([ 'child1', 'child2', 'CIMG1815.JPG', 'CIMG1816 copy.JPG', 'zeldogbeach2.jpg' ])

spec/javascripts/fixtures/sortable.html

@@ -0,0 +1,182 @@
+<ul id="sortable" data-id="st74cq794" data-class-name="generic_works" data-singular-class-name="generic_work" class="list-unstyled grid clearfix ui-sortable">
+   <li data-reorder-id="m326m2125">
+    <div class="panel panel-default">
+      <form data-type="json" novalidate="novalidate" class="simple_form edit_file_set" id="edit_file_set_m326m2125" action="/concern/file_sets/m326m2125" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">
+        <div class="panel-heading ui-sortable-handle">
+          <div class="order-title">
+            <div class="form-group string required file_set_title"><input class="form-control string required title" name="file_set[title][]" type="text" value="CIMG1815.JPG" id="file_set_title"></div>
+          </div>
+          <div class="file-set-link pull-right">
+            <a title="Edit file" href="/concern/parent/st74cq794/file_sets/m326m2125">
+              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+</a>          </div>
+            <div class="order-filename">
+              <em title="CIMG1815.JPG">(CIMG1815.JPG)</em>
+            </div>
+        </div>
+        <div class="panel-body">
+          <div class="text-center thumbnail">
+            <a data-context-href="/catalog/m326m2125/track" href="/concern/file_sets/m326m2125"><img class="thumbnail-inner" src="/downloads/m326m2125?file=thumbnail" alt="M326m2125?file=thumbnail"></a>
+
+          </div>
+          <div class="attributes">
+
+          </div>
+          <div class="spacer">
+          </div>
+        </div>
+</form>            <div class="form-group radio_buttons member_resource_options">
+        <span class="radio">
+          <input type="radio" name="thumbnail_id" id="thumbnail_id_m326m2125" value="m326m2125" class="radio_buttons" checked="checked">
+          <label for="thumbnail_id_m326m2125">Thumbnail</label>
+        </span>
+      </div>
+
+    </div>
+</li>
+
+   <li data-reorder-id="pr76f369j">
+    <div class="panel panel-default">
+      <form data-type="json" novalidate="novalidate" class="simple_form edit_file_set" id="edit_file_set_pr76f369j" action="/concern/file_sets/pr76f369j" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">
+        <div class="panel-heading ui-sortable-handle">
+          <div class="order-title">
+            <div class="form-group string required file_set_title"><input class="form-control string required title" name="file_set[title][]" type="text" value="zeldogbeach2.jpg" id="file_set_title"></div>
+          </div>
+          <div class="file-set-link pull-right">
+            <a title="Edit file" href="/concern/parent/st74cq794/file_sets/pr76f369j">
+              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+</a>          </div>
+            <div class="order-filename">
+              <em title="zeldogbeach2.jpg">(zeldogbeach2.jpg)</em>
+            </div>
+        </div>
+        <div class="panel-body">
+          <div class="text-center thumbnail">
+            <a data-context-href="/catalog/pr76f369j/track" href="/concern/file_sets/pr76f369j"><img class="thumbnail-inner" src="/downloads/pr76f369j?file=thumbnail" alt="Pr76f369j?file=thumbnail"></a>
+
+          </div>
+          <div class="attributes">
+
+          </div>
+          <div class="spacer">
+          </div>
+        </div>
+</form>            <div class="form-group radio_buttons member_resource_options">
+        <span class="radio">
+          <input type="radio" name="thumbnail_id" id="thumbnail_id_pr76f369j" value="pr76f369j" class="radio_buttons">
+          <label for="thumbnail_id_pr76f369j">Thumbnail</label>
+        </span>
+      </div>
+
+    </div>
+</li>
+
+   <li data-reorder-id="3484zh205">
+    <div class="panel panel-default">
+      <form data-type="json" novalidate="novalidate" class="simple_form edit_file_set" id="edit_file_set_3484zh205" action="/concern/file_sets/3484zh205" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">
+        <div class="panel-heading ui-sortable-handle">
+          <div class="order-title">
+            <div class="form-group string required file_set_title"><input class="form-control string required title" name="file_set[title][]" type="text" value="CIMG1816 copy.JPG" id="file_set_title"></div>
+          </div>
+          <div class="file-set-link pull-right">
+            <a title="Edit file" href="/concern/parent/st74cq794/file_sets/3484zh205">
+              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+</a>          </div>
+            <div class="order-filename">
+              <em title="CIMG1816 copy.JPG">(CIMG1816 copy.JPG)</em>
+            </div>
+        </div>
+        <div class="panel-body">
+          <div class="text-center thumbnail">
+            <a data-context-href="/catalog/3484zh205/track" href="/concern/file_sets/3484zh205"><img class="thumbnail-inner" src="/downloads/3484zh205?file=thumbnail" alt="3484zh205?file=thumbnail"></a>
+
+          </div>
+          <div class="attributes">
+
+          </div>
+          <div class="spacer">
+          </div>
+        </div>
+</form>            <div class="form-group radio_buttons member_resource_options">
+        <span class="radio">
+          <input type="radio" name="thumbnail_id" id="thumbnail_id_3484zh205" value="3484zh205" class="radio_buttons">
+          <label for="thumbnail_id_3484zh205">Thumbnail</label>
+        </span>
+      </div>
+
+    </div>
+</li>
+
+   <li data-reorder-id="sb397864f">
+    <div class="panel panel-default">
+      <form data-type="json" novalidate="novalidate" class="simple_form edit_generic_work" id="edit_generic_work_sb397864f" action="/concern/generic_works/sb397864f" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">
+        <div class="panel-heading ui-sortable-handle">
+          <div class="order-title">
+            <div class="form-group string required generic_work_title"><input class="form-control string required title" name="generic_work[title][]" type="text" value="child1" id="generic_work_title"></div>
+          </div>
+          <div class="file-set-link pull-right">
+            <a title="Edit file" href="/concern/parent/st74cq794/generic_works/sb397864f">
+              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+</a>          </div>
+            <div class="order-filename">
+              <em title="child1">(child1)</em>
+            </div>
+        </div>
+        <div class="panel-body">
+          <div class="text-center thumbnail">
+            <a data-context-href="/catalog/sb397864f/track" href="/concern/generic_works/sb397864f"><img class="thumbnail-inner" src="/assets/default-c6018ff301250c55bcc663293e1816c7daece4159cbc93fc03d9b35dbc3db30d.png" alt="Default"></a>
+
+          </div>
+          <div class="attributes">
+
+          </div>
+          <div class="spacer">
+          </div>
+        </div>
+</form>            <div class="form-group radio_buttons member_resource_options">
+        <span class="radio">
+          <input type="radio" name="thumbnail_id" id="thumbnail_id_sb397864f" value="sb397864f" class="radio_buttons">
+          <label for="thumbnail_id_sb397864f">Thumbnail</label>
+        </span>
+      </div>
+
+    </div>
+</li>
+
+   <li data-reorder-id="bc386j55f">
+    <div class="panel panel-default">
+      <form data-type="json" novalidate="novalidate" class="simple_form edit_generic_work" id="edit_generic_work_bc386j55f" action="/concern/generic_works/bc386j55f" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">
+        <div class="panel-heading ui-sortable-handle">
+          <div class="order-title">
+            <div class="form-group string required generic_work_title"><input class="form-control string required title" name="generic_work[title][]" type="text" value="child2" id="generic_work_title"></div>
+          </div>
+          <div class="file-set-link pull-right">
+            <a title="Edit file" href="/concern/parent/st74cq794/generic_works/bc386j55f">
+              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+</a>          </div>
+            <div class="order-filename">
+              <em title="child2">(child2)</em>
+            </div>
+        </div>
+        <div class="panel-body">
+          <div class="text-center thumbnail">
+            <a data-context-href="/catalog/bc386j55f/track" href="/concern/generic_works/bc386j55f"><img class="thumbnail-inner" src="/assets/default-c6018ff301250c55bcc663293e1816c7daece4159cbc93fc03d9b35dbc3db30d.png" alt="Default"></a>
+
+          </div>
+          <div class="attributes">
+
+          </div>
+          <div class="spacer">
+          </div>
+        </div>
+</form>            <div class="form-group radio_buttons member_resource_options">
+        <span class="radio">
+          <input type="radio" name="thumbnail_id" id="thumbnail_id_bc386j55f" value="bc386j55f" class="radio_buttons">
+          <label for="thumbnail_id_bc386j55f">Thumbnail</label>
+        </span>
+      </div>
+
+    </div>
+</li>
+
+</ul>