KoPKB/admin-erahn
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pickup

Browse Source
This commit is contained in:
fifi97
2021-12-01 10:33:11 +08:00
parent 11ea68cdc1
commit 587d2a2204
3 changed files with 195 additions and 10473 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Searchpelanggan.vue
+83 -27
View File
@@ -1,24 +1,24 @@
<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">
<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">Pelanggan</label>
<div class="flex flex-wrap">
<div class="flex flex-row w-96 mx-auto">
<div class="flex flex-col w-96">
<input type="text" ref="btnDropdownRef" placeholder="Masukkan IC atau Nama" 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" />
<input id="frminput" type="text" ref="btnDropdownRef" placeholder="Masukkan IC atau Nama" 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" href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-0">{{ cust.nama }}<br><b>{{ cust.kpbaru }}</b></a>
<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">{{ cust.nama }}<br><b>{{ (cust.kpbaru) ? cust.kpbaru : cust.kplama }}</b></a>
<!-- <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-1">MUHAMMAD HAFIFIE BIN ABD RAHMAN<br><b>970403035003</b></a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-2">MUHAMMAD HAFIFIE BIN ABD RAHMAN<br><b>970403035003</b></a> -->
</div>
</div>
</div>
<button class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleDropdown()"><i class="fas fa-search text-white"></i></button>
<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>
@@ -30,40 +30,96 @@
import { createPopper } from "@popperjs/core";
export default{
props: {
placement: {
type: String,
default: "bottom-start"
}
},
data() {
return {
dropdownShow: false,
arrayCustomer: []
}
},
computed:{
getData(){
let data = this.axios.get('http://localhost:8000/api/customers/630411035213').then(response => {
// this.arrayCustomer.push(response.data)
this.arrayCustomer = response.data
});
return data;
arrayCustomer: Object
}
},
mounted() {
document.addEventListener('click', this.onClick);
},
beforeDestroy() {
document.removeEventListener('click', this.onClick);
},
methods: {
toggleDropdown: function(){
toggleDropdown : function(){
if(this.dropdownShow){
this.dropdownShow = false;
} else {
this.dropdownShow = true;
createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
placement: "bottom-start"
});
this.getData()
if(this.arrayCustomer.length > 0)
{
// if(this.dropdownShow){
// this.dropdownShow = false;
// } else {
this.dropdownShow = true;
createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
placement: "bottom-start",
modifiers: [{
name: "preventOverflow",
}]
});
// }
}
},
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{
this.dropdownShow = false
this.arrayCustomer = []
}
}
}
}
</script>