BankList.vue

<template>
  <div>
    <page-title-bar></page-title-bar>
    <v-container fluid grid-list-xl pt-0>
      <v-layout row wrap>
        <app-card
          :fullBlock="true"
          colClasses="xs12">
          <v-card-title>
            <v-btn @click.stop="onAdd" color="primary" dark medium>
              <i class="material-icons">add</i>
              {{$t('message.addNew')}}
            </v-btn>
            <v-spacer></v-spacer>
            <v-text-field
              append-icon="search"
              hide-details
              :label="$t('message.search')"
              single-line
              v-model="search"
            ></v-text-field>
          </v-card-title>

          <v-data-table
            :headers="headers"
            :items="banks"
            :search="search">
            <template slot="headerCell" slot-scope="props">
              <span>{{ $t(`message.${props.header.text}`) }}</span>
            </template>
            <template slot="items" slot-scope="props">
              <td>{{ props.item.bank_name }}</td>
              <td>{{ props.item.account_type }}</td>
              <td>{{ props.item.account_number }}</td>
              <td>{{ props.item.owner_full_name }}</td>
              <td>{{ props.item.owner_idenfication_type }}-{{ props.item.owner_idenfication }}</td>
              <td class="text-left">
                <v-tooltip top>
                  <v-btn
                    @click="onEdit(props.item)"
                    color="primary"
                    dark
                    fab
                    icon
                    small
                    slot="activator"
                  >
                    <v-icon class="zmdi zmdi-edit"></v-icon>
                  </v-btn>
                  <span>{{ $t('message.edit') }}</span>
                </v-tooltip>
                <v-tooltip top>
                  <v-btn
                    @click="onDelete(props.item)"
                    class="trash-icon"
                    color="error"
                    dark
                    fab
                    icon
                    slot="activator"
                    small
                  >
                    <v-icon light>cancel</v-icon>
                  </v-btn>
                  <span>{{ $t('message.delete') }}</span>
                </v-tooltip>
              </td>
            </template>
          </v-data-table>
          <delete-confirmation-dialog
            @onConfirm="deleteBank"
            :heading="$t('message.deleteConfirmation')"
            :message="$t('message.deleteMessage')"
            ref="deleteConfirmationDialog"
          ></delete-confirmation-dialog>
          <bank-manage
            :dialog.sync="showModal"
            @on-save="onSave"
            ref="bankManageModal"
            :is-edit="!isCreate"
          ></bank-manage>
        </app-card>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BankManage from './BankManage'
import { DELETE_BANK, GET_BANKS, CREATE_BANK, UPDATE_BANK } from '../../store/modules/banks/actions.type'

export default {
  name: 'bankList',
  components: {
    BankManage
  },
  data() {
    return {
      headers: [
        { text: 'name', sortable: true, value: 'bank_name' },
        { text: 'moneyType', sortable: true, value: 'account_type' },
        { text: 'accountNumberIdentifier', sortable: true, value: 'account_number' },
        { text: 'ownerName', sortable: true, value: 'owner_full_name' },
        { text: 'ownerDocument', sortable: true, value: 'owner_idenfication' },
        { text: 'actions', sortable: false, value: '' }

      ],
      search: '',
      showModal: false,
      showModalImage: false,
      isCreate: true,
      selectedBank: {},
    }
  },
  computed: {
    ...mapGetters(['loadingBanks', 'banks'])
  },
  created() {
    this.getBanks()
  },
  methods: {
    deleteBank() {
      this.$store.dispatch(DELETE_BANK, this.selectedBank.id)
      this.$refs.deleteConfirmationDialog.close()
    },
    getBanks() {
      this.$store.dispatch(GET_BANKS)
    },
    onAdd() {
      this.showModal = true
      this.isCreate = true
    },
    onDelete(bank) {
      this.selectedBank = bank
      this.$refs.deleteConfirmationDialog.openDialog()
    },
    onEdit(bank) {
      this.$refs.bankManageModal.setValue(bank)
      this.showModal = true
      this.isCreate = false
      this.selectedBank = bank
    },
    onSave(bank) {
      if (this.isCreate) {
        this.$store.dispatch(CREATE_BANK, bank)
      } else {
        this.selectedBank = Object.assign({}, this.selectedBank, bank)
        this.$store.dispatch(UPDATE_BANK, this.selectedBank)
      }
    }
  }
}
</script>

<style>
</style>