Refactoring code dashboard

src/components/Dialogs/PopupReplyInbox.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+
 const $q = useQuasar();
+const { showLoader, hideLoader, success, messageError, dialogConfirm } =
+  useCounterMixin(); //เรียกฟังก์ชันกลาง
 
-const { showLoader, hideLoader, success, messageError } = mixin;
-
-const myForm = ref<any>();
+/**
+ * props จาก components Dashborad
+ */
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -28,29 +30,30 @@ const props = defineProps({
   },
 });
 
-const subject = ref<string>("");
-const body = ref<string>("");
-async function submit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // props.savaForm(reason.value);
-      showLoader();
-      await http
-        .put(config.API.replyMessage(props.idInbox), {
-          subject: subject.value,
-          body: body.value,
-        })
-        .then((res) => {
-          props.clickClose()
-          success($q, "ส่งข้อความสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
+const subject = ref<string>(""); // หัวข้อ
+const body = ref<string>(""); //ข้อความ
+
+/**
+ * ยืนยันการจตอบกลับการส่งข้อความ
+ */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.replyMessage(props.idInbox), {
+        subject: subject.value,
+        body: body.value,
+      })
+      .then(() => {
+        props.clickClose();
+        success($q, "ส่งข้อความสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 </script>
@@ -58,7 +61,7 @@ async function submit() {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="width: 40vw; max-width: 40vw">
-      <q-form ref="myForm">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
@@ -71,7 +74,7 @@ async function submit() {
                   outlined
                   dense
                   lazy-rules
-                  :rules="[(val) => !!val || 'กรุณากรอกหัวข้อ']"
+                  :rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
                   v-model="subject"
                   label="หัวข้อ"
                 />
@@ -83,7 +86,7 @@ async function submit() {
                   outlined
                   dense
                   lazy-rules
-                  :rules="[(val) => !!val || 'กรุณากรอกข้อความ']"
+                  :rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
                   v-model="body"
                   label="ข้อความ"
                 />
@@ -93,15 +96,7 @@ async function submit() {
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="ส่งข้อความ"
-            color="public"
-            @click="submit"
-            class="q-px-md"
-          >
-            <!-- icon="mdi-content-save-outline" -->
+          <q-btn label="ส่งข้อความ" color="public" type="submit">
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </q-card-actions>