FE_CPONE/test/vuex/one-md-price-edit/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>