original ledger

<template>
    <div class="dashboard-contents">
        <div class="row">
            <div class="col-lg-6" style="margin-top: 20px;">
                <h2 style="padding:15px; margin-top:10px;">Buku Besar</h2>
            </div>
            <div class="col-lg-6" style="padding-top: 15px; margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-3">
                        <select class="select-dropdown" name="" id="">
                            <option value="" disabled selected>Pilih bendera...</option>
                            <option value="Semua cabang">Semua bendera</option>
                            <option value="Cabang A">Bendera A</option>
                            <option value="Cabang B">Bendera B</option>
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <select class="select-dropdown" name="" id="">
                            <option value="" disabled selected>Pilih cabang...</option>
                            <option value="Semua cabang">Semua cabang</option>
                            <option value="Cabang A">Cabang A</option>
                            <option value="Cabang B">Cabang B</option>
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <download-excel class="btn waves-effect waves-circle waves-float pull-right button-export"
                            worksheet = "Daftar Kehadiran"
                            name = "data_kehadiran.xls"
                            :data = "exportData">
                            <img src="@/assets/images/file-text.png" alt="Alternate Text" /> Export
                        </download-excel>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 second-row">
                <div class="row">
                    <div class="col-lg-10"></div>
                    <div class="col-lg-2 search-div">
                        <input type="text" name="permission" placeholder="Cari..." ng-model="query" value="" style="width: 100%; height: 34px; float: right; margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: white; border-radius: 5px; padding: 5px; margin-bottom: 24px;" />
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="table-div">
                    <b-table striped hover
                        id="Ledgers"
                        :items="ledger"
                        :fields="fields"
                        style="margin-top: 10px;">
                        <template v-slot:cell(Debit)="data">
                            {{ data.item.Debit | currency }}
                        </template>
                        <template v-slot:cell(Credit)="data">
                            {{ data.item.Credit | currency }}
                        </template>
                        <template v-slot:cell(Total)="data">
                            {{ data.item.Total | currency }}
                        </template>
                    </b-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import $ from 'jquery'
import DownloadExcel from 'vue-json-excel'

import Ledgers from '@/services/Accounting/Ledger'
import LegalEntities from '@/services/Companies/LegalEntities'
import Branches from '@/services/Companies/Branches'

export default {
  name: 'LedgerManagement.index',
  components: {
    DownloadExcel
  },
  data () {
    return {
      fields: [
        { key: 'created_at', label: 'Tanggal' },
        { key: 'DebitAccountSettingId', label: 'Kode Akun' },
        { key: 'DebitDescription', label: 'Deskripsi' },
        { key: 'Debit', label: 'Debit' },
        { key: 'CreditAccountSettingId', label: 'Kode Akun' },
        { key: 'CreditDescription', label: 'Deskripsi' },
        { key: 'Credit', label: 'Kredit' },
      ],
      exportData: [],
      userData: {},
      bill: [],
      roles: [],
      legalEntity: [],
      branch: [],
      ledger: []
    }
  },
  created: function () {
      this.init()
  },
  mounted: function () {
    window.$ = $
    if(localStorage.userData !== undefined) {
      this.userData = JSON.parse(localStorage.userData)
    } else {
      this.$router.push({ name: 'home' })
      location.reload()
    }
  },
  methods: {
    init: async function () {
        let legalEntity = await LegalEntities.index()
        let branch = await Branches.index()
        let result = await Ledgers.index()

        this.ledger = result.data
        this.exportData = result.data
        this.legalEntity = this.itemLookup(legalEntity.data)
        this.branch = this.itemLookup(branch.data)
    },
    itemLookup: function (json) {
        let data = []
        for(var i = 0; i< json.length; i++) {
            data[json[i].Id] = json[i]
        }
        return data
    },
    formatDate(time) {
      var formattedTime = moment(time).format('DD MMMM YYYY HH:mm')
      if(formattedTime == 'Invalid date') {
        formattedTime = '-'
      }
      return formattedTime
    },
    detail: function (id) {
        this.$router.push({ name: 'LedgerManagement.detail', params: { id: id } })
    },
    edit: function (id) {
        this.$router.push({ name: 'LedgerManagement.edit', params: { id: id } })
    },
    del: async function (id) {
        let result = await Ledgers.delete(id)
        if(result.status == 200) {
            alert(result.data.message)
            this.$router.push({ name: 'LedgerManagement.index' })
            location.reload()
        } else {
            alert("Delete Gagal")
            location.reload()
        }
    }
  }
}
</script>

<style>
.table-div {
    padding-left: 30px;
    margin-left: 0px !important;
    overflow-x: auto;
    overflow-y: auto;
}

.second-row {
    margin-top: 30px;
    padding-left: 30px;
}

.select-dropdown {
    width: 100%;
    height: 45px;
    border-color: #0059aa;
    border-radius: 5px;
}

.button-export {
    width: 100%;
    height: 45px;
    background-color: #0059aa;
    color:white;
    border-radius: 5px;
}

.button-create {
    width: 100%;
    height: 45px;
    background-color: #20c197;
    color:white;
    border-radius: 5px;
}
</style>