component.js in solidus_admin-0.3.0

- old
+ new

@@ -1,9 +1,9 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ["country", "state"]
+  static targets = ["country", "state", "stateName", "stateWrapper", "stateNameWrapper"]
 
   loadStates() {
     const countryId = this.countryTarget.value
 
     fetch(`/admin/countries/${countryId}/states`)
@@ -11,24 +11,49 @@
       .then(data => {
         this.updateStateOptions(data)
       })
   }
 
-  updateStateOptions(data) {
+  updateStateOptions(states) {
+    if (states.length === 0) {
+      // Show state name text input if no states to choose from.
+      this.toggleStateFields(false)
+    } else {
+      // Show state select dropdown.
+      this.toggleStateFields(true)
+      this.populateStateSelect(states)
+    }
+  }
+
+  toggleStateFields(showSelect) {
+    const stateWrapper = this.stateWrapperTarget
+    const stateNameWrapper = this.stateNameWrapperTarget
     const stateSelect = this.stateTarget
+    const stateName = this.stateNameTarget
 
-    stateSelect.innerHTML = ""
 
-    if (data.length === 0) {
-      stateSelect.disabled = true
-    } else {
+    if (showSelect) {
+      // Show state select dropdown.
       stateSelect.disabled = false
-
-      data.forEach((state) => {
-        const option = document.createElement("option")
-        option.value = state.id
-        option.innerText = state.name
-        stateSelect.appendChild(option)
-      })
+      stateName.value = ""
+      stateWrapper.classList.remove('hidden')
+      stateNameWrapper.classList.add('hidden')
+    } else {
+      // Show state name text input if no states to choose from.
+      stateSelect.disabled = true
+      stateWrapper.classList.add("hidden")
+      stateNameWrapper.classList.remove("hidden")
     }
+  }
+
+  populateStateSelect(states) {
+    const stateSelect = this.stateTarget
+    stateSelect.innerHTML = ""
+
+    states.forEach((state) => {
+      const option = document.createElement("option")
+      option.value = state.id
+      option.innerText = state.name
+      stateSelect.appendChild(option)
+    })
   }
 }