From 9662fbedd888b71238787e26e07c75a9b432f4aa Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 14 Mar 2024 11:49:18 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9ACardV?=
 =?UTF-8?q?iew?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/01_ProfessionalLicense.vue    | 40 +++++----
 .../detail/Achievement/02_Train.vue           | 51 +++++++-----
 .../PersonalInformation/05_Education.vue      | 81 ++++++++++++++-----
 .../PersonalInformation/06_SpecialSkill.vue   | 39 +++++----
 4 files changed, 139 insertions(+), 72 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index 80f71b65f..ddf8b2574 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -268,10 +268,10 @@ function closeHistoryDialog() {
     </template>
     <template v-slot:item="props" v-else>
       <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-4 grid-style-transition"
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -293,24 +293,26 @@ function closeHistoryDialog() {
           </q-card-actions>
           <q-separator />
           <q-list>
-            <q-item
-              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
               :key="col.name"
             >
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label
-                  caption
+              <div></div>
+              <div class="col label-color">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div
                   v-if="col.name === 'issueDate' || col.name === 'expireDate'"
                 >
                   {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
+                </div>
 
-                <q-item-label caption v-else>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
+                <div v-else>{{ col.value }}</div>
+              </div>
+            </div>
           </q-list>
         </q-card>
       </div>
@@ -552,4 +554,12 @@ function closeHistoryDialog() {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.bg-color {
+  background-color: #fafafa;
+}
+
+.label-color {
+  color: #747474cc;
+}
+</style>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index 02afee66d..9204dc0ce 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -434,7 +434,7 @@ watch(
         class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -456,28 +456,29 @@ watch(
           </q-card-actions>
           <q-separator />
           <q-list>
-            <q-item
-              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+            <div
+              v-for="(col, index) in props.cols"
               :key="col.name"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
             >
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label
-                  caption
-                  v-if="
-                    col.name === 'startDate' ||
-                    col.name === 'endDate' ||
-                    col.name === 'graduateDate'
-                  "
-                >
-                  {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
-
-                <q-item-label caption v-else>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
+              <div class="row q-pa-sm">
+                <div class="col-7 label-color">
+                  <div>{{ col.label }}</div>
+                </div>
+                <div class="col">
+                  <div
+                    v-if="
+                      col.name === 'startDate' ||
+                      col.name === 'endDate' ||
+                      col.name === 'dateOrder'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>{{ col.value }}</div>
+                </div>
+              </div>
+            </div>
           </q-list>
         </q-card>
       </div>
@@ -928,4 +929,12 @@ watch(
 .borderCard {
   border: 1px solid #d0d0d0;
 }
+
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
 </style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index 57484d532..e377befbb 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -168,6 +168,7 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const backgroundColor = "grey-2";
 const isDate = ref<string>("false");
 const educationOption = ["ใช่", "ไม่ใช่"];
 const historyDialog = ref<boolean>(false);
@@ -483,32 +484,60 @@ watch(
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <q-list>
-            <div
-              class="q-pa-md"
-              v-for="(col, index) in props.cols"
-              :key="col.name"
-            >
-              <div class="row">
-                <div class="col-5">
-                  <div>{{ col.label }}</div>
+          <div class="row">
+            <div class="col-3 q-pa-sm label-color">ระดับการศึกษา</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[0].value }}</div>
+            <div class="col-2 q-pa-sm label-color">สถานศึกษา</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[1].value }}</div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-3 q-pa-sm label-color">ตั้งแต่</div>
+                <div class="col-4 q-pa-sm">
+                  {{ date2Thai(props.cols[2].value) }}
                 </div>
-                <div class="col-7">
-                  <div
-                    v-if="
-                      col.name === 'startDate' ||
-                      col.name === 'finishDate' ||
-                      col.name === 'graduateDate'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </div>
-
-                  <div v-else>{{ col.value }}</div>
+                <div class="col-2 q-pa-sm label-color">ถึง</div>
+                <div class="col-3 q-pa-sm">
+                  {{ date2Thai(props.cols[3].value) }}
                 </div>
               </div>
             </div>
-          </q-list>
+            <div class="col-3 q-pa-sm label-color">วันที่สำเร็จการศึกษา</div>
+            <div class="col-9 q-pa-sm">
+              {{ date2Thai(props.cols[4].value) }}
+            </div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-4 q-pa-sm label-color">
+                  เป็นวุฒิการศึกษาในตำแหน่ง
+                </div>
+                <div class="col-3 q-pa-sm">{{ props.cols[5].value }}</div>
+                <div class="col-2 q-pa-sm label-color">วุฒิการศึกษา</div>
+                <div class="col-3 q-pa-sm">{{ props.cols[6].value }}</div>
+              </div>
+            </div>
+            <div class="col-3 q-pa-sm label-color">สาขาวืชา/ทาง</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[7].value }}</div>
+            <div class="col-2 q-pa-sm label-color">ทุน</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[8].value }}</div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-3 q-pa-sm label-color">เกรดเฉลี่ย</div>
+                <div class="col-4 q-pa-sm">{{ props.cols[9].value }}</div>
+                <div class="col-2 q-pa-sm label-color">ประเทศ</div>
+                <div class="col-3 q-pa-sm">{{ props.cols[10].value }}</div>
+              </div>
+            </div>
+            <div class="col-3 q-pa-sm label-color">ข้อมูลการติดต่อ</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[11].value }}</div>
+            <div class="col-2 q-pa-sm label-color">ระยะเวลา</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[12].value }}</div>
+          </div>
+          <div class="col-12">
+            <div :class="`row bg-color`">
+              <div class="col-3 q-pa-sm label-color">ระยะเวลาหลักสูตร</div>
+              <div class="col-4 q-pa-sm">{{ props.cols[13].value }}</div>
+            </div>
+          </div>
         </q-card>
       </div>
     </template>
@@ -974,4 +1003,12 @@ watch(
 .borderCard {
   border: 1px solid #d0d0d0;
 }
+
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
 </style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index ea7dcf2e7..4c789a446 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -84,7 +84,7 @@ const rows = [
   },
 ];
 const dialog = ref<boolean>(false);
-
+const backgroundColor = "grey-2";
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
@@ -242,10 +242,10 @@ async function onSubmit() {
     </template>
     <template v-slot:item="props" v-else>
       <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -267,16 +267,18 @@ async function onSubmit() {
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <q-list>
-            <q-item v-for="col in props.cols" :key="col.name">
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label caption>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
+          <div class="row">
+            <div class="col q-pa-sm label-color">ด้าน</div>
+            <div class="col q-pa-sm">{{ props.cols[0].value }}</div>
+            <div class="col q-pa-sm label-color">รายละเอียด</div>
+            <div class="col q-pa-sm">{{ props.cols[1].value }}</div>
+          </div>
+          <div :class="`row bg-color`">
+            <div class="col q-pa-sm label-color">หมายเหตุ</div>
+            <div class="col q-pa-sm">{{ props.cols[2].value }}</div>
+            <div class="col q-pa-sm label-color">เอกสารอ้างอิง</div>
+            <div class="col q-pa-sm">{{ props.cols[3].value }}</div>
+          </div>
         </q-card>
       </div>
     </template>
@@ -350,6 +352,7 @@ async function onSubmit() {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
+      console.log("🚀 ~ bg-white:", bg-white)
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
@@ -427,4 +430,12 @@ async function onSubmit() {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
+</style>