app/javascript/controllers/nested_form_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "links", "template", "grouped" ]
connect() {
this.wrapperClass = this.data.get("wrapperClass") || "nested-fields"
}
add_association(event) {
event.preventDefault()
var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
this.linksTarget.insertAdjacentHTML('beforebegin', content)
}
remove_association(event) {
event.preventDefault()
let wrapper = event.target.closest("." + this.wrapperClass)
// New records are simply removed from the page
if (wrapper.dataset.newRecord == "true") {
wrapper.remove()
// Existing records are hidden and flagged for deletion
} else {
wrapper.querySelector("input[name*='_destroy']").value = 1
wrapper.style.display = 'none'
}
}
radio_chosen(event) {
var els = this.element.getElementsByClassName(event.target.classList[0])
Array.from(els).forEach( (e) => {
e.checked = false;
});
event.target.checked = true;
}
}