From 6322d1d6f06d2c71f6b23426766db93f403bb9d3 Mon Sep 17 00:00:00 2001
From: hafifierahman <muhdhafifie97@gmail.com>
Date: Sun, 24 Apr 2022 10:47:48 +0800
Subject: [PATCH] fix skit

---
 resources/js/components/util/PBmodal.vue | 109 +++++++++++++++++------
 1 file changed, 80 insertions(+), 29 deletions(-)

diff --git a/resources/js/components/util/PBmodal.vue b/resources/js/components/util/PBmodal.vue
index 6594e6c..44c7096 100644
--- a/resources/js/components/util/PBmodal.vue
+++ b/resources/js/components/util/PBmodal.vue
@@ -25,12 +25,12 @@
                         <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="selected">
+                                    <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="selected">
+                                    <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>
@@ -41,14 +41,16 @@
                                 <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-3">
                                     Amaun Diminta
                                 </label>
-                                <input v-model="amaun_dimohon" 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" />
+                                <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="amaunlulus" 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" />
+                                <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">Field is required</div>
+                                <div class="error" v-if="!$v.amaunlulus.between">Must be between {{$v.amaunlulus.$params.between.min}} and {{$v.amaunlulus.$params.between.max}}</div><span tabindex="0">Blur to see changes</span>
                             </div>
                         </div>
 
@@ -61,6 +63,8 @@
                                 </div>
                             </div>
                         </div>
+                            <div class="text-red-500 text-xs italic" v-if="!$v.imageFile.file_size_validation">File melebihi had!</div>
+
                     </div>
                     <!--footer-->
                     <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
@@ -84,10 +88,24 @@
 </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: {
@@ -104,6 +122,8 @@ export default {
             selected: '',
             amaunlulus: 0,
             amaun_dimohon: 0,
+            submitStatus: '',
+            imageFile: '',
             item: {
                 image: null,
                 imageUrl: null
@@ -114,6 +134,7 @@ export default {
         onUpload: function (e) {
             const file = e.target.files[0]
             this.item.image = file
+            this.imageFile = file
             this.item.imageUrl = URL.createObjectURL(file)
         },
         toggleModal: function () {
@@ -121,35 +142,65 @@ export default {
         },
         FuncHantar: function () {
 
-            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);
+            this.$v.$touch()
 
-            
-            // console.log(formData)
-            let config = {
-                header: {
-                    'Content-Type': 'multipart/form-data'
-                }
+            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.$toast.success("Berjaya Meluluskan Permohonan Daripada Pengurus Besar!")
+                            this.$emit('clickEvent_', this.pageNumber)
+                        } else {
+
+                            this.showModal = false;
+                            this.$toast.error("Tidak Berjaya!")
+                        }
+                    });
+
+                }, 500)
             }
 
-            // return;
+            console.log(this.submitStatus)
 
-            // 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.$toast.success("Berjaya Meluluskan Permohonan Daripada Pengurus Besar!")
-                    this.$emit('clickEvent_', this.pageNumber)
-                } else {
-
-                    this.showModal = false;
-                    this.$toast.error("Tidak Berjaya!")
-                }
-            });
+        }
+    },
+    validations: {
+        amaunlulus: {
+            required,
+            between:between(0, this.amaun_dimohon)
+        },
+        imageFile: {
+            required,
+            file_size_validation
+        },
+        amaun_dimohon: {
+            required
+        },
+        selected: {
+            required
         }
     }
 }