hafifierahman
237 lines
10 KiB
Vue
237 lines
10 KiB
Vue
<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-xl font-semibold">
|
|
Kelulusan Pengurus Besar
|
|
</h3>
|
|
<button class="p-1 ml-auto border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()">
|
|
<span class=" text-black h-6 w-6 text-2xl block outline-none focus:outline-none">
|
|
X
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<!--body-->
|
|
<div class="p-6">
|
|
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Keputusan
|
|
</label>
|
|
<div class="flex-col items-center flex-shrink-0 text-sm px-2">
|
|
<div class="flex items-center justify-center mt-4 mb-4">
|
|
<div class="mx-2 radio">
|
|
<input type="radio" id="Lulus" name="radkeputusan" value="Lulus" class="hidden focus:bg-gray-500" v-model.trim="$v.selected.$model">
|
|
<label for="Lulus" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:bg-purple-500 focus:bg-purple-500 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Lulus</label>
|
|
</div>
|
|
|
|
<div class="mx-2 radio cursor-pointer">
|
|
<input type="radio" id="Batal" name="radkeputusan" value="Batal" class="hidden focus:bg-gray-500" v-model.trim="$v.selected.$model">
|
|
<label for="Batal" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:bg-purple-500 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Tak Lulus</label>
|
|
</div>
|
|
</div>
|
|
<div class="text-red-500 text-xs italic flex justify-center" v-if="!$v.selected.required">Pilih keputusan!</div>
|
|
</div>
|
|
|
|
<div class="w-full flex">
|
|
<div class="w-1/2">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-3">
|
|
Amaun Diminta
|
|
</label>
|
|
<input v-model.trim="$v.amaun_dimohon.$model" readonly type="text" class="mr-2 bg-gray-200 appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight border-black" />
|
|
</div>
|
|
|
|
<div class="w-1/2 ml-2">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-3">
|
|
Amaun Lulus
|
|
</label>
|
|
<input v-model.trim="$v.amaunlulus.$model" type="text" 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 class="text-red-500 text-xs italic" v-if="!$v.amaunlulus.required">Perlu ada dalam kotak</div>
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.amaunlulus.between">Mestilah dalam lingkungan {{$v.amaunlulus.$params.between.min}} dan {{$v.amaunlulus.$params.between.max}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-4">
|
|
<div class="mb-3 w-96">
|
|
<!-- <label for="formFileLg" class="form-label inline-block mb-2 text-gray-700">Large file input example</label> -->
|
|
<input name="image" accept="image/*" @change="onUpload" class="form-control block w-full px-2 py-1.5 text-xl font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" type="file">
|
|
<!-- <div class="mx-auto flex justif">
|
|
<img v-if="item.imageUrl" class="h-24 w-24 mx-auto justify-center" :src="item.imageUrl" />
|
|
</div> -->
|
|
<div class="text-red-500 text-xs italic" v-if="!$v.imageFile.required">File perlu ada!</div>
|
|
</div>
|
|
</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" @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" @click="FuncHantar()" type="button">
|
|
Hantar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition enter-active-class="transition-all transform duration-200 ease-out">
|
|
</transition>
|
|
|
|
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
required,
|
|
minLength,
|
|
between
|
|
} from 'vuelidate/lib/validators';
|
|
|
|
import {
|
|
createPopper
|
|
} from "@popperjs/core";
|
|
|
|
const file_size_validation = (value, vm) => {
|
|
if (!value) {
|
|
return true;
|
|
}
|
|
let file = value;
|
|
return (file.size < 2097152);
|
|
}
|
|
|
|
export default {
|
|
|
|
props: {
|
|
placement: {
|
|
type: String,
|
|
default: "bottom-start"
|
|
}
|
|
},
|
|
name: "pb-modal",
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
mohonid: 0,
|
|
selected: '',
|
|
amaunlulus: 0,
|
|
amaun_dimohon: 0,
|
|
submitStatus: '',
|
|
imageFile: '',
|
|
item: {
|
|
image: null,
|
|
imageUrl: null
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
testfunc: function (){
|
|
return 10000;
|
|
},
|
|
onUpload: function (e) {
|
|
const file = e.target.files[0]
|
|
this.item.image = file
|
|
this.imageFile = file
|
|
this.item.imageUrl = URL.createObjectURL(file)
|
|
},
|
|
toggleModal: function () {
|
|
this.showModal = false;
|
|
},
|
|
FuncHantar: function () {
|
|
|
|
if(this.submitStatus == 'PENDING')
|
|
{
|
|
event.target.disabled = true;
|
|
return;
|
|
}else{
|
|
event.target.disabled = false;
|
|
}
|
|
|
|
this.$v.$touch()
|
|
|
|
if (this.$v.$invalid) {
|
|
this.submitStatus = 'ERROR'
|
|
this.$toast.error('Sila isi butiran yang disediakan dengan betul!')
|
|
} else {
|
|
this.submitStatus = 'PENDING'
|
|
setTimeout(() => {
|
|
|
|
let formData = new FormData();
|
|
formData.append('image', this.item.image);
|
|
formData.append('kelulusan', this.selected);
|
|
formData.append('mohonid', this.mohonid);
|
|
formData.append('amaun_lulus', this.amaunlulus);
|
|
|
|
// console.log(formData)
|
|
let config = {
|
|
header: {
|
|
'Content-Type': 'multipart/form-data'
|
|
}
|
|
}
|
|
|
|
// return;
|
|
|
|
// axios.put(this.$hostname + '/admin/permohonan/updatepb', {
|
|
axios.post('api/check/kelulusan/pb', formData, config).then(response => {
|
|
|
|
if (response.data === 1) {
|
|
this.showModal = false;
|
|
this.submitStatus = 'SIAP'
|
|
this.$toast.success("Berjaya Meluluskan Permohonan Daripada Pengurus Besar!")
|
|
this.$emit('clickEvent_', this.pageNumber)
|
|
} else {
|
|
this.submitStatus = 'SIAP'
|
|
this.showModal = false;
|
|
this.$toast.error("Tidak Berjaya!")
|
|
}
|
|
});
|
|
|
|
}, 500)
|
|
}
|
|
|
|
// console.log(this.submitStatus)
|
|
|
|
}
|
|
},
|
|
validations: {
|
|
amaunlulus: {
|
|
required,
|
|
// between: between(30, 30000)
|
|
between (value) {
|
|
let amaun = parseInt(this.amaun_dimohon.replace(/,/g, ''), 10)
|
|
return between(0, amaun)(value)
|
|
}
|
|
},
|
|
imageFile: {
|
|
required,
|
|
// file_size_validation
|
|
},
|
|
amaun_dimohon: {
|
|
required,
|
|
},
|
|
selected: {
|
|
required
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.modal-fade-enter,
|
|
.modal-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-fade-enter-active,
|
|
.modal-fade-leave-active {
|
|
transition: opacity .5s ease;
|
|
}
|
|
</style>
|