From 8453e202343f81c3010a8678d570c74fb04da6f7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 8 Nov 2023 11:15:17 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20dialog=20confirm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomDialog.vue | 91 +++++++++++++++++++++++++++++++++
 src/components/FormTime.vue     | 20 ++++++--
 src/components/PopUp.vue        |  2 +-
 src/main.ts                     | 11 +++-
 src/quasar-user-options.ts      |  5 +-
 src/stores/mixin.ts             | 34 ++++++++++++
 src/views/HomeView.vue          | 13 ++++-
 7 files changed, 166 insertions(+), 10 deletions(-)
 create mode 100644 src/components/CustomDialog.vue

diff --git a/src/components/CustomDialog.vue b/src/components/CustomDialog.vue
new file mode 100644
index 0000000..fcedbed
--- /dev/null
+++ b/src/components/CustomDialog.vue
@@ -0,0 +1,91 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
+    <q-card class="q-pa-sm">
+      <q-card-section class="row">
+        <div class="q-pr-md">
+          <q-avatar
+            :icon="icon"
+            size="lg"
+            font-size="25px"
+            color="blue-1"
+            :text-color="color"
+          />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold">{{ title }}</span>
+          <br />
+          <span>{{ message }}</span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions
+        align="right"
+        class="bg-white text-teal"
+        v-if="onlycancel"
+      >
+        <q-btn label="ตกลง" flat color="grey-8" @click="onDialogCancel" />
+        <!-- <q-btn :label="textOk" :color="color" @click="onOKClick" /> -->
+      </q-card-actions>
+      <q-card-actions align="right" class="bg-white text-teal" v-else>
+        <q-btn label="ยกเลิก" flat color="grey-8" @click="onDialogCancel" />
+        <q-btn :label="textOk" :color="color" @click="onOKClick" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps } from "vue";
+import { useDialogPluginComponent } from "quasar";
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: "primary",
+  },
+  textOk: {
+    type: String,
+    default: "ตกลง",
+  },
+  title: {
+    type: String,
+    default: "หัวข้อ?",
+  },
+  message: {
+    type: String,
+    default: "ข้อความ",
+  },
+  icon: {
+    type: String,
+    default: "question_mark",
+  },
+  onlycancel: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits([
+  // REQUIRED; need to specify some events that your
+  // component will emit through useDialogPluginComponent()
+  ...useDialogPluginComponent.emits,
+]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+// dialogRef      - Vue ref to be applied to QDialog
+// onDialogHide   - Function to be used as handler for @hide on QDialog
+// onDialogOK     - Function to call to settle dialog with "ok" outcome
+//                    example: onDialogOK() - no payload
+//                    example: onDialogOK({ /*...*/ }) - with payload
+// onDialogCancel - Function to call to settle dialog with "cancel" outcome
+
+// this is part of our example (so not required)
+function onOKClick() {
+  // on OK, it is REQUIRED to
+  // call onDialogOK (with optional payload)
+  onDialogOK();
+  // or with payload: onDialogOK({ ... })
+  // ...and it will also hide the dialog automatically
+}
+</script>
diff --git a/src/components/FormTime.vue b/src/components/FormTime.vue
index 7bbde35..4f92687 100644
--- a/src/components/FormTime.vue
+++ b/src/components/FormTime.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted, defineProps } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import moment, { Moment } from "moment";
 
+// importStores
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, covertDateObject } = mixin;
+const { date2Thai, covertDateObject, dialogConfirm } = mixin;
 
 const props = defineProps({
   dataById: {
     type: Object,
     default: null,
   },
+  closePopup: {
+    type: Function,
+    required: true,
+  },
 });
 
 const dataById = ref<any>([]);
@@ -38,7 +46,10 @@ function updateClock() {
 }
 
 function onCkickSave() {
-  console.log("save");
+  dialogConfirm($q, async () => {
+    console.log("save");
+    props.closePopup();
+  });
 }
 </script>
 <template>
