implemented dynamic add nested form feature, specs and docs missing

jonasjabari · jonasjabari · commit 0c7654f3834a · 2021-06-16T16:20:41.000+02:00
diff --git a/lib/matestack/ui/core.rb b/lib/matestack/ui/core.rb
@@ -50,6 +50,7 @@ module VueJs
 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"
diff --git a/lib/matestack/ui/vue_js/components.rb b/lib/matestack/ui/vue_js/components.rb
@@ -44,6 +44,10 @@ 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
diff --git a/lib/matestack/ui/vue_js/components/form/fields_for_add_item.rb b/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
diff --git a/lib/matestack/ui/vue_js/components/form/form.js b/lib/matestack/ui/vue_js/components/form/form.js
@@ -1,5 +1,7 @@
 import Vue from "vue/dist/vue.esm";
 import Vuex from "vuex";
+import VRuntimeTemplate from "v-runtime-template"
+
 import axios from "axios";
 
 import matestackEventHub from "../../event_hub";
@@ -11,11 +13,13 @@ const componentDef = {
     return {
       data: {},
       errors: {},
-      nestedForms: {},
       loading: false,
+      nestedForms: {},
       isNestedForm: false,
       hideNestedForm: false,
-      positionInNestedForm: 0
+      nestedFormRuntimeTemplates: {},
+      nestedFormRuntimeTemplateDomElements: {},
+      deletedNestedNewInstanceFormsCount: {}
     };
   },
   methods: {
@@ -71,17 +75,64 @@ const componentDef = {
           let childErrorKey = errorKey.split(".")[1]
           let childModelName = errorKey.split(".")[0].split("[")[0]
           let childModelIndex = errorKey.split(".")[0].split("[")[1].split("]")[0]
+          childModelIndex = parseInt(childModelIndex) + parseInt(self.deletedNestedNewInstanceFormsCount[childModelName+"_attributes"])
           self.nestedForms[childModelName+"_attributes"][childModelIndex].setErrorKey(childErrorKey, errors[errorKey])
         }
       })
     },
