fixed error mapping and added specs for nested form support

Author: jonasjabari

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

@@ -19,7 +19,7 @@ const componentDef = {
       hideNestedForm: false,
       nestedFormRuntimeTemplates: {},
       nestedFormRuntimeTemplateDomElements: {},
-      deletedNestedNewInstanceFormsCount: {},
+      deletedNestedForms: {},
       nestedFormRuntimeId: ""
     };
   },
@@ -69,18 +69,28 @@ const componentDef = {
     setErrorKey: function(key, value){
       Vue.set(this.errors, key, value);
     },
+    flushErrors: function(key, value){
+      this.errors = {};
+    },
     setNestedFormsError: function(errors){
       let self = this;
       Object.keys(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.deletedNestedNewInstanceFormsCount[childModelName+"_attributes"])
-          self.nestedForms[childModelName+"_attributes"][childModelIndex].setErrorKey(childErrorKey, errors[errorKey])
+          let mappedChildModelIndex = self.mapToNestedForms(parseInt(childModelIndex), childModelName+"_attributes")
+          self.nestedForms[childModelName+"_attributes"][mappedChildModelIndex].setErrorKey(childErrorKey, errors[errorKey])
         }
       })
     },
+    mapToNestedForms: function(serverIndex, nestedFormKey){
+      var index = serverIndex;
+      while(this.deletedNestedForms[nestedFormKey].includes(index)){
+        index++;
+      }
+      return index;
+    },
     resetNestedForms: function(){
       var self = this;
       Object.keys(self.nestedForms).forEach(function(childModelKey){
@@ -89,6 +99,7 @@ const componentDef = {
             var destroyed = true;
           }
           nestedFormInstance.setProps(nestedFormInstance.data, null)
+          nestedFormInstance.initValues()
           Vue.set(nestedFormInstance.data)
           if(destroyed){
             nestedFormInstance.hideNestedForm = true
@@ -106,9 +117,10 @@ const componentDef = {
       }else{
         primaryKey = id;
       }
-      if(this.data[primaryKey] == null){
-        this.$parent.deletedNestedNewInstanceFormsCount[this.props["fields_for"]]++;
-      }
+      // if(this.data[primaryKey] == null){
+        var id = parseInt(this.nestedFormRuntimeId.replace("_"+this.props["fields_for"]+"_child_", ""));
+        this.$parent.deletedNestedForms[this.props["fields_for"]].push(id);
+      // }
     },
     addItem: function(key){
       var templateString = JSON.parse(this.$el.querySelector('#prototype-template-for-'+key).dataset[":template"])
@@ -121,14 +133,14 @@ const componentDef = {
         }else{
           existingItemsCount = this.nestedForms[key].length
         }
-        dom_elem.querySelector('.matestack-form-fields-for').id = "child-"+existingItemsCount
+        dom_elem.querySelector('.matestack-form-fields-for').id = key+"_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
+        dom_elem.querySelector('.matestack-form-fields-for').id = key+"_child_"+existingItemsCount
         this.nestedFormRuntimeTemplateDomElements[key].insertAdjacentHTML(
           'beforeend',
           dom_elem.innerHTML
@@ -289,6 +301,8 @@ const componentDef = {
             return;
           }
 
+          self.flushErrors();
+
           if (self.shouldResetFormOnSuccessfulSubmit())
           {
             self.setProps(self.data, null);
@@ -360,9 +374,6 @@ const componentDef = {
     if (this.props["fields_for"] != undefined) {
       this.isNestedForm = true;
 
-      var id = parseInt(self.$el.id.replace("child-", ""));
-      this.nestedFormRuntimeId = Math.floor(Math.random() * 1000);;
-
       this.data = { "_destroy": false };
 
       //initialize nestedForm data in parent form if required
@@ -372,19 +383,25 @@ const componentDef = {
       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
+      if(this.$parent.deletedNestedForms[this.props["fields_for"]] == undefined){
+        this.$parent.deletedNestedForms[this.props["fields_for"]] = []
       }
 
+      var id = parseInt(self.$el.id.replace(this.props["fields_for"]+"_child_", ""));
+
       //setup data binding for serverside rendered nested forms
       if (isNaN(id)){
+        id = this.$parent.nestedForms[this.props["fields_for"]].length
+        this.nestedFormRuntimeId = "_"+this.props["fields_for"]+"_child_"+id
+        this.$el.id = this.props["fields_for"]+"_child_"+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)){
+        this.nestedFormRuntimeId = "_"+this.props["fields_for"]+"_child_"+id
         if(this.$parent.data[this.props["fields_for"]][id] == undefined){
           //new runtime form
           this.initValues()
@@ -402,8 +419,8 @@ 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.$parent.deletedNestedNewInstanceFormsCount[childModelName+"_attributes"])
-              if(childModelName+"_attributes" == self.props["fields_for"] && childModelIndex == id){
+              let mappedChildModelIndex = self.$parent.mapToNestedForms(parseInt(childModelIndex), childModelName+"_attributes")
+              if(childModelName+"_attributes" == self.props["fields_for"] && mappedChildModelIndex == id){
                 self.setErrorKey(childErrorKey, self.$parent.errors[errorKey])
               }
             }

spec/test/components/dynamic/form/checkbox/checkbox_spec.rb

@@ -128,7 +128,7 @@ def self.hash_options
       end
 
       class ExamplePage < Matestack::Ui::Page
-        
+
         def response
           @test_model = TestModel.new
           @test_model.some_data = ["Array Option 2"]

spec/test/components/dynamic/form/input/input_spec.rb

@@ -103,7 +103,6 @@ def test_model_params
 
     specify do
       test_model = TestModel.create title: "Foo", description: "This is a very nice foo!"
-      p test_model.id
       visit Rails.application.routes.url_helpers.some_test_model_path(test_model)
       expect(find_field(:title).value).to eq "Foo"