admin-erahn/resources/js/components/util/Bankmodal.vue

<template>
<div>
    <transition name="modal-fade">
        <div v-if="showModal" class=" overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
            <div class="relative w-1/3  my-6 mx-auto max-w-6xl">
                <!--content-->
                <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                    <!--header-->
                    <div class="flex items-start bg-gray-200 justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
                        <h3 class="text-xl font-semibold">
                            Maklumat Penghantaran
                        </h3>
                        <button class="p-1 ml-auto  border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()">
                            <span class=" text-black h-6 w-6 text-2xl block outline-none focus:outline-none">
                                X
                            </span>
                        </button>
                    </div>
                    <!--body-->
                    <div class="p-6">

                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-3">
                            Nama Bank
                        </label>
                        <select v-model.trim="$v.selectedbank.$model" class="w-full p-2 rounded-md border bg-white border-gray-400 focus:outline-none rounded-md focus:ring-1 ring-cyan-500 uppercase">
                            <option value="" selected disabled hidden>Sila Pilih Bank Anda***</option>
                            <option v-for="(bank,i) in jenisbank" :key="i" :value="bank.abbreviation">{{ bank.name }}</option>
                        </select>
                        <!-- <input v-model="selectedbank" type="text" class="mr-2 bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black" /> -->
                        <div class="text-red-500 text-xs italic" v-if="!$v.selectedbank.required">Isi tempat kosong</div>

                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-3">
                            No Rujukan
                        </label>
                        <input v-model.trim="$v.noresit.$model" type="text" class="mr-2 bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black" />
                        <div class="text-red-500 text-xs italic" v-if="!$v.noresit.required">Isi tempat kosong</div>

                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-3">
                            Kaedah Penghantaran
                        </label>
                        <select v-model.trim="$v.selectedjeniscit.$model" class="w-full p-2 rounded-md border bg-white border-gray-400 focus:outline-none rounded-md focus:ring-1 ring-cyan-500 uppercase">
                            <option value="" selected disabled hidden>Sila Pilih Kaedah Penghantaran***</option>
                            <option value="CIT">Cash-in-Transit</option>
                            <option value="TT">tellygraphic Transfer</option>
                        </select>
                        <div class="text-red-500 text-xs italic" v-if="!$v.selectedjeniscit.required">Isi tempat kosong</div>

                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-3">
                            Nota
                        </label>
                        <input v-model.trim="$v.namacit.$model" type="text" class="mr-2 bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black" />
                        <div class="text-red-500 text-xs italic" v-if="!$v.namacit.required">Isi tempat kosong</div>
                    </div>
                    <!--footer-->
                    <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
                        <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" @click="toggleModal" type="button">
                            Batal
                        </button>
                        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="FuncHantar()" type="button">
                            Hantar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    <transition enter-active-class="transition-all transform duration-200 ease-out">
    </transition>

    <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>

</div>
</template>

<script>
import {
    createPopper
} from "@popperjs/core";

import {
    required,
    minLength,
    between
} from 'vuelidate/lib/validators'

export default {

    props: {
        placement: {
            type: String,
            default: "bottom-start"
        }
    },
    name: "bank-modal",
    data() {
        return {
            showModal: false,
            mohonid: 0,
            selectedbank: '',
            selectedjeniscit: '',
            noresit: '',
            namacit: '',
            submitStatus: '',
            jenisbank: {}
        }
    },
    created() {
        this.senaraiBank();
    },
    methods: {
        toggleModal: function () {
            this.showModal = false;
        },
        senaraiBank: function () {
            this.axios.get(this.$hostname + '/api/bank').then(response => {
                this.jenisbank = response.data;
            });
        },
        FuncHantar: function () {

            if (this.submitStatus == 'PENDING') {
                event.target.disabled = true;
                return;
            } else {
                event.target.disabled = false;
            }

            this.$v.$touch()

            if (this.$v.$invalid) {
                this.submitStatus = 'ERROR'
                this.$toast.error('Sila isi butiran yang disediakan dengan betul!')
            } else {
                // console.log(this.selectedbank,this.noresit)
                this.submitStatus = 'PENDING'
                setTimeout(() => {
                axios.put(this.$hostname + '/admin/permohonan/updatebank', {
                    kelulusan: 'Lulus',
                    jenisbank: this.selectedbank,
                    noresit: this.noresit,
                    namacit: this.namacit,
                    jeniscit: this.selectedjeniscit,
                    mohonid: this.mohonid

                }).then(response => {

                    if (response.data === 1) {
                        this.showModal = false;
                        this.$toast.success("Berjaya Meluluskan Permohonan Bank!")
                        this.$emit('clickEvent_', this.pageNumber)
                    } else {

                        this.showModal = false;
                        this.$toast.error("Tidak Berjaya!")
                    }
                });
                }, 500)
            }

        }
    },
    validations: {
        selectedbank: {
            required
        },
        noresit: {
            required
        },
        namacit: {
            required
        },
        selectedjeniscit: {
            required
        }
    }
}
</script>

<style>
.modal-fade-enter,
.modal-fade-leave-to {
    opacity: 0;
}

.modal-fade-enter-active,
.modal-fade-leave-active {
    transition: opacity .5s ease;
}
</style>