admin-erahn/resources/js/components/Searchbarangkes.vue

<template>
      <div class="container w-full max-w-xl mx-auto mt-10 px-4 font-sans">
         <form class="bg-white w-full shadow-md rounded-lg px-8 pt-6 pb-4 mb-4" onclick="return false">
            <div class="mb-4 w-96 mx-auto">
               <label class="block text-gray-500 font-medium text-sm mb-2">SAG</label>
               <div class="flex flex-wrap">
                  <div class="flex flex-row w-96 mx-auto">
                  
                     <div class="flex flex-col w-96">
                        <input id="frminput" type="text" ref="btnDropdownRef" placeholder="Masukkan No Rujukan SAG" class="mr-2 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" />
                     
                        <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" role="menuitem" tabindex="-1" id="menu-item-0" :href="Urlredirect({ cust: cust.id })"  v-on:click="ClickUrl($event)">{{ 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>
         </form>
      </div>
</template>

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

export default{
   props: {
      placement: {
         type: String,
         default: "bottom-start"
      }
   },
   data() {
      return {
         dropdownShow: false,
         param1: "",
         arrayCustomer: [],
         tempcaw: '',
         tempnorujukan: '',
      }
   },
   mounted() {
    document.addEventListener('click', this.onClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.onClick);
  },
   methods: {
   //    async toggleDropdown(){
       
   //    await this.getData()
   //    await this.$nextTick()

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

      if (this.arrayCustomer.length > 0) {
         console.log('masuk');
         this.dropdownShow = true;
         createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
            placement: "bottom-start",
            modifiers: [{ name: "preventOverflow" }]
         });
      } else {
         console.log('siap');
      }
   },
    async getPrefix(value){
      let tempcaw = '';
      let kodcaw = '';
      tempcaw = value.slice(0,6)

      // if (/^[A-Za-z]/.test(value)) {
      //    // Kalau mula dengan huruf → ambil 3 char
      //    tempcaw = value.slice(0, 3);
      // } else if (/^\d/.test(value)) {
      //    // Kalau mula dengan nombor → ambil 5 char
      //    tempcaw = value.slice(0, 5);
      // }

      kodcaw = await this.compareCawangan(tempcaw)

      if(kodcaw) return kodcaw; else null;

      // return null; // fallback kalau tak match
    },
    compareCawangan: function(kodcaw){
      return this.axios.get('/api/check/cawangan')
      .then(response => {
         let cawanganlist = response.data;
         let prefix = kodcaw;
         let exactMatch = cawanganlist.find(item => 
            item.kodcaw.toLowerCase() === prefix.toLowerCase()
         );

         // if (exactMatch) return { ...exactMatch, matchType: 'exact' };
         if (exactMatch) return exactMatch.kodcaw;

    
         // Contains match
         let containsMatch = cawanganlist.find(item => 
            item.kodcaw.toLowerCase().includes(prefix.toLowerCase()) ||
            prefix.toLowerCase().includes(item.kodcaw.toLowerCase())
         );
         
      return containsMatch ? containsMatch.kodcaw : null;
      // return containsMatch ? { ...containsMatch, matchType: 'contains' } : null;
      })
      .catch(error => {
         console.error('Error fetching cawangan:', error);
      });


    },
    async getData() {
      let inputvalue = document.getElementById("frminput").value;
      let kodcaw = await this.getPrefix(inputvalue);
      
      this.tempcaw = kodcaw;
      this.tempnorujukan = inputvalue;

      if (inputvalue && /-/.test(inputvalue)) {
         try {
            let response = await this.axios.get(this.$hostname + '/admin/searchBySag', {
            params: {
               norujukan: inputvalue,
               kodcaw: kodcaw
            }
            });
            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 = []
            }
            
         }
    },
      Urlredirect: function(options) {
         // const inputElement = document.getElementById('frminput');
         // const value = inputElement.value;
         // return window.route('pelanggan.detailssag', options.cust)
            return window.route('pelanggan.detailssag', options.cust) + '?norujukan=' + this.tempnorujukan + '&kodcaw=' + this.tempcaw;
      },

      ClickUrl: function(e){
         window.location.href = e.target.getAttribute('href');
      }
   }

}
</script>