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

fix skit2

Browse Source
This commit is contained in:
fifi97
2021-12-28 01:23:25 +08:00
parent 53ac187c8c
commit a36340eb10
13 changed files with 1797 additions and 956 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/util/BlacklistModal.vue
+271
View File
@@ -0,0 +1,271 @@
<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>
resources/js/components/util/Deletemodal.vue
+152
View File
@@ -0,0 +1,152 @@
<template>
<div>
<button @click="show = true">Click</button>
<!-- This example requires Tailwind CSS v2.0+ -->
<transition leave-active-class="duration-300">
<div
v-show="show"
class="fixed z-10 inset-0 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<transition name="ease-out-overlay">
<div
v-show="show"
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
></div>
</transition>
<!-- This element is to trick the browser into centering the modal contents. -->
<span
class="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true"
>&#8203;</span
>
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<transition name="ease-out-modal">
<div
v-show="show"
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
>
<!-- Heroicon name: outline/exclamation -->
<svg
class="h-6 w-6 text-red-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3
class="text-lg leading-6 font-medium text-gray-900"
id="modal-title"
>
Deactivate account
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">
Are you sure you want to deactivate your account? All of
your data will be permanently removed. This action
cannot be undone.
</p>
</div>
</div>
</div>
</div>
<div
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
>
<button
@click="show = false"
type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
>
Deactivate
</button>
<button
type="button"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>
Cancel
</button>
</div>
</div>
</transition>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
};
</script>
<style lang="postcss" scoped>
.badge {
@apply inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700;
&:hover {
@apply bg-gray-300;
}
}
.ease-out-overlay-enter-active,
.ease-out-overlay-leave-active {
@apply opacity-100 duration-300;
}
.ease-out-overlay-enter, .ease-out-overlay-leave-to /* .fade-leave-active below version 2.1.8 */ {
@apply opacity-0 duration-200;
}
.ease-out-modal-enter-active,
.ease-out-modal-leave-active {
@apply opacity-100 translate-y-0 sm:scale-100 duration-300;
}
.ease-out-modal-enter, .ease-out-modal-leave-to /* .fade-leave-active below version 2.1.8 */ {
@apply ease-in opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-200;
}
</style>