From 0dcfb8bb7529d98b71ec7253aae9523eb3437bfb Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 17 Mar 2023 17:12:27 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20badge=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99=20tap=20=E0=B9=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87=E0=B8=84=E0=B9=88=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_exam/components/ExamPayment.vue        | 123 +++++++-----------
 1 file changed, 47 insertions(+), 76 deletions(-)

diff --git a/src/modules/01_exam/components/ExamPayment.vue b/src/modules/01_exam/components/ExamPayment.vue
index 1cd8d90..39b42fe 100644
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@@ -1,56 +1,28 @@
 <template>
+  <q-card class="my-card" style="max-width: 1000px; width: 100%" bordered>
+    <q-card-actions class="q-pa-md text-center" :class="getClass(status)">
+      <div class="text-black text-bold">{{ message(status) }}</div>
+
+      <q-space />
+    </q-card-actions>
+  </q-card>
+
   <div class="d-flex justify-content-center align-items-center min-vh-100">
     <div>
-      <!-- <div class="text-h5 text-center text-primary q-pb-lg">ชำระค่าธรรมเนียมการสอบ</div> -->
-
       <div class="text-center q-pb-lg">
-        <q-badge
+        <!-- <q-badge
           :outline="badgeOutline"
           :color="badgeColor"
           :label="badgeLabel"
           class="q-pa-nond text-center"
           style="font-size: 16px"
-        />
-        <!-- <q-badge
-          outline
-          color="primary"
-          label="รออัปโหลดหลักฐานชำระเงิน"
-          class="q-pa-nond text-center"
         /> -->
-        <!-- <q-badge outline color="red" label="อัปโหลดไม่สำเร็จ" class="q-pa-nond text-center" /> -->
-        <!-- <q-badge outline color="orange" label="รอการตรวจสอบ" class="q-pa-nond text-center" /> -->
       </div>
-      <!-- <q-badge outline color="secondary" label="ตรวจสอบเเล้ว" /> -->
-      <div class="row q-pa-nond text-center">
-        <div class="q-pa-md col-6">
-          <q-carousel
-            animated
-            v-model="slide"
-            thumbnails
-            swipeable
-            infinite
-            class="my-carousel"
-            ref="carousel"
-          >
-            <q-carousel-slide :name="1" :img-src="img1" :ratio="1" />
-            <q-carousel-slide :name="2" :img-src="img2" :ratio="1" />
 
-            <template v-slot:control>
-              <!-- <q-carousel-control position="bottom-right" :offset="[18, 18]">
-                <q-icon
-                  name="remove"
-                  class="remove-icon"
-                  @click="
-                    () => {
-                      removeSlide(slide, $refs.carousel)
-                    }
-                  "
-                />
-              </q-carousel-control> -->
-            </template>
-          </q-carousel>
-        </div>
+      <div class="row q-pa-nond text-center">
+        <q-img :src="img" :ratio="1" style="max-width: 300px; height: 300px" />
         <q-uploader
+          ref="uploader"
           type="file"
           :factory="uploadImg"
           class="q-mx-auto col-6"
@@ -61,14 +33,14 @@
         />
       </div>
       <div class="q-pa-md text-center">
-        <q-btn color="primary" @click="updateBadge" label="ส่งหลักฐานการชำระเงิน" />
+        <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
       </div>
       <div class="text-black text-center q-pb-lg">
         ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
       </div>
     </div>
-    <q-btn @click="updateBadgeReject" label="R" />
-    <q-btn @click="updateBadgeSuceed" label="S" />
+    <q-btn color="negative" @click="setStatus('rejected')">Rejected</q-btn>
+    <q-btn color="positive" @click="setStatus('success')">Success</q-btn>
   </div>
 </template>
 
@@ -78,41 +50,44 @@ import { log } from 'console'
 import { defineComponent, ref, Ref } from 'vue'
 import { onMounted } from 'vue'
 import { ComponentRef } from '@vue/runtime-core'
+const status = ref<string>('')
+
+const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
 
