fix: Fixed valueTemplate config not work for array widgets

fix ncform#107
dntzhang · Oct 24, 2019 · 1eafcc2 · 1eafcc2
1 parent da8ee5c
commit 1eafcc2
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 6 deletions.
diff --git a/packages/ncform-common/src/mixins/vue/layout-array-mixin.js b/packages/ncform-common/src/mixins/vue/layout-array-mixin.js
@@ -1,5 +1,6 @@
 import _cloneDeep from "lodash-es/cloneDeep";
 import _template from "lodash-es/template";
+import _get from "lodash-es/get";
 import extend from "extend";
 import ncformUtils from "../../ncform-utils";
 
@@ -104,6 +105,23 @@ export default {
     }
   },
 
+  watch: {
+    'schema.value': {
+      handler(newVal) {
+        if (newVal && newVal.length > 0 && !_get(newVal, '[0].__dataSchema')) { // rebuild the array
+          this.schema.value = [];
+          this.$nextTick(() => {
+            this.schema.value = newVal;
+            this.schema.value.forEach((item, idx) => {
+              this.addItem(idx);
+            });
+          })
+        }
+      },
+      immediate: true
+    }
+  },
+
   methods: {
     _analyzeVal(val) {
       return ncformUtils.smartAnalyzeVal(val, {

diff --git a/packages/ncform-e2e/ncform/cypress/integration/examples/valueTemplate.spec.js b/packages/ncform-e2e/ncform/cypress/integration/examples/valueTemplate.spec.js
@@ -46,4 +46,42 @@ context('ValueTemplate', () => {
     })
   })
 
+  it('Array widgets support follow feature', () => {
+    let id = md5('Array widgets support follow feature');
+    cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('label').contains('test1').next().find('input').should('have.value', '["daniel", "sarah"]');
+      cy.get('legend').contains('array1').parent().within(() => {
+        cy.get('input').first().should('have.value', 'daniel');
+        cy.get('input').last().should('have.value', 'sarah');
+      });
+      cy.get('label').contains('test1').next().find('input').clear().type('["hi daniel", "hello sarah"]');
+      cy.get('legend').contains('array1').parent().within(() => {
+        cy.get('input').first().should('have.value', 'hi daniel');
+        cy.get('input').last().should('have.value', 'hello sarah');
+      });
+      cy.get('label').contains('test1').next().find('input').clear().type('["one daniel"]');
+      cy.get('legend').contains('array1').parent().within(() => {
+        cy.get('input').should('have.length', 1);
+        cy.get('input').first().should('have.value', 'one daniel');
+      });
+
+      cy.get('label').contains('test2').next().find('input').should('have.value', '[{"text": "hi"}, {"text": "hello"}]');
+      cy.get('legend').contains('array2').parent().within(() => {
+        cy.get('input').should('have.length', 1);
+        cy.get('input').first().should('have.value', 'init');
+      });
+
+      cy.get('label').contains('test2').next().find('input').clear().type('[{{}"text": "hi daniel"}, {{}"text": "hello"}]');
+      cy.get('legend').contains('array2').parent().within(() => {
+        cy.get('input').first().should('have.value', 'hi daniel');
+        cy.get('input').last().should('have.value', 'hello');
+      });
+      cy.get('label').contains('test2').next().find('input').clear().type('[{{}"text": "one daniel"}]');
+      cy.get('legend').contains('array2').parent().within(() => {
+        cy.get('input').should('have.length', 1);
+        cy.get('input').first().should('have.value', 'one daniel');
+      });
+    })
+  })
+
 })
diff --git a/packages/ncform-theme-elementui/src/components/layout-comps/array.vue b/packages/ncform-theme-elementui/src/components/layout-comps/array.vue
@@ -125,7 +125,7 @@
       _supportItemsCollapse() {
         if (!this.mergeConfig.disableItemCollapse) {
           this.schema.value.forEach(dataItem => {
-            if (dataItem.__dataSchema._expand === undefined)
+            if (dataItem.__dataSchema && dataItem.__dataSchema._expand === undefined)
               this.$set(dataItem.__dataSchema, '_expand', !this.mergeConfig.itemCollapse);
           })
         }

diff --git a/packages/ncform/examples/components/vue-ncform/_valueTemplate.html b/packages/ncform/examples/components/vue-ncform/_valueTemplate.html
@@ -153,7 +153,66 @@ <h4>[CASE] {{ item.title }}</h4>
                   }
                 }
               }
-            }
+            },
+            {
+              id: md5('Array widgets support follow feature'),
+              title: 'Array widgets support follow feature',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  test1: {
+                    type: 'string',
+                    value: '["daniel", "sarah"]',
+                    ui: {
+                      columns: 6
+                    }
+                  },
+                  array1: {
+                    type: 'array',
+                    valueTemplate: function(formData) {
+                      try {
+                        return formData.test1 ? JSON.parse(formData.test1) : [];
+                      } catch(err) {
+                        return [];
+                      }
+                    },
+                    items: {
+                      type: 'string'
+                    }
+                  },
+                  test2: {
+                    type: 'string',
+                    value: '[{"text": "hi"}, {"text": "hello"}]',
+                    ui: {
+                      columns: 6
+                    }
+                  },
+                  array2: {
+                    type: 'array',
+                    value: [{text: 'init'}],
+                    valueTemplate: function(formData) {
+                      try {
+                        return formData.test2 ? JSON.parse(formData.test2) : [];
+                      } catch(err) {
+                        return [];
+                      }
+                    },
+                    items: {
+                      type: 'object',
+                      properties: {
+                        text: {
+                          type: 'string'
+                        }
+                      }
+                    },
+                    ui: {
+                      widget: 'array-table'
+                    }
+                  }
+                }
+              }
+            },
           ]
         }
       });

diff --git a/packages/ncform/src/components/vue-ncform/form-item.vue b/packages/ncform/src/components/vue-ncform/form-item.vue
@@ -107,6 +107,7 @@ import "./layout-comps";
 import "./control-comps";
 import ncformCommon from '@ncform/ncform-common';
 import _get from "lodash-es/get";
+import _isArray from "lodash-es/isArray";
 
 const ncformUtils = ncformCommon.ncformUtils;
 
@@ -247,14 +248,15 @@ export default {
       handler: function(newVal, oldVal) {
         if (newVal !== undefined) {
           if (oldVal === undefined || JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-            if (this.$options._init4valueTemplate && this.schema.value) { // Prevent init value from being overwritten
+            if (!(this.$options._init4valueTemplate && (_isArray(this.schema.value) ? this.schema.value.length > 0 : this.schema.value))) { // Prevent init value from being overwritten
+              this.schema.value = newVal;
+            }
+            if (this.$options._init4valueTemplate) {
               // User nextTick will cause the init value to be incorrect when field item in list
               // so here use setTimeout instead
               setTimeout(() => {
                 this.$options._init4valueTemplate = false;
               }, 10)
-            } else {
-              this.schema.value = newVal;
             }
           }
         }

diff --git a/packages/ncform/src/components/vue-ncform/layout-comps/array.vue b/packages/ncform/src/components/vue-ncform/layout-comps/array.vue
@@ -95,7 +95,7 @@
       _supportItemsCollapse() {
         if (!this.mergeConfig.disableItemCollapse) {
           this.schema.value.forEach(dataItem => {
-            if (dataItem.__dataSchema._expand === undefined)
+            if (dataItem.__dataSchema && dataItem.__dataSchema._expand === undefined)
               this.$set(dataItem.__dataSchema, '_expand', !this.mergeConfig.itemCollapse);
           })
         }