ChatLeftSidebarContent.vue
2.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<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>