feat: Vite + vue 3 💚 (#10047)
Fixes https://github.com/chatwoot/chatwoot/issues/8436 Fixes https://github.com/chatwoot/chatwoot/issues/9767 Fixes https://github.com/chatwoot/chatwoot/issues/10156 Fixes https://github.com/chatwoot/chatwoot/issues/6031 Fixes https://github.com/chatwoot/chatwoot/issues/5696 Fixes https://github.com/chatwoot/chatwoot/issues/9250 Fixes https://github.com/chatwoot/chatwoot/issues/9762 --------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Shivam Mishra
co-authored by
Pranav
Sivin Varghese
Pranav
Sivin Varghese
parent
e0bf2bd9d4
commit
42f6621afb
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useAlert, useTrack } from 'dashboard/composables';
|
||||
import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
|
||||
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
@@ -53,7 +53,7 @@ export default {
|
||||
}
|
||||
},
|
||||
async onMergeContacts(parentContactId) {
|
||||
this.$track(CONTACTS_EVENTS.MERGED_CONTACTS);
|
||||
useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
|
||||
try {
|
||||
await this.$store.dispatch('contacts/merge', {
|
||||
childId: this.primaryContact.id,
|
||||
|
||||
@@ -70,7 +70,7 @@ export default {
|
||||
/>
|
||||
<form class="w-full" @submit.prevent="addCustomAttribute">
|
||||
<woot-input
|
||||
v-model.trim="attributeName"
|
||||
v-model="attributeName"
|
||||
:class="{ error: v$.attributeName.$error }"
|
||||
class="w-full"
|
||||
:error="attributeNameError"
|
||||
@@ -79,7 +79,7 @@ export default {
|
||||
@input="v$.attributeName.$touch"
|
||||
/>
|
||||
<woot-input
|
||||
v-model.trim="attributeValue"
|
||||
v-model="attributeValue"
|
||||
class="w-full"
|
||||
:label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
|
||||
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
|
||||
|
||||
@@ -57,7 +57,7 @@ export default {
|
||||
</h2>
|
||||
<h3 class="text-base contact--work">
|
||||
{{ contact.title }}
|
||||
<i v-if="company.name" class="icon ion-minus-round" />
|
||||
<i v-if="company.name" class="i-lucide-circle-minus" />
|
||||
<span class="company-name">{{ company.name }}</span>
|
||||
</h3>
|
||||
<p v-if="additionalAttributes.description" class="contact--bio">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
|
||||
import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
|
||||
import ContactDropdownItem from './ContactDropdownItem.vue';
|
||||
@@ -97,7 +97,7 @@ export default {
|
||||
open-direction="top"
|
||||
@search-change="searchChange"
|
||||
>
|
||||
<template slot="singleLabel" slot-scope="props">
|
||||
<template #singleLabel="props">
|
||||
<ContactDropdownItem
|
||||
:thumbnail="props.option.thumbnail"
|
||||
:identifier="props.option.id"
|
||||
@@ -106,7 +106,7 @@ export default {
|
||||
:phone-number="props.option.phone_number"
|
||||
/>
|
||||
</template>
|
||||
<template slot="option" slot-scope="props">
|
||||
<template #option="props">
|
||||
<ContactDropdownItem
|
||||
:thumbnail="props.option.thumbnail"
|
||||
:identifier="props.option.id"
|
||||
@@ -145,14 +145,14 @@ export default {
|
||||
/>
|
||||
</label>
|
||||
<multiselect
|
||||
:value="primaryContact"
|
||||
:model-value="primaryContact"
|
||||
disabled
|
||||
:options="[]"
|
||||
:show-labels="false"
|
||||
label="name"
|
||||
track-by="id"
|
||||
>
|
||||
<template slot="singleLabel" slot-scope="props">
|
||||
<template #singleLabel="props">
|
||||
<ContactDropdownItem
|
||||
:thumbnail="props.option.thumbnail"
|
||||
:name="props.option.name"
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import AddCustomAttribute from '../components/AddCustomAttribute';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Components/Contact/AddCustomAttribute',
|
||||
component: AddCustomAttribute,
|
||||
argTypes: {
|
||||
show: {
|
||||
defaultValue: true,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
isCreating: {
|
||||
defaultValue: false,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { AddCustomAttribute },
|
||||
template: '<add-custom-attribute v-bind="$props" @create="onCreate" />',
|
||||
});
|
||||
|
||||
export const DefaultAttribute = Template.bind({});
|
||||
DefaultAttribute.args = {
|
||||
onCreate: action('edit'),
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
import ContactAttribute from '../components/ContactAttribute';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Components/Contact/ContactAttribute',
|
||||
component: ContactAttribute,
|
||||
argTypes: {
|
||||
label: {
|
||||
defaultValue: 'Email',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
value: {
|
||||
defaultValue: 'dwight@schrute.farms',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
defaultValue: 'ion-email',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
showEdit: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ContactAttribute },
|
||||
template: '<contact-attribute v-bind="$props" @update="onEdit" />',
|
||||
});
|
||||
|
||||
export const DefaultAttribute = Template.bind({});
|
||||
DefaultAttribute.args = {
|
||||
onEdit: action('edit'),
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
import ContactFields from '../components/ContactFields';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Components/Contact/ContactFields',
|
||||
component: ContactFields,
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ContactFields },
|
||||
template:
|
||||
'<contact-fields v-bind="$props" :contact="contact" @update="onUpdate" @create-attribute="onCreate" />',
|
||||
});
|
||||
|
||||
export const DefaultContactFields = Template.bind({});
|
||||
DefaultContactFields.args = {
|
||||
contact: {
|
||||
id: 979442,
|
||||
name: 'Eden Hazard',
|
||||
title: 'Playmaker',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
|
||||
company: {
|
||||
id: 10,
|
||||
name: 'Chelsea',
|
||||
},
|
||||
email: 'hazard@chelsea.com',
|
||||
availability_status: 'offline',
|
||||
phone_number: '',
|
||||
custom_attributes: {},
|
||||
additional_attributes: {
|
||||
description:
|
||||
'Known for his dribbling, he is considered to be one of the best players in the world.',
|
||||
social_profiles: {
|
||||
twitter: 'hazardeden10',
|
||||
facebook: 'hazardeden10',
|
||||
linkedin: 'hazardeden10',
|
||||
},
|
||||
},
|
||||
},
|
||||
onUpdate: action('update'),
|
||||
onCreate: action('create'),
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
import ContactIntro from '../components/ContactIntro';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Components/Contact/ContactIntro',
|
||||
component: ContactIntro,
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ContactIntro },
|
||||
template:
|
||||
'<contact-intro v-bind="$props" @edit="onEdit" @message="onNewMessage" />',
|
||||
});
|
||||
|
||||
export const DefaultContactIntro = Template.bind({});
|
||||
DefaultContactIntro.args = {
|
||||
contact: {
|
||||
id: 979442,
|
||||
name: 'Eden Hazard',
|
||||
title: 'Playmaker',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
|
||||
company: {
|
||||
id: 10,
|
||||
name: 'Chelsea',
|
||||
},
|
||||
email: 'hazard@chelsea.com',
|
||||
availability_status: 'offline',
|
||||
phone_number: '',
|
||||
custom_attributes: {},
|
||||
additional_attributes: {
|
||||
description:
|
||||
'Known for his dribbling, he is considered to be one of the best players in the world.',
|
||||
social_profiles: {
|
||||
twitter: 'hazardeden10',
|
||||
facebook: 'hazardeden10',
|
||||
linkedin: 'hazardeden10',
|
||||
},
|
||||
},
|
||||
},
|
||||
onEdit: action('edit'),
|
||||
onNewMessage: action('new message 💬'),
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import MergeContact from 'dashboard/modules/contact/components/MergeContact';
|
||||
|
||||
export default {
|
||||
title: 'Components/Contact/MergeContacts',
|
||||
component: MergeContact,
|
||||
argTypes: {
|
||||
'primary-contact': {
|
||||
defaultValue: '{}',
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { MergeContact },
|
||||
template:
|
||||
'<merge-contact v-bind="$props" @submit="onSearch" @search="onSubmit"></merge-contact>',
|
||||
});
|
||||
|
||||
export const List = Template.bind({});
|
||||
List.args = {
|
||||
primaryContact: {
|
||||
id: 12,
|
||||
name: 'Mason Mount',
|
||||
},
|
||||
onSearch: action('Search'),
|
||||
onSubmit: action('Submit'),
|
||||
};
|
||||
Reference in New Issue
Block a user