update table drag-and-drop sort

directus · Oct 11, 2016 · c5fdd64 · c5fdd64
1 parent a798a7a
commit c5fdd64
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
diff --git a/app/core/table/table.bodyview.js b/app/core/table/table.bodyview.js
@@ -154,6 +154,10 @@ function(app, Backbone, Sortable, Notification) {
             that.drop();
           }
         });
+
+        if (options.parentView.sortable) {
+          options.parentView.enableSortable();
+        }
       }
     }
   });

diff --git a/app/core/table/table.headview.js b/app/core/table/table.headview.js
@@ -170,16 +170,7 @@ function(app, Backbone, __t, Notification) {
         this.render();
       },
       'click .sortableHeader': function(e) {
-        if(this.parentView.sortableWidget.options.sort)
-        {
-          this.$el.closest('table').addClass('disable-sorting');
-          this.parentView.sortableWidget.options.sort = false;
-          Notification.info(__t('table_sort_disabled'), '<i>'+__t('table_sort_disabled_message')+'</i>', {timeout: 3000});
-        } else {
-          this.$el.closest('table').removeClass('disable-sorting');
-          this.parentView.sortableWidget.options.sort = true;
-          Notification.info(__t('table_sort_enabled'), '<i>'+__t('table_sort_enabled_message')+'</i>', {timeout: 3000});
-        }
+        this.parentView.toggleSortable();
       },
       'click th:not(.sortableHeader)': function(e) {
         if(this.parentView.sortableWidget && this.parentView.sortableWidget.options.sort)

diff --git a/app/core/table/table.view.js b/app/core/table/table.view.js
@@ -1,14 +1,17 @@
 define([
   "app",
+  'underscore',
   "backbone",
+  'core/notification',
+  'core/t',
   'helpers/model',
   "core/table/table.headview",
   "core/table/table.bodyview",
   "core/table/table.footerview",
   "plugins/jquery.flashrow"
 ],
 
-function(app, Backbone, ModelHelper, TableHead, TableBody, TableFooter) {
+function(app, _, Backbone, Notification, __t, ModelHelper, TableHead, TableBody, TableFooter) {
 
   "use strict";
 
@@ -26,6 +29,7 @@ function(app, Backbone, ModelHelper, TableHead, TableBody, TableFooter) {
         id: this.collection.table.id,
         selectable: this.options.selectable,
         sortable: this.options.sortable,
+        disabledSorting: !this.sortable,
         showEmptyMessage: (this.collection.length === 0 && !this.options.hideEmptyMessage)
       };
     },
@@ -164,6 +168,26 @@ function(app, Backbone, ModelHelper, TableHead, TableBody, TableFooter) {
       return columns;
     },
 
+    toggleSortable: function() {
+      if (this.sortableWidget.options.sort) {
+        this.disableSortable();
+        Notification.info(__t('table_sort_disabled'), '<i>'+__t('table_sort_disabled_message')+'</i>', {timeout: 3000});
+      } else {
+        this.enableSortable();
+        Notification.info(__t('table_sort_enabled'), '<i>'+__t('table_sort_enabled_message')+'</i>', {timeout: 3000});
+      }
+    },
+
+    enableSortable: function() {
+      this.$el.find('table').removeClass('disable-sorting');
+      this.sortable = this.sortableWidget.options.sort = true;
+    },
+
+    disableSortable: function() {
+      this.$el.find('table').addClass('disable-sorting');
+      this.sortable = this.sortableWidget.options.sort = false;
+    },
+
     initialize: function(options) {
       var collection = this.collection;
 
@@ -202,6 +226,18 @@ function(app, Backbone, ModelHelper, TableHead, TableBody, TableFooter) {
         this.options.selectable = true;
       }
 
+      // ==================================================================================
+      // Drag and drop sort
+      // ----------------------------------------------------------------------------------
+      // Let remember the sortable value of the table
+      // After the view is rendered this value gets set to false again
+      // Not being able to sort again until it's pressed.
+      // Or not letting the entries to be sort if the entries are bigger than perPage limit
+      // ==================================================================================
+      if (this.sortable === undefined) {
+        this.sortable = false;
+      }
+
       this.saveAfterDrop = this.options.saveAfterDrop = (options.saveAfterDrop !== undefined) ?  options.saveAfterDrop : true;
 
       if (this.options.droppable || collection.droppable) {

diff --git a/app/templates/tables/table.html b/app/templates/tables/table.html
@@ -8,7 +8,7 @@ <h1>{{t "listing_items_not_found"}}</h1>
 {{else}}
 <div class="table-shadow">
     <div class="directus-toolbar"></div>
-    <table class="table table-striped directus-table hover-header disable-sorting" id="{{id}}">
+    <table class="table table-striped directus-table hover-header {{#if disabledSorting}}disable-sorting{{/if}}" id="{{id}}">
         <colgroup>
         	<col class="col-status">
         	{{#if sortable}}<col class="col-sort">{{/if}}