refactor too long lines, add comments, move whole edit form to form p…

…artial and create a turbostream that is triggered when edit fails, refactor the has_nationality2 property in the edit view

app/controllers/people_controller.rb

@@ -5,17 +5,17 @@ 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, :_destroy] }]
+                          :competence_notes, :company_id, :email, :department_id, :shortname,
+                          :picture, { person_roles_attributes: [:role_id, :person_role_level_id,
+                                                                :percent, :id, :_destroy] }]
 
   def new
     super
     @person.roles.build
   end
 
   def update
-    @person.roles.build if @person.roles.empty?
-    if params['has_nationality2']['{}'].to_i.zero?
+    if params['has_nationality2'][0].to_i.zero?
       params['person']['nationality2'] = nil
     end
     super

app/helpers/role_form_helper.rb

@@ -1,10 +1,21 @@
 module RoleFormHelper
+  # This method creates a link with `data-id` `data-fields` attributes. These attributes are used to create new instances of the nested fields through Javascript.
   def link_to_add_role(name, form, association)
+    # Takes an object and creates a new instance of its associated model
     new_role = form.object.send(association).klass.new
+    # Saves the unique ID of the object into a variable.
+    # This is needed to ensure the key of the associated array is unique. This makes parsing the content in the `data-fields` attribute easier through Javascript.
     id = new_role.object_id
+    # child_index` is used to ensure the key of the associated array is unique, and that it matched the value in the `data-id` attribute.
     fields = form.fields_for(association, new_role, child_index: id) do |builder|
       render("#{association.to_s.singularize}_fields", person_role: builder)
     end
