Gui improvements and ideas

app/javascript/controllers/autosubmit_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="autosubmit"
+export default class extends Controller {
+  connect() {
+    this.element.addEventListener('change', event => event.target.form.requestSubmit());
+  }
+}

app/javascript/controllers/collapse_chevron_toggler_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="collapse-chevron-toggler"
+export default class extends Controller {
+  static targets = [ "icon" ];
+  collapsible = null;
+
+  connect() {
+    this.collapsible = window.document.getElementById(this.element.getAttribute('href').substring(1));
+    this.setIcon();
+    
+    this.collapsible.addEventListener('hide.bs.collapse', e => this.toggle())
+    this.collapsible.addEventListener('show.bs.collapse', e => this.toggle())
+  }
+
+  setIcon(reverted = false) {
+    console.log('setIcon', this.collapsible)
+    if(this.collapsible.classList.contains('show')) {
+      this.iconTarget.classList.remove('bi-chevron-down')
+      this.iconTarget.classList.add('bi-chevron-up')
+    } else {
+      this.iconTarget.classList.remove('bi-chevron-up')
+      this.iconTarget.classList.add('bi-chevron-down')
+    }
+  }
+
+  toggle() {
+    console.log('toggle', this.collapsible)
+    this.iconTarget.classList.toggle('bi-chevron-down');
+    this.iconTarget.classList.toggle('bi-chevron-up');
+  }
+}

app/javascript/controllers/index.js

@@ -4,6 +4,12 @@
 
 import { application } from "./application"
 
+import AutosubmitController from "./autosubmit_controller"
+application.register("autosubmit", AutosubmitController)
+
+import CollapseChevronTogglerController from "./collapse_chevron_toggler_controller"
+application.register("collapse-chevron-toggler", CollapseChevronTogglerController)
+
 import HelloController from "./hello_controller"
 application.register("hello", HelloController)