hafifierahman
106 lines
4.2 KiB
Vue
106 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<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-auto 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-xl font-semibold">
|
|
Penukaran Status Bayaran Online
|
|
</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">
|
|
X
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<!--body-->
|
|
<div class="relative p-6 flex-auto">
|
|
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Status
|
|
</label>
|
|
<div class="relative">
|
|
<!-- <select v-model="referencestatus" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
|
|
<option v-for="(stat,i) in status" :key="i">{{ stat }}</option>
|
|
</select>
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
|
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
|
</div> -->
|
|
<input readonly 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:border-gray-500" v-model="referencestatus" type="text" placeholder="Paid">
|
|
</div>
|
|
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-3">
|
|
Paid at
|
|
</label>
|
|
|
|
<datetime format="YYYY-MM-DD h:i:s" width="300px" v-model="datepaidat" class="appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"></datetime>
|
|
|
|
</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" type="button" v-on:click="toggleModal()">
|
|
Batal
|
|
</button>
|
|
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded" type="button" v-on:click="simpan()">
|
|
Kemaskini
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import datetime from 'vuejs-datetimepicker';
|
|
|
|
export default {
|
|
name: "modal",
|
|
components:{
|
|
datetime
|
|
},
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
referencestatus: 'PAID',
|
|
status: [
|
|
'PAID',
|
|
'UNSUCCESSFUL',
|
|
'NOT PAID'
|
|
],
|
|
statusid: 0,
|
|
datepaidat:''
|
|
}
|
|
},
|
|
methods: {
|
|
toggleModal: function(){
|
|
this.showModal = !this.showModal;
|
|
},
|
|
async simpan(){
|
|
|
|
let response = await this.postData()
|
|
|
|
if(response.data === 1)
|
|
{
|
|
this.showModal = !this.showModal;
|
|
this.$toast.success('Berjaya menukar status!')
|
|
setTimeout(()=>{
|
|
this.$emit('togtable')
|
|
},1000);
|
|
}
|
|
},
|
|
postData: function(){
|
|
|
|
return this.axios.post('http://localhost:8000/admin/simpanStatus',
|
|
{
|
|
id: this.statusid,
|
|
status: this.referencestatus,
|
|
paidat: this.datepaidat
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script> |