-const img1 = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
-const img2 = ref<string>('')
 const uploadImg = (file: any) => {
-  img1.value =
-    'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
-  img2.value = 'https://f.ptcdn.info/914/078/000/rkq4y4prgcMlHAUfb3h-o.jpg'
-  console.log('string')
+  //   img.value =
+  //     'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
+  img.value =
+    'https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png'
 }
-const badgeOutline = ref(true)
-const badgeColor = ref('blue')
-const badgeLabel = ref<string>('รออัปโหลดหลักฐานชำระเงิน')
+
 const slide = ref(1)
-function updateBadge(): void {
-  badgeColor.value = 'orange'
-  badgeLabel.value = 'รอการตรวจสอบ'
+const setStatus = (val: string) => {
+  status.value = val
 }
-function updateBadgeReject(): void {
-  badgeColor.value = 'red'
-  badgeLabel.value = 'หลักฐานการชำระเงินผิดพลาด'
-}
-function updateBadgeSuceed(): void {
-  badgeColor.value = 'primary'
-  badgeLabel.value = 'ตรวจสอบเเล้ว'
-}
-function removeSlide(slide: Ref<number>, carouselRef: ComponentRef): void {
-  // Get the current index of the slide
-  const currentSlide = slide.value
 
-  // Remove the current slide from the array
-  carouselRef.value.removeSlide(currentSlide)
-
-  // If the current slide was the last one, go back one slide
-  if (slide.value === carouselRef.value.slides.length) {
-    slide.value -= 1
+const getClass = (val: string) => {
+  switch (val) {
+    case 'processing':
+      return 'bg-lime-12'
+    case 'rejected':
+      return 'bg-deep-orange-4'
+    case 'success':
+      return 'bg-green-12'
+    default:
+      return 'bg-blue-grey-2'
+  }
+}
+const message = (val: string) => {
+  switch (val) {
+    case 'processing':
+      return 'รอการตรวจสอบ'
+    case 'rejected':
+      return 'หลักฐานการชำระเงินผิดพลาด'
+    case 'success':
+      return 'ตรวจสอบเเล้ว'
+    default:
+      return 'รออัปโหลดหลักฐานชำระเงิน'
   }
 }
 </script>
@@ -121,8 +96,4 @@ function removeSlide(slide: Ref<number>, carouselRef: ComponentRef): void {
 .q-img {
   margin: 0 auto;
 }
-.my-carousel {
-  width: 100%; /* Set the width to 100% of the parent container */
-  height: 500px; /* Set the height to the desired value */
-}
 </style>

From 4aea4f3d86f699330c4a0cc03570111ad7ea9f53 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 17 Mar 2023 17:35:37 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20rejected=20status?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_exam/components/ExamPayment.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/modules/01_exam/components/ExamPayment.vue b/src/modules/01_exam/components/ExamPayment.vue
index 39b42fe..1bf88ac 100644
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@@ -1,9 +1,13 @@
 <template>
   <q-card class="my-card" style="max-width: 1000px; width: 100%" bordered>
-    <q-card-actions class="q-pa-md text-center" :class="getClass(status)">
-      <div class="text-black text-bold">{{ message(status) }}</div>
-
-      <q-space />
+    <q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
+      <div class="text-black text-bold col-12" style="font-size: 16px">
+        {{ message(status) }}
+      </div>
+      <div class="text-black col-12" v-if="status === 'rejected'">
+        <li>{{ rejectMessage }}</li>
+      </div>
+      <!-- <q-space /> -->
     </q-card-actions>
   </q-card>
 
@@ -51,7 +55,7 @@ import { defineComponent, ref, Ref } from 'vue'
 import { onMounted } from 'vue'
 import { ComponentRef } from '@vue/runtime-core'
 const status = ref<string>('')
-
+const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
 const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
 
 const uploadImg = (file: any) => {
@@ -71,11 +75,11 @@ const getClass = (val: string) => {
     case 'processing':
       return 'bg-lime-12'
     case 'rejected':
-      return 'bg-deep-orange-4'
+      return 'bg-deep-orange-11'
     case 'success':
       return 'bg-green-12'
     default:
-      return 'bg-blue-grey-2'
+      return 'bg-blue-4'
   }
 }
 const message = (val: string) => {