From 7ce0ee240bb9ce6c32d657a468a561da98a057ed Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 7 Sep 2023 17:08:10 +0700
Subject: [PATCH] =?UTF-8?q?validate=20=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B6=E0=B8=81=20q-rating?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormEvaluation/FormEvaluateAdd.vue        |   5 +-
 .../FormEvaluation/FormEvaluateScoreAdd.vue   |   2 +-
 .../FormEvaluation/FormSaveResultAdd.vue      | 171 ++++++++++++++----
 3 files changed, 143 insertions(+), 35 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
index a41ba69d0..ea350b258 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
@@ -166,7 +166,6 @@ const ArrayCountbotton = [
   orientation,
   self_learning,
   training_seminar,
-  other_training,
 ];
 const variablesToWatch = [
   knowledge_level,
@@ -1117,7 +1116,7 @@ const getBordered = (i: boolean) => {
                     dense
                     tag="label"
                     v-ripple
-                    :class="getBordered(alerts[12].value)"
+                   
                   >
                     <q-item-section>
                       <q-item-label
@@ -1256,6 +1255,6 @@ const getBordered = (i: boolean) => {
 .border_custom {
   border: 2px solid #c10015;
   border-radius: 5px;
-  color: #c10015;
+  // color: #c10015;
 }
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
index 23698c7d5..e1f721ec6 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
@@ -1574,6 +1574,6 @@ watch(lengthdiscipline_level, (newLength) => {
 .border_custom {
   border: 2px solid #c10015;
   border-radius: 5px;
-  color: #c10015;
+  // color: #c10015;
 }
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
index 1f08ae5ca..02a88fd34 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted,watch,computed } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -21,6 +21,7 @@ const {
   dateToISO,
   messageError,
   dialogConfirm,
+  dialogMessageNotify
 } = mixin;
 const { ratingColors } = probationStore;
 const assignId = ref<string>(route.params.form.toString());
@@ -34,7 +35,9 @@ const date_finish = ref<Date>(new Date());
 const round = ref<number>();
 
 const checkArray = ref<number>(0);
-
+  const alerts = Array(20)
+  .fill(null)
+  .map(() => ref<boolean>(false));
 onMounted(async () => {
   await fecthFormdata(assignId.value);
 });
@@ -130,13 +133,9 @@ const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
 
 // part 1
-const evaluate_expenct_level = ref<any>([
-  // { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
-  // { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
-  // { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
-  // { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
-  // { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
-]);
+const evaluate_expenct_level = ref<any>([]);
+
+
 const evaluate_ouptut = ref<any>([
   // { level: 0, text: "" },
   // { level: 0, text: "" },
@@ -195,7 +194,35 @@ const behavio_inproveRef = ref<any>(null);
 const behavio_inproveRules = [
   (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
 ];
+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 lengthevaluate_expenct_level = computed(() => {
+  return evaluate_expenct_level.value.filter((item:any) => item.level !== undefined && item.level !== 0).length;
+});
+const lengthevaluate_ouptut = computed(() => {
+  return evaluate_ouptut.value.filter((item:any) => item.level !== undefined && item.level !== 0).length;
+});
+const variablesToWatch = [
+  knowledge_level,
+  skill_level,
+  competency_level,
+  learn_level,
+  apply_level,
+  success_level,
+];
+const ArrayCountbotton = [
+  orientation,
+  self_learning,
+  training_seminar,
 
+];
 const savaForm = () => {
   achievement_strengthRef.value.validate();
   // achievement_inproveRef.value.validate();
@@ -213,6 +240,8 @@ const savaForm = () => {
   if (
     // filterlevel1_1.length != 0 ||
     // filter_ouptut1_2.length != 0 ||
+    lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length||
+    lengthevaluate_ouptut.value !== evaluate_ouptut.value.length||
     knowledge_level.value === 0 ||
     skill_level.value === 0 ||
     competency_level.value === 0 ||
@@ -221,9 +250,9 @@ const savaForm = () => {
     success_level.value === 0 ||
     achievement_strength_desc.value === "" ||
     // achievement_improve_desc.value === "" ||
-    conduct_level.value.length < 4 ||
-    moral_level.value.length < 3 ||
-    discipline_level.value.length < 5 ||
+    lengthconduct.value !== 4 ||
+    lengthmoral_level.value !== 3 ||
+    lengthdiscipline_level.value !== 5 ||
     behavior_strength_desc.value === "" ||
     // behavior_improve_desc.value === "" ||
     orientation.value === null ||
@@ -247,7 +276,34 @@ const savaForm = () => {
   }
 
   if (hasError === true) {
-    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+    variablesToWatch.forEach((item, index) => {
+      if (item.value === 0) {
+        alerts[index+2].value = true;
+      }
+    });
+    if(lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length){
+      alerts[0].value = true
+    }
+    if(lengthevaluate_ouptut.value !== evaluate_ouptut.value.length){
+      alerts[1].value = true
+    }
+    if (lengthconduct.value !== 4) {
+      alerts[8].value = true;
+    }
+    if (lengthmoral_level.value !== 3) {
+      alerts[9].value = true;
+    }
+    if (lengthdiscipline_level.value !== 5) {
+      alerts[10].value = true;
+    }
+    ArrayCountbotton.forEach((item, index) => {
+      if (item.value === null) {
+        alerts[index + 11].value = true;
+      }
+    });
+    console.log(evaluate_expenct_level.value)
+
+    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
   } else {
     putformData()
   }
@@ -312,6 +368,52 @@ const saveformdata = async (data: any) => {
       messageError($q, e);
     });
 };
+
+variablesToWatch.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== 0) {
+      alerts[index+2].value = false;
+    }
+  });
+});
+ArrayCountbotton.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== null) {
+      alerts[index + 11].value = false;
+    }
+  });
+});
+watch(lengthevaluate_expenct_level, (newLength) => {
+  if (newLength === evaluate_expenct_level.value.length) {
+    console.log(true)
+    alerts[0].value = false;
+  }
+});
+watch(lengthevaluate_ouptut, (newLength) => {
+  if (newLength === evaluate_ouptut.value.length) {
+    console.log(true)
+    alerts[1].value = false;
+  }
+});
+watch(lengthconduct, (newLength) => {
+  if (newLength === 4) {
+    alerts[8].value = false;
+  }
+});
+watch(lengthmoral_level, (newLength) => {
+  if (newLength === 3) {
+    alerts[9].value = false;
+  }
+});
+watch(lengthdiscipline_level, (newLength) => {
+  if (newLength === 5) {
+    alerts[10].value = false;
+  }
+});
+const getBordered = (i: boolean) => {
+  return {
+    border_custom: i,
+  };}
 </script>
 
 <template>
