WIP: Implement CRUD, improve menu configuration

assets/controllers/sortable_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
+
+export default class extends Controller {
+
+    static values = { endpoint: String }
+    static targets = ['item', 'handle']
+
+    connect() {
+        new Sortable(this.element, {
+            item: '[data-sortable-target="item"]',
+            handle: '[data-sortable-target="handle"]',
+            onEnd: e => {
+                this.updateOrdering()
+            }
+        })
+    }
+
+    updateOrdering() {
+        let ordering = {}
+        this.itemTargets.forEach((item, index) => {
+            let projectId = parseInt(item.dataset.itemId)
+            ordering[projectId] = index + 1
+        })
+        fetch(this.endpointValue, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ ordering: ordering })
+        })
+    }
+}

assets/controllers/toggle_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static classes = [ 'closed' ]
+    static targets = [ 'toggle', 'icon' ]
+    static values = { open: Boolean, iconClosed: String, iconOpen: String, spriteUrl: String }
+
+    connect() {
+        this.target = this.hasToggleTarget ? this.toggleTarget : this.element
+        this.openValue = !this.target.classList.contains(this.closedClass)
+    }
+
+    toggle() {
+        this.openValue ? this._close() : this._open()
+    }
+
+    close() {
+        this._close()
+    }
+
+    _close() {
+        this.openValue = false
+        this.target.classList.add(this.closedClass)
+    }
+
+    open() {
+        this._open()
+    }
+
+    _open() {
+        this.openValue = true
+        this.target.classList.remove(this.closedClass)
+    }
+
+    openValueChanged() {
+        if (false === this.hasIconTarget) {
+            return
+        }
+
+        this.iconTarget.classList.toggle('rotate-90', true === this.openValue)
+    }
+}