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" v-model="inputValue" @input="validateInput"/>
                     <p v-if="warningMessage" class="text-red-500 text-sm mt-1">{{ warningMessage }}</p>
                     <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: '',
      inputValue: '',
      warningMessage: ''
   }
},
mounted() {
 document.addEventListener('click', this.onClick);
},
beforeDestroy() {
 document.removeEventListener('click', this.onClick);
},
methods: {

validateInput() {
const length = this.inputValue.length;

if (length > 0 && length < 10) {
   this.warningMessage = 'Input terlalu pendek. Minimum 10 aksara.';
} else if (length > 30) {
   this.warningMessage = 'Input terlalu panjang.';
} else {
   this.warningMessage = '';
}
},

async toggleDropdown() {
// Check validation before searching
if (this.warningMessage) {
   return; // Don't proceed if there's a warning
}

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)

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>