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

feat(v4): Compose new conversation without multiple clicks (#10545)

Browse Source 
---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Sivin Varghese
2024-12-06 09:46:29 +05:30
committed by GitHub
parent 67c90231b6
commit b116ab5ad3
26 changed files with 850 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
View File

@@ -2,24 +2,22 @@
import { computed, useSlots } from 'vue';
import { useI18n } from 'vue-i18n';
// import Button from 'dashboard/components-next/button/Button.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
const props = defineProps({
// buttonLabel: {
// type: String,
// default: '',
// },
buttonLabel: {
type: String,
default: '',
},
selectedContact: {
type: Object,
default: () => ({}),
},
});
const emit = defineEmits([
// 'message',
'goToContactsList',
]);
const emit = defineEmits(['goToContactsList']);
const { t } = useI18n();
const slots = useSlots();
@@ -62,7 +60,11 @@ const handleBreadcrumbClick = () => {
:items="breadcrumbItems"
@click="handleBreadcrumbClick"
/>
<!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
<ComposeConversation>
<template #trigger="{ toggle }">
<Button :label="buttonLabel" size="sm" @click="toggle" />
</template>
</ComposeConversation>
</div>
</div>
</header>

6
app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
View File

@@ -41,11 +41,11 @@ const FORM_CONFIG = {
};
const SOCIAL_CONFIG = {
FACEBOOK: 'i-ri-facebook-circle-fill',
GITHUB: 'i-ri-github-fill',
INSTAGRAM: 'i-ri-instagram-line',
LINKEDIN: 'i-ri-linkedin-box-fill',
FACEBOOK: 'i-ri-facebook-circle-fill',
INSTAGRAM: 'i-ri-instagram-line',
TWITTER: 'i-ri-twitter-x-fill',
GITHUB: 'i-ri-github-fill',
};
const defaultState = {

19
app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
View File

@@ -4,6 +4,7 @@ import Input from 'dashboard/components-next/input/Input.vue';
import Icon from 'dashboard/components-next/icon/Icon.vue';
import ContactSortMenu from './components/ContactSortMenu.vue';
import ContactMoreActions from './components/ContactMoreActions.vue';
import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
defineProps({
showSearch: {
@@ -18,10 +19,10 @@ defineProps({
type: String,
required: true,
},
// buttonLabel: {
// type: String,
// default: '',
// },
buttonLabel: {
type: String,
default: '',
},
activeSort: {
type: String,
default: 'last_activity_at',
@@ -48,7 +49,6 @@ const emit = defineEmits([
'search',
'filter',
'update:sort',
// 'message',
'add',
'import',
'export',
@@ -131,9 +131,12 @@ const emit = defineEmits([
@export="emit('export')"
/>
</div>
<!-- TODO: Add this when we enabling message feature -->
<!-- <div class="w-px h-4 bg-n-strong" /> -->
<!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
<div class="w-px h-4 bg-n-strong" />
<ComposeConversation>
<template #trigger="{ toggle }">
<Button :label="buttonLabel" size="sm" @click="toggle" />
</template>
</ComposeConversation>
</div>
</div>
</header>

2
app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
View File

@@ -55,7 +55,7 @@ const handleContactAction = ({ action }) => {
<DropdownMenu
v-if="showActionsDropdown"
:menu-items="contactMenuItems"
class="right-0 mt-1 w-52 top-full"
class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
@action="handleContactAction($event)"
/>
</div>

2
app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
View File

@@ -109,7 +109,7 @@ const handleOrderChange = value => {
<div
v-if="isMenuOpen"
v-on-clickaway="() => (isMenuOpen = false)"
class="absolute top-full mt-1 right-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
>
<div class="flex items-center justify-between gap-2">
<span class="text-sm text-n-slate-12">