Blame view
src/components/chat/ChatWindow.vue
2.81 KB
93a68cfa1
first commit
|
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 |
<template>
<v-card class="chat-room">
<v-toolbar card dense flat class="white chat-room--toolbar" light>
<v-btn icon>
<v-icon color="text--secondary">keyboard_arrow_left</v-icon>
</v-btn>
<template v-if="chat.users">
<v-avatar size="32" class="avatar-stack" v-for="(user_id,index) in chat.users" :key="index">
<img :src="getAvatar(user_id)" alt="">
</v-avatar>
</template>
<v-spacer></v-spacer>
<v-toolbar-title> <h4>Chat Channel</h4></v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<v-btn icon slot="activator">
<v-icon color="text--secondary">add</v-icon>
</v-btn>
<span>Add user</span>
</v-tooltip>
</v-toolbar>
<vue-perfect-scrollbar class="chat-room--scrollbar grey lighten-5" v-bind:style="computeHeight">
<v-card-text class="chat-room--list pa-3">
<template v-for="(item, index) in chat.messages">
<div v-bind:class="[ index % 2 == 0 ? 'reverse' : '']" class="messaging-item layout row my-4" :key="index">
<v-avatar class="indigo mx-1" size="40">
<img v-bind:src="item.user.avatar" alt="">
</v-avatar>
<div class="messaging--body layout column mx-2">
<p :value="true" v-bind:class="[ index % 2 == 0 ? 'primary white--text' : 'white']" class="pa-2">
{{item.text}}
</p>
<div class="caption px-2 text--secondary">{{new Date(item.created_at).toLocaleString()}}</div>
</div>
<v-spacer></v-spacer>
</div>
</template>
</v-card-text>
</vue-perfect-scrollbar>
<v-card-actions>
<v-text-field
full-width
flat
clearable
solo
append-icon="send"
label="Type some message here">
<v-icon slot="append-icon">send</v-icon>
<v-icon slot="append-icon" class="mx-2">photo</v-icon>
<v-icon slot="append-icon">face</v-icon>
</v-text-field>
</v-card-actions>
</v-card>
</template>
<script>
import { getChatById } from '@/api/chat';
import { getUserById } from '@/api/user';
import VuePerfectScrollbar from 'vue-perfect-scrollbar';
export default {
components: {
VuePerfectScrollbar
},
props: {
uuid: {
type: String,
default: '',
},
height: {
type: String,
default: null,
}
},
computed: {
chat () {
let chatOrigin = {
title: 'Chat',
users: [],
messages: []
};
let chat = getChatById(this.$route.params.uuid);
return Object.assign(chatOrigin, chat);
},
computeHeight () {
return {
height: this.height || ''
};
}
},
methods: {
getAvatar (uid) {
return getUserById(uid).avatar;
}
}
};
</script>
|