mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 19:48:08 +00:00
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>
315 lines
9.5 KiB
JavaScript
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
|
|
);
|
|
},
|
|
},
|
|
};
|