Files
chatwoot/app/javascript/dashboard/mixins/automations/methodsMixin.js
Fayaz Ahmed ce8e1ec93d chore: Migrate all instances of old vuelidate to new v2 syntax [CW-3274] (#9623)
Removes all the old vuelidate syntax and replaced it with the new
`useValidate` composable and the `v$` helper.

| Component | Path | Migrated | Tested |

|------------------------------------|--------------------------------------------------------------|-----------------------------------------------|--------|
| Login page | app/javascript/v3/views/login/Index.vue |  |  |
| Custom Attributes settings page |
app/javascript/dashboard/components/CustomAttribute.vue |  |  |
| Account settings page |
app/javascript/dashboard/routes/dashboard/settings/account/Index.vue | 
|  |
| Add Account Modal |
app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
|  |  |
| AICTA Modal |
app/javascript/dashboard/components/widgets/AICTAModal.vue |  |  |
| Conversation Advanced Filters |
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
| deprecated `$each` prop in validations object | |
| Email Transript Modal |
app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
|  |  |
| Linear Create Issue |
app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
|  |  |
| Template Parser |
app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
|  | |
| Delete Confirmation Modal |
app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
|  |  |
| Add Custom Attribute |
app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
|  |  |
| Merge Contacts |
app/javascript/dashboard/modules/contact/components/MergeContact.vue | 
|  |
| Contacts Advanced Filters |
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
| deprecated `$each` prop in validations object | |
| Contact Form |
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
|  |  |
| Conversation Form |
app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
|  |  |
| Add Custom Views |
app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
|  |  |
| Add Locale |
app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
|  |  |
| Portal Settings Basic Form |
/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
|  |  |
| Portal Settings Customization Form |
/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
|  |  |
| Add Category |
app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
|  |  |
| Edit Category |
app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
|  |  |
| CSML Bot Editor |
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
|  |  |
| Add Agent |
app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue |
 |  |
| Edit Agent |
app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
|  |  |
| Add Attribute |
app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
|  |  |
| Edit Attribute |
app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
|  |  |
| Add Campaign |
app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
|  |  |
| Edit Campaign |
app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
|  |  |
| Add Canned |
app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
|  |  |
| Edit Canned |
app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
|  |  |
| IMAP Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
|  |  |
| SMTP Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
|  |  |
| Widget Builder |
app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
|  |  |
| 360 Dialog Whatsapp |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
|  |  |
| Inbox API settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
|  |  |
| SMS Bandwidth settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
|  |  |
| Cloud Whatsapp Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
|  |  |
| Facebook Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
|  |  |
| Line Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
|  |  |
| Telegram Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
|  |  |
| Twillio Settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
|  |  |
| Forward To option settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
|  |  |
| Microsoft settings |
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
|  |  |
| Collaborators page |
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
|  |  |
| Configuration Page |
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
|  |  |
| Dashboard App Modal Settings |
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
|  |  |
| Settings - Webhook Form |
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
|  |  |
| Macro Form |
app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
| deprecated `$each` prop in validations object | |
| Change Password |
app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
|  |  |
| settings - User Basic Details |
app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
|  |  |
| Password Edit | app/javascript/v3/views/auth/password/Edit.vue |  | 
|
| Password Reset form |
app/javascript/v3/views/auth/reset/password/Index.vue |  |  |
| Signup form |
app/javascript/v3/views/auth/signup/components/Signup/Form.vue |  |  |
| Login form | app/javascript/v3/views/login/Index.vue |  |  |
| Custom Attributes |
app/javascript/dashboard/components/CustomAttribute.vue |  |  |
| Reply Email Head |
app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
|  |  |
| Methods Mixin |
app/javascript/dashboard/mixins/automations/methodsMixin.js |  |  |
| Validations mixin |
app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
|  |  |
| SLA Form |
app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue |  |
 |
| SLA Time Input |
app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
|  |  |
| SLA Validation Mixin |
app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
|  |  |
| Team Form |
app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue |
 |  |
| Add Agents |
app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
|  |  |
| Edit Agents |
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
|  |  |


---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
2024-07-30 15:08:22 +05:30

315 lines
9.5 KiB
JavaScript

import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
import countries from 'shared/constants/countries';
import { validateAutomation } from 'dashboard/helper/validations';
import {
generateCustomAttributeTypes,
getActionOptions,
getConditionOptions,
getCustomAttributeInputType,
getOperatorTypes,
isACustomAttribute,
getFileName,
getDefaultConditions,
getDefaultActions,
filterCustomAttributes,
generateAutomationPayload,
getStandardAttributeInputType,
isCustomAttribute,
generateCustomAttributes,
} from 'dashboard/helper/automationHelper';
import { mapGetters } from 'vuex';
import { useAlert } from 'dashboard/composables';
export default {
computed: {
...mapGetters({
agents: 'agents/getAgents',
campaigns: 'campaigns/getAllCampaigns',
contacts: 'contacts/getContacts',
inboxes: 'inboxes/getInboxes',
labels: 'labels/getLabels',
teams: 'teams/getTeams',
slaPolicies: 'sla/getSLA',
}),
booleanFilterOptions() {
return [
{
id: true,
name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
},
{
id: false,
name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
},
];
},
statusFilterOptions() {
const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
return [
...Object.keys(statusFilters).map(status => {
return {
id: status,
name: statusFilters[status].TEXT,
};
}),
{
id: 'all',
name: this.$t('CHAT_LIST.FILTER_ALL'),
},
];
},
},
methods: {
getFileName,
onEventChange() {
this.automation.conditions = getDefaultConditions(
this.automation.event_name
);
this.automation.actions = getDefaultActions();
},
getAttributes(key) {
return this.automationTypes[key].conditions;
},
getInputType(key) {
const customAttribute = isACustomAttribute(this.allCustomAttributes, key);
if (customAttribute) {
return getCustomAttributeInputType(
customAttribute.attribute_display_type
);
}
const type = this.getAutomationType(key);
return type.inputType;
},
getOperators(key) {
if (this.mode === 'edit') {
const customAttribute = isACustomAttribute(
this.allCustomAttributes,
key
);
if (customAttribute) {
return getOperatorTypes(customAttribute.attribute_display_type);
}
}
const type = this.getAutomationType(key);
return type.filterOperators;
},
getAutomationType(key) {
return this.automationTypes[this.automation.event_name].conditions.find(
condition => condition.key === key
);
},
getCustomAttributeType(key) {
const type = this.automationTypes[
this.automation.event_name
].conditions.find(i => i.key === key).customAttributeType;
return type;
},
getConditionDropdownValues(type) {
const {
agents,
allCustomAttributes: customAttributes,
booleanFilterOptions,
campaigns,
contacts,
inboxes,
statusFilterOptions,
teams,
} = this;
return getConditionOptions({
agents,
booleanFilterOptions,
campaigns,
contacts,
customAttributes,
inboxes,
statusFilterOptions,
teams,
languages,
countries,
type,
});
},
appendNewCondition() {
this.automation.conditions.push(
...getDefaultConditions(this.automation.event_name)
);
},
appendNewAction() {
this.automation.actions.push(...getDefaultActions());
},
removeFilter(index) {
if (this.automation.conditions.length <= 1) {
useAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
} else {
this.automation.conditions.splice(index, 1);
}
},
removeAction(index) {
if (this.automation.actions.length <= 1) {
useAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
} else {
this.automation.actions.splice(index, 1);
}
},
submitAutomation() {
// we assign it to this.errors so that it can be accessed in the template
// it is supposed to be declared in the data function
this.errors = validateAutomation(this.automation);
if (Object.keys(this.errors).length === 0) {
const automation = generateAutomationPayload(this.automation);
this.$emit('saveAutomation', automation, this.mode);
}
},
resetFilter(index, currentCondition) {
this.automation.conditions[index].filter_operator = this.automationTypes[
this.automation.event_name
].conditions.find(
condition => condition.key === currentCondition.attribute_key
).filterOperators[0].value;
this.automation.conditions[index].values = '';
},
showUserInput(type) {
return !(type === 'is_present' || type === 'is_not_present');
},
showActionInput(action) {
if (action === 'send_email_to_team' || action === 'send_message')
return false;
const type = this.automationActionTypes.find(
i => i.key === action
).inputType;
return !!type;
},
resetAction(index) {
this.automation.actions[index].action_params = [];
},
manifestConditions(automation) {
const customAttributes = filterCustomAttributes(this.allCustomAttributes);
const conditions = automation.conditions.map(condition => {
const customAttr = isCustomAttribute(
customAttributes,
condition.attribute_key
);
let inputType = 'plain_text';
if (customAttr) {
inputType = getCustomAttributeInputType(customAttr.type);
} else {
inputType = getStandardAttributeInputType(
this.automationTypes,
automation.event_name,
condition.attribute_key
);
}
if (inputType === 'plain_text' || inputType === 'date') {
return {
...condition,
values: condition.values[0],
};
}
if (inputType === 'comma_separated_plain_text') {
return {
...condition,
values: condition.values.join(','),
};
}
return {
...condition,
query_operator: condition.query_operator || 'and',
values: [
...this.getConditionDropdownValues(condition.attribute_key),
].filter(item => [...condition.values].includes(item.id)),
};
});
return conditions;
},
generateActionsArray(action) {
const params = action.action_params;
let actionParams = [];
const inputType = this.automationActionTypes.find(
item => item.key === action.action_name
).inputType;
if (inputType === 'multi_select' || inputType === 'search_select') {
actionParams = [
...this.getActionDropdownValues(action.action_name),
].filter(item => [...params].includes(item.id));
} else if (inputType === 'team_message') {
actionParams = {
team_ids: [
...this.getActionDropdownValues(action.action_name),
].filter(item => [...params[0].team_ids].includes(item.id)),
message: params[0].message,
};
} else actionParams = [...params];
return actionParams;
},
manifestActions(automation) {
let actionParams = [];
const actions = automation.actions.map(action => {
if (action.action_params.length) {
actionParams = this.generateActionsArray(action);
}
return {
...action,
action_params: actionParams,
};
});
return actions;
},
formatAutomation(automation) {
this.automation = {
...automation,
conditions: this.manifestConditions(automation),
actions: this.manifestActions(automation),
};
},
getActionDropdownValues(type) {
const { agents, labels, teams, slaPolicies } = this;
return getActionOptions({
agents,
labels,
teams,
slaPolicies,
languages,
type,
});
},
manifestCustomAttributes() {
const conversationCustomAttributesRaw = this.$store.getters[
'attributes/getAttributesByModel'
]('conversation_attribute');
const contactCustomAttributesRaw =
this.$store.getters['attributes/getAttributesByModel'](
'contact_attribute'
);
const conversationCustomAttributeTypes = generateCustomAttributeTypes(
conversationCustomAttributesRaw,
'conversation_attribute'
);
const contactCustomAttributeTypes = generateCustomAttributeTypes(
contactCustomAttributesRaw,
'contact_attribute'
);
let manifestedCustomAttributes = generateCustomAttributes(
conversationCustomAttributeTypes,
contactCustomAttributeTypes,
this.$t('AUTOMATION.CONDITION.CONVERSATION_CUSTOM_ATTR_LABEL'),
this.$t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
);
this.automationTypes.message_created.conditions.push(
...manifestedCustomAttributes
);
this.automationTypes.conversation_created.conditions.push(
...manifestedCustomAttributes
);
this.automationTypes.conversation_updated.conditions.push(
...manifestedCustomAttributes
);
this.automationTypes.conversation_opened.conditions.push(
...manifestedCustomAttributes
);
},
},
};