Merge pull request #1418 from basecamp/sort-columns

Sort columns

app/javascript/controllers/collapsible_columns_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { nextFrame } from "helpers/timing_helpers";
+import { nextFrame, debounce } from "helpers/timing_helpers";
 
 export default class extends Controller {
   static classes = [ "collapsed", "noTransitions" ]
@@ -8,12 +8,12 @@ export default class extends Controller {
     collection: String
   }
 
-  async connect() {
-    this.#disableTransitions()
-    this.#restoreColumns()
+  initialize() {
+    this.restoreState = debounce(this.restoreState.bind(this), 10)
+  }
 
-    await nextFrame()
-    this.#enableTransitions()
+  async connect() {
+    await this.#restoreColumnsDisablingTransitions()
   }
 
   toggle({ target }) {
@@ -27,6 +27,19 @@ export default class extends Controller {
     }
   }
 
+  async restoreState(event) {
+    await nextFrame()
+    await this.#restoreColumnsDisablingTransitions()
+  }
+
+  async #restoreColumnsDisablingTransitions() {
+    this.#disableTransitions()
+    this.#restoreColumns()
+
+    await nextFrame()
+    this.#enableTransitions()
+  }
+
   #disableTransitions() {
     this.element.classList.add(this.noTransitionsClass)
   }
@@ -79,13 +92,17 @@ export default class extends Controller {
 
   #restoreColumns() {
     this.columnTargets.forEach(column => {
-      const key = this.#localStorageKeyFor(column)
-      if (localStorage.getItem(key)) {
-        this.#expand(column)
-      }
+      this.#restoreColumn(column)
     })
   }
 
+  #restoreColumn(column) {
+    const key = this.#localStorageKeyFor(column)
+    if (localStorage.getItem(key)) {
+      this.#expand(column)
+    }
+  }
+
   #localStorageKeyFor(column) {
     return `expand-${this.collectionValue}-${column.getAttribute("id")}`
   }