cssd-back/resources/js/vue/views/Tickets/List.vue

<template>
    <v-container fluid>
        <material-card class color="black" title="My Recent ChatList" text>
            <v-toolbar flat color="white">
                <v-toolbar-title></v-toolbar-title>
                <v-divider class="mx-2" inset vertical></v-divider>
                <v-spacer></v-spacer>
                <v-btn color="black" @click="newmessage" class="WM-ActionButton mb-2">
                    <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                    <span>New Message</span>
                </v-btn>
            </v-toolbar>
            <v-layout class="px-4 my-3">
                <v-divider></v-divider>
            </v-layout>
            <v-layout align-center justify-center wrap class="px-5 mt-3">
                <v-flex md12>
                    <v-data-table :headers="headers" :items="items" hide-actions>
                        <template slot="headerCell" slot-scope="{ header }">
                            <span
                                class="subheading font-weight-light text-white text--darken-3"
                                v-text="header.text"
                            />
                        </template>
                        <template slot="items" slot-scope="{ item }">
                            <td
                                class="headline font-weight-light WM-NoLetterSpacing"
                            >{{ item.name }}</td>
                            <td class="title font-weight-light">
                                <span class="Chip">
                                    <span class="Count Content">{{ item.messages_count }} count</span>
                                </span>
                            </td>
                            <td class="title font-weight-light">
                                <span class="Chip">
                                    <span
                                        class="Unread Content"
                                    >{{ item.unread_messages_count }} unread</span>
                                </span>
                            </td>
                            <td class="text-xs-left FlexBtn"> 
                                <v-tooltip bottom open-on-hover>
                                <template v-slot:activator="{ on, attrs }">
                                <v-btn
                                    color="cyan"
                                    @click="showmessages(item.id)"
                                    class="WM-ActionButton"
                                    v-bind="attrs"
                                    v-on="on"
                                >
                                    <v-icon class="white--text mr-2 caption">fas fa-eye</v-icon>
                                    <span>Show Message</span>
                                </v-btn>
                                </template>
                                <span>Show Message</span>
                                </v-tooltip>
                                <v-tooltip bottom open-on-hover>
                                <template v-slot:activator="{ on, attrs }">
                                <v-btn
                                    color="pink"
                                    @click="remove(item.id)"
                                    class="WM-ActionButton"
                                    v-bind="attrs"
                                    v-on="on"
                                >
                                    <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                    <span>delete</span>
                                </v-btn>
                                </template>
                                <span>delete</span>
                                </v-tooltip>
                            </td>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
            <v-divider></v-divider>
            <div class="text-xs-center" v-if="lastPage > 1">
                <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
            </div>
            <v-layout row wrap align-center justify-center class="mt-3">
                <router-link :to="{name: 'Dashboard'}">
                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
                        <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
                        <span class="black--text">Back</span>
                    </v-btn>
                </router-link>
            </v-layout>
        </material-card>
    </v-container>
</template>

<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations, mapGetters } from "vuex";
export default {
    data: () => ({
        headers: [
            {
                sortable: false,
                text: "Name",
                value: "name"
            },
            {
                sortable: false,
                text: "Count Messages",
                value: "operator"
            },
            {
                sortable: false,
                text: "Unread Message",
                value: "operator"
            },
            {
                sortable: false,
                text: "Action",
                value: "action",
                align: "left"
            }
        ],
        filter: {
            name: ""
        },
        items: [],
        refresh: "",
        currentPage: 1,
        lastPage: 1
    }),
    created() {
        this.load();
    },
    methods: {
        async load(page = 1) {
            const result = await ApiService.get(urls.listMessages(page));
            if (result && result.data.data) {
                this.items = result.data.data.data;
                this.currentPage = result.data.data.current_page;
                this.lastPage = result.data.data.last_page;
            }
        },
        ...mapMutations("modal", ["changeCurrentModal"]),
        newmessage() {
            this.changeCurrentModal({ modal: "modal-ticket-new-message" });
        },
        showmessages(user_id) {
            this.changeCurrentModal({
                modal: "modal-ticket-show-messages",
                properties: { user_id: user_id }
            });
        },
        async remove(user_id) {
            const result = await ApiService.delete(
                urls.removeUserMessage(user_id)
            );
            if (result && result.status == 200) {
                for (const key in this.items) {
                    if (
                        this.items.hasOwnProperty(key) &&
                        this.items[key].id == user_id
                    ) {
                        this.items.splice(key, 1);
                    }
                }
            }
        }
    },
    computed: {
        ...mapGetters("modal", ["getModalResult"])
    },
    watch: {
        currentPage(page) {
            this.load(page);
        },
        getModalResult() {
            this.load();
        }
    }
};
</script>

<style lang="css" scoped>
.WM-ActionButton {
    padding: 8px 22px;
}
.Chip {
    align-items: center;
    border-radius: 28px;
    display: inline-flex;
    font-size: 13px;
    margin: 4px;
    outline: none;
    position: relative;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
    vertical-align: middle;
    height: 24px;
    color: #000;
}
.Chip .Content {
    align-items: center;
    border-radius: 24px;
    cursor: default;
    display: inline-flex;
    height: 32px;
    justify-content: space-between;
    padding: 0 12px;
    vertical-align: middle;
    white-space: nowrap;
    z-index: 1;
}
.Chip .Content.Count {
    background-color: #b2dfdb;
}
.Chip .Content.Unread {
    background-color: #ffcdd2;
}
</style>