126 lines
2.8 KiB
Vue
126 lines
2.8 KiB
Vue
<script setup>
|
|
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
|
import { useChat } from './useChat'
|
|
import ChatContact from '@/views/apps/chat/ChatContact.vue'
|
|
import { useChatStore } from '@/views/apps/chat/useChatStore'
|
|
|
|
const props = defineProps({
|
|
search: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
isDrawerOpen: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'openChatOfContact',
|
|
'showUserProfile',
|
|
'close',
|
|
'update:search',
|
|
])
|
|
|
|
const { resolveAvatarBadgeVariant } = useChat()
|
|
const search = useVModel(props, 'search', emit)
|
|
const store = useChatStore()
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 👉 Chat list header -->
|
|
<div
|
|
v-if="store.profileUser"
|
|
class="chat-list-header gap-4"
|
|
>
|
|
<VBadge
|
|
dot
|
|
location="bottom right"
|
|
offset-x="3"
|
|
offset-y="3"
|
|
:color="resolveAvatarBadgeVariant(store.profileUser.status)"
|
|
bordered
|
|
>
|
|
<VAvatar
|
|
class="cursor-pointer"
|
|
@click="$emit('showUserProfile')"
|
|
>
|
|
<VImg
|
|
:src="store.profileUser.avatar"
|
|
alt="John Doe"
|
|
/>
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VTextField
|
|
v-model="search"
|
|
placeholder="Search..."
|
|
prepend-inner-icon="ri-search-line"
|
|
density="compact"
|
|
class="chat-list-search"
|
|
/>
|
|
|
|
<IconBtn
|
|
v-if="$vuetify.display.smAndDown"
|
|
@click="$emit('close')"
|
|
>
|
|
<VIcon
|
|
icon="ri-close-line"
|
|
class="text-medium-emphasis"
|
|
/>
|
|
</IconBtn>
|
|
</div>
|
|
<VDivider />
|
|
|
|
<PerfectScrollbar
|
|
tag="ul"
|
|
class="chat-contacts-list px-3 d-flex flex-column gap-1"
|
|
:options="{ wheelPropagation: false }"
|
|
>
|
|
<li class="list-none">
|
|
<span class="chat-contact-header d-block text-primary text-lg font-weight-medium">Chats</span>
|
|
</li>
|
|
<ChatContact
|
|
v-for="contact in store.chatsContacts"
|
|
:key="`chat-${contact.id}`"
|
|
:user="contact"
|
|
is-chat-contact
|
|
@click="$emit('openChatOfContact', contact.id)"
|
|
/>
|
|
<span
|
|
v-show="!store.chatsContacts.length"
|
|
class="no-chat-items-text text-disabled"
|
|
>No chats found</span>
|
|
<li class="list-none">
|
|
<span class="chat-contact-header d-block text-primary text-lg font-weight-medium">Contacts</span>
|
|
</li>
|
|
<ChatContact
|
|
v-for="contact in store.contacts"
|
|
:key="`chat-${contact.id}`"
|
|
:user="contact"
|
|
@click="$emit('openChatOfContact', contact.id)"
|
|
/>
|
|
<span
|
|
v-show="!store.contacts.length"
|
|
class="no-chat-items-text text-disabled"
|
|
>No contacts found</span>
|
|
</PerfectScrollbar>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.chat-contacts-list {
|
|
--chat-content-spacing-x: 12px;
|
|
|
|
padding-block-end: 0.75rem;
|
|
|
|
.chat-contact-header {
|
|
margin-block: 1rem 4px;
|
|
margin-inline: 1rem;
|
|
}
|
|
|
|
.no-chat-items-text {
|
|
margin-inline: var(--chat-content-spacing-x);
|
|
}
|
|
}
|
|
</style>
|