From b18056a3358fab4ceba92f3f8c5096cfe2a38e9a Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 7 Sep 2023 14:50:58 +0700
Subject: [PATCH] =?UTF-8?q?validate=20q-rating=20=E0=B9=81=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9C=E0=B8=A5=20(=E0=B8=84=E0=B8=93=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormEvaluation/FormEvaluateScoreAdd.vue   | 168 ++++++++++++++++--
 1 file changed, 152 insertions(+), 16 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
index da0eff001..23698c7d5 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, computed, onMounted } from "vue";
+import { ref, defineAsyncComponent, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -20,11 +20,20 @@ const {
   dateToISO,
   success,
   dialogConfirm,
+  dialogMessageNotify,
 } = mixin;
 const route = useRoute();
 const router = useRouter();
 const assignId = ref<string>(route.params.form.toString());
 const personalId = ref<string>(route.params.id.toString());
+const myForm1 = ref<any>(null);
+const myForm2 = ref<any>(null);
+const myForm3 = ref<any>(null);
+const myForm4 = ref<any>(null);
+const myForm5 = ref<any>(null);
+const myForm6 = ref<any>(null);
+const selectResult1 = ref<any>(null);
+const selectResult2 = ref<any>(null);
 
 const person = ref<any>([]);
 const assign = ref<any>([]);
@@ -44,7 +53,6 @@ const fecthAssign = async (id: string) => {
   await http
     .get(config.API.evaluateChairman(id))
     .then(async (res: any) => {
-      console.log(res);
       person.value = await res.data.data.person;
       assign.value = await res.data.data.assign;
       evaluate_no.value = await res.data.data.evaluate_no;
@@ -56,8 +64,6 @@ const fecthAssign = async (id: string) => {
         name: e.name,
         dated: e.dated,
       }));
-
-      console.log(mentors.value);
     })
     .catch((e) => {
       messageError($q, e);
@@ -260,19 +266,41 @@ const score5 = computed(() => {
     Number(other_training_percent.value)
   );
 });
-
-const savaForm = () => {
+const lengthconduct = computed(() => {
+  return conduct_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthmoral_level = computed(() => {
+  return moral_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthdiscipline_level = computed(() => {
+  return discipline_level.value.filter((item: number) => item !== 0).length;
+});
+const variablesToWatch = [learn_level, apply_level, success_level];
+const savaForm = async () => {
   let hasError = false;
+  await myForm1.value.validate();
+  await myForm2.value.validate();
+  await myForm3.value.validate();
+  await myForm4.value.validate();
+  await myForm5.value.validate();
+  await myForm6.value.validate();
+  await selectResult1.value.validate();
+  await selectResult2.value.validate();
   if (
     learn_level.value === 0 ||
     apply_level.value === 0 ||
     success_level.value === 0 ||
-    conduct_level.value.length < 4 ||
-    moral_level.value.length < 3 ||
-    discipline_level.value.length < 5 ||
-    orientation.value === null ||
-    self_learning.value === null ||
-    training_seminar.value === null
+    lengthconduct.value !== 4 ||
+    lengthmoral_level.value !== 3 ||
+    lengthdiscipline_level.value !== 5 ||
+    orientation.value === 0 ||
+    self_learning.value === 0 ||
+    training_seminar.value === 0 ||
+    orientation_percent.value === 0 ||
+    self_learning_percent.value === 0 ||
+    training_seminar_percent.value === 0 ||
+    develop_result.value === undefined ||
+    evaluate_result.value === undefined
   ) {
     hasError = true;
   } else if (
@@ -291,7 +319,21 @@ const savaForm = () => {
   } else putformData();
 
   if (hasError === true) {
-    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+    variablesToWatch.forEach((item, index) => {
+      if (item.value === 0) {
+        alerts[index].value = true;
+      }
+    });
+    if (lengthconduct.value !== 4) {
+      alerts[3].value = true;
+    }
+    if (lengthmoral_level.value !== 3) {
+      alerts[4].value = true;
+    }
+    if (lengthdiscipline_level.value !== 5) {
+      alerts[5].value = true;
+    }
+    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
   }
 };
 const putformData = () => {
@@ -350,6 +392,37 @@ const putformData = () => {
       });
   });
 };
+const alerts = Array(20)
+  .fill(null)
+  .map(() => ref<boolean>(false));
+
+const getBordered = (i: boolean) => {
+  return {
+    border_custom: i,
+  };
+};
+variablesToWatch.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== 0) {
+      alerts[index].value = false;
+    }
+  });
+});
+watch(lengthconduct, (newLength) => {
+  if (newLength === 4) {
+    alerts[3].value = false;
+  }
+});
+watch(lengthmoral_level, (newLength) => {
+  if (newLength === 3) {
+    alerts[4].value = false;
+  }
+});
+watch(lengthdiscipline_level, (newLength) => {
+  if (newLength === 5) {
+    alerts[5].value = false;
+  }
+});
 </script>
 
 <template>