@@ -365,16 +467,17 @@ const saveformdata = async (data: any) => {
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
             </div>
-            <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+            <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2 ">
               ผลผลิตของงานที่คาดหวัง
             </div>
-            <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+            <q-card flat bordered :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[0].value)]">
               <q-list dense v-for="(list, i) in list1_1" :key="i">
                 <q-item dense tag="label" v-ripple>
                   <q-item-section>
                     <q-item-label>{{ list.output_desc }}</q-item-label>
                   </q-item-section>
                   <q-item-section side>
+
                     <q-rating v-model="evaluate_expenct_level[i].level" :val="list.id" max="5" size="sm" color="grey"
                       :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
                       <template v-slot:tip-1>
@@ -404,7 +507,7 @@ const saveformdata = async (data: any) => {
             <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
               ผลผลิตของงานที่เกิดขึ้นจริง
             </div>
-            <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+            <q-card flat bordered :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[1].value)]">
               <q-list dense v-for="(list, i) in list1_2" :key="i">
                 <q-item dense tag="label" v-ripple v-if="i < checkArray">
                   <q-item-section>
@@ -441,7 +544,7 @@ const saveformdata = async (data: any) => {
           <div class="col-12 row">
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <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" />
@@ -471,9 +574,9 @@ const saveformdata = async (data: any) => {
               </q-list>
             </q-card>
 
-            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm" >
               <q-list dense>
-                <q-item dense tag="label" v-ripple>
+                <q-item dense tag="label" v-ripple :class="getBordered(alerts[3].value)">
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -505,7 +608,7 @@ const saveformdata = async (data: any) => {
 
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <q-list dense>
-                <q-item dense tag="label" v-ripple>
+                <q-item dense tag="label" v-ripple :class="getBordered(alerts[4].value)">
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -537,7 +640,7 @@ const saveformdata = async (data: any) => {
 
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <q-list dense>
-                <q-item dense tag="label" v-ripple>
+                <q-item dense tag="label" v-ripple :class="getBordered(alerts[5].value)">
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -569,7 +672,7 @@ const saveformdata = async (data: any) => {
 
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <q-list dense>
-                <q-item dense tag="label" v-ripple>
+                <q-item dense tag="label" v-ripple :class="getBordered(alerts[6].value)">
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -602,7 +705,7 @@ const saveformdata = async (data: any) => {
 
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <q-list dense>
-                <q-item dense tag="label" v-ripple>
+                <q-item dense tag="label" v-ripple :class="getBordered(alerts[7].value)">
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -648,7 +751,7 @@ const saveformdata = async (data: any) => {
               </q-list>
             </q-card>
 
-            <q-card v-if="etc" class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-mt-sm q-pl-lg">
+            <q-card v-if="etc" class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-mt-sm q-pl-lg ">
               <q-list dense>
                 <q-item dense tag="label" v-ripple>
                   <q-item-section class="q-ml-md">
@@ -717,7 +820,8 @@ const saveformdata = async (data: any) => {
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 2.1 ความประพฤติ
               </div>
-              <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+
+              <q-card flat bordered               :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[8].value)]">
                 <q-list dense v-for="(list, i) in list2_1" :key="i">
                   <q-item dense tag="label" v-ripple>
                     <q-item-section>
@@ -753,7 +857,7 @@ const saveformdata = async (data: any) => {
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 2.2 ความมีคุณธรรมจริยธรรม
               </div>
-              <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+              <q-card flat bordered :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[9].value)]">
                 <q-list dense v-for="(list, i) in list2_2" :key="i">
                   <q-item dense tag="label" v-ripple>
                     <q-item-section>
@@ -789,7 +893,7 @@ const saveformdata = async (data: any) => {
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 2.3 การรักษาวินัย
               </div>
-              <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+              <q-card flat bordered :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[10].value)]">
                 <q-list dense v-for="(list, i) in list2_3" :key="i">
                   <q-item dense tag="label" v-ripple>
                     <q-item-section>
@@ -896,7 +1000,7 @@ const saveformdata = async (data: any) => {
               </div>
               <q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
                 <q-list dense>
-                  <q-item dense tag="label" v-ripple>
+                  <q-item dense tag="label" v-ripple :class="getBordered(alerts[11].value)">
                     <q-item-section>
                       <q-item-label>1. การปฐมนิเทศ</q-item-label>
                     </q-item-section>
@@ -910,7 +1014,7 @@ const saveformdata = async (data: any) => {
                     </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" />
-                  <q-item dense tag="label" v-ripple>
+                  <q-item dense tag="label" v-ripple :class="getBordered(alerts[12].value)">
                     <q-item-section>
                       <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
                     </q-item-section>
@@ -924,7 +1028,7 @@ const saveformdata = async (data: any) => {
                     </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" />
-                  <q-item dense tag="label" v-ripple>
+                  <q-item dense tag="label" v-ripple :class="getBordered(alerts[13].value)">
                     <q-item-section>
                       <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
                     </q-item-section>
@@ -938,7 +1042,7 @@ const saveformdata = async (data: any) => {
                     </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" />
-                  <q-item dense tag="label" v-ripple>
+                  <q-item dense tag="label" v-ripple >
                     <q-item-section>
                       <q-item-label>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
                         (ถ้ามี)</q-item-label>
@@ -1030,4 +1134,9 @@ const saveformdata = async (data: any) => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  // color: #c10015;
+}
 </style>