@@ -61,7 +72,7 @@ function onCkickSave() {
         </q-card-section>
       </q-card>
 
-      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm" v-if="statusAction">
+      <q-card flat bordered class="col-12 q-mt-sm" v-if="statusAction">
         <VueDatePicker
           v-model="date"
           :locale="'th'"
@@ -83,6 +94,7 @@ function onCkickSave() {
               :model-value="date !== null ? date2Thai(date) : null"
               :label="`${'กรอกวันที่'}`"
             >
+              <!-- :rules="[(val) => !!val || 'Field is required']" -->
               <template v-slot:prepend>
                 <q-icon
                   name="event"
diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
index af11707..b3c8a3e 100644
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@@ -37,7 +37,7 @@ watch(props, () => {
   <q-dialog v-model="props.modal" full-height>
     <q-card class="column full-height" style="width: 300px">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
-      <FormTime :dataById="data" />
+      <FormTime :dataById="data" :closePopup="clickClosePopup" />
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/main.ts b/src/main.ts
index c37899f..6c599a5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,9 @@ import "./registerServiceWorker";
 import router from "./router";
 import { createPinia } from "pinia";
 
-import { Quasar } from "quasar";
+import { Quasar, Dialog, Notify, Loading } from "quasar";
+import '@quasar/extras/material-icons/material-icons.css';
+import './styles/quasar.sass';
 import quasarUserOptions from "./quasar-user-options";
 import VueDatePicker from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
@@ -14,6 +16,13 @@ const pinia = createPinia();
 
 app.use(router);
 app.use(Quasar, quasarUserOptions);
+app.use(Quasar, {
+  plugins: {
+    Notify,
+    Dialog,
+    Loading,
+  },
+});
 app.use(pinia);
 app.component("VueDatePicker", VueDatePicker);
 
diff --git a/src/quasar-user-options.ts b/src/quasar-user-options.ts
index f19fe69..5cc6de3 100644
--- a/src/quasar-user-options.ts
+++ b/src/quasar-user-options.ts
@@ -1,9 +1,10 @@
-import './styles/quasar.sass'
+import "./styles/quasar.sass";
 // import "quasar/dist/quasar.css";
 import "@quasar/extras/material-icons/material-icons.css";
+import { Dialog, Notify } from "quasar";
 
 // To be used on app.use(Quasar, { ... })
 export default {
   config: {},
-  plugins: {},
+  plugins: { Dialog, Notify },
 };
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 8715432..2e8096d 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1,4 +1,7 @@
 import { defineStore } from "pinia";
+import CustomComponent from "@/components/CustomDialog.vue";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
 
 export const useCounterMixin = defineStore("mixin", () => {
   function date2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
@@ -80,9 +83,40 @@ export const useCounterMixin = defineStore("mixin", () => {
       return date2Thai(dateObject);
     }
   }
+  type OkCallback = () => void;
+  type CancelCallback = () => void;
+  const dialogConfirm = (
+    q: any,
+    ok?: OkCallback,
+    title?: string, // ถ้ามี cancel action ใส่เป็น null
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: CancelCallback
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title && title != null ? title : "ยืนยันการบันทึก",
+        message:
+          desc && desc != null
+            ? desc
+            : "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        icon: "info",
+        color: "public",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
 
   return {
     date2Thai,
     covertDateObject,
+    dialogConfirm,
   };
 });
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index cf6e063..e2fcea4 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
 import moment, { Moment } from "moment";
 
 // import Type
@@ -11,8 +12,9 @@ import MapCheck from "@/components/MapCheckin.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, dialogConfirm } = mixin;
 const router = useRouter();
+const $q = useQuasar();
 
 const stetusCheckin = ref(true);
 
@@ -178,7 +180,14 @@ function validateForm() {
 // ยืนยันการลงเวลา
 const dialogTime = ref<boolean>(false);
 const confirm = () => {
-  dialogTime.value = true;
+  dialogConfirm(
+    $q,
+    async () => {
+      dialogTime.value = true;
+    },
+    "ยืนยันการบันทึกเวลา ?",
+    "ต้องการยืนยันการบันทึกการลงเวลานี้ใช่หรือไม่"
+  );
 };
 
 // class