REG_IBL/one-ui/agreement/one-md-price-copy-jpa-v3/components/oneMdPricePacketList.vue

<template>
    <v-layout class="fill-height" column>

        <v-card>
            <v-layout row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="packets" :loading="isLoading" hide-actions class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_PacketName }}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_PacketType == 'PN' ? 'Panel' : 'Profile' }}</td>
                            <td class="text-xs-right pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ one_money(props.item.T_PacketOriginalPrice) }}</td>
                            <td class="text-xs-right pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ one_money(props.item.discrp) }}</td>
                            <td class="text-xs-right pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ Math.round(props.item.discrp * 10000 / props.item.T_PacketOriginalPrice) / 100 }}</td>
                            <td class="text-xs-right pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ one_money(props.item.T_PacketPrice) }}</td>
                        </template>

                    </v-data-table>
                    <v-pagination v-model="curr_packet_page" :length="total_packet_page" :total-visible="10" @input="change_page"></v-pagination>
                </v-flex>
            </v-layout>
        </v-card>
    </v-layout>
</template>

<style scoped>
    .searchbox .v-input.v-text-field .v-input__slot {
        min-height: 60px;
    }

    .searchbox .v-btn {
        min-height: 60px;
    }

    table.v-table tbody td,
    table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }

    .one-btn-icon {
        font-size: 1.5em
    }
</style>

<script>
    module.exports = {
        components: {},

        mounted() {

        },

        methods: {
            one_money(p) {
                return window.one_money(p)
            },

            isSelected(p) {
                return false
            },

            selectMe(doc) {
                this.$store.commit('price/update_selected_packet', doc)
            },

            change_page(x) {
                this.curr_packet_page = x
                this.$store.dispatch('price/search_packet')
            }
        },
        computed: {
            packets: {
                get() {
                    return this.$store.state.price.packets
                },
                set(v) {
                    this.$store.commit('price/update_packets', v)
                }
            },

            selected_packet: {
                get() {
                    return this.$store.state.price.selected_packet
                },
                set(v) {
                    this.$store.commit('price/update_selected_packet', v)
                }
            },

            total_packet() {
                return this.$store.state.price.total_packet
            },

            total_packet_page() {
                return this.$store.state.price.total_packet_page
            },

            curr_packet_page: {
                get() {
                    return this.$store.state.price.curr_packet_page
                },
                set(v) {
                    this.$store.commit('price/update_curr_packet_page', v)
                }
            },

            isLoading() {
                return false
            }
        },
        data() {
            return {
                headers: [{
                        text: "NAMA",
                        align: "left",
                        sortable: false,
                        value: "mr",
                        width: "25%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "TIPE",
                        align: "center",
                        sortable: false,
                        value: "lab",
                        width: "15%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "HARGA NORMAL",
                        align: "right",
                        sortable: false,
                        value: "name",
                        width: "15%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "DISKON",
                        align: "right",
                        sortable: false,
                        value: "name",
                        width: "15%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "DISKON (%)",
                        align: "right",
                        sortable: false,
                        value: "name",
                        width: "15%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "HARGA PAKET",
                        align: "right",
                        sortable: false,
                        value: "name",
                        width: "15%",
                        class: "pa-2 blue lighten-3 white--text"
                    }
                ],
                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'T_TestName',
                    totalItems: this.$store.state.price.total_mous
                }
            };
        }
    }
</script>