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

---
 .../FormEvaluation/FormEvaluateAdd.vue        | 195 +++++++++++++++---
 1 file changed, 172 insertions(+), 23 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
index a1def3014..a41ba69d0 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, onMounted } from "vue";
+import { ref, defineAsyncComponent, onMounted, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -20,6 +20,7 @@ const {
   success,
   dateToISO,
   dialogConfirm,
+  dialogMessageNotify,
 } = mixin;
 const route = useRoute();
 const router = useRouter();
@@ -114,7 +115,7 @@ const dateAutherise = ref<any>(new Date());
 const option = ref<any>([]);
 
 // part 1
-const knowledge_level = ref<number>(0);
+
 const skill_level = ref<number>(0);
 const competency_level = ref<number>(0);
 const learn_level = ref<number>(0);
@@ -131,6 +132,19 @@ const behavio_orther = ref<any>({ text: "", level: 0 });
 const behavio_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
+const alerts = Array(20)
+  .fill(null)
+  .map(() => ref<boolean>(false));
+
+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 orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
@@ -144,7 +158,24 @@ const behavio_inproveRef = ref<any>(null);
 const behavio_inproveRules = [
   (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
 ];
-
+const knowledge_level = ref<number>(0);
+const knowledge_levelRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+const ArrayCountbotton = [
+  orientation,
+  self_learning,
+  training_seminar,
+  other_training,
+];
+const variablesToWatch = [
+  knowledge_level,
+  skill_level,
+  competency_level,
+  learn_level,
+  apply_level,
+  success_level,
+];
 const savaForm = () => {
   let hasError = false;
   behavio_strengthRef.value.validate();
@@ -156,11 +187,10 @@ const savaForm = () => {
     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 ||
+    lengthconduct.value !== 4 ||
+    lengthmoral_level.value !== 3 ||
+    lengthdiscipline_level.value !== 5 ||
     behavio_strength_desc.value === "" ||
-    behavior_improve_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
     training_seminar.value === null
@@ -182,9 +212,29 @@ const savaForm = () => {
   } else putformData();
 
   if (hasError === true) {
-    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+    variablesToWatch.forEach((item, index) => {
+      if (item.value === 0) {
+        alerts[index].value = true;
+      }
+    });
+    ArrayCountbotton.forEach((item, index) => {
+      if (item.value === null) {
+        alerts[index + 9].value = true;
+      }
+    });
+    if (lengthconduct.value !== 4) {
+      alerts[6].value = true;
+    }
+    if (lengthmoral_level.value !== 3) {
+      alerts[7].value = true;
+    }
+    if (lengthdiscipline_level.value !== 5) {
+      alerts[8].value = true;
+    }
+    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
   }
 };
+
 const putformData = () => {
   const data = {
     evaluate_no: evaluate_no.value,
@@ -223,15 +273,49 @@ const putformData = () => {
       .post(config.API.createformCommader(assignId.value), data)
       .then((res: any) => {
         success($q, "บันทึกสำเร็จ");
-        router.push(
-          `/probation/detail/${personalId.value}/${assignId.value}`
-        );
+        router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
       })
       .catch((e: any) => {
         messageError($q, e);
       });
   });
 };
+
+variablesToWatch.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== 0) {
+      alerts[index].value = false;
+    }
+  });
+});
+
+ArrayCountbotton.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== null) {
+      alerts[index + 9].value = false;
+    }
+  });
+});
+watch(lengthconduct, (newLength) => {
+  if (newLength === 4) {
+    alerts[6].value = false;
+  }
+});
+watch(lengthmoral_level, (newLength) => {
+  if (newLength === 3) {
+    alerts[7].value = false;
+  }
+});
+watch(lengthdiscipline_level, (newLength) => {
+  if (newLength === 5) {
+    alerts[8].value = false;
+  }
+});
+const getBordered = (i: boolean) => {
+  return {
+    border_custom: i,
+  };
+};
 </script>
 
 <template>
@@ -275,7 +359,9 @@ const putformData = () => {
             </div>
             <div class="col-12 text-top0 row items-center">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              <span class="text-primary q-pr-sm">{{ "ครั้งที่ " + round }}</span>
+              <span class="text-primary q-pr-sm">{{
+                "ครั้งที่ " + round
+              }}</span>
               ระหว่างวันที่
               <span class="text-black q-px-sm">{{
                 date2Thai(start_date)
@@ -299,7 +385,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" />
@@ -312,6 +403,7 @@ const putformData = () => {
                       v-model="knowledge_level"
                       max="5"
                       size="sm"
+                      :rules="knowledge_levelRules"
                       color="grey"
                       :color-selected="ratingColors"
                       label="ระดับการประเมินพฤติกรรม"
@@ -339,7 +431,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" />
@@ -379,7 +476,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" />
@@ -419,7 +521,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[3].value)"
+                >
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -459,7 +566,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[4].value)"
+                >
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -500,7 +612,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[5].value)"
+                >
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -560,7 +677,10 @@ const putformData = () => {
               </q-list>
             </q-card>
 
-            <q-card v-if="etc" class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+            <q-card
+              v-if="etc"
+              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-section class="q-ml-md">
@@ -627,6 +747,7 @@ const putformData = () => {
                 2.1 ความประพฤติ
               </div>
               <q-card
+                :class="getBordered(alerts[6].value)"
                 flat
                 bordered
                 class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
@@ -675,6 +796,7 @@ const putformData = () => {
                 2.2 ความมีคุณธรรมจริยธรรม
               </div>
               <q-card
+                :class="getBordered(alerts[7].value)"
                 flat
                 bordered
                 class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
@@ -722,7 +844,9 @@ const putformData = () => {
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 2.3 การรักษาวินัย
               </div>
+
               <q-card
+                :class="getBordered(alerts[8].value)"
                 flat
                 bordered
                 class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
@@ -896,7 +1020,12 @@ const putformData = () => {
                 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[9].value)"
+                  >
                     <q-item-section>
                       <q-item-label>1. การปฐมนิเทศ</q-item-label>
                     </q-item-section>
@@ -922,7 +1051,12 @@ const putformData = () => {
                     </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[10].value)"
+                  >
                     <q-item-section>
                       <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
                     </q-item-section>
@@ -948,7 +1082,12 @@ const putformData = () => {
                     </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[11].value)"
+                  >
                     <q-item-section>
                       <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
                     </q-item-section>
@@ -974,7 +1113,12 @@ const putformData = () => {
                     </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
                         >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
@@ -1109,4 +1253,9 @@ const putformData = () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  color: #c10015;
+}
 </style>