add dependable_controller.js, refresh_fields_controller.js

bullet_train-fields/app/javascript/controllers/dependable_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    dependentsSelector: String
+  }
+
+  updateDependents(event) {
+    if (!this.hasDependents) { return false }
+
+    this.dependents.forEach((dependent) => {
+      dependent.dispatchEvent(new CustomEvent(`${this.identifier}:updated`, { detail: { event: event }, bubbles: true, cancelable: false }))
+    })
+  }
+
+  get hasDependents() {
+    return (this.dependents.length > 0)
+  }
+
+  get dependents() {
+    if (!this.dependentsSelectorValue) { return [] }
+    return document.querySelectorAll(this.dependentsSelectorValue)
+  }
+}

bullet_train-fields/app/javascript/controllers/index.js

@@ -10,6 +10,8 @@ import FileFieldController from './fields/file_field_controller'
 import PasswordController from './fields/password_controller'
 import PhoneController from './fields/phone_controller'
 import SuperSelectController from './fields/super_select_controller'
+import DependableController from './dependable_controller'
+import RefreshFieldsController from './refresh_fields_controller'
 
 export const controllerDefinitions = [
   [FieldController, 'fields/field_controller.js'],
@@ -22,6 +24,8 @@ export const controllerDefinitions = [
   [PasswordController, 'fields/password_controller.js'],
   [PhoneController, 'fields/phone_controller.js'],
   [SuperSelectController, 'fields/super_select_controller.js'],
+  [DependableController, 'dependable_controller.js'],
+  [RefreshFieldsController, 'refresh_fields_controller.js'],
 ].map(function(d) {
   const key = d[1]
   const controller = d[0]
@@ -42,4 +46,6 @@ export {
   PasswordController,
   PhoneController,
   SuperSelectController,
+  DependableController,
+  RefreshFieldsController,
 }

bullet_train-fields/app/javascript/controllers/refresh_fields_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  updateFrameFromDependentSuperSelectValue(event) {
+    const dependentSuperSelect = event?.detail?.event?.detail?.event?.target // original super select jQuery event
+
+    const frame = this.element
+    frame.src = this.constructNewUrlUpdatingField(dependentSuperSelect.name, dependentSuperSelect.value)
+  }
+
+  constructNewUrlUpdatingField(fieldName, fieldValue) {
+    const url = new URL(window.location.href)
+    url.searchParams.set(fieldName, fieldValue)
+
+    return url.href
+  }
+}