From 8f951e721c1d6ef444624419342668c5c48d316f Mon Sep 17 00:00:00 2001 From: armine Date: Thu, 19 Sep 2024 16:11:12 +0400 Subject: [PATCH] ID-4743 [FIX] Newly added fields are visible in the dropdown for separated address data fields --- js/components/address.js | 50 ++++++++----------- js/interface.templates.js | 2 +- js/libs/builder.js | 21 ++++++++ js/libs/core.js | 19 ------- .../configurations/address.interface.hbs | 2 +- 5 files changed, 43 insertions(+), 51 deletions(-) diff --git a/js/components/address.js b/js/components/address.js index 17aa1b36..2ddb03d7 100644 --- a/js/components/address.js +++ b/js/components/address.js @@ -81,14 +81,14 @@ Fliplet.FormBuilder.field('address', { }; }, created: function() { + Fliplet.Hooks.on('beforeFormSubmit', this.onBeforeSubmit); + this.separateFieldsName.forEach((field) => { if (!this.selectedFieldOptions[field.key]) { this.$set(this.selectedFieldOptions, field.key, ''); } }); this.updateDisabledOptions(); - - Fliplet.Hooks.on('beforeFormSubmit', this.onBeforeSubmit); }, destroyed: function() { Fliplet.Hooks.off('beforeFormSubmit', this.onBeforeSubmit); @@ -186,15 +186,7 @@ Fliplet.FormBuilder.field('address', { } }); }, - updateDisabledOptions: function() { - var fields = this.$parent.fields; - - this.fieldOptions = fields.map(function(field) { - if (field._type !== 'flButtons' && field._type !== 'flAddress') { - return { label: field.label, disabled: false }; - } - }).filter(Boolean); - + updateSelectedFieldsOptions: function() { Object.keys(this.selectedFieldOptions).forEach(key => { const selectedFieldLabel = this.selectedFieldOptions[key]; const isValidOption = this.fieldOptions.find(option => option.label === selectedFieldLabel); @@ -203,24 +195,28 @@ Fliplet.FormBuilder.field('address', { this.selectedFieldOptions[key] = ''; } }); + }, + updateFieldOptions: function() { + var fields = this.$parent.fields; - const selectedValues = Object.values(this.selectedFieldOptions) - .filter(value => value && this.fieldOptions.some(option => option.label === value)) // Check if value exists in fieldOptions + this.fieldOptions = fields.map(function(field) { + if (field._type !== 'flButtons' && field._type !== 'flAddress') { + return { label: field.label, disabled: false }; + } + }).filter(Boolean); + }, + updateDisabledOptions: function() { + this.updateFieldOptions(); + this.updateSelectedFieldsOptions(); + + const assignedValues = Object.values(this.fieldOptions.selectedFieldOptions) + .filter(value => value && this.fieldOptions.some(option => option.label === value)) .map(value => value); this.fieldOptions.forEach(option => { - if (selectedValues.includes(option.label)) { - option.disabled = true; - } else { - option.disabled = false; - } + option.disabled = assignedValues.includes(option.label); }); }, - resetOptionsOnSelectOne: function(key) { - if (this.selectedFieldOptions[key] === '') { - this.updateDisabledOptions(); - } - }, initAutocomplete: async function(input, countryRestrictions) { this.addressField = Fliplet.UI.AddressField(this.$refs.addressField); @@ -286,19 +282,13 @@ Fliplet.FormBuilder.field('address', { this.lastChosenAutocompleteValue = val.label; this.suggestionSelected = true; val = val.label; - } else { + } else if (val.trim() !== this.lastChosenAutocompleteValue) { this.initAutocomplete(val, this.countryRestrictions); this.onChange(); } this.addressField.set(val); this.$emit('_input', this.name, val); - }, - selectedFieldOptions: { - handler: function() { - this.updateDisabledOptions(); - }, - deep: true } } }); diff --git a/js/interface.templates.js b/js/interface.templates.js index 2beaf137..8d718ef2 100644 --- a/js/interface.templates.js +++ b/js/interface.templates.js @@ -3,7 +3,7 @@ this["Fliplet"]["Widget"] = this["Fliplet"]["Widget"] || {}; this["Fliplet"]["Widget"]["Templates"] = this["Fliplet"]["Widget"]["Templates"] || {}; this["Fliplet"]["Widget"]["Templates"]["templates.configurations.address"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { - return "\n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n

\n Select the form field you want each part of the address data written to. Create the form fields before selecting them.\n

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

\n Select the form field you want each part of the address data written to. Create the form fields before selecting them.\n

\n
\n \n \n
\n
\n\n
\n \n \n
"; },"useData":true}); this["Fliplet"]["Widget"]["Templates"]["templates.configurations.buttons"] = 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 9a8b7d8e..751243a5 100644 --- a/js/libs/builder.js +++ b/js/libs/builder.js @@ -280,6 +280,27 @@ Fliplet().then(function() { Fliplet.Studio.emit('widget-cancel-label-update'); Fliplet.Widget.toggleCancelButton(false); this.$forceUpdate(); + + if (this.activeField._type === 'flAddress') { + this.getAddressFieldOptions(this.activeField); + this.updateAddressFieldOptions(this.activeField); + } + }, + getAddressFieldOptions: function(addressField) { + addressField.fieldOptions = this.fields.map(function(field) { + if (field._type !== 'flButtons' && field._type !== 'flAddress') { + return { label: field.label, disabled: false }; + } + }).filter(Boolean); + }, + updateAddressFieldOptions: function(addressField) { + const assignedValues = Object.values(addressField.selectedFieldOptions) + .filter(value => value && addressField.fieldOptions.some(option => option.label === value)) // Check if value exists in fieldOptions + .map(value => value); + + addressField.fieldOptions.forEach(option => { + option.disabled = assignedValues.includes(option.label); + }); }, closeEdit: function() { this.activeFieldConfigType = null; diff --git a/js/libs/core.js b/js/libs/core.js index 81f2b814..f72cb0d6 100644 --- a/js/libs/core.js +++ b/js/libs/core.js @@ -775,7 +775,6 @@ Fliplet.FormBuilder = (function() { if (componentName === 'flAddress') { this._initAddressTypeahead(); - this._getFieldOptions(); } }; } @@ -888,32 +887,14 @@ Fliplet.FormBuilder = (function() { component.methods.openFilePicker = component.methods._openFilePicker; } - component.methods._getFieldOptions = function() { - var fields = this.$parent.fields; - - this.fieldOptions = fields.map(function(field) { - if (field._type !== 'flButtons' && field._type !== 'flAddress') { - return { label: field.label, disabled: false }; - } - }).filter(Boolean); - this._updateDisabledOptions(); - }; - component.methods._updateDisabledOptions = function() { - console.log(this.fieldOptions, 'fieeeeeeeeeeeeldoptions'); - const assignedValues = Object.values(this.selectedFieldOptions) .filter(value => value && this.fieldOptions.some(option => option.label === value)) // Check if value exists in fieldOptions .map(value => value); - console.log(this.selectedFieldOptions, 'this.selectedFieldOptions'); - - console.log(assignedValues, 'assignedValues'); - this.fieldOptions.forEach(option => { option.disabled = assignedValues.includes(option.label); }); - console.log(this.fieldOptions, 'f222222222222222222222 ieeeeeeeeeeeeldoptions'); }; component.methods._initAddressTypeahead = function() { diff --git a/templates/configurations/address.interface.hbs b/templates/configurations/address.interface.hbs index e693eeb2..8add403a 100644 --- a/templates/configurations/address.interface.hbs +++ b/templates/configurations/address.interface.hbs @@ -23,7 +23,7 @@
- +