cssd-front/src/components/modal/user/List.vue

<template>
    <v-container grid-list-xs>
        <material-card color="black" title="Users List">
            <v-form @submit.prevent="transfer">
                <v-layout align-center justify-center wrap class="px-5 my-2">
                    <v-flex xs12 md12 sm12>
                        <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 }">
                                <tr :active="item.selected" @click="selectUser(item)">
                                    <td>
                                        <v-checkbox :input-value="item.selected" primary hide-details></v-checkbox>
                                    </td>
                                    <td class="headline font-weight-light">
                                        {{ item.name }}
                                        <br>
                                        <span class="WM-Font-14">{{ item.cell_number }}</span>
                                    </td>
                                    <td class="title font-weight-light">{{ item.created_at }}</td>
                                    <td class="title font-weight-light">
                                        <span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
                                    </td>
                                    <td class="title font-weight-light">{{ item.medical_center.name }}</td>
                                </tr>
                            </template>
                        </v-data-table>
                    </v-flex>
                </v-layout>
                <v-layout class="px-4 my-3">
                    <v-divider></v-divider>
                </v-layout>
                <div class="text-xs-center mt-2" 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-strart class="mt-3">
                    <v-btn type="submit" class="WM-CyanBlueGradient-BG ml-5 px-5">
                        <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
                        <span class="black--text">Submit</span>
                    </v-btn>
                </v-layout>
            </v-form>
        </material-card>
    </v-container>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
    data: () => ({
        headers: [
            {
                sortable: false,
                text: "Select",
                value: "selected"
            },
            {
                sortable: true,
                text: "Operator",
                value: "name"
            },
            {
                sortable: false,
                text: "Date",
                value: "date"
            },
            {
                sortable: false,
                text: "Role",
                value: "role"
            },
            {
                sortable: true,
                text: "Hospital",
                value: "hospital"
            },
        ],
        currentPage: 1,
        lastPage: 1,
        items: [],
        filter: {
            medical_center_id: "",
        },
        selected: {},
    }),
    methods: {
        ...mapMutations("modal", ["closeModal", "setResultModal"]),
        async load(page = 1) {
            let filter = "?";

            this.filter.medical_center_id = this.getModalProperties.data.user?.medical_center?.id;
            for (const key in this.filter) {
                if (this.filter.hasOwnProperty(key)) {
                    filter += `${key}=${this.filter[key]}&`;
                }
            }
            filter += page ? `page=${page}` : `page=1`;
            const result = await ApiService.get(urls.listOpertor(filter));
            if (result && result.status == 200) {
                result.data.data.data = result.data.data.data.map(x => {
                    return {
                        ...x, selected: null
                    }
                })
                this.items = result.data.data.data;
                this.currentPage = result.data.data.current_page;
                this.lastPage = result.data.data.last_page;
            } else {
                this.$router.push({ name: `Dashboard` });
            }
        },
        selectUser(item) {
            if (item.selected) {
                this.selected = {};
            } else {
                this.selected.selected = false;
                this.selected = item;
            }
            item.selected = !item.selected;
        },
        async transfer() {
            let form = {
                user_id: this.selected.id
            }
            const result = await ApiService.post(
                urls.transferItem(this.getModalProperties.data.id),
                form
            );
            if (result && result.status == 200) {
                this.setResultModal(result.data.data);
                this.closeModal();
            }
        }
    },
    watch: {
        currentPage(page) {
            this.load(page);
        }
    },
    computed: {
        ...mapGetters("modal", ["getModalProperties", "getModalResult"])
    },
    created() {
        this.load();
    },
};
</script>