From c7bb9e984229236fb1bc010474aed032984ca3da Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 8 Dec 2023 17:09:15 +0700
Subject: [PATCH] =?UTF-8?q?popup=20=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B9=80=E0=B8=AB=E0=B8=95=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableHistory.vue | 44 +++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index e7bcb7d..9edcead 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -222,6 +222,15 @@ function classStatus(status: string) {
       break
   }
 }
+
+const modalReject = ref<boolean>(false)
+const reasonRejrct = ref<string>('')
+function onClickOpenPopupRejrct(data: any) {
+  if (data.editStatus === 'ไม่อนุมัติ') {
+    reasonRejrct.value = data.editReason
+    modalReject.value = true
+  }
+}
 </script>
 
 <template>
@@ -314,7 +323,10 @@ function classStatus(status: string) {
             @click="openPopup(props.row)"
           />
         </q-td>
-        <q-td v-else-if="tab === 'time'">
+        <q-td
+          v-else-if="tab === 'time'"
+          @click="onClickOpenPopupRejrct(props.row)"
+        >
           <q-chip
             :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
             :text-color="`${stores.classColorStatus(props.row.editStatus)}-7`"
@@ -368,7 +380,11 @@ function classStatus(status: string) {
               </div>
             </div>
 
-            <div class="row" v-else-if="tab === 'time'">
+            <div
+              class="row"
+              v-else-if="tab === 'time'"
+              @click="onClickOpenPopupRejrct(props.row)"
+            >
               <div>
                 <q-chip
                   :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
@@ -399,6 +415,30 @@ function classStatus(status: string) {
     </template>
   </q-table>
 
+  <q-dialog v-model="modalReject">
+    <q-card style="width: 35vw; max-width: 35vw">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold"
+          >หมายเหตุการไม่อนุมัติ</q-toolbar-title
+        >
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          v-close-popup
+        />
+      </q-toolbar>
+      <q-form ref="myForm">
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <div class="row col-12">{{ reasonRejrct }}</div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
   <Popup
     :fetchData="props.fetchData"
     :modal="modalPopup"