กล่องข้อความ => ปรับขนาด Popup

src/components/PopupReplyInbox.vue

@@ -10,7 +10,7 @@ import { useQuasar } from "quasar";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const $q = useQuasar();
 
-const { showLoader, hideLoader, success, messageError } = mixin;
+const { showLoader, hideLoader, success, messageError, dialogConfirm } = mixin;
 
 const myForm = ref<any>();
 const props = defineProps({
@@ -30,35 +30,34 @@ 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();
-        });
-    }
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    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>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 40vw; max-width: 40vw">
-      <q-form ref="myForm">
+    <q-card
+      :style="$q.screen.gt.xs ? 'width: 40vw; max-width: 40vw' : 'width: 100%'"
+    >
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
@@ -98,7 +97,7 @@ async function submit() {
             unelevated
             label="ส่งข้อความ"
             color="public"
-            @click="submit"
+            type="submit"
             class="q-px-md"
           >
             <!-- icon="mdi-content-save-outline" -->

src/modules/00_support/components/FormChat.vue

@@ -11,7 +11,7 @@ const { date2Thai } = useCounterMixin();
 const { scrollContainer } = storeToRefs(store);
 
 function getOnlineStatus(option: "icon" | "status") {
-  const isAdmin = store.userStatus.some((u) => u.role.includes("admin"));
+  const isAdmin = store.userStatus.some((u: any) => u.role.includes("admin"));
   if (option === "icon") return isAdmin ? "green" : "grey";
   if (option === "status") return isAdmin ? "ออนไลน์" : "ออฟไลน์";
 }