PHP Classes

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

Recommend this page to a friend!
  Classes of Nyi Nyi Lwin  >  Laravel Group Chat  >  resources/assets/js/components/Groups.vue  >  Download  
File: resources/assets/js/components/Groups.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: 2,138 bytes
 

Contents

Class file image Download
<template>
    <div>
        <div class="row">
            <div class="col-md-4">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">Group Lists</h3>
                        <div class="box-tools">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body no-padding">
                        <ul class="nav nav-pills nav-stacked">
                            <li class="" v-for="group in groups" :key="group.id">
                                <a :href="'#'+group.id"  data-toggle="tab">{{ group.name }}</a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
            <div class="col-md-8">
                <div class="tab-content">
                    <div class="tab-pane" :id="group.id" v-for="group in groups" :key="group.id">
                        <group-chat :current-user="user" :users="group.users" :group="group">
                        </group-chat>
                    </div>
                    <!-- /.tab-pane -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['initialGroups', 'user'],

        data() {
            return {
                groups: []
            }
        },

        mounted() {
            this.groups = this.initialGroups;

            Bus.$on('groupCreated', (group) => {
                this.groups.push(group);
            });

            this.listenForNewGroups();
        },

        methods: {
            listenForNewGroups() {
                Echo.private('users.' + this.user.id)
                    .listen('\\PhpJunior\\LaravelChat\\Events\\GroupCreated', (e) => {
                        this.groups.push(e.group);
                    });
            }
        }
    }
</script>
For more information send a message to info at phpclasses dot org.