admin-erahn/resources/js/Kelulusan/TableKelulusan.vue

<template>
    <div >
      <modal ref="modal"></modal>

        <div class="bg-white md:items-center md:justify-between shadow rounded-lg p-4 md:p-6 xl:p-8 my-6">

        <template v-if="showkelulusan.data.length > 0">
            <div v-for="(kelulusan,index) in showkelulusan.data" :key="index" class="flex flex-wrap w-full">
                <div class="w-full border rounded-l p-4">
                    <div class="flex flex-wrap mb-4">
                        <p class="font-bold text-xl w-1/3">{{ kelulusan.kelulusanall[0].norujukan }}</p>
                        <p class="font-bold text-md w-1/3 text-red-500 justify-center flex text-center">{{ kelulusan.kelulusanall[0].status }}</p>
                        <p class="font-bold text-xl w-1/3 text-gray-500 flex justify-end">Ar-Rahn {{ kelulusan.cawangan }}</p>
                    </div>
                    <div class="flex flex-wrap">
                        <p class="font-bold text-green-500 w-1/2">PC/PPC: <span class="text-black font-normal text-md capitalize">{{ kelulusan.kelulusanall[0].khazanah }}</span></p>
                        <p class="w-1/4 text-sm text-gray-700">Pembiayaan: RM{{ changeFormat(kelulusan.kelulusanall[0].jumpinj) }}</p>
                        <p class="w-1/4 text-sm text-gray-700">Nilai Marhun: RM{{ changeFormat(kelulusan.kelulusanall[0].nilaimarhun) }}</p>
                    </div>
                    <div class="flex flex-wrap">
                        <p class="font-bold text-green-500 w-1/2">Teller: <span class="text-black font-normal text-md capitalize">{{ kelulusan.kelulusanall[0].teller }}</span></p>
                        <p class="w-1/4 text-sm text-gray-700">Margin: {{ kelulusan.kelulusanall[0].margin }}%</p>
                        <p class="w-1/4 text-sm text-gray-700">Berat: {{ kelulusan.kelulusanall[0].berat }} gm</p>
                    </div>
                     <div class="flex flex-wrap">
                        <p class="font-bold text-green-500 w-3/4">Komen: <span class="text-black font-normal text-md w-1/4">{{ kelulusan.kelulusanall[0].komen }}</span></p>

                    </div>
                        <!-- <p class="font-bold text-xl">KB2210232-00032</p> -->

                    <div class="mx-auto flex justify-between mb-auto text-sm text-gray-500 mt-4">
                        <!-- 10 Jul 2018, 05:56PM -->
                        {{ kelulusan.kelulusanall[0].tarikh | moment("calendar") }}

                        <div class="pl-4">
                            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1" @click.prevent="ApproveFunc"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
                            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-6 border border-red-700 rounded mr-1" @click.prevent="DisapproveFunc"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
                        </div>
                    </div>
                </div>
            </div>
            <pagination :data="paginate" @clickEvent_="getKelulusanList"></pagination>
        </template>
        <template v-else>
            <div class="flex place-content-center w-full">
                <div class="grid mx-auto">
                    <img src="/img/approval.jpg" class="h-40 w-40 mx-auto" alt="Windster Logo">
                    <i class="text-center">Tiada data untuk kelulusan pada waktu ini..<br> Sila tekan refresh semula untuk melihat kelulusan latest.</i>
                    <button class="p-4 bg-blue-400 rounded text-white w-2/4 mx-auto mt-4" @click.prevent="RedirectHome">Laman Utama</button>
                </div>
            </div>
        </template>

        </div>

    </div>

</template>
<script>
import modal from '../components/util/KomenModal.vue'
import pagination from '../components/pagination.vue'

const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2
});

export default {
  components: {
    pagination,
    modal,
    // deletemodal
    
	},
    data(){
        return{
        currentPage: 1,
        showkelulusan:[],
        paginate:{}
        }
    },
    created() {
    this.getKelulusanList(this.currentPage)
	},
    methods:{
        changeFormat: function(data){
            return formatter.format(data)
        },
        getKelulusanList(pageNumber){
            this.axios.get(this.$hostname + '/admin/ListOperasi/Paginate',{
                params: {
                page: pageNumber
            }
            }).then(response => {
                this.showkelulusan = response.data
                this.paginate = response.data
                this.currentPage = pageNumber
            });
        },
        ApproveFunc:function(){
            this.$refs.modal.showModal = true;
        },
        DisapproveFunc:function(){
            console.log('taklulus');
        },
        RedirectHome:function(){
            return window.location.href = '/';
        }
    }
    
}
</script>