@@ -419,7 +492,12 @@ const putformData = () => {
           <div class="col-12 row no-margin">
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
               <q-list dense>
-                <q-item dense tag="label" v-ripple>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[0].value)"
+                >
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -458,7 +536,12 @@ const putformData = () => {
 
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
               <q-list dense>
-                <q-item dense tag="label" v-ripple>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[1].value)"
+                >
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -498,7 +581,12 @@ const putformData = () => {
 
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
               <q-list dense>
-                <q-item dense tag="label" v-ripple>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[2].value)"
+                >
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -631,6 +719,7 @@ const putformData = () => {
                 2.1 ความประพฤติ
               </div>
               <q-card
+                :class="getBordered(alerts[3].value)"
                 flat
                 bordered
                 class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
@@ -678,6 +767,7 @@ const putformData = () => {
                 2.2 ความมีคุณธรรมจริยธรรม
               </div>
               <q-card
+                :class="getBordered(alerts[4].value)"
                 flat
                 bordered
                 class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
@@ -726,6 +816,7 @@ const putformData = () => {
               </div>
               <q-card
                 flat
+                :class="getBordered(alerts[5].value)"
                 bordered
                 class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
               >
@@ -981,6 +1072,11 @@ const putformData = () => {
                       dense
                       type="number"
                       v-model="orientation"
+                      hide-bottom-space
+                      :rules="[
+                        (val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
+                      ]"
+                      ref="myForm1"
                     />
                   </div>
                   <div class="col">
@@ -989,6 +1085,11 @@ const putformData = () => {
                       dense
                       type="number"
                       v-model="orientation_percent"
+                      hide-bottom-space
+                      :rules="[
+                        (val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
+                      ]"
+                      ref="myForm2"
                     />
                   </div>
                 </div>
@@ -1001,6 +1102,11 @@ const putformData = () => {
                       dense
                       type="number"
                       v-model="self_learning"
+                      hide-bottom-space
+                      :rules="[
+                        (val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
+                      ]"
+                      ref="myForm3"
                     />
                   </div>
                   <div class="col">
@@ -1009,6 +1115,11 @@ const putformData = () => {
                       dense
                       type="number"
                       v-model="self_learning_percent"
+                      hide-bottom-space
+                      :rules="[
+                        (val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
+                      ]"
+                      ref="myForm4"
                     />
                   </div>
                 </div>
@@ -1021,6 +1132,11 @@ const putformData = () => {
                       dense
                       type="number"
                       v-model="training_seminar"
+                      hide-bottom-space
+                      :rules="[
+                        (val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
+                      ]"
+                      ref="myForm5"
                     />
                   </div>
                   <div class="col">
@@ -1029,6 +1145,11 @@ const putformData = () => {
                       dense
                       type="number"
                       v-model="training_seminar_percent"
+                      hide-bottom-space
+                      :rules="[
+                        (val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
+                      ]"
+                      ref="myForm6"
                     />
                   </div>
                 </div>
@@ -1185,6 +1306,9 @@ const putformData = () => {
                   label="เลือกสรุปผลการพัฒนา"
                   map-options
                   emit-value
+                  hide-bottom-space
+                  :rules="[(val) => val !== null && val !== undefined || 'กรุณาเลือกสรุปผลการพัฒนา']"
+                  ref="selectResult1"
                 />
               </div>
             </div>
@@ -1208,6 +1332,13 @@ const putformData = () => {
                   label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
                   map-options
                   emit-value
+                  hide-bottom-space
+                  :rules="[
+                    (val) =>
+                    val !== null && val !== undefined ||
+                      'กรุณาเลือกสรุปผลการประเมินผลทดลองปฎิบัติหน้าที่ราชการ',
+                  ]"
+                  ref="selectResult2"
                 />
               </div>
             </div>
@@ -1440,4 +1571,9 @@ const putformData = () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  color: #c10015;
+}
 </style>