From a0e03e19ac8f8441b8886f5f3e80391d3832aa59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Fri, 6 Dec 2024 15:16:48 +0100
Subject: [PATCH] Fix multi value field changes not re-evaluating conditional
 fields

---
 .../src/components/ModuleFields/Editor/DateTime.vue |  3 ++-
 .../src/components/ModuleFields/Editor/Email.vue    |  3 ++-
 .../src/components/ModuleFields/Editor/Number.vue   |  3 ++-
 .../src/components/ModuleFields/Editor/Record.vue   |  5 ++++-
 .../src/components/ModuleFields/Editor/Select.vue   |  3 ++-
 .../src/components/ModuleFields/Editor/String.vue   |  9 ++++++---
 .../src/components/ModuleFields/Editor/Url.vue      |  3 ++-
 .../src/components/ModuleFields/Editor/User.vue     |  2 ++
 .../src/components/ModuleFields/Editor/base.vue     |  6 ++++++
 .../src/components/ModuleFields/Editor/multi.vue    | 13 ++++++++++---
 10 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue b/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
index 3002fbc6e..d35a29b7b 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
@@ -40,7 +40,7 @@
       :errors="errors"
     >
       <c-input-date-time
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         :no-date="field.options.onlyTime"
         :no-time="field.options.onlyDate"
         :only-future="field.options.onlyFutureValues"
@@ -51,6 +51,7 @@
           now: $t('general:label.now'),
           today: $t('general:label.today'),
         }"
+        @input="setMultiValue($event, ctx.index)"
       />
     </multi>
 
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Email.vue b/client/web/compose/src/components/ModuleFields/Editor/Email.vue
index aeecb28cd..771385919 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Email.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Email.vue
@@ -40,9 +40,10 @@
       :errors="errors"
     >
       <b-form-input
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         type="email"
         class="mr-2"
+        @input="setMultiValue($event, ctx.index)"
       />
     </multi>
 
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Number.vue b/client/web/compose/src/components/ModuleFields/Editor/Number.vue
index 2fa7d34e4..11c02bebb 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Number.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Number.vue
@@ -44,11 +44,12 @@
         :append="field.options.suffix"
       >
         <b-form-input
-          v-model="value[ctx.index]"
+          :value="value[ctx.index]"
           autocomplete="off"
           type="number"
           number
           class="mr-2"
+          @input="setMultiValue($event, ctx.index)"
         />
       </b-input-group>
     </multi>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Record.vue b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
index fa21c76ee..eec1e6cbf 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
@@ -101,7 +101,6 @@
           :get-option-label="getOptionLabel"
           :disabled="!module"
           :loading="processing"
-          :clearable="false"
           :filterable="false"
           :searchable="searchable"
           :selectable="isSelectable"
@@ -338,6 +337,8 @@ export default {
           }
         }
       }
+
+      this.$emit('change', this.value)
     },
 
     isSelectable ({ recordID } = {}) {
@@ -510,6 +511,8 @@ export default {
       if (this.$refs.singleSelect) {
         this.$refs.singleSelect._data._value = undefined
       }
+
+      this.$emit('change', this.value)
     },
 
     goToPage (next = true) {
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Select.vue b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
index 0cd5df0f3..a7bdb5047 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
@@ -76,12 +76,13 @@
         <template #default="ctx">
           <c-input-select
             v-if="field.options.selectType === 'each'"
-            v-model="value[ctx.index]"
+            :value="value[ctx.index]"
             :options="selectOptions"
             :reduce="o => o.value"
             :placeholder="$t('kind.select.placeholder')"
             :selectable="isSelectable"
             label="text"
+            @input="setMultiValue($event, ctx.index)"
           />
 
           <span v-else>{{ findLabel(value[ctx.index]) }}</span>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/String.vue b/client/web/compose/src/components/ModuleFields/Editor/String.vue
index 70ed5f17a..0b7444ecd 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/String.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/String.vue
@@ -42,20 +42,23 @@
     >
       <c-rich-text-input
         v-if="field.options.useRichTextEditor"
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         class="mr-2"
+        @input="setMultiValue($event, ctx.index)"
       />
 
       <b-form-textarea
         v-else-if="field.options.multiLine"
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         class="mr-2"
+        @input="setMultiValue($event, ctx.index)"
       />
 
       <b-form-input
         v-else
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         class="mr-2"
+        @input="setMultiValue($event, ctx.index)"
       />
     </multi>
 
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Url.vue b/client/web/compose/src/components/ModuleFields/Editor/Url.vue
index 7e3b4de6a..6454a50f0 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Url.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Url.vue
@@ -39,12 +39,13 @@
       :errors="errors"
     >
       <b-form-input
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         type="url"
         class="mr-2"
         :placeholder="$t('kind.url.example')"
         :formatter="fixUrl"
         lazy-formatter
+        @input="setMultiValue($event, ctx.index)"
       />
     </multi>
     <template
diff --git a/client/web/compose/src/components/ModuleFields/Editor/User.vue b/client/web/compose/src/components/ModuleFields/Editor/User.vue
index 82f5e3814..4a6509e56 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/User.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/User.vue
@@ -323,6 +323,8 @@ export default {
           this.value = undefined
         }
       }
+
+      this.$emit('change', this.value)
     },
 
     /**
diff --git a/client/web/compose/src/components/ModuleFields/Editor/base.vue b/client/web/compose/src/components/ModuleFields/Editor/base.vue
index ec3e7a1be..078d85dcd 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/base.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/base.vue
@@ -145,6 +145,12 @@ export default {
     getFieldCypressId (field) {
       return `field-${field.toLowerCase().split(' ').join('-')}`
     },
+
+    setMultiValue (value, index) {
+      this.$set(this.value, index, value)
+
+      this.$emit('change', this.value)
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/multi.vue b/client/web/compose/src/components/ModuleFields/Editor/multi.vue
index 030b72b63..6352533e6 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/multi.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/multi.vue
@@ -15,7 +15,7 @@
       <div
         v-for="(v, index) of val"
         :key="index"
-        class="d-flex w-100 align-items-center mb-1"
+        class="d-flex w-100 align-items-center mb-1 px-2"
       >
         <font-awesome-icon
           v-b-tooltip.noninteractive.hover="{ title: $t('tooltip.dragAndDrop'), container: '#body' }"
@@ -47,7 +47,7 @@
       variant="primary"
       size="sm"
       :class="{ 'mt-2': val.length }"
-      @click="val.push(defaultValue)"
+      @click="addValue()"
     >
       + {{ $t('label.addValue') }}
     </b-button>
@@ -114,13 +114,20 @@ export default {
   },
 
   methods: {
+    addValue () {
+      this.val.push(this.defaultValue)
+
+      this.$emit('update:value', this.val)
+    },
+
     removeValue (index) {
       if (index > -1) {
         this.val.splice(index, 1)
       }
+
+      this.$emit('update:value', this.val)
     },
   },
-
 }
 </script>
 <style lang="scss" scoped>