+
+
+    # This renders a simple link, but passes information into `data` attributes.
+    # This info can be named anything we want, but in this case we chose `data-id:` and `data-fields:`.
+    # We use `gsub("\n", "")` to remove anywhite space from the rendered partial.
+    # The `id:` value needs to match the value used in `child_index: id`.
     link_to(
       name,
       '#',

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

@@ -1,5 +1,4 @@
 class addFields {
-    // This executes when the function is instantiated.
     constructor() {
         this.links = document.querySelectorAll(".add_fields");
         this.iterateLinks();

app/views/people/_form.html.haml

@@ -0,0 +1,61 @@
+= form_with model: @person do |form|
+  %div.d-flex.justify-content-between.flex-xl-row.flex-lg-column.flex-md-column.flex-sm-column.flex-column
+    %div.pe-5
+      %img.rounded-circle{src: "/api/people/#{@person.id}/picture", width: '141', height: '141'}
+      = form.file_field :picture
+    %div.pe-5.d-flex
+      %table
+        %tbody
+          %th.fw-normal Name
+          %tr
+            %td= form.text_field :name, class: "w-100 form-control"
+          %th.fw-normal Email
+          %tr
+            %td= form.text_field :email, class: "w-100, form-control"
+          %th.fw-normal Abschluss
+          %tr
+            %td= form.text_field :title, class: "w-100, form-control"
+          %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
+                = link_to_add_role "Neue Funktion", form, :person_roles
+          %th.fw-normal Organisationseinheit
+          %tr
+            %td= form.collection_select :department_id, Department.order(:name), :id, :name, {}, class: "form-select w-100"
+          %th.fw-normal Firma
+          %tr
+            %td= form.collection_select :company_id, Company.order(:name), :id, :name, {}, class: "form-select w-100"
+          %th.fw-normal Wohnort (Stadt)
+          %tr
+            %td= form.text_field :location, class: "form-control w-100"
+
+    %div.pe-5
+      %table
+        %tbody
+          %th.fw-normal Geburtsdatum
+          %tr
+            %td= form.date_field :birthdate, class: "form-control w-100"
+          %th.fw-normal Doppelbürger
+          %tr
+            %td{"data-controller"=>"nationality-two"}= check_box :has_nationality2, "", {"checked" => @person.nationality2?, "data-action" => "nationality-two#nationalityTwoVisible", "id" => "nat-two-checkbox"}
+          %th.fw-normal Erste Nationalität
+          %tr
+            %td= form.collection_select :nationality, ISO3166::Country.all.sort, :alpha2, :name, {}, class: "form-select w-100"
+          %th.fw-normal.nationality-two Zweite Nationalität
+          %tr.nationality-two
+            %td= form.collection_select :nationality2, ISO3166::Country.all.sort, :alpha2, :name, {}, class: "form-select w-100"
+          %th.fw-normal Zivilstand
+          %tr
+            %td= form.collection_select :marital_status, Person.marital_statuses, :first, :first, { selected: @person.marital_status }, class: "form-select w-100"
+    %div
+      %div.fw-normal Sprachen
+      %div.border.border-dark-subtle.mt-1.p-2.rounded
+        - @person.language_skills.each do |language|
+          %div.mb-1= "#{language.language}: #{language.level} - #{language.certificate}"
+  %div.mt-3
+    = form.submit :Speichern, class: "btn btn-primary me-3"
+    = link_to "Abbrechen", person_path

app/views/people/edit.html.haml

@@ -1,62 +1,2 @@
 %turbo-frame{id: "#{dom_id @person}"}
-  = form_with model: @person do |form|
-    %div.d-flex.justify-content-between.flex-xl-row.flex-lg-column.flex-md-column.flex-sm-column.flex-column
-      %div.pe-5
-        %img.rounded-circle{src: "/api/people/#{@person.id}/picture", width: '141', height: '141'}
-        = form.file_field :picture
-      %div.pe-5.d-flex
-        %table
-          %tbody
-            %th.fw-normal Name
-            %tr
-              %td= form.text_field :name, class: "w-100 form-control"
-            %th.fw-normal Email
-            %tr
-              %td= form.text_field :email, class: "w-100, form-control"
-            %th.fw-normal Abschluss
-            %tr
-              %td= form.text_field :title, class: "w-100, form-control"
-            %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
-                  = link_to_add_role "Neue Funktion", form, :person_roles
-            %th.fw-normal Organisationseinheit
-            %tr
-              %td= form.collection_select :department_id, Department.order(:name), :id, :name, {}, class: "form-select w-100"
-            %th.fw-normal Firma
-            %tr
-              %td= form.collection_select :company_id, Company.order(:name), :id, :name, {}, class: "form-select w-100"
-            %th.fw-normal Wohnort (Stadt)
-            %tr
-              %td= form.text_field :location, class: "form-control w-100"
-
-      %div.pe-5
-        %table
-          %tbody
-            %th.fw-normal Geburtsdatum
-            %tr
-              %td= form.date_field :birthdate, class: "form-control w-100"
-            %th.fw-normal Doppelbürger
-            %tr
-              %td{"data-controller"=>"nationality-two"}= check_box :has_nationality2, {}, {"checked" => @person.nationality2?, "data-action" => "nationality-two#nationalityTwoVisible", "id" => "nat-two-checkbox"}
-            %th.fw-normal Erste Nationalität
-            %tr
-              %td= form.collection_select :nationality, ISO3166::Country.all.sort, :alpha2, :name, {}, class: "form-select w-100"
-            %th.fw-normal.nationality-two Zweite Nationalität
-            %tr.nationality-two
-              %td= form.collection_select :nationality2, ISO3166::Country.all.sort, :alpha2, :name, {}, class: "form-select w-100"
-            %th.fw-normal Zivilstand
-            %tr
-              %td= form.collection_select :marital_status, Person.marital_statuses, :first, :first, { selected: @person.marital_status }, class: "form-select w-100"
-      %div
-        %div.fw-normal Sprachen
-        %div.border.border-dark-subtle.mt-1.p-2.rounded
-          - @person.language_skills.each do |language|
-            %div.mb-1= "#{language.language}: #{language.level} - #{language.certificate}"
-    %div.mt-3
-      = form.submit :Speichern, class: "btn btn-primary me-3"
-      = link_to "Abbrechen", person_path
+  = render "form", person: @person

app/views/people/edit.turbo_stream.erb

@@ -0,0 +1,12 @@
+<%= turbo_stream.update "#{dom_id @person}" do %>
+  <%= render "form", skill: @skill %>
+  <% if @person.errors.any? %>
+    <div class="alert alert-danger mt-2">
+      <ul class="mb-0">
+        <% @person.errors.full_messages.each do |error| %>
+          <li><%= error %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+<% end %>