feat: Add Contact card and form component (#10466)
Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Sivin Varghese
@@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: { type: Number, required: true },
|
||||
name: { type: String, default: '' },
|
||||
email: { type: String, default: '' },
|
||||
additionalAttributes: { type: Object, default: () => ({}) },
|
||||
phoneNumber: { type: String, default: '' },
|
||||
thumbnail: { type: String, default: '' },
|
||||
isExpanded: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const handleFormUpdate = updatedData => {
|
||||
emit('updateContact', { id: props.id, updatedData });
|
||||
};
|
||||
|
||||
const onClickViewDetails = async () => {
|
||||
emit('showContact', props.id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout :key="id" layout="row">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium truncate text-n-slate-12">
|
||||
{{ name }}
|
||||
</span>
|
||||
<template v-if="additionalAttributes?.companyName">
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('CONTACTS_LAYOUT.CARD.OF') }}
|
||||
</span>
|
||||
<span class="text-sm font-medium truncate text-n-slate-12">
|
||||
{{ additionalAttributes.companyName }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
|
||||
<div v-if="email" class="w-px h-3 bg-n-slate-6" />
|
||||
<span v-if="phoneNumber" class="text-sm text-n-slate-11">
|
||||
{{ phoneNumber }}
|
||||
</span>
|
||||
<div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
|
||||
<Button
|
||||
:label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
|
||||
variant="link"
|
||||
size="xs"
|
||||
@click="onClickViewDetails"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
icon="i-lucide-chevron-down"
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
:class="{ 'rotate-180': isExpanded }"
|
||||
@click="emit('toggle')"
|
||||
/>
|
||||
|
||||
<template #after>
|
||||
<transition
|
||||
enter-active-class="overflow-hidden transition-all duration-300 ease-out"
|
||||
leave-active-class="overflow-hidden transition-all duration-300 ease-in"
|
||||
enter-from-class="overflow-hidden opacity-0 max-h-0"
|
||||
enter-to-class="opacity-100 max-h-[360px]"
|
||||
leave-from-class="opacity-100 max-h-[360px]"
|
||||
leave-to-class="overflow-hidden opacity-0 max-h-0"
|
||||
>
|
||||
<div v-show="isExpanded" class="w-full">
|
||||
<div class="p-6 border-t border-n-strong">
|
||||
<ContactsForm
|
||||
:contact-data="{
|
||||
id,
|
||||
name,
|
||||
email,
|
||||
phoneNumber,
|
||||
additionalAttributes,
|
||||
}"
|
||||
@update="handleFormUpdate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
</CardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,67 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import ContactsCard from '../ContactsCard.vue';
|
||||
import contacts from './fixtures';
|
||||
|
||||
const expandedCardId = ref(null);
|
||||
|
||||
const toggleExpanded = id => {
|
||||
expandedCardId.value = expandedCardId.value === id ? null : id;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Components/Contacts/ContactsCard"
|
||||
:layout="{ type: 'grid', width: '800px' }"
|
||||
>
|
||||
<Variant title="Default with expandable function">
|
||||
<div class="flex flex-col p-4">
|
||||
<ContactsCard
|
||||
v-bind="contacts[0]"
|
||||
:is-expanded="expandedCardId === contacts[0].id"
|
||||
@toggle="toggleExpanded(contacts[0].id)"
|
||||
@update-contact="() => {}"
|
||||
@show-contact="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="With Company Name and without phone number">
|
||||
<div class="flex flex-col p-4">
|
||||
<ContactsCard
|
||||
v-bind="{ ...contacts[1], phoneNumber: '' }"
|
||||
:is-expanded="false"
|
||||
@toggle="() => {}"
|
||||
@update-contact="() => {}"
|
||||
@show-contact="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Expanded State">
|
||||
<div class="flex flex-col p-4">
|
||||
<ContactsCard
|
||||
v-bind="contacts[2]"
|
||||
is-expanded
|
||||
@toggle="() => {}"
|
||||
@update-contact="() => {}"
|
||||
@show-contact="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Without Email and Phone">
|
||||
<div class="flex flex-col p-4">
|
||||
<ContactsCard
|
||||
v-bind="{ ...contacts[3], email: '', phoneNumber: '' }"
|
||||
:is-expanded="false"
|
||||
@toggle="() => {}"
|
||||
@update-contact="() => {}"
|
||||
@show-contact="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,149 @@
|
||||
export default [
|
||||
{
|
||||
additionalAttributes: {
|
||||
socialProfiles: {},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'johndoe@chatwoot.com',
|
||||
id: 370,
|
||||
name: 'John Doe',
|
||||
phoneNumber: '+918634322418',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Felix',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1731608270,
|
||||
createdAt: 1731586271,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'kerala',
|
||||
country: 'India',
|
||||
description: 'Curious about the web. ',
|
||||
companyName: 'Chatwoot',
|
||||
countryCode: '',
|
||||
socialProfiles: {
|
||||
github: 'abozler',
|
||||
twitter: 'ozler',
|
||||
facebook: 'abozler',
|
||||
linkedin: 'abozler',
|
||||
instagram: 'ozler',
|
||||
},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'ozler@chatwoot.com',
|
||||
id: 29,
|
||||
name: 'Abraham Ozlers',
|
||||
phoneNumber: '+246232222222',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Upload',
|
||||
customAttributes: {
|
||||
dateContact: '2024-02-01T00:00:00.000Z',
|
||||
linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
|
||||
listContact: 'Not spam',
|
||||
numberContact: '12',
|
||||
},
|
||||
lastActivityAt: 1712127410,
|
||||
createdAt: 1712127389,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Kerala',
|
||||
country: 'India',
|
||||
description:
|
||||
"I'm Candice developer focusing on building things for the web 🌍. Currently, I’m working as a Product Developer here at @chatwootapp ⚡️🔥",
|
||||
companyName: 'Chatwoot',
|
||||
countryCode: 'IN',
|
||||
socialProfiles: {
|
||||
github: 'cmathersonj',
|
||||
twitter: 'cmather',
|
||||
facebook: 'cmathersonj',
|
||||
linkedin: 'cmathersonj',
|
||||
instagram: 'cmathersonjs',
|
||||
},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'cmathersonj@va.test',
|
||||
id: 22,
|
||||
name: 'Candice Matherson',
|
||||
phoneNumber: '+917474774742',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Emery',
|
||||
customAttributes: {
|
||||
dateContact: '2024-11-12T03:23:06.963Z',
|
||||
linkContact: 'https://sd.sd',
|
||||
textContact: 'hey',
|
||||
numberContact: '12',
|
||||
checkboxContact: true,
|
||||
},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: '',
|
||||
country: '',
|
||||
description: '',
|
||||
companyName: '',
|
||||
countryCode: '',
|
||||
socialProfiles: {
|
||||
github: '',
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
linkedin: '',
|
||||
instagram: '',
|
||||
},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'ofolkardi@taobao.test',
|
||||
id: 21,
|
||||
name: 'Ophelia Folkard',
|
||||
phoneNumber: '',
|
||||
identifier: null,
|
||||
thumbnail:
|
||||
'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBPZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--08dcac8eb72ef12b2cad92d58dddd04cd8a5f513/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/32.jpg',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
socialProfiles: {},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'wcasteloth@exblog.jp',
|
||||
id: 20,
|
||||
name: 'Willy Castelot',
|
||||
phoneNumber: '+919384',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jade',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: '',
|
||||
country: '',
|
||||
description: '',
|
||||
companyName: '',
|
||||
countryCode: '',
|
||||
socialProfiles: {
|
||||
github: '',
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
linkedin: '',
|
||||
instagram: '',
|
||||
},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'ederingtong@printfriendly.test',
|
||||
id: 19,
|
||||
name: 'Elisabeth Derington',
|
||||
phoneNumber: '',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Jade',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123232,
|
||||
createdAt: 1712123232,
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user