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: 2 months 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>
For more information send a message to info at phpclasses dot org.