admin-erahn/resources/js/components/util/BlacklistModal.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-3xl font-semibold">
              Pemeriksaan Aliran Tunai
            </h3>
            <button class="p-1 ml-auto  border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()">
              <span class=" text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                ×
              </span>
            </button>
          </div> -->
          <!--body-->
          <div class="relative p-6 flex-auto">
            <!-- <p class="my-4 text-blueGray-500 text-lg leading-relaxed">
                
            </p> -->

            <h3 class="text-center text-3xl font-semibold">
              Daftar Senarai Hitam
            </h3>

            <div class="flex flex-wrap mt-4">
              <div class="flex flex-row mx-auto">
              
                  <div class="flex flex-col">
                    <input id="frminput" type="text" ref="btnDropdownRef" 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 ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
                        <div class="py-1" role="none">
                          <a v-for="(cust,i) in arrayCustomer" :key="i" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0"  v-on:click="ClickUrl({ cust: cust.id })">{{ cust.nama }}<br><b>{{ (cust.kpbaru) ? cust.kpbaru : cust.kplama }}</b></a>
                        </div>
                    </div>
                  </div>                     
                                
                  <button id="buttonsearch" class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleDropdown()"><i class="fas fa-search text-white"></i></button>
              </div>
            </div>


            <div v-show="this.specCust">
              <form class="w-full mx-auto border border-gray-200 px-4 py-4 rounded mt-4">

                  <div class="w-full px-3 mb-6 md:mb-0">
                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
                      Nama
                    </label>
                    <input name="nama" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" :value="this.specCust.nama">
                    <p class="text-red-500 text-xs italic">Please fill out this field.</p>
                  </div>
                  <div class="w-full px-3 mt-3">
                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
                      Nokp
                    </label>
                    <input name="nokp" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" :value="(this.specCust.kpbaru) ? this.specCust.kpbaru : this.specCust.kplama">
                    <p class="text-red-500 text-xs italic">Please fill out this field.</p>
                  </div>

                
                  <div class="w-full px-3 mt-3">
                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-password">
                      Nota
                    </label>
                    <textarea v-model="nota" class="appearance-none block h-36 w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"></textarea>
                    <p class="text-red-500 text-xs italic">Please fill out this field.</p>
                  </div>
              </form>
            </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" v-on: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" type="button">
              Daftar
            </button>
          </div>
        </div>
      </div>
    </div>
    </transition>
    <transition
			enter-active-class="transition-all transform duration-200 ease-out"
		>
    <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
    </transition>
  </div>
</template>

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

export default {

    props: {
    placement: {
        type: String,
        default: "bottom-start"
    }
   },
  name: "modal",
  data() {
    return {
      showModal: false,
      kodcaw: '',
      dropdownShow: false,
      param1: "",
      arrayCustomer: [],
      specCust: []
    }
  },
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.onClick);
  },
  created(){
    console.log(this.kodcaw)
  },
  methods: {
    toggleModal: function(){
      this.showModal = !this.showModal;
    },
    async toggleDropdown() {
       
      await this.getData()

      if(this.arrayCustomer.length > 0)
      {
         this.dropdownShow = true;
         createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
            placement: "bottom-start",
             modifiers: [{
              name: "preventOverflow",
            }]
         });
      }else{
         console.log('siap')
      }
     
    },
    getData: function() {

      let inputvalue = document.getElementById("frminput").value;

      if(inputvalue)
      {
         if(this.hasNumber(inputvalue))
         {
            this.axios.get('http://localhost:8000/admin/searchByIC', {
            params: {
               ic: inputvalue
            }
            }).then(response => {
               this.arrayCustomer = response.data

            }).catch(error => {
               console.log(error)
            })

            

         }else{
            this.axios.get('http://localhost:8000/admin/searchByName', {
            params: {
               nama: inputvalue
            }
            }).then(response => {
              this.arrayCustomer = response.data

            }).catch(error => {
               console.log(error)
            })
         }
      }
      
    },
    hasNumber: function(inputString){
      return /\d/.test(inputString);
    },
    onClick: function(){
       let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
       let searchInside = this.$refs.btnDropdownRef.contains(event.target);
       let buttonSearch = document.getElementById('buttonsearch');

        if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
           if(buttonSearch.value !== '')
           {
            this.dropdownShow = true
           }
         }
         else{

            if(this.$refs.btnDropdownRef.value != '')
            {
               this.dropdownShow = false
            }else{
               this.dropdownShow = false
               this.arrayCustomer = []
            }
            
         }
    },
    ClickUrl: function(customer){
         console.log(customer.cust)
        let self = this
        this.arrayCustomer.map(function(value, key) {
            if(customer.cust == value.id)
            {
              self.specCust = value;
            }
        });
    }
    // kemaskinifunc: function(){
    //   // console.log(this.kodcaw + this.kodlaluan + this.tarikh)
    //   axios.put('/api/check/kemaskinialirantunai', 
    //   { 
    //       kodcaw: this.kodcaw,
    //       teller: this.kodlaluan,
    //       tarikh: this.tarikh,
    //       gadaian: this.gadaian.replace(/[^0-9.-]+/g,""), 
    //       penebusan: this.penebusan.replace(/[^0-9.-]+/g,""), 
    //       bakiakhir: this.bakiakhir.replace(/[^0-9.-]+/g,"")

    //   }).then(response => {

    //     if(response.data == 'berjaya')
    //     {
    //       this.showModal = false;
    //       this.$toast.success("Kemaskini Sudah Berjaya!")
    //       // vm.$forceUpdate();
                
    //       this.$emit('clickEvent_', this.pageNumber)
            
    //       // setTimeout("window.location.reload()", 3000);
    //     }else{

    //       this.showModal = false;
    //       this.$toast.error("Kemaskini tidak berjaya")
    //     }
    //   });

    // }
  },
}
</script>

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

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