Merge pull request #558 from matestack/20210610_517_nested_form_support_fixed

20210610 517 nested form support (fixed)

Author: jonasjabari

docs/built-in-reactivity/reactive-forms/nested-forms.md

@@ -0,0 +1,133 @@
+# Nested Forms
+
+Matestack provides functionality for reactive nested forms.
+
+This works in conjunction with rails' `accepts_nested_attributes_for`. From the rails documentation on [nested attributes](https://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods.html):
+
+> Nested attributes allow you to save attributes on associated records through the parent. By default nested attribute updating is turned off and you can enable it using the accepts_nested_attributes_for class method. When you enable nested attributes an attribute writer is defined on the model.
+
+There is a little bit of setup required to enable this. There's a need for `accepts_nested_attributes_for`,  `index_errors` on a models' `has_many` associations and an ActiveRecord patch.
+
+
+Consider the following model setup, which is the same model found in the dummy app in the spec directory (active in this dummy app):
+
+```ruby
+class DummyModel < ApplicationRecord
+  validates :title, presence: true, uniqueness: true
+  has_many :dummy_child_models, index_errors: true
+  accepts_nested_attributes_for :dummy_child_models, allow_destroy: true
+end
+
+class DummyChildModel < ApplicationRecord
+  validates :title, presence: true, uniqueness: true
+end
+```
+
+## Index Errors
+
+Note the `has_many :dummy_child_models, index_errors: true` declaration in the `Dummy Model` declaration above.
+
+Normally with rails, when rendering forms using Active Record models, errors are available on individual model instances. When using `accepts_nested_attributes_for`, error messages sent as JSON are not as useful because it is not possible to figure out which associated model object the error relates to.
+
+From rails 5, we can add an index to errors on nested models. We can add the option `index_errors: true` to has_many association to enable this behaviour on individual association.
+
+
+## ActiveRecord Patch
+
+Matestack nested forms support requires an ActiveRecord patch. This is because `index_errors` does not consider indexes of the correct existing sub records.
+
+See rails [issue #24390](https://github.com/rails/rails/issues/24390)
+
+Add this monkey patch to your rails app
+
+```ruby
+module ActiveRecord
+  module AutosaveAssociation
+    def validate_collection_association(reflection)
+      if association = association_instance_get(reflection.name)
+        if records = associated_records_to_validate_or_save(association, new_record?, reflection.options[:autosave])
+          all_records = association.target.find_all
+          records.each do |record|
+            index = all_records.find_index(record)
+            association_valid?(reflection, record, index)
+          end
+        end
+      end
+    end
+  end
+end
+```
+
+## Example
+
+```ruby
+class ExamplePage < Matestack::Ui::Page
+
+  def prepare
+    @dummy_model = DummyModel.new
+    @dummy_model.dummy_child_models.build(title: "init-value")
+    @dummy_model.dummy_child_models.build
+  end
+
+  def response
+    matestack_form form_config do
+      form_input key: :title, type: :text, label: "dummy_model_title_input", id: "dummy_model_title_input"
+
+      @dummy_model.dummy_child_models.each do |dummy_child_model|
+        dummy_child_model_form dummy_child_model
+      end
+
+      form_fields_for_add_item key: :dummy_child_models_attributes, prototype: method(:dummy_child_model_form) do
+        # type: :button is important! otherwise remove on first item is triggered on enter
+        button "add", type: :button
+      end
+
+      form_fields_for_remove_item do
+        # id is just required in this spec, but type: :button is important! otherwise remove on first item is triggered on enter
+        button "remove", ":id": "'remove'+nestedFormRuntimeId", type: :button
+      end
+
+      button "Submit me!"
+
+      toggle show_on: "success", hide_after: 1000 do
+        plain "success!"
+      end
+      toggle show_on: "failure", hide_after: 1000 do
+        plain "failure!"
+      end
+    end
+  end
+
+  def dummy_child_model_form dummy_child_model = DummyChildModel.new
+    form_fields_for dummy_child_model, key: :dummy_child_models_attributes do
+      form_input key: :title, type: :text, label: "dummy-child-model-title-input"
+      form_fields_for_remove_item do
+        # id is just required in this spec, but type: :button is important! otherwise remove on first item is triggered on enter
+        button "remove", ":id": "'remove'+nestedFormRuntimeId", type: :button
+      end
+    end
+  end
+end
+```
+
+### Dynamically Adding Nested Items
+
+As in the example above, you can dynamically add nested items. As the comment in the code suggests `type: :button` is important, otherwise remove on first item is triggered on enter.
+
+```ruby
+form_fields_for_add_item key: :dummy_child_models_attributes, prototype: method(:dummy_child_model_form) do
+# type: :button is important! otherwise remove on first item is triggered on enter
+button "add", type: :button
+end
+```
+
+### Dynamically Removing Nested Items
+
+As in the example above, as well as dynamically adding items, you can dynamically remove nested items. Again, important: `type: :button` is important, otherwise remove on first item is triggered on enter.
+
+```ruby
+form_fields_for_remove_item do
+  # id is just required in this spec, but type: :button is important! otherwise remove on first item is triggered on enter
+  button "remove", ":id": "'remove'+nestedFormRuntimeId", type: :button
+end
+```

lib/matestack/ui/core.rb

@@ -49,6 +49,8 @@ module VueJs
 require "#{vue_js_base_path}/components/form/checkbox"
 require "#{vue_js_base_path}/components/form/radio"
 require "#{vue_js_base_path}/components/form/select"
+require "#{vue_js_base_path}/components/form/fields_for_remove_item"
+require "#{vue_js_base_path}/components/form/fields_for_add_item"
 require "#{vue_js_base_path}/components/collection/helper"
 require "#{vue_js_base_path}/components/collection/content"
 require "#{vue_js_base_path}/components/collection/filter"

lib/matestack/ui/vue_js/components.rb

@@ -31,6 +31,23 @@ def matestack_form(text=nil, options=nil, &block)
              Matestack::Ui::VueJs::Components::Form::Form.(text, options, &block)
           end
 
+          def form_fields_for(text=nil, options=nil, &block)
+            # in order to provide a more intuitiv API while calling the default
+            # form, we transform the arguments a bit:
+            options[:for] = text
+            options[:fields_for] = options.delete(:key)
+            text = nil
+            Matestack::Ui::VueJs::Components::Form::Form.(text, options, &block)
+          end
+
+          def form_fields_for_remove_item(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::FieldsForRemoveItem.(text, options, &block)
+          end
+
+          def form_fields_for_add_item(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::FieldsForAddItem.(text, options, &block)
+          end
+
           def form_input(text=nil, options=nil, &block)
              Matestack::Ui::VueJs::Components::Form::Input.(text, options, &block)
           end

lib/matestack/ui/vue_js/components/form/base.rb

@@ -34,7 +34,11 @@ def error_config
             end
 
             def id
-              ctx.id || key
+              if ctx.id.present?
+                "'#{ctx.id}'"
+              else
+                "'#{key}'+$parent.nestedFormRuntimeId"
+              end
             end
 
             def multiple
@@ -50,7 +54,7 @@ def placeholder
             def attributes
               (options || {}).merge({
                 ref: "input.#{attribute_key}",
-                id: id,
+                ":id": id,
                 type: ctx.type,
                 multiple: ctx.multiple,
                 placeholder: ctx.placeholder,
@@ -95,7 +99,7 @@ def v_model_type(item=nil)
                 item.is_a?(Integer) ? 'v-model.number' : 'v-model'
               end
             end
-          
+
             # set value-type "Integer" for all numeric init values or options
             def value_type(item=nil)
               if item.nil?
@@ -164,4 +168,4 @@ def render_errors
       end
     end
   end
-end
+end

lib/matestack/ui/vue_js/components/form/checkbox.rb

@@ -37,13 +37,13 @@ def vue_props
             def render_checkbox_options
               checkbox_options.to_a.each do |item|
                 input checkbox_attributes(item)
-                label item_label(item), for: item_id(item)
+                label item_label(item), ":for": item_id(item)
               end
             end
 
             def checkbox_attributes(item)
               {
-                id: item_id(item),
+                ":id": item_id(item),
                 type: :checkbox,
                 name: item_label(item),
                 value: item_value(item),
@@ -57,9 +57,9 @@ def checkbox_attributes(item)
             end
 
             def render_true_false_checkbox
-              input true_false_checkbox_attributes.merge(type: :hidden, id: nil, value: 0)
-              input true_false_checkbox_attributes.merge(type: :checkbox, id: item_id(1))
-              label input_label, for: item_id(1) if input_label
+              input true_false_checkbox_attributes.merge(type: :hidden, ":id": nil, value: 0)
+              input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1))
+              label input_label, ":for": item_id(1) if input_label
             end
 
             def true_false_checkbox_attributes
@@ -88,18 +88,18 @@ def checkbox_options
             def item_value(item)
               item.is_a?(Array) ? item.last : item
             end
-            
+
             def item_label(item)
               item.is_a?(Array) ? item.first : item
             end
 
             def item_id(item)
-              "#{id}_#{item_value(item).to_s.gsub(" ", '_')}"
+              "#{id}+'_#{item_value(item).to_s.gsub(" ", '_')}'"
             end
 
           end
         end
       end
     end
   end
-end
+end

lib/matestack/ui/vue_js/components/form/checkbox_mixin.js

@@ -64,6 +64,9 @@ const formCheckboxMixin = {
       }, 1);
     },
     inputChanged: function (key) {
+      if (this.$parent.isNestedForm){
+        this.$parent.data["_destroy"] = false;
+      }
       this.$parent.resetErrors(key);
       this.$parent.$forceUpdate();
       this.$forceUpdate();

lib/matestack/ui/vue_js/components/form/fields_for_add_item.rb

@@ -0,0 +1,35 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class FieldsForAddItem < Matestack::Ui::Component
+
+            required :key
+
+            required :prototype
+
+            attr_accessor :prototype_template_json
+
+            def create_children(&block)
+              # first render prototype_template_json
+              self.prototype_template_json = context.prototype.call().to_json
+              # delete from children in order not to render the prototype
+              self.children.shift
+              super
+            end
+
+            def response
+              div id: "prototype-template-for-#{context.key}", "v-pre": true, data: { ":template":  self.prototype_template_json }
+              Matestack::Ui::Core::Base.new('v-runtime-template', ':template': "nestedFormRuntimeTemplates['#{context.key}']")
+              a class: 'matestack-ui-core-form-fields-for-add-item', "@click.prevent": "addItem('#{context.key}')" do
+                yield if block_given?
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

lib/matestack/ui/vue_js/components/form/fields_for_remove_item.rb

@@ -0,0 +1,19 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class FieldsForRemoveItem < Matestack::Ui::Component
+
+            def response
+              a class: 'matestack-ui-core-form-fields-for-remove-item', "@click.prevent": "removeItem()" do
+                yield if block_given?
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end