save/load reorder columns (#4829)

Co-authored-by: Dennis Hernández <dennishernandezvargas@gmail.com>

src/extensions/cookie/bootstrap-table-cookie.js

@@ -12,6 +12,7 @@ const UtilsCookie = {
     pageList: 'bs.table.pageList',
     columns: 'bs.table.columns',
     searchText: 'bs.table.searchText',
+    reorderColumns: 'bs.table.reorderColumns',
     filterControl: 'bs.table.filterControl',
     filterBy: 'bs.table.filterBy'
   },
@@ -212,7 +213,8 @@ $.extend($.fn.bootstrapTable.defaults, {
     'bs.table.sortOrder', 'bs.table.sortName',
     'bs.table.pageNumber', 'bs.table.pageList',
     'bs.table.columns', 'bs.table.searchText',
-    'bs.table.filterControl', 'bs.table.filterBy'
+    'bs.table.filterControl', 'bs.table.filterBy',
+    'bs.table.reorderColumns'
   ],
   cookieStorage: 'cookieStorage', // localStorage, sessionStorage
   // internal variable
@@ -344,6 +346,17 @@ $.BootstrapTable = class extends $.BootstrapTable {
     UtilsCookie.setCookie(this, UtilsCookie.cookieIds.pageNumber, this.options.pageNumber)
   }
 
+  initHeader (...args) {
+    if (this.options.reorderableColumns) {
+      this.columnsSortOrder = JSON.parse(UtilsCookie.getCookie(this, this.options.cookieIdTable, UtilsCookie.cookieIds.reorderColumns))
+    }
+    super.initHeader(...args)
+  }
+
+  persistReorderColumnsState (that) {
+    UtilsCookie.setCookie(that, UtilsCookie.cookieIds.reorderColumns, JSON.stringify(that.columnsSortOrder))
+  }
+
   filterBy (...args) {
     super.filterBy(...args)
     UtilsCookie.setCookie(this, UtilsCookie.cookieIds.filterBy, JSON.stringify(this.filterColumns))

src/extensions/reorder-columns/bootstrap-table-reorder-columns.js

@@ -121,8 +121,16 @@ $.BootstrapTable = class extends $.BootstrapTable {
       dragaccept: this.options.dragaccept,
       clickDelay: 200,
       dragHandle: '.th-inner',
-      restoreState: order,
-      beforeStop: () => {
+      restoreState: order ? order : this.columnsSortOrder,
+      beforeStop: (table) => {
+        const sortOrder = {}
+        table.el.find('th').each((i, el) => {
+          sortOrder[$(el).data('field')] = i
+        })
+
+        this.columnsSortOrder = sortOrder
+        this.persistReorderColumnsState(this)
+
         const ths = []
         const formatters = []
         const columns = []
@@ -143,7 +151,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
           }
         }
 
-        for (let i = 0; i < ths.length; i++ ) {
+        for (let i = 0; i < ths.length; i++) {
           columnIndex = this.fieldsColumnsIndex[ths[i]]
           if (columnIndex !== -1) {
             this.fieldsColumnsIndex[ths[i]] = i
@@ -183,6 +191,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
   }
 
   orderColumns (order) {
-    this.makeRowsReorderable(order)
+    this.columnsSortOrder = order
+    this.makeRowsReorderable()
   }
 }

src/extensions/resizable/bootstrap-table-resizable.js

@@ -8,7 +8,9 @@ const isInit = that => that.$el.data('resizableColumns') !== undefined
 
 const initResizable = that => {
   if (that.options.resizable && !that.options.cardView && !isInit(that)) {
-    that.$el.resizableColumns()
+    that.$el.resizableColumns({
+      store: window.store
+    })
   }
 }