From c8808a69b2d63da2943aa676a3d4344fb20ecf3c Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Fri, 16 Jun 2023 16:13:37 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=8AUI=20-=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20"=E0=B8=AB=E0=B8=99=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=A2=E0=B8=81=E0=B8=81."?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/exams_other/Detail.vue         |  14 +-
 .../components/exams_other/Education.vue      |   7 +-
 .../exams_other/Information/Address.vue       |   2 +-
 .../exams_other/Information/Certicate.vue     |   2 +-
 .../exams_other/Information/Information.vue   |   2 +-
 .../exams_other/Information/layout.vue        |  16 ++-
 .../components/exams_other/Insignia.vue       |   2 +-
 .../components/exams_other/Qualification.vue  | 135 ++++++++++--------
 8 files changed, 114 insertions(+), 66 deletions(-)

diff --git a/src/modules/05_placement/components/exams_other/Detail.vue b/src/modules/05_placement/components/exams_other/Detail.vue
index f77c1728b..8c850737e 100644
--- a/src/modules/05_placement/components/exams_other/Detail.vue
+++ b/src/modules/05_placement/components/exams_other/Detail.vue
@@ -36,24 +36,29 @@ onMounted(async () => {
         </div>
     </div>
     <div>
-        <q-card flat bordered>
+        <q-card flat bordered class="q-px-lg q-pb-lg">
             <div id="information" name="1" class="row col-12 information">
                 <Informationvue v-model:statusEdit="statusEdit" :profileType="profileType" />
             </div>
+            <div class="horizontal-line"></div>
             <div id="education" name="2" class="row col-12 q-mt-md">
                 <EducationVue v-model:statusEdit="statusEdit" />
             </div>
+            <div class="horizontal-line"></div>
             <div id="certicate" name="15" class="row col-12 q-mt-md">
                 <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
             </div>
+            <div class="horizontal-line"></div>
             <div id="insignia" name="4" class="row col-12 q-mt-md">
                 <InsigniaVue v-model:statusEdit="statusEdit" />
             </div>
+            <div class="horizontal-line"></div>
             <div id="examresult" name="0" class="q-px-lg q-py-lg">
                 <ExamResult />
             </div>
+                <div class="horizontal-line"></div>
             <div id="qualification" name="0" class="q-px-lg q-py-lg">
-                <Qualification />
+                <Qualification v-model:statusEdit="statusEdit" />
             </div>
         </q-card>
     </div>
@@ -70,4 +75,9 @@ onMounted(async () => {
 .information:target {
     padding-top: 84px;
 }
+
+.horizontal-line {
+    background-color: #F4F4F4;
+    height: 5px;
+}
 </style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/exams_other/Education.vue b/src/modules/05_placement/components/exams_other/Education.vue
index 726596805..0079e0854 100644
--- a/src/modules/05_placement/components/exams_other/Education.vue
+++ b/src/modules/05_placement/components/exams_other/Education.vue
@@ -942,7 +942,7 @@ const getClass = (val: boolean) => {
 };
 </script>
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md no-border">
     <q-form ref="myForm">
       <ProfileTable
         :rows="rows"
@@ -1378,4 +1378,9 @@ const getClass = (val: boolean) => {
 .modalfix {
   position: fixed !important;
 }
+
+.no-border {
+  border: none !important;
+  box-shadow: none !important;
+}
 </style>
diff --git a/src/modules/05_placement/components/exams_other/Information/Address.vue b/src/modules/05_placement/components/exams_other/Information/Address.vue
index 9f49214a1..309eb465b 100644
--- a/src/modules/05_placement/components/exams_other/Information/Address.vue
+++ b/src/modules/05_placement/components/exams_other/Information/Address.vue
@@ -546,7 +546,7 @@ const getClass = (val: boolean) => {
 };
 </script>
 <template>
-  <q-card flat class="col-12 q-px-lg q-py-md q-mt-md">
+  <q-card flat class="col-12 q-px-lg q-py-md q-mt-md no-border">
     <HeaderTop
       v-model:edit="edit"
       header="ข้อมูลที่อยู่"
diff --git a/src/modules/05_placement/components/exams_other/Information/Certicate.vue b/src/modules/05_placement/components/exams_other/Information/Certicate.vue
index 41663f571..6e0b0bd64 100644
--- a/src/modules/05_placement/components/exams_other/Information/Certicate.vue
+++ b/src/modules/05_placement/components/exams_other/Information/Certicate.vue
@@ -565,7 +565,7 @@ const getClass = (val: boolean) => {
 };
 </script>
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md no-border">
     <q-form ref="myForm">
       <ProfileTable
         :rows="rows"
diff --git a/src/modules/05_placement/components/exams_other/Information/Information.vue b/src/modules/05_placement/components/exams_other/Information/Information.vue
index 2f280eb6c..0538a83a6 100644
--- a/src/modules/05_placement/components/exams_other/Information/Information.vue
+++ b/src/modules/05_placement/components/exams_other/Information/Information.vue
@@ -611,7 +611,7 @@ const getClass = (val: boolean) => {
 };
 </script>
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md no-border">
     <HeaderTop
       v-model:edit="edit"
       header="ข้อมูลส่วนตัว"
diff --git a/src/modules/05_placement/components/exams_other/Information/layout.vue b/src/modules/05_placement/components/exams_other/Information/layout.vue
index 6e277187c..e6dbdc6a2 100644
--- a/src/modules/05_placement/components/exams_other/Information/layout.vue
+++ b/src/modules/05_placement/components/exams_other/Information/layout.vue
@@ -46,6 +46,18 @@ const closeModalError = () => {
 
 </script>
 <template>
-  <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
-  <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
+  <div>
+    <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
+  </div>
+  <div class="horizontal-line"></div>
+  <div>
+    <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
+  </div>
 </template>
+<style lang="scss" scoped>
+.horizontal-line {
+  background-color: #F4F4F4;
+  width: 100%;
+  height: 5px;
+}
+</style>
diff --git a/src/modules/05_placement/components/exams_other/Insignia.vue b/src/modules/05_placement/components/exams_other/Insignia.vue
index e7b8f2624..1fc3a8fac 100644
--- a/src/modules/05_placement/components/exams_other/Insignia.vue
+++ b/src/modules/05_placement/components/exams_other/Insignia.vue
@@ -811,7 +811,7 @@ const getClass = (val: boolean) => {
 };
 </script>
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card class="col-12 q-px-lg q-py-md no-border">
     <q-form ref="myForm">
       <ProfileTable
         :rows="rows"
diff --git a/src/modules/05_placement/components/exams_other/Qualification.vue b/src/modules/05_placement/components/exams_other/Qualification.vue
index 83337eaa3..412bf2aee 100644
--- a/src/modules/05_placement/components/exams_other/Qualification.vue
+++ b/src/modules/05_placement/components/exams_other/Qualification.vue
@@ -1,6 +1,65 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
+import type { QForm } from 'quasar';
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  modalError,
+} = mixin;
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const edit = ref<boolean>(false);
+const myform = ref<QForm | null>(null);
+const saveData = async () => {
+  if (myform.value != null) {
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+        await editData();
+      } else {
+      }
+    });
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const editData = async () => {
+    modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
+  }
+
+  const onCancel = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+//   await fetchData();
+};
+
 
 const selection = ref([]);
 const checkboxItems: CheckboxItem[] = [
@@ -19,66 +78,28 @@ const checkboxItems: CheckboxItem[] = [
 </script>
 <template>
     <div class="row">
-        <q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" />
-        <span class="text-bold text-subtitle2 ">การคัดกรองคุณสมบัติ</span>
+        <HeaderTop
+            v-model:edit="edit"
+            header="การคัดกรองคุณสมบัติ"
+            icon="mdi-briefcase-edit"
+            :save="saveData"
+            :history="false"
+            :changeBtn="changeBtn"
+            :disable="statusEdit"
+            :cancel="onCancel"
+            />
     </div>
-    <div class="contanier-box-mini">
-        <q-card bordered class="card-panding">
-            <div class="col-12 row items-center q-pa-sm header-text">
-                การคัดกรองคุณสมบัติ
-            </div>
-            <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
-                <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
-                    class="checkbox-group" />
-                <q-separator />
-            </div>
-        </q-card>
+    <div class="contanier-checkbox">
+        <div v-for="item of checkboxItems" :key="item.id" class="q-pt-md">
+            <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
+                :disable="false" />
+            <q-separator />
+        </div>
     </div>
 </template>
 <style lang="scss" scoped>
-.header-text {
-    font-size: 18px;
-    font-weight: 600;
-    color: #4F4F4F;
-}
-
-.sub-text-right {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 150%;
-    color: #000000;
-}
-
-.sub-text {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    letter-spacing: 0.0025em;
-    color: #35373C;
-}
-
-.card-exam {
-    border-radius: 5px;
-    background: #FAFAFA;
-}
-
-.header-sub-text-exam {
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 150%;
-    color: #818181;
-}
-
-.header-sub-text-exam-2 {
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 150%;
-    color: #00AA86;
-}
-
-.sub-text-exam {
-    font-size: 15px;
-    font-weight: 500;
-    color: #000000;
+.contanier-checkbox {
+    padding-left: 20px;
+    padding-top: 10px;
 }
 </style>
\ No newline at end of file