From 687bfff6be73b0a02d00248b62cb8ba514b00261 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Mon, 12 Feb 2024 16:41:44 +0700
Subject: [PATCH] =?UTF-8?q?validate=20=E0=B8=95=E0=B8=AD=E0=B8=99=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B9=80=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../00_support/components/NewIssue.vue        | 93 +++++++++++--------
 1 file changed, 56 insertions(+), 37 deletions(-)

diff --git a/src/modules/00_support/components/NewIssue.vue b/src/modules/00_support/components/NewIssue.vue
index 1bb6ef2..ca9ade3 100644
--- a/src/modules/00_support/components/NewIssue.vue
+++ b/src/modules/00_support/components/NewIssue.vue
@@ -6,8 +6,9 @@ const store = useSupportStore();
 
 const isOpen = ref<boolean>(false);
 const title = ref<string>("");
+const titleRef = ref();
 const categoryId = ref<string>("");
-
+const categoryRef = ref();
 const options = ref<{ label: string; value: string }[]>([]);
 
 onMounted(async () => {
@@ -19,10 +20,21 @@ onMounted(async () => {
     }));
   }
 });
+
+async function onSubmit() {
+  titleRef.value.validate();
+  categoryRef.value.validate();
+  if (titleRef.value.hasError || categoryRef.value.hasError) return "";
+  await store.newIssue(title.value, categoryId.value);
+  isOpen.value = false;
+}
 </script>
 
 <template>
-  <div @click="isOpen = true" class="col-10 row items-center q-py-sm q-px-md new">
+  <div
+    @click="isOpen = true"
+    class="col-10 row items-center q-py-sm q-px-md new"
+  >
     <div class="noactive-avatar">
       <div class="new-avatar">
         <q-icon name="mdi-plus" size="24px" color="primary" />
@@ -50,42 +62,49 @@ onMounted(async () => {
         />
       </q-card-section>
 
-      <q-card-section class="q-gutter-x-md row">
-        <q-select
-          class="col-3"
-          outlined
-          dense
-          emit-value
-          map-options
-          v-model="categoryId"
-          :options="options"
-          option-value="value"
-          option-label="label"
-          label="หมวดหมู่"
-        />
-        <q-input
-          class="col-grow"
-          outlined
-          dense
-          v-model="title"
-          label="ชื่อเรื่อง"
-        />
-      </q-card-section>
+      <form @submit.prevent.stop="onSubmit">
+        <q-card-section class="q-gutter-x-md row">
+          <q-select
+            ref="categoryRef"
+            class="col-3"
+            outlined
+            dense
+            emit-value
+            map-options
+            v-model="categoryId"
+            :options="options"
+            option-value="value"
+            option-label="label"
+            label="หมวดหมู่"
+            lazy-rules
+            :rules="[
+              (val) => (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
+            ]"
+          />
+          <q-input
+            ref="titleRef"
+            class="col-grow"
+            outlined
+            dense
+            v-model="title"
+            label="ชื่อเรื่อง"
+            lazy-rules
+            :rules="[
+              (val) => (val && val.length > 0) || 'กรุณาเพิ่มชื่อเรื่อง',
+            ]"
+          />
+        </q-card-section>
 
-      <q-card-actions align="right">
-        <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
-        <q-btn
-          @click="
-            async () => {
-              await store.newIssue(title, categoryId);
-              isOpen = false;
-            }
-          "
-          label="บันทึก"
-          color="primary"
-          text-color="white"
-        />
-      </q-card-actions>
+        <q-card-actions align="right">
+          <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
+          <q-btn
+            type="submit"
+            label="บันทึก"
+            color="primary"
+            text-color="white"
+          />
+        </q-card-actions>
+      </form>
     </q-card>
   </q-dialog>
 </template>