ChatContactList.vue
1.81 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
<template>
<div class="chat-contact">
<v-toolbar flat dense class="chat-contact--toolbar">
<v-text-field flat solo full-width prepend-icon="search" label="Search"></v-text-field>
</v-toolbar>
<vue-perfect-scrollbar class="chat-history--scrollbar">
<v-divider></v-divider>
<v-list two-line class="chat-contact--list">
<v-subheader>Contacts</v-subheader>
<template v-for="(item, index) in users">
<v-divider :key="index"></v-divider>
<v-list-tile avatar :key="item.name + index" :to="contactRoute(item.uuid)">
<v-list-tile-avatar color="primary">
<img :src="item.avatar" v-if="item.avatar">
<span v-else class="white--text headline">{{ firstLetter(item.name)}}</span>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>
{{item.name}}
</v-list-tile-title>
<v-list-tile-sub-title>{{item.jobTitle}}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-circle dot small :color="userStatusColor(item)"></v-circle>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</vue-perfect-scrollbar>
</div>
</template>
<script>
import { getUser } from '@/api/user';
import VCircle from '@/components/circle/VCircle';
import VuePerfectScrollbar from 'vue-perfect-scrollbar';
export default {
components: {
VuePerfectScrollbar,
VCircle
},
data: () => ({
}),
computed: {
users () {
return getUser();
}
},
methods: {
contactRoute (id) {
return '/chat/contact/' + id;
},
firstLetter (name) {
return name.charAt(0);
},
userStatusColor (item) {
return (item.active) ? 'green' : 'grey';
}
}
};
</script>
<style>
</style>