add missing class to person role fields partial, add js method to mak…

…e remove roles work and update eventlistener of add role to correctly fire and trigger

app/javascript/application.js

@@ -1,4 +1,6 @@
 import "@hotwired/turbo-rails"
 import "./controllers"
 import "@puzzleitc/puzzle-shell";
-import "@puzzleitc/puzzle-shell/style.css";
+import "@puzzleitc/puzzle-shell/style.css";
+require("./packs/nested-forms/addFields");
+require("./packs/nested-forms/removeFields");

app/javascript/nested-forms/addFields.js → app/javascript/packs/nested-forms/addFields.js

@@ -33,4 +33,4 @@ class addFields {
         newFields ? link.insertAdjacentHTML("beforebegin", newFields) : null;
     }
 }
-window.addEventListener("turbolinks:load", () => new addFields());
+window.addEventListener("turbo:frame-render", () => new addFields());

app/javascript/packs/nested-forms/removeFields.js

@@ -0,0 +1,32 @@
+class removeFields {
+    constructor() {
+        this.iterateLinks();
+    }
+
+    iterateLinks() {
+        document.addEventListener("click", (e) => {
+            if (e.target && e.target.className == "remove_fields") {
+                this.handleClick(e.target, e);
+            }
+        });
+    }
+
+    handleClick(link, e) {
+        // Stop the function from executing if a link or event were not passed into the function.
+        if (!link || !e) return;
+        // Prevent the browser from following the URL.
+        e.preventDefault();
+        // Find the parent wrapper for the set of nested fields.
+        let fieldParent = link.closest(".nested-fields");
+        // If there is a parent wrapper, find the hidden delete field.
+        let deleteField = fieldParent
+            ? fieldParent.querySelector('input[type="hidden"]')
+            : null;
+        // If there is a delete field, update the value to `1` and hide the corresponding nested fields.
+        if (deleteField) {
+            deleteField.value = 1;
+            fieldParent.style.display = "none";
+        }
+    }
+}
+window.addEventListener("turbo:frame-render", () => new removeFields());

app/views/people/_person_role_fields.html.haml

@@ -1,4 +1,4 @@
-%div.border.border-dark-subtle.rounded.p-1.fw-light
+%div.border.border-dark-subtle.rounded.p-1.fw-light.nested-fields
   = person_role.hidden_field :_destroy
   Rolle
   = person_role.collection_select :role_id, Role.order(:name), :id, :name, {}, class: "form-select w-100"