fix: Update inconsistent behaviour of create and edit automation rules (#10197)
When Vue 3 is used with options API, any assignment to `this.<something>` is converted to a Proxy before assignment. This is fine as long as we are in the options context, problem arises when we access this in a `composable` any mutations on the object doesn't behave correctly as expected, this PR fixes that by moving the `automation` object inside the composable and using it in the options. > Another option to fix such an issue is to make the object non-reactive, like done in places where we have `editorView`, but that wasn't viable here --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Shivam Mishra
@@ -12,11 +12,29 @@ import {
|
||||
getCustomAttributeType,
|
||||
showActionInput,
|
||||
} from 'dashboard/helper/automationHelper';
|
||||
import {
|
||||
AUTOMATION_RULE_EVENTS,
|
||||
AUTOMATION_ACTION_TYPES,
|
||||
AUTOMATIONS,
|
||||
} from './constants';
|
||||
import { AUTOMATION_RULE_EVENTS, AUTOMATION_ACTION_TYPES } from './constants';
|
||||
|
||||
const start_value = {
|
||||
name: null,
|
||||
description: null,
|
||||
event_name: 'conversation_created',
|
||||
conditions: [
|
||||
{
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
custom_attribute_type: '',
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
action_name: 'assign_agent',
|
||||
action_params: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FilterInputBox,
|
||||
@@ -31,6 +49,8 @@ export default {
|
||||
emits: ['saveAutomation'],
|
||||
setup() {
|
||||
const {
|
||||
automation,
|
||||
automationTypes,
|
||||
onEventChange,
|
||||
getConditionDropdownValues,
|
||||
appendNewCondition,
|
||||
@@ -41,8 +61,10 @@ export default {
|
||||
resetAction,
|
||||
getActionDropdownValues,
|
||||
manifestCustomAttributes,
|
||||
} = useAutomation();
|
||||
} = useAutomation(start_value);
|
||||
return {
|
||||
automation,
|
||||
automationTypes,
|
||||
onEventChange,
|
||||
getConditionDropdownValues,
|
||||
appendNewCondition,
|
||||
@@ -57,31 +79,10 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
|
||||
automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
|
||||
automationRuleEvents: AUTOMATION_RULE_EVENTS,
|
||||
automationMutated: false,
|
||||
show: true,
|
||||
automation: {
|
||||
name: null,
|
||||
description: null,
|
||||
event_name: 'conversation_created',
|
||||
conditions: [
|
||||
{
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
custom_attribute_type: '',
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
action_name: 'assign_agent',
|
||||
action_params: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
showDeleteConfirmationModal: false,
|
||||
allCustomAttributes: [],
|
||||
mode: 'create',
|
||||
@@ -116,7 +117,7 @@ export default {
|
||||
this.$store.dispatch('labels/get');
|
||||
this.$store.dispatch('campaigns/get');
|
||||
this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
|
||||
this.manifestCustomAttributes(this.automationTypes);
|
||||
this.manifestCustomAttributes();
|
||||
},
|
||||
methods: {
|
||||
getAttributes,
|
||||
@@ -238,15 +239,8 @@ export default {
|
||||
? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
|
||||
: ''
|
||||
"
|
||||
@reset-filter="
|
||||
resetFilter(
|
||||
automation,
|
||||
automationTypes,
|
||||
i,
|
||||
automation.conditions[i]
|
||||
)
|
||||
"
|
||||
@remove-filter="removeFilter(automation, i)"
|
||||
@reset-filter="resetFilter(i, automation.conditions[i])"
|
||||
@remove-filter="removeFilter(i)"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
@@ -254,7 +248,7 @@ export default {
|
||||
color-scheme="success"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@click="appendNewCondition(automation)"
|
||||
@click="appendNewCondition"
|
||||
>
|
||||
{{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
@@ -289,8 +283,8 @@ export default {
|
||||
? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
|
||||
: ''
|
||||
"
|
||||
@reset-action="resetAction(automation, i)"
|
||||
@remove-action="removeAction(automation, i)"
|
||||
@reset-action="resetAction(i)"
|
||||
@remove-action="removeAction(i)"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
@@ -298,7 +292,7 @@ export default {
|
||||
color-scheme="success"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@click="appendNewAction(automation)"
|
||||
@click="appendNewAction"
|
||||
>
|
||||
{{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useAutomation } from 'dashboard/composables/useAutomation';
|
||||
import { useEditableAutomation } from 'dashboard/composables/useEditableAutomation';
|
||||
import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
|
||||
import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
|
||||
import {
|
||||
@@ -14,11 +15,7 @@ import {
|
||||
} from 'dashboard/helper/automationHelper';
|
||||
import { validateAutomation } from 'dashboard/helper/validations';
|
||||
|
||||
import {
|
||||
AUTOMATION_RULE_EVENTS,
|
||||
AUTOMATION_ACTION_TYPES,
|
||||
AUTOMATIONS,
|
||||
} from './constants';
|
||||
import { AUTOMATION_RULE_EVENTS, AUTOMATION_ACTION_TYPES } from './constants';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -38,6 +35,8 @@ export default {
|
||||
emits: ['saveAutomation'],
|
||||
setup() {
|
||||
const {
|
||||
automation,
|
||||
automationTypes,
|
||||
onEventChange,
|
||||
getConditionDropdownValues,
|
||||
appendNewCondition,
|
||||
@@ -47,10 +46,12 @@ export default {
|
||||
resetFilter,
|
||||
resetAction,
|
||||
getActionDropdownValues,
|
||||
formatAutomation,
|
||||
manifestCustomAttributes,
|
||||
} = useAutomation();
|
||||
const { formatAutomation } = useEditableAutomation();
|
||||
return {
|
||||
automation,
|
||||
automationTypes,
|
||||
onEventChange,
|
||||
getConditionDropdownValues,
|
||||
appendNewCondition,
|
||||
@@ -66,12 +67,10 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
|
||||
automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
|
||||
automationRuleEvents: AUTOMATION_RULE_EVENTS,
|
||||
automationMutated: false,
|
||||
show: true,
|
||||
automation: null,
|
||||
showDeleteConfirmationModal: false,
|
||||
allCustomAttributes: [],
|
||||
mode: 'edit',
|
||||
@@ -99,7 +98,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.manifestCustomAttributes(this.automationTypes);
|
||||
this.manifestCustomAttributes();
|
||||
this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
|
||||
|
||||
this.automation = this.formatAutomation(
|
||||
@@ -223,15 +222,8 @@ export default {
|
||||
? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
|
||||
: ''
|
||||
"
|
||||
@reset-filter="
|
||||
resetFilter(
|
||||
automation,
|
||||
automationTypes,
|
||||
i,
|
||||
automation.conditions[i]
|
||||
)
|
||||
"
|
||||
@remove-filter="removeFilter(automation, i)"
|
||||
@reset-filter="resetFilter(i, automation.conditions[i])"
|
||||
@remove-filter="removeFilter(i)"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
@@ -239,7 +231,7 @@ export default {
|
||||
color-scheme="success"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@click="appendNewCondition(automation)"
|
||||
@click="appendNewCondition"
|
||||
>
|
||||
{{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
@@ -270,8 +262,8 @@ export default {
|
||||
: ''
|
||||
"
|
||||
:initial-file-name="getFileName(action, automation.files)"
|
||||
@reset-action="resetAction(automation, i)"
|
||||
@remove-action="removeAction(automation, i)"
|
||||
@reset-action="resetAction(i)"
|
||||
@remove-action="removeAction(i)"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
@@ -279,7 +271,7 @@ export default {
|
||||
color-scheme="success"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@click="appendNewAction(automation)"
|
||||
@click="appendNewAction"
|
||||
>
|
||||
{{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
|
||||
Reference in New Issue
Block a user