ID-4743 [FIX] Newly added fields are visible in the dropdown for sepa…

…rated address data fields
Fliplet · Sep 19, 2024 · 8f951e7 · 8f951e7
1 parent ffc2d6c
commit 8f951e7
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 51 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -23,7 +23,7 @@
 <div class="form-group clearfix">
   <label>Store each part of the address data in separate fields?</label>
   <div class="checkbox checkbox-icon">
-    <input type="checkbox" name="store-in-separate-fields" v-model="storeInSeparateFields" id="store-in-separate-fields" @click="_getFieldOptions">
+    <input type="checkbox" name="store-in-separate-fields" v-model="storeInSeparateFields" id="store-in-separate-fields">
     <label for="store-in-separate-fields">
       <span class="check"><i class="fa fa-check"></i></span>
       <span class="hide-field">Yes</span>