admin-erahn/resources/js/Online/SearchSAG.vue

<template>

   <div>
   <modal ref="modal" @togtable="toggleTable"></modal>

      <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">Billplz ID</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="Billplz ID" 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>                     
                                    
                     <button id="buttonsearch" class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleTable()"><i class="fas fa-search text-white"></i></button>
                  </div>
               </div>
            </div>
         </form>
      </div>

      <div class="mx-auto hidden" id="divtable">
         <table class="min-w-full leading-normal">
            <thead class="text-center">
              <tr>
                <!-- <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Bil
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  IC/Passport
                </th> -->
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Nama
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Bayaran
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Tarikh
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Masa
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Paid at
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Status
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Billplz ID
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Tindakan
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(cust,i) in arrayCustomer" :key="i">
                <!-- <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" >
                         {{ i + 1 }}
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                         {{ cust.nokp }}
                      </p>
                    </div>
                  </div>
                </td> -->
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                         {{ cust.customer_name }}
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                         {{ 'RM' + cust.total_payment.toFixed(2) }}
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                         {{ cust.tarikh }}
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                         {{ cust.masa }}
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                         {{ cust.paid_at }}
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                         
                         <span v-if="cust.status === 'PAID'" class="inlint-block mr-1 last:mr-0 py-1 px-2 rounded bg-yellow-200 text-xs font-semibold text-green-600 uppercase">
                          {{ cust.status }}
                        </span>
                         <span v-if="cust.status === 'NOT PAID'" class="inlint-block mr-1 last:mr-0 py-1 px-2 rounded bg-yellow-200 text-xs font-semibold text-yellow-600 uppercase">
                          {{ cust.status }}
                        </span>
                         <span v-if="cust.status === 'UNSUCCESSFUL'" class="inlint-block mr-1 last:mr-0 py-1 px-2 rounded bg-red-200 text-xs font-semibold text-red-600 uppercase">
                          {{ cust.status }}
                        </span>
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap">
                         {{ cust.billplz_id }}
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <button  v-if="cust.status !== 'NOT PAID'"  class="border border-gray-600 text-gray-600 font-montserrat py-2 px-4 font-medium rounded-xl transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist" viewBox="0 0 16 16">
                        <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                        <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
                        </svg>
                      </button>
                      <button v-else  @click="tekanmodal(cust.id)" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist" viewBox="0 0 16 16">
                        <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                        <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
                        </svg>
                      </button>
                      
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
         </div>

   </div>
</template>

<script>
import { createPopper } from "@popperjs/core"
import modal from '../components/util/ModalTransaction'

const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2
});

export default{
    components: {
      modal

    },
   props: {
      placement: {
         type: String,
         default: "bottom-start"
      }
   },
   data() {
      return {
         dropdownShow: false,
         param1: "",
         arrayCustomer: Object
      }
   },
   methods: {
    async toggleTable() {
       
      let res = await this.getData()
      let divtable =  document.getElementById("divtable");
      
      if(res !== 'tiada')
      {
         if(this.arrayCustomer.length > 0)
         {
            divtable.classList.remove("hidden");
         }else{
            this.$toast.warning("Tiada data dijumpai");
            divtable.classList.add("hidden");
         }
      }else{

          this.$toast.info("Sila masukkan value dalam box");
         divtable.classList.add("hidden");
      }
      
     
    },
    getData: function() {


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

      if(inputvalue)
      {
         return this.axios.get(this.$hostname + '/admin/searchSAGOnline', {
            params: {
               billplzid: inputvalue
            }
            }).then(response => {

              if(response.data.length > 0)
              {
               this.arrayCustomer = response.data
              }
              else{
                this.arrayCustomer = []
              }
            }).catch(error => {
               console.log(error)
            })

      }else{
         return 'tiada'

      }
      
    },
    hasNumber: function(inputString){
      return /\d/.test(inputString);
    },
    tekanmodal: function(statusid){
      this.$refs.modal.showModal = true;
      this.$refs.modal.statusid = statusid;

    }
   }

}
</script>