From bb1997e1b05613dde98a4c38349f79dd6ad91ef4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 7 Sep 2023 18:08:44 +0700
Subject: [PATCH] =?UTF-8?q?validate=20=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=8D=E0=B8=B2=E0=B8=A3=E0=B8=A7=E0=B8=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/SummarySurvey.vue    | 209 ++++++++++--------
 1 file changed, 117 insertions(+), 92 deletions(-)

diff --git a/src/modules/05_placement/components/probation/SummarySurvey.vue b/src/modules/05_placement/components/probation/SummarySurvey.vue
index 520aac35e..e135138f6 100644
--- a/src/modules/05_placement/components/probation/SummarySurvey.vue
+++ b/src/modules/05_placement/components/probation/SummarySurvey.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
@@ -45,6 +45,10 @@ const result_option = ref<any>([
 const note = ref<string>("");
 const date = ref<Date>(new Date());
 
+onMounted(() => {
+  getSurveyData();
+});
+
 const saveEdit = (id: string) => {
   dialogConfirm($q, () => console.log("save"));
 };
@@ -60,114 +64,129 @@ const getSurveyData = async () => {
     .get(config.API.summarySurveyDetail(assignId.value))
     .then((res: any) => {
       const data = res.data.data;
-      answer1.value = data.answer1,
-      answer2.value = data.answer2,
-      answer3.value = data.answer3
-      status.value = false
-})
+      if (data !== null) {
+        answer1.value = data.answer1;
+        answer2.value = data.answer2;
+        answer3.value = data.answer3;
+      }
+      status.value = false;
+    })
     .catch((e) => {
       console.log(e);
     });
 };
-const save = () => {
-  const data = {
-    answer1: answer1.value,
-    answer2: answer2.value,
-    answer3: answer3.value,
-  };
-  dialogConfirm($q, async () => {
-    await http
-      .post(config.API.summarySurveyDetail(assignId.value), data)
-      .then((res: any) => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e: any) => {
-        messageError($q, e);
+const classBordered = ref<string>("");
+const save = async () => {
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result && answer3.value !== 0) {
+      const data = {
+        answer1: answer1.value,
+        answer2: answer2.value,
+        answer3: answer3.value,
+      };
+      dialogConfirm($q, async () => {
+        await http
+          .post(config.API.summarySurveyDetail(assignId.value), data)
+          .then((res: any) => {
+            success($q, "บันทึกสำเร็จ");
+          })
+          .catch((e: any) => {
+            messageError($q, e);
+          });
       });
+    } else if (answer3.value == 0) {
+      classBordered.value = "border_custom";
+    }
   });
 };
-onMounted(() => {
-  getSurveyData();
+watch(answer3, () => {
+  if (answer3.value == 0) {
+    classBordered.value = "border_custom";
+  } else classBordered.value = "";
 });
 </script>
 
 <template>
   <div class="row col-12 q-ma-xs">
-    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
-      <div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-        คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
+    <q-form ref="myForm" class="q-pa-md">
+      <div class="toptitle text-dark col-12 row items-center q-gutter-md">
+        <div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
       </div>
-      <div class="col-12">
-        <q-input
-        :disable="!status"
-          label="ความคิดเห็น"
-          class="bg-white"
-          dense
-          borderless
-          outlined
-          v-model="answer1"
-          type="textarea"
-        />
+      <div class="col-12 row">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+          คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
+        </div>
+        <div class="col-12">
+          <q-input
+            :disable="!status"
+            label="ความคิดเห็น"
+            class="bg-white"
+            dense
+            borderless
+            outlined
+            v-model="answer1"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+          />
+        </div>
       </div>
-    </div>
-    <div class="col-12 row q-mt-md">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-        ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+      <div class="col-12 row q-mt-md">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-input
+            :disable="!status"
+            label="ความคิดเห็น"
+            class="bg-white"
+            dense
+            borderless
+            outlined
+            v-model="answer2"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+          />
+        </div>
       </div>
-      <div class="col-12">
-        <q-input
-        :disable="!status"
-          label="ความคิดเห็น"
-          class="bg-white"
-          dense
-          borderless
-          outlined
-          v-model="answer2"
-          type="textarea"
-        />
-      </div>
-    </div>
 
-    <div class="col-12 row q-mt-md">
-      <div class="text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
-        ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
+      <div :class="`col-12 row q-mt-md ${classBordered}`">
+        <div class="text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
+        </div>
+        <q-space />
+        <q-rating
+          :disable="!status"
+          v-model="answer3"
+          max="5"
+          size="sm"
+          color="grey"
+          :color-selected="ratingColors"
+          label="ระดับการประเมินพฤติกรรม"
+        >
+          <template v-slot:tip-1>
+            <q-tooltip>ไม่พึงพอใจ</q-tooltip>
+          </template>
+          <template v-slot:tip-2>
+            <q-tooltip>ค่อนข้างพึงพอใจ</q-tooltip>
+          </template>
+          <template v-slot:tip-3>
+            <q-tooltip>พึงพอใจ</q-tooltip>
+          </template>
+          <template v-slot:tip-4>
+            <q-tooltip>พึงพอใจมาก</q-tooltip>
+          </template>
+          <template v-slot:tip-5>
+            <q-tooltip>พึงพอใจมากที่สุด</q-tooltip>
+          </template>
+        </q-rating>
       </div>
-      <q-space />
-      <q-rating
-        :disable="!status"
-        v-model="answer3"
-        max="5"
-        size="sm"
-        color="grey"
-        :color-selected="ratingColors"
-        label="ระดับการประเมินพฤติกรรม"
-      >
-        <template v-slot:tip-1>
-          <q-tooltip>ไม่พึงพอใจ</q-tooltip>
-        </template>
-        <template v-slot:tip-2>
-          <q-tooltip>ค่อนข้างพึงพอใจ</q-tooltip>
-        </template>
-        <template v-slot:tip-3>
-          <q-tooltip>พึงพอใจ</q-tooltip>
-        </template>
-        <template v-slot:tip-4>
-          <q-tooltip>พึงพอใจมาก</q-tooltip>
-        </template>
-        <template v-slot:tip-5>
-          <q-tooltip>พึงพอใจมากที่สุด</q-tooltip>
-        </template>
-      </q-rating>
-    </div>
-    <div class="col-12 q-my-md">
-      <q-separator size="3px" color="grey-2" />
-    </div>
+      <div class="col-12 q-my-md">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+    </q-form>
     <!-- <Footer /> -->
     <div class="row col-12">
       <q-space />
@@ -196,4 +215,10 @@ onMounted(() => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  color: #c10015;
+  padding: 10px;
+}
 </style>