cssd-front/src/views/MyItem/Tabs/MyRequests.vue

<template>
    <div>
        <v-layout align-center wrap class="my-3 px-5">
            <v-flex xs12 md3 sm3 class="WM-FlexCenter">
                <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                <v-text-field class="py-3 pr-3" v-model="filter.request_id" label="Request ID" color="black"></v-text-field>
            </v-flex>
            <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
                <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"></v-text-field>
            </v-flex>
            <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
                <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
                <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" item-value="id"
                    label="Hospital" color="black" :items="medicalCenters" :clearable="true"></v-autocomplete>
            </v-flex>
            <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
                <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                <v-text-field class="py-3 pr-3" v-model="filter.size" label="Size" color="black"></v-text-field>
            </v-flex>
            <v-flex xs12 md3 sm3 class="WM-FlexCenter pl3">
                <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                <v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"></v-text-field>
            </v-flex>

        </v-layout>
        <v-layout class="px-5 my-3">
            <v-flex class xs12 md2 sm3>
                <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
                    <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                    <span class="white--text CSSD-font">Filter</span>
                </v-btn>
            </v-flex>
            <v-spacer></v-spacer>
            <v-flex xs12 md2 sm2 class="text-xs-right">
                <router-link :to="{ name: 'AddItem' }">
                    <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 CSSD-font">Add</span>
                    </v-btn>
                </router-link>
            </v-flex>
        </v-layout>
        <v-layout class="px-4 my-3">
            <v-divider></v-divider>
        </v-layout>
        <v-layout align-center wrap class="my-3 px-5">
            <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">{{ item.id }}</td>
                        <!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
                        <td class="title font-weight-light">{{ item.name }}</td>
                        <td class="title font-weight-light">{{ item.udi }}</td>
                        <td class="title font-weight-light">{{ item.size }}</td>
                        <td class="text-xs-right FlexBtn Height-MD-60">
                            <v-tooltip bottom open-on-hover>
                                <template v-slot:activator="{ on, attrs }">
                                    <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" @click="show(item.id)">
                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
                                        <span>Show</span>
                                    </v-btn>
                                </template>
                                <span>Show</span>
                            </v-tooltip>
                            <v-tooltip bottom open-on-hover>
                                <template v-slot:activator="{ on, attrs }">
                                    <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
                                        @click="generateBarcode(item, 'Item')">
                                        <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
                                        <span class="CSSD-font">Generate Barcode</span>
                                    </v-btn>
                                </template>
                                <span>Generate Barcode</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>
    </div>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations, mapGetters } from "vuex";
import toast from "@/services/global/toast.service";

export default {
    data: () => ({
        headers: [
            // {
            //     sortable: true,
            //     text: "ID",
            //     value: "id"
            // },
            {
                sortable: true,
                text: "Item ID",
                value: "id"
            },
            {
                sortable: false,
                text: "Name",
                value: "name"
            },
            {
                sortable: false,
                text: "UDI",
                value: "udi"
            },
            {
                sortable: false,
                text: "Size",
                value: "size"
            },
            {
                sortable: false,
                text: "Action",
                value: "action",
                align: "left"
            }
        ],
        filter: {
            name: '',
            size: '',
            request_id: '',
            medical_center_id: ''
        },
        items: [],
        currentPage: 1,
        lastPage: 1,
        medicalCenters: []

    }),
    created() {
        this.load();
    },
    methods: {
        ...mapMutations("modal", ["changeCurrentModal"]),
        async load(page = 1) {
            let filter = '?';
            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.listItem(filter)
            );
            if (result && result.status == 200) {
                this.items = result.data.data.data;
                this.currentPage = result.data.data.current_page;
                this.lastPage = result.data.data.last_page;
            }
        },
        async generateBarcode(item, type = null) {
            let code = item.udi;
            if (code) {
                const result = await ApiService.post(urls.Barcode(code, type));
                if (result && result.status == 200) {
                    this.changeCurrentModal({
                        modal: "modal-barcode-barcode",
                        properties: { result, item },
                    });
                }
            } else {
                toast.error('please first set UDI');
            }
        },
        async show(testResultId) {
            const result = await ApiService.get(
                urls.showItem(testResultId)
            );
            if (result && result.status == 200) {
                this.changeCurrentModal({
                    modal: "modal-item-show",
                    properties: { result },
                });
            }
        },
        async changeStatus(id) {
            const result = await ApiService.post(
                urls.changeItemStatus(id)
            );
            if (result) {
                for (const key in this.items) {
                    if (
                        this.items.hasOwnProperty(key) &&
                        this.items[key].id == id
                    ) {
                        this.items[key].status = result.data.data.status;
                    }
                }
            }
        },
    },
    watch: {
        currentPage(page) {
            this.load(page);
        },
    }
};
</script>