original item asssembly

<template>
    <div class="dashboard-contents">
        <div class="row">
            <div class="col-lg-6" style="margin-top: 20px;">
                <h2 style="padding:15px; margin-top: 10px;">Item Perakitan</h2>
            </div>
            <div class="col-lg-6" style="padding-top: 15px; margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-9"></div>
                    <div class="col-lg-3">
                        <download-excel class="btn waves-effect waves-circle waves-float pull-right button-export"
                            worksheet = "Daftar Item Perakitan"
                            name = "data_item_assembly.xls"
                            :data = "exportData">
                            <img src="@/assets/images/file-text.png" alt="Alternate Text" /> Export
                        </download-excel>
                    </div>
                    <!-- <div class="col-lg-4">
                        <router-link :to="{name: 'AssemblerManagement.create'}" type="button" class="btn waves-effect waves-circle waves-float pull-right" style="width: 132px; height: 45px; background-color: #20c197; color:white; border-radius: 5px;">
                            <img src="@/assets/images/plus-circle.png" alt="Alternate Text" /> Tambah
                        </router-link>
                    </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 item perakitan..." 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">
                    <table class="table table-hover table-striped">
                        <thead style="text-align:center;">
                            <tr>
                                <!-- <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1); border-left: 1px solid rgba(240, 237, 237, 1);">
                                    <div style="margin-bottom: 10px;">
                                        Actions <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
                                    </div>
                                    <div>
                                        <input readonly type="text" style="width: 90%; margin-bottom: 10px; border: none; background-color: white; border-radius: 5px; padding: 5px; cursor: default;" />
                                    </div>
                                </th> -->
                                <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
                                    <div style="margin-bottom: 10px;">
                                        Nomor Perakitan <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
                                    </div>
                                    <div>
                                        <input type="text" ng-model="query.createdDate" value="" style="width: 90%; margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
                                    </div>
                                </th>
                                <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
                                    <div style="margin-bottom: 10px;">
                                        Nama Barang <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
                                    </div>
                                    <div>
                                        <input type="text" ng-model="query.createdDate" value="" style="width: 90%; margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
                                    </div>
                                </th>
                                <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
                                    <div style="margin-bottom: 10px;">
                                        Belum Dirakit <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
                                    </div>
                                    <div>
                                        <input type="text" ng-model="query.createdDate" value="" style="width: 90%; margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
                                    </div>
                                </th>
                                <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
                                    <div style="margin-bottom: 10px;">
                                        Sudah Dirakit <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
                                    </div>
                                    <div>
                                        <input type="text" ng-model="query.createdDate" value="" style="width: 90%; margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in itemAssembly" :key="item.Id">
                                <!-- <td style="padding-top: 18px; text-align:center;">
                                    <div class="btn-group">
                                        <b-dropdown text="Action" variant="primary" style="width: 120px;">
                                            <b-dropdown-item><router-link :to="{ name: 'ItemAssemblyManagement.edit', params:{ id: item.Id } }">Edit</router-link></b-dropdown-item>
                                            <b-dropdown-item @click="del(item.Id)">Delete</b-dropdown-item>
                                        </b-dropdown>
                                    </div>
                                </td> -->
                                <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.Code }}</td>
                                <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">
                                    <!-- <router-link :to="{ name: 'ItemAssemblyManagement.detail', params:{ id: item.Id } }" style="cursor: pointer;">{{ item.Name }}</router-link> -->
                                    {{ item.Name }}
                                </td>
                                <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.UnasemblyQuantity }}</td>
                                <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.AssemblyQuantity }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

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

import LegalEntities from '@/services/Companies/LegalEntities'
import Branches from '@/services/Companies/Branches'
import Inventories from '@/services/Inventories/Inventory'

export default {
  name: 'ItemAssemblyManagement.index',
  components: {
    DownloadExcel
  },
  computed: {
    itemAssembly: function () {
        return this.inventory.filter(i => i.isAssembly == 1)
    }
  },
  data () {
    return {
      exportData: [],
      userData: {},
      legalEntity: [],
      branch: [],
      inventory: []
    }
  },
  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 result = await Inventories.index()
        let legalEntity = await LegalEntities.index()
        let branch = await Branches.index()

        this.inventory = 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
    },
    del: async function (id) {
        this.$fire({
            text: "Apakah anda yakin ingin menghapus item ini?",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: 'Ya',
            cancelButtonText: 'Tidak',
        }).then(() => {
            if(result.status == 200) {
                // alert(result.data.message)
                this.$router.push({ name: 'ItemAssemblyManagement.index' })
                location.reload()
            } else {
                alert("Delete Gagal")
                location.reload()
            }
        })
        let result = await Inventories.delete(id)
    }
  }
}
</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>