cssd-front/src/views/MedicalCenter/List.vue

<template>
    <v-container fluid>
        <material-card class color="black" title="Medical Centers List" text>
            <v-layout wrap class="px-5 mb-3">
                <v-flex xs12 md3 sm3 class="pr-3">
                    <v-text-field label="Name" v-model="filter.name" color="black"/>
                </v-flex>
                <v-spacer/>
                <v-flex class xs12 sm6 md6 lg2 xl1>
                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
                        <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                        <span class="white--text">Filter</span>
                    </v-btn>
                </v-flex>
                <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
                    <router-link :to="{ name: 'AddMedicalCenter' }">
                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                            <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
                            <span class="black--text">Add</span>
                        </v-btn>
                    </router-link>
                </v-flex>
            </v-layout>
            <v-layout class="px-4 my-3">
                <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="title font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
                            <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
                            <td class="title font-weight-light">{{ item.users_count }} Operator</td>
                            <td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
                                <v-tooltip bottom open-on-hover>
                                    <template v-slot:activator="{ on, attrs }">
                                        <router-link class="LinkBtn"
                                                     :to="{ name: 'EditMedicalCenter', params: { medicalCenter: item.id } }">
                                            <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton">
                                                <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
                                                <span>Edit</span>
                                            </v-btn>
                                        </router-link>
                                    </template>
                                    <span>Edit</span>
                                </v-tooltip>
                                <v-tooltip bottom open-on-hover>
                                    <template v-slot:activator="{ on, attrs }">
                                        <router-link class="LinkBtn"
                                                     :to="{ name: 'OperatorList', params: { medicalCenter: item.id } }">
                                            <v-btn v-bind="attrs" v-on="on" color="orange darken-1"
                                                   class="mr-2 WM-ActionButton">
                                                <v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
                                                <span>Operator</span>
                                            </v-btn>
                                        </router-link>
                                    </template>
                                    <span>Operator</span>
                                </v-tooltip>
                                <v-tooltip bottom open-on-hover>
                                    <template v-slot:activator="{ on, attrs }">
                                        <v-btn v-bind="attrs" v-on="on" color="pink" @click="removeModal(item.id)"
                                               class="WM-ActionButton">
                                            <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                            <span>Remove</span>
                                        </v-btn>
                                    </template>
                                    <span>Remove</span>
                                </v-tooltip>
                            </td>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
            <v-divider/>
            <div class="text-xs-center mt-2" v-if="lastPage > 1">
                <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
            </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} from 'vuex'

export default {
    metaInfo() {
        return {
            title: this.$route.meta.title,
            meta: this.$route.meta.metaTags || []
        }
    },
    data: () => ({
        headers: [
            {sortable: false, text: "Hospital Name", value: "name"},
            {sortable: false, text: "Date", value: "date"},
            {sortable: false, text: "Operator", value: "operator"},
            {sortable: false, text: "Action", value: "action", align: "center",}
        ],
        filter: {
            name: ''
        },
        items: [],
        currentPage: 1,
        lastPage: 1
    }),
    created() {
        this.load();
    },
    methods: {
        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
        async load(page = 1) {
            let filter = `?page=${page}&name=${this.filter.name}`;
            const result = await ApiService.get(urls.listMedicalCenter(filter));
            this.items = result.data.data.data;
            this.currentPage = result.data.data.current_page;
            this.lastPage = result.data.data.last_page;
        },
        removeModal(id) {
            this.changeCurrentModal({
                modal: "modal-delete-delete",
                properties: {
                    success: () => {
                        this.remove(id);
                    },
                }
            });
        },
        async remove(id) {
            this.changeCurrentModal({
                modal: "modal-user-confirmation",
                properties: {width: '30'},
                success: async () => {
                    const result = await ApiService.delete(urls.deleteMedicalCenter(id));
                    this.closeModal();
                    if (result && result.status == 200) {
                        for (const key in this.items) {
                            if (this.items[key].id == id) {
                                this.items.splice(key, 1);
                            }
                        }
                    }
                },
            });
        }
    },
    watch: {
        currentPage(page) {
            this.load(page);
        }
    }
};
</script>

<style lang="css" scoped>
.WM-ActionButton {
    padding: 8px 22px;
}
</style>