LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Rewrite automations/methodsMixin to a composable (#9956)

Browse Source 
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
Sivin Varghese
2024-08-27 12:30:08 +05:30
committed by GitHub
parent f82ec3b885
commit bc6420019f
12 changed files with 1220 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
View File

@@ -1,9 +1,17 @@
<script>
import { mapGetters } from 'vuex';
import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
import { useAutomation } from 'dashboard/composables/useAutomation';
import { validateAutomation } from 'dashboard/helper/validations';
import {
generateAutomationPayload,
getAttributes,
getInputType,
getOperators,
getCustomAttributeType,
showActionInput,
} from 'dashboard/helper/automationHelper';
import {
AUTOMATION_RULE_EVENTS,
AUTOMATION_ACTION_TYPES,
@@ -14,13 +22,38 @@ export default {
FilterInputBox,
AutomationActionInput,
},
mixins: [automationMethodsMixin],
props: {
onClose: {
type: Function,
default: () => {},
},
},
setup() {
const {
onEventChange,
getConditionDropdownValues,
appendNewCondition,
appendNewAction,
removeFilter,
removeAction,
resetFilter,
resetAction,
getActionDropdownValues,
manifestCustomAttributes,
} = useAutomation();
return {
onEventChange,
getConditionDropdownValues,
appendNewCondition,
appendNewAction,
removeFilter,
removeAction,
resetFilter,
resetAction,
getActionDropdownValues,
manifestCustomAttributes,
};
},
data() {
return {
automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -82,12 +115,24 @@ export default {
this.$store.dispatch('labels/get');
this.$store.dispatch('campaigns/get');
this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
this.manifestCustomAttributes();
this.manifestCustomAttributes(this.automationTypes);
},
methods: {
getAttributes,
getInputType,
getOperators,
getCustomAttributeType,
showActionInput,
isFeatureEnabled(flag) {
return this.isFeatureEnabledonAccount(this.accountId, flag);
},
emitSaveAutomation() {
this.errors = validateAutomation(this.automation);
if (Object.keys(this.errors).length === 0) {
const automation = generateAutomationPayload(this.automation);
this.$emit('saveAutomation', automation, this.mode);
}
},
},
};
</script>
@@ -121,7 +166,7 @@ export default {
<select
v-model="automation.event_name"
class="m-0"
@change="onEventChange()"
@change="onEventChange(automation)"
>
<option
v-for="event in automationRuleEvents"
@@ -154,9 +199,26 @@ export default {
v-for="(condition, i) in automation.conditions"
:key="i"
v-model="automation.conditions[i]"
:filter-attributes="getAttributes(automation.event_name)"
:input-type="getInputType(automation.conditions[i].attribute_key)"
:operators="getOperators(automation.conditions[i].attribute_key)"
:filter-attributes="
getAttributes(automationTypes, automation.event_name)
"
:input-type="
getInputType(
allCustomAttributes,
automationTypes,
automation,
automation.conditions[i].attribute_key
)
"
:operators="
getOperators(
allCustomAttributes,
automationTypes,
automation,
mode,
automation.conditions[i].attribute_key
)
"
:dropdown-values="
getConditionDropdownValues(
automation.conditions[i].attribute_key
@@ -164,15 +226,26 @@ export default {
"
:show-query-operator="i !== automation.conditions.length - 1"
:custom-attribute-type="
getCustomAttributeType(automation.conditions[i].attribute_key)
getCustomAttributeType(
automationTypes,
automation,
automation.conditions[i].attribute_key
)
"
:error-message="
errors[`condition_${i}`]
? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
: ''
"
@resetFilter="resetFilter(i, automation.conditions[i])"
@removeFilter="removeFilter(i)"
@resetFilter="
resetFilter(
automation,
automationTypes,
i,
automation.conditions[i]
)
"
@removeFilter="removeFilter(automation, i)"
/>
<div class="mt-4">
<woot-button
@@ -180,7 +253,7 @@ export default {
color-scheme="success"
variant="smooth"
size="small"
@click="appendNewCondition"
@click="appendNewCondition(automation)"
>
{{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
</woot-button>
@@ -205,15 +278,18 @@ export default {
getActionDropdownValues(automation.actions[i].action_name)
"
:show-action-input="
showActionInput(automation.actions[i].action_name)
showActionInput(
automationActionTypes,
automation.actions[i].action_name
)
"
:error-message="
errors[`action_${i}`]
? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
: ''
"
@resetAction="resetAction(i)"
@removeAction="removeAction(i)"
@resetAction="resetAction(automation, i)"
@removeAction="removeAction(automation, i)"
/>
<div class="mt-4">
<woot-button
@@ -221,7 +297,7 @@ export default {
color-scheme="success"
variant="smooth"
size="small"
@click="appendNewAction"
@click="appendNewAction(automation)"
>
{{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
</woot-button>
@@ -234,7 +310,7 @@ export default {
<woot-button class="button clear" @click.prevent="onClose">
{{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
</woot-button>
<woot-button @click="submitAutomation">
<woot-button @click="emitSaveAutomation">
{{ $t('AUTOMATION.ADD.SUBMIT') }}
</woot-button>
</div>

123
app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
View File

@@ -1,8 +1,18 @@
<script>
import { mapGetters } from 'vuex';
import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
import { useAutomation } from 'dashboard/composables/useAutomation';
import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
import {
getFileName,
generateAutomationPayload,
getAttributes,
getInputType,
getOperators,
getCustomAttributeType,
showActionInput,
} from 'dashboard/helper/automationHelper';
import { validateAutomation } from 'dashboard/helper/validations';
import {
AUTOMATION_RULE_EVENTS,
@@ -15,7 +25,6 @@ export default {
FilterInputBox,
AutomationActionInput,
},
mixins: [automationMethodsMixin],
props: {
onClose: {
type: Function,
@@ -26,6 +35,34 @@ export default {
default: () => {},
},
},
setup() {
const {
onEventChange,
getConditionDropdownValues,
appendNewCondition,
appendNewAction,
removeFilter,
removeAction,
resetFilter,
resetAction,
getActionDropdownValues,
formatAutomation,
manifestCustomAttributes,
} = useAutomation();
return {
onEventChange,
getConditionDropdownValues,
appendNewCondition,
appendNewAction,
removeFilter,
removeAction,
resetFilter,
resetAction,
getActionDropdownValues,
formatAutomation,
manifestCustomAttributes,
};
},
data() {
return {
automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -61,14 +98,33 @@ export default {
},
},
mounted() {
this.manifestCustomAttributes();
this.manifestCustomAttributes(this.automationTypes);
this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
this.formatAutomation(this.selectedResponse);
this.automation = this.formatAutomation(
this.selectedResponse,
this.allCustomAttributes,
this.automationTypes,
this.automationActionTypes
);
},
methods: {
getFileName,
getAttributes,
getInputType,
getOperators,
getCustomAttributeType,
showActionInput,
isFeatureEnabled(flag) {
return this.isFeatureEnabledonAccount(this.accountId, flag);
},
emitSaveAutomation() {
this.errors = validateAutomation(this.automation);
if (Object.keys(this.errors).length === 0) {
const automation = generateAutomationPayload(this.automation);
this.$emit('saveAutomation', automation, this.mode);
}
},
},
};
</script>
@@ -99,7 +155,10 @@ export default {
<div class="event_wrapper">
<label :class="{ error: errors.event_name }">
{{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
<select v-model="automation.event_name" @change="onEventChange()">
<select
v-model="automation.event_name"
@change="onEventChange(automation)"
>
<option
v-for="event in automationRuleEvents"
:key="event.key"
@@ -125,16 +184,37 @@ export default {
v-for="(condition, i) in automation.conditions"
:key="i"
v-model="automation.conditions[i]"
:filter-attributes="getAttributes(automation.event_name)"
:input-type="getInputType(automation.conditions[i].attribute_key)"
:operators="getOperators(automation.conditions[i].attribute_key)"
:filter-attributes="
getAttributes(automationTypes, automation.event_name)
"
:input-type="
getInputType(
allCustomAttributes,
automationTypes,
automation,
automation.conditions[i].attribute_key
)
"
:operators="
getOperators(
allCustomAttributes,
automationTypes,
automation,
mode,
automation.conditions[i].attribute_key
)
"
:dropdown-values="
getConditionDropdownValues(
automation.conditions[i].attribute_key
)
"
:custom-attribute-type="
getCustomAttributeType(automation.conditions[i].attribute_key)
getCustomAttributeType(
automationTypes,
automation,
automation.conditions[i].attribute_key
)
"
:show-query-operator="i !== automation.conditions.length - 1"
:error-message="
@@ -142,8 +222,15 @@ export default {
? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
: ''
"
@resetFilter="resetFilter(i, automation.conditions[i])"
@removeFilter="removeFilter(i)"
@resetFilter="
resetFilter(
automation,
automationTypes,
i,
automation.conditions[i]
)
"
@removeFilter="removeFilter(automation, i)"
/>
<div class="mt-4">
<woot-button
@@ -151,7 +238,7 @@ export default {
color-scheme="success"
variant="smooth"
size="small"
@click="appendNewCondition"
@click="appendNewCondition(automation)"
>
{{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
</woot-button>
@@ -173,15 +260,17 @@ export default {
v-model="automation.actions[i]"
:action-types="automationActionTypes"
:dropdown-values="getActionDropdownValues(action.action_name)"
:show-action-input="showActionInput(action.action_name)"
:show-action-input="
showActionInput(automationActionTypes, action.action_name)
"
:error-message="
errors[`action_${i}`]
? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
: ''
"
:initial-file-name="getFileName(action, automation.files)"
@resetAction="resetAction(i)"
@removeAction="removeAction(i)"
@resetAction="resetAction(automation, i)"
@removeAction="removeAction(automation, i)"
/>
<div class="mt-4">
<woot-button
@@ -189,7 +278,7 @@ export default {
color-scheme="success"
variant="smooth"
size="small"
@click="appendNewAction"
@click="appendNewAction(automation)"
>
{{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
</woot-button>
@@ -206,7 +295,7 @@ export default {
>
{{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
</woot-button>
<woot-button @click="submitAutomation">
<woot-button @click="emitSaveAutomation">
{{ $t('AUTOMATION.EDIT.SUBMIT') }}
</woot-button>
</div>