+    resetNestedForms: function(){
+      var self = this;
+      Object.keys(self.nestedForms).forEach(function(childModelKey){
+        self.nestedForms[childModelKey].forEach(function(nestedFormInstance){
+          if(nestedFormInstance.data["_destroy"] == true){
+            var destroyed = true;
+          }
+          nestedFormInstance.setProps(nestedFormInstance.data, null)
+          Vue.set(nestedFormInstance.data)
+          if(destroyed){
+            nestedFormInstance.hideNestedForm = true
+            Vue.set(nestedFormInstance.data, "_destroy", true)
+          }
+        })
+      })
+    },
     removeItem: function(){
       Vue.set(this.data, "_destroy", true)
       this.hideNestedForm = true;
+      if(this.data["id"] == null){
+        this.$parent.deletedNestedNewInstanceFormsCount[this.props["fields_for"]]++;
+      }
+    },
+    addItem: function(key){
+      var templateString = JSON.parse(this.$el.querySelector('#prototype-template-for-'+key).dataset[":template"])
+      if (this.nestedFormRuntimeTemplateDomElements[key] == null){
+        var dom_elem = document.createElement('div')
+        dom_elem.innerHTML = templateString
+        var existingItemsCount;
+        if (this.nestedForms[key] == undefined){
+          existingItemsCount = 0
+        }else{
+          existingItemsCount = this.nestedForms[key].length
+        }
+        dom_elem.querySelector('.matestack-form-fields-for').id = "child-"+existingItemsCount
+        Vue.set(this.nestedFormRuntimeTemplateDomElements, key, dom_elem)
+        Vue.set(this.nestedFormRuntimeTemplates, key, this.nestedFormRuntimeTemplateDomElements[key].outerHTML)
+      }else{
+        var dom_elem = document.createElement('div')
+        dom_elem.innerHTML = templateString
+        var existingItemsCount = this.nestedForms[key].length
+        dom_elem.querySelector('.matestack-form-fields-for').id = "child-"+existingItemsCount
+        this.nestedFormRuntimeTemplateDomElements[key].insertAdjacentHTML(
+          'beforeend',
+          dom_elem.innerHTML
+        )
+        Vue.set(this.nestedFormRuntimeTemplates, key, this.nestedFormRuntimeTemplateDomElements[key].outerHTML)
+      }
     },
     initValues: function () {
       let self = this;
       let data = {};
+
       for (let key in self.$refs) {
         if (key.startsWith("input-component")) {
           self.$refs[key].initialize()
@@ -98,36 +149,9 @@ const componentDef = {
         if (key.startsWith("checkbox-component")) {
           self.$refs[key].initialize()
         }
-        if (key.startsWith("matestack-form-fields-for")) {
-          self.$refs[key].initializeNestedForm()
-        }
       }
     },
-    initializeNestedForm(){
-      const self = this;
-      self.isNestedForm = true;
-      if (this.props["fields_for"] != undefined) {
-        this.data = {}
-        this.initValues()
-        if(this.$parent.data[this.props["fields_for"]] == undefined){
-          this.$parent.data[this.props["fields_for"]] = [];
-        }
-        this.$parent.data[this.props["fields_for"]].push(this.data);
-
-        if(this.$parent.nestedForms[this.props["fields_for"]] == undefined){
-          this.$parent.nestedForms[this.props["fields_for"]] = [];
-        }
-        let existingItemsCount = this.$parent.nestedForms[this.props["fields_for"]].length
-        this.$parent.nestedForms[this.props["fields_for"]].push(this);
-        this.positionInNestedForm = existingItemsCount
 
-        //without the timeout it's somehow not working
-        setTimeout(function () {
-          self.$parent.$forceUpdate();
-          self.$forceUpdate();
-        }, 1);
-      }
-    },
     shouldResetFormOnSuccessfulSubmit() {
       const self = this;
       if (self.props["success"] != undefined && self.props["success"]["reset"] != undefined) {
@@ -261,13 +285,14 @@ const componentDef = {
           if (self.shouldResetFormOnSuccessfulSubmit())
           {
             self.setProps(self.data, null);
+            self.resetNestedForms();
             self.initValues();
           }
         })
         .catch(function (error) {
           self.loading = false;
           if (error.response && error.response.data && error.response.data.errors) {
-            // self.errors = error.response.data.errors;
+            self.errors = error.response.data.errors;
             self.setErrors(error.response.data.errors);
             self.setNestedFormsError(error.response.data.errors);
           }
@@ -324,8 +349,72 @@ const componentDef = {
     },
   },
   mounted: function () {
-    this.initValues();
+    var self = this;
+    if (this.props["fields_for"] != undefined) {
+      this.isNestedForm = true;
+
+      var id = parseInt(self.$el.id.replace("child-", ""))
+
+      this.data = {}
+
+      //initialize nestedForm data in parent form if required
+      if(this.$parent.data[this.props["fields_for"]] == undefined){
+        this.$parent.data[this.props["fields_for"]] = [];
+      }
+      if(this.$parent.nestedForms[this.props["fields_for"]] == undefined){
+        this.$parent.nestedForms[this.props["fields_for"]] = [];
+      }
+      if(this.$parent.deletedNestedNewInstanceFormsCount[this.props["fields_for"]] == undefined){
+        this.$parent.deletedNestedNewInstanceFormsCount[this.props["fields_for"]] = 0
+      }
+
+      //setup data binding for serverside rendered nested forms
+      if (isNaN(id)){
+        this.initValues()
+        this.$parent.data[this.props["fields_for"]].push(this.data);
+        this.$parent.nestedForms[this.props["fields_for"]].push(this);
+      }
+
+      //setup data binding for runtime nested forms (dynamic add via v-runtime-template)
+      if (!isNaN(id)){
+        if(this.$parent.data[this.props["fields_for"]][id] == undefined){
+          //new runtime form
+          this.initValues()
+          this.$parent.data[this.props["fields_for"]].push(this.data);
+          this.$parent.nestedForms[this.props["fields_for"]].push(this);
+        }else{
+          //retreive state for existing runtime form (after remount for example)
+          this.data = this.$parent.data[this.props["fields_for"]][id]
+          if (this.data["_destroy"] == true){
+            this.hideNestedForm = true;
+          }
+          this.$parent.nestedForms[this.props["fields_for"]][id] = this;
+          Object.keys(this.$parent.errors).forEach(function(errorKey){
+            if (errorKey.includes(".")){
+              let childErrorKey = errorKey.split(".")[1]
+              let childModelName = errorKey.split(".")[0].split("[")[0]
+              let childModelIndex = errorKey.split(".")[0].split("[")[1].split("]")[0]
+              childModelIndex = parseInt(childModelIndex) + parseInt(self.$parent.deletedNestedNewInstanceFormsCount[childModelName+"_attributes"])
+              if(childModelName+"_attributes" == self.props["fields_for"] && childModelIndex == id){
+                self.setErrorKey(childErrorKey, self.$parent.errors[errorKey])
+              }
+            }
+          })
+        }
+      }
+
+      //without the timeout it's somehow not working
+      setTimeout(function () {
+        self.$parent.$forceUpdate();
+        self.$forceUpdate();
+      }, 1);
+    } else {
+      this.initValues();
+    }
   },
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
 };
 
 let component = Vue.component("matestack-ui-core-form", componentDef);
diff --git a/lib/matestack/ui/vue_js/components/form/form.rb b/lib/matestack/ui/vue_js/components/form/form.rb
@@ -9,6 +9,8 @@ class Form < Matestack::Ui::VueJs::Vue
             optional :for, :path, :success, :failure, :multipart, :emit, :delay, :errors
             optional :fields_for, :reject_blank
 
+            attr_accessor :prototype_template
+
             # setup form context to allow child components like inputs to access the form configuration
             def initialize(html_tag = nil, text = nil, options = {}, &block)
               previous_form_context = Matestack::Ui::VueJs::Components::Form::Context.form_context
@@ -23,7 +25,7 @@ def component_id
 
             def response
               if context.fields_for
-                div class: "matestack-form-fields-for", "v-show": "hideNestedForm != true" do
+                div class: "matestack-form-fields-for", "v-show": "hideNestedForm != true", id: options[:id] do
                   form_input key: context.for&.class&.primary_key, type: :hidden # required for existing model mapping
                   form_input key: :_destroy, type: :hidden, init: true if context.reject_blank == true
                   yield
