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

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

    <div v-if="this.showloader === true" 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="Object.keys(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.norujukan }}</p>
                        <p class="font-bold text-md w-1/3 text-red-500 justify-center flex text-center">{{ kelulusan.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.khazanah }}</span></p>
                        <p class="w-1/4 text-sm text-gray-700">Pembiayaan: RM{{ changeFormat(kelulusan.jumpinj) }}</p>
                        <p class="w-1/4 text-sm text-gray-700">Nilai Marhun: RM{{ changeFormat(kelulusan.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.teller }}</span></p>
                        <p class="w-1/4 text-sm text-gray-700">Margin: {{ kelulusan.margin }}%</p>
                        <p class="w-1/4 text-sm text-gray-700">Berat: {{ kelulusan.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.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.tarikh | moment("calendar") }}

                        <div class="pl-4">
                            <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-6 border border-yellow-500 rounded mr-1" @click.prevent="ApproveFunc(kelulusan.norujukan,kelulusan.cawangankod,kelulusan.teller,kelulusan.siri)"><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-500 rounded mr-1" @click.prevent="DisapproveFunc(kelulusan.norujukan,kelulusan.cawangankod,kelulusan.teller,kelulusan.siri)"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
                        </div>
                    </div>
                </div>
            </div>
        </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>

        <pagination :data="paginate" @clickEvent_="getKelulusanList"></pagination>

    </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: {},
            showloader: false
        }
    },
    created() {
        this.getKelulusanList(this.currentPage)
    },
    methods: {
        changeFormat: function (data) {
            return formatter.format(data)
        },
        getKelulusanList(pageNumber) {
            this.showloader = false

            this.axios.get(this.$hostname + '/admin/ListOperasi/Paginate', {
                params: {
                    page: pageNumber
                }
            }).then(response => {
                console.log(response.data)
                this.showkelulusan = response.data
                this.paginate = response.data
                this.currentPage = pageNumber
                this.showloader = true
            });
        },
        ApproveFunc: async function (noruj, kcaw, tel, sir) {
            let boolkatalaluan = 0;
            console.log(noruj, kcaw, tel, sir)
            const {
                value: katalaluan
            } = await this.$swal({
                title: 'Masukkan Katalaluan Semula',
                input: 'password',
                inputPlaceholder: 'Katalaluan',
                confirmButtonText: 'Hantar',
                showCancelButton: true,
                cancelButtonText: 'Batal',
                allowOutsideClick: false
            })

            await this.axios.post('/mintasemulakelulusan', {
                passsemula: katalaluan
            }).then(response => {
                if (response.data === 0) {
                    boolkatalaluan = 0;
                } else {
                    boolkatalaluan = 1;
                }
            });

            if (boolkatalaluan == 1) {

                await this.$swal({
                    title: 'Masukkan Komen',
                    input: 'text',
                    inputPlaceholder: 'Komen',
                    confirmButtonText: 'Hantar',
                    showCancelButton: true,
                    cancelButtonText: 'Batal',
                    allowOutsideClick: false
                }).then((result) => {

                    if (result.isConfirmed) {

                        return this.axios.post('/api/check/kelulusan/operasi', {
                            norujukan: noruj,
                            komenkelulusan: result.value,
                            kodcaw: kcaw,
                            namaoperasi: this.$attrs['namaoperasi'],
                            teller: tel,
                            siri: sir,
                        }).then((response) =>{
                            if(response.data == 1)
                            {
                                this.getKelulusanList(1)
                            }
                        });

                    } else if (result.isDenied) {
                        Swal.fire('Changes are not saved', '', 'info')
                    }
                })

            }

        },
        DisapproveFunc: async function (noruj, kcaw, tel, sir) {
            let boolkatalaluan = 0;
            const {
                value: katalaluan
            } = await this.$swal({
                title: 'Masukkan Katalaluan Semula',
                input: 'password',
                inputPlaceholder: 'Katalaluan',
                confirmButtonText: 'Hantar',
                showCancelButton: true,
                cancelButtonText: 'Batal',
                allowOutsideClick: false
            })

            await this.axios.post('/mintasemulakelulusan', {
                passsemula: katalaluan
            }).then(response => {
                if (response.data === 0) {
                    boolkatalaluan = 0;
                } else {
                    boolkatalaluan = 1;
                }
            });

            if (boolkatalaluan == 1) {
                const {
                    value: komen
                } = await this.$swal({
                    title: 'Masukkan Komen',
                    input: 'text',
                    inputPlaceholder: 'Komen',
                    confirmButtonText: 'Hantar',
                    showCancelButton: true,
                    cancelButtonText: 'Batal',
                    allowOutsideClick: false
                })

                return this.axios.post('/api/check/kelulusan/operasi', {
                    norujukan: noruj,
                    komenkelulusan: komen,
                    kodcaw: kcaw,
                    namaoperasi: this.$attrs['namaoperasi'],
                    teller: tel,
                    siri: sir,
                    pembatalan: "batal"
                });

            }

        },
        RedirectHome: function () {
            return window.location.href = '/';
        }
    }

}
</script>