97 lines
3.0 KiB
Vue
97 lines
3.0 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'
|
|
import AppTextField from '@/@core/app-form-elements/AppTextField.vue'
|
|
const props = defineProps({
|
|
search: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
isDrawerOpen: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'openChatOfContact',
|
|
'showUserProfile',
|
|
'close',
|
|
])
|
|
|
|
const { resolveAvatarBadgeVariant } = useChat()
|
|
const search = useVModel(props, 'search')
|
|
const store = useChatStore()
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 👉 Chat list header -->
|
|
<div v-if="store.profileUser" class="chat-list-header">
|
|
<VBadge dot location="bottom right" offset-x="3" offset-y="3"
|
|
:color="resolveAvatarBadgeVariant(store.profileUser.status)" bordered>
|
|
<VAvatar size="38" class="cursor-pointer" @click="$emit('showUserProfile')">
|
|
<VImg :src="store.profileUser.avatar" alt="John Doe" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<AppTextField v-model="search" placeholder="Search..." class="app-text-field flex-grow-1 ms-4 chat-list-search"
|
|
density="compact">
|
|
<template #prepend-inner>
|
|
<VIcon size="22" icon="tabler-search" />
|
|
</template>
|
|
</AppTextField>
|
|
|
|
<IconBtn v-if="$vuetify.display.smAndDown" @click="$emit('close')">
|
|
<VIcon icon="tabler-x" class="text-medium-emphasis" />
|
|
</IconBtn>
|
|
</div>
|
|
<VDivider />
|
|
|
|
<PerfectScrollbar tag="ul" class="d-flex flex-column gap-y-1 chat-contacts-list px-3 list-none"
|
|
:options="{ wheelPropagation: false }">
|
|
<li>
|
|
<span class="chat-contact-header d-block text-primary text-xl 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>
|
|
<span class="chat-contact-header d-block text-primary text-xl 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: 16px;
|
|
|
|
padding-block-end: 0.75rem;
|
|
|
|
.chat-contact-header {
|
|
margin-block-end: 0.625rem;
|
|
margin-block-start: 1.25rem;
|
|
}
|
|
|
|
.chat-contact-header,
|
|
.no-chat-items-text {
|
|
margin-inline: var(--chat-content-spacing-x);
|
|
}
|
|
}
|
|
|
|
.chat-list-search {
|
|
.v-field--focused {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
</style>
|