PHP Classes

File: resources/assets/js/components/GroupChat.vue

Recommend this page to a friend!
  Classes of Nyi Nyi Lwin  >  Laravel Group Chat  >  resources/assets/js/components/GroupChat.vue  >  Download  
File: resources/assets/js/components/GroupChat.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Group Chat
Interactive chat module for multiple users
Author: By
Last change:
Date: 1 year ago
Size: 4,881 bytes
 

Contents

Class file image Download
<template> <div> <div class="box box-solid direct-chat direct-chat-primary"> <div class="box-header with-border"> <h3 class="box-title">{{ group.name }}</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="" data-widget="chat-pane-toggle" data-original-title="Contacts"> <i class="fa fa-users"></i> </button> </div> </div> <div class="box-body"> <!-- Conversations are loaded here --> <div class="direct-chat-messages"> <!-- Message. Default to the left --> <div class="direct-chat-msg" v-for="conversation in conversations" v-bind:class="{ 'right' : check(conversation.user.id) }"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">{{ conversation.user.name }}</span> <span class="direct-chat-timestamp pull-right"> <timeago :since="conversation.created_at" :auto-update="10"></timeago> </span> </div> <!-- /.direct-chat-info --> <img class="direct-chat-img" src="https://adminlte.io/themes/AdminLTE/dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> <div class="direct-chat-text"> {{ conversation.message }} </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> </div> <!--/.direct-chat-messages--> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li v-for="user in users"> <a href="javascript:;"> <img class="contacts-list-img" src="https://adminlte.io/themes/AdminLTE/dist/img/user1-128x128.jpg" alt="User Image"> <div class="contacts-list-info"> <span class="contacts-list-name"> {{ user.name }} </span> <span class="contacts-list-msg"> {{ user.email }} </span> </div> </a> </li> </ul> <!-- /.contatcts-list --> </div> </div> <div class="box-footer"> <div class="input-group"> <input type="text" v-model="message" @keyup.enter="store()" autofocus name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-btn"> <button type="button" @click.prevent="store()" class="btn btn-primary btn-flat">Send</button> </span> </div> </div> </div> </div> </template> <script> export default { props: ['group', 'currentUser', 'users'], data() { return { conversations: [], message: '', group_id: this.group.id } }, mounted() { this.getCurrentGroupMessage(); this.listenForNewMessage(); }, methods: { store() { axios.post('/conversations', { message: this.message, group_id: this.group.id, user_id: this.currentUser.id }) .then((response) => { this.message = ''; this.conversations.push(response.data); }); }, check(id) { return id === this.currentUser.id; }, getCurrentGroupMessage() { axios.get('/conversations/' + this.group_id ) .then((response) => { this.conversations = response.data ; }); }, listenForNewMessage() { Echo.private('groups.' + this.group.id) .listen('\\PhpJunior\\LaravelChat\\Events\\NewMessage', (e) => { this.conversations.push(e); }); } } } </script>