เพิ่ม dialog confirm

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>

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"

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>