move fields of role form to partial and start writing logic to create…

… new roles

app/controllers/people_controller.rb

@@ -6,7 +6,7 @@ class PeopleController < CrudController
   self.permitted_attrs = [:birthdate, :location,
                           :marital_status, :updated_by, :name, :nationality, :nationality2, :title,
                           :competence_notes, :company_id, :email, :department_id, :shortname, :picture,
-                          { person_roles_attributes: [:role_id, :person_role_level_id, :percent, :id] }]
+                          { person_roles_attributes: [:role_id, :person_role_level_id, :percent, :id, :_destroy] }]
 
   def new
     super

app/helpers/role_form_helper.rb

@@ -0,0 +1,18 @@
+module RoleFormHelper
+  def link_to_add_role(name, form, association)
+    new_role = form.object.send(association).klass.new
+    id = new_role.object_id
+    fields = form.fields_for(association, new_role, child_index: id) do |builder|
+      render("#{association.to_s.singularize}_fields", form: builder)
+    end
+    link_to(
+      name,
+      '#',
+      class: 'add_fields',
+      data: {
+        id: id,
+        fields: fields.gsub("\n", '')
+      }
+    )
+  end
+end

app/javascript/nested-forms/addFields.js

@@ -0,0 +1,36 @@
+class addFields {
+    // This executes when the function is instantiated.
+    constructor() {
+        this.links = document.querySelectorAll(".add_fields");
+        this.iterateLinks();
+    }
+
+    iterateLinks() {
+        // If there are no links on the page, stop the function from executing.
+        if (this.links.length === 0) return;
+        // Loop over each link on the page. A page could have multiple nested forms.
+        this.links.forEach((link) => {
+            link.addEventListener("click", (e) => {
+                this.handleClick(link, 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();
+        // Save a unique timestamp to ensure the key of the associated array is unique.
+        let time = new Date().getTime();
+        // Save the data id attribute into a variable. This corresponds to `new_object.object_id`.
+        let linkId = link.dataset.id;
+        // Create a new regular expression needed to find any instance of the `new_object.object_id` used in the fields data attribute if there's a value in `linkId`.
+        let regexp = linkId ? new RegExp(linkId, "g") : null;
+        // Replace all instances of the `new_object.object_id` with `time`, and save markup into a variable if there's a value in `regexp`.
+        let newFields = regexp ? link.dataset.fields.replace(regexp, time) : null;
+        // Add the new markup to the form if there are fields to add.
+        newFields ? link.insertAdjacentHTML("beforebegin", newFields) : null;
+    }
+}
+window.addEventListener("turbolinks:load", () => new addFields());

app/views/people/_person_role_fields.html.haml

@@ -0,0 +1,9 @@
+%div.border.border-dark-subtle.rounded.p-1.fw-light
+  = person_role.hidden_field :_destroy
+  Rolle
+  = person_role.collection_select :role_id, Role.order(:name), :id, :name, {}, class: "form-select w-100"
+  %div
+    Stufe
+    %div.d-flex.fw-light
+      = person_role.collection_select :person_role_level_id, PersonRoleLevel.order(:level), :id, :level, {}, class: "form-select w-50 me-1"
+      = person_role.number_field :percent, step: 1, class: "form-control w-50"

app/views/people/edit.html.haml

@@ -19,19 +19,12 @@
             %th.fw-normal Funktionen
             %div
               = form.fields_for :person_roles do |person_role|
+                %tr
+                  %td= render "person_role_fields", person_role: person_role
                 %tr
                   %td
-                    %div.border.border-dark-subtle.rounded.p-1.fw-light
-                      Rolle
-                      = person_role.collection_select :role_id, Role.order(:name), :id, :name, {}, class: "form-select w-100"
-                      %div
-                        Stufe
-                        %div.d-flex.fw-light
-                          = person_role.collection_select :person_role_level_id, PersonRoleLevel.order(:level), :id, :level, {}, class: "form-select w-50 me-1"
-                          = person_role.number_field :percent, step: 1, class: "form-control w-50"
-              %tr
-                %td
-                  %button.btn.btn-link Neue Funktion
+                    = link_to_add_role "Neue Funktion", @person, :person_roles
+                    %button.btn.btn-link Neue Funktion
             %th.fw-normal Organisationseinheit
             %tr
               %td= form.collection_select :department_id, Department.order(:name), :id, :name, {}, class: "form-select w-100"