From 98bcf28b3b131176cdeb22043fc610b4f8ed0a1f Mon Sep 17 00:00:00 2001 From: Jannik Pulfer Date: Fri, 1 Mar 2024 13:04:33 +0100 Subject: [PATCH] refactor too long lines, add comments, move whole edit form to form partial and create a turbostream that is triggered when edit fails, refactor the has_nationality2 property in the edit view --- app/controllers/people_controller.rb | 8 +-- app/helpers/role_form_helper.rb | 11 ++++ .../packs/nested-forms/addFields.js | 1 - app/views/people/_form.html.haml | 61 ++++++++++++++++++ app/views/people/edit.html.haml | 62 +------------------ app/views/people/edit.turbo_stream.erb | 12 ++++ 6 files changed, 89 insertions(+), 66 deletions(-) create mode 100644 app/views/people/_form.html.haml create mode 100644 app/views/people/edit.turbo_stream.erb diff --git a/app/controllers/people_controller.rb b/app/controllers/people_controller.rb index 96a4df3bf..4211b16b6 100644 --- a/app/controllers/people_controller.rb +++ b/app/controllers/people_controller.rb @@ -5,8 +5,9 @@ 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 @@ -14,8 +15,7 @@ def new 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 diff --git a/app/helpers/role_form_helper.rb b/app/helpers/role_form_helper.rb index 824e31fe8..758f634c4 100644 --- a/app/helpers/role_form_helper.rb +++ b/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, '#', diff --git a/app/javascript/packs/nested-forms/addFields.js b/app/javascript/packs/nested-forms/addFields.js index a354258bc..74bad78a4 100644 --- a/app/javascript/packs/nested-forms/addFields.js +++ b/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(); diff --git a/app/views/people/_form.html.haml b/app/views/people/_form.html.haml new file mode 100644 index 000000000..6403892f5 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/views/people/edit.html.haml b/app/views/people/edit.html.haml index 9832d59b7..b8c5f218c 100644 --- a/app/views/people/edit.html.haml +++ b/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 \ No newline at end of file + = render "form", person: @person \ No newline at end of file diff --git a/app/views/people/edit.turbo_stream.erb b/app/views/people/edit.turbo_stream.erb new file mode 100644 index 000000000..65aba761e --- /dev/null +++ b/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? %> +
+ +
+ <% end %> +<% end %> \ No newline at end of file