From 6efa998df2a8692e5e5cce3e432c16316fa4ec78 Mon Sep 17 00:00:00 2001 From: miqur Date: Tue, 6 Aug 2019 00:02:35 +0300 Subject: [PATCH] update-form-builder-fields-4768 --- js/interface.templates.js | 4 +-- js/libs/builder.js | 17 ++++++----- js/libs/core.js | 29 +++++++++---------- templates/configurations/form.interface.hbs | 31 +++++++++------------ 4 files changed, 36 insertions(+), 45 deletions(-) diff --git a/js/interface.templates.js b/js/interface.templates.js index abf24832..be0c4bf4 100644 --- a/js/interface.templates.js +++ b/js/interface.templates.js @@ -30,13 +30,13 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.form"] = Handle return "
\n
\n \n
\n
\n \n
\n
\n"; },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", buffer = - "
\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n Customize field name \n \n
\n
\n \n

\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n
\n
\n \n Auto-match with field label\n \n
\n
\n \n

\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n\n"; + "\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n

\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n
\n
\n Customize field name \n
\n
\n Auto-match with field label\n
\n
\n

{{name}}

\n \n

\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n\n"; stack1 = ((helper = (helper = helpers.hasOptions || (depth0 != null ? depth0.hasOptions : depth0)) != null ? helper : alias2),(options={"name":"hasOptions","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper)); if (!helpers.hasOptions) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)} if (stack1 != null) { buffer += stack1; } return buffer + "\n
\n " + ((stack1 = ((helper = (helper = helpers.template || (depth0 != null ? depth0.template : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"template","hash":{},"data":data}) : helper))) != null ? stack1 : "") - + "\n
\n\n
\n\n
\n \n
\n"; + + "\n
\n\n \n\n
\n \n
\n"; },"useData":true}); this["Fliplet"]["Widget"]["Templates"]["templates.configurations.horizontalRule"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { diff --git a/js/libs/builder.js b/js/libs/builder.js index d9ccd645..5166e66f 100644 --- a/js/libs/builder.js +++ b/js/libs/builder.js @@ -162,18 +162,17 @@ var app = new Vue({ $(event.item).remove(); - var i = (_.max(_.compact(_.map(this.fields, function (field) { - var idx = field.name.match(/^field-([0-9]+)/); - if (idx && idx.length) { - return parseInt(idx[1], 10); - } - }))) || 0) + 1; + var fieldsWithSameName = _.filter(this.fields, function(item) { + return item.name.match(component.name.replace('(', '\\(').replace(')', '\\)')); + }); + + var index = fieldsWithSameName.length; - this.fields.splice(event.newIndex, 0, { + return this.fields.splice(event.newIndex, 0, { _type: componentName, _submit: typeof component.submit !== 'undefined' ? component.submit : true, - name: 'field-' + i, - label: component.name, + name: component.name + (index ? '-' + index : ''), + label: component.name + (index ? '-' + index : ''), value: value.default || value.type() }); } diff --git a/js/libs/core.js b/js/libs/core.js index e91e8409..97be337d 100644 --- a/js/libs/core.js +++ b/js/libs/core.js @@ -159,11 +159,7 @@ Fliplet.FormBuilder = (function() { // On submit event component.methods._onSubmit = function() { - if (this.name === '') { - this.name = this.label; - } - - if (this._fieldNameError) { + if (this._fieldNameError || this._fieldLabelError) { return; } @@ -183,13 +179,6 @@ Fliplet.FormBuilder = (function() { component.methods.onSubmit = component.methods._onSubmit; } - if (!component.mounted) { - component.mounted = function() { - this._showNameField = this.name !== this.label; - this.initTooltip(); - }; - } - component.props._fields = { type: Array }; @@ -227,7 +216,7 @@ Fliplet.FormBuilder = (function() { component.computed._fieldLabelError = function() { if (!this.label) { - return 'Please provide a Field name & label'; + return 'Please provide a Field Label'; } var existing = _.findIndex(this._fields, { @@ -235,7 +224,7 @@ Fliplet.FormBuilder = (function() { }); if (existing > -1 && existing !== this._idx) { - return this.name + ' is taken. Please use another Field Name.'; + return this.name + ' is taken. Please use another Field Label.'; } return ''; @@ -243,13 +232,21 @@ Fliplet.FormBuilder = (function() { component.methods._addCustomName = function() { this._showNameField = !this._showNameField; - this.name = this.label; this.initTooltip(); }; - + if (!component.methods.addCustomName) { component.methods.addCustomName = component.methods._addCustomName; } + + component.methods._compareFieldName = function() { + this.name = this.label; + this.initTooltip(); + }; + + if (!component.methods.compareFieldName) { + component.methods.compareFieldName = component.methods._compareFieldName; + } component.methods._initTooltip = function() { var $vm = this; diff --git a/templates/configurations/form.interface.hbs b/templates/configurations/form.interface.hbs index cb3f3cb1..7af6ce4e 100644 --- a/templates/configurations/form.interface.hbs +++ b/templates/configurations/form.interface.hbs @@ -1,40 +1,35 @@
-
+
- - -
-
- Customize field name - +
-

+

-
+
-
+
-
- - Auto-match with field label - +
+ Customize field name +
+
+ Auto-match with field label
- +

\{{name}}

+

@@ -80,6 +75,6 @@
- +
\ No newline at end of file