From 870625aecb7b64783490ca24a0df87a4b9d88365 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 27 May 2024 16:43:40 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Evaluator/02_TabOther.vue      |   2 +-
 .../components/Tab/Topic/03_Develop.vue       | 132 +++++++++++++++++-
 src/modules/08_KPI/views/form.vue             |  56 ++++++--
 3 files changed, 172 insertions(+), 18 deletions(-)

diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 886443a..b081981 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -176,7 +176,7 @@ function onClickApprove(type: string = "") {
               />
             </q-card-section>
             <q-separator />
-            <q-list>
+            <q-list @click="redirectViewDetail(props.row.id)">
               <q-item
                 v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
                 :key="col.name"
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index 6da04f9..525dade 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -227,7 +227,7 @@ onMounted(() => {
       </div>
     </q-card-section>
     <q-card-section class="q-pa-sm">
-      <q-table
+      <d-table
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -361,7 +361,135 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-      </q-table>
+        <template #item="props">
+          <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list>
+                <q-item
+                  v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                  :key="col.name"
+                >
+                  <q-item-section>
+                    <q-item-label caption>{{ col.label }}</q-item-label>
+                    <q-item-label v-if="col.name == 'createDate'">
+                      {{ col.value ? date2Thai(col.value) : "-" }}
+                    </q-item-label>
+                    <q-item-label v-else-if="col.name == 'develop'">
+                      <div class="column">
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment70"
+                          label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                        />
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment20"
+                          label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                        />
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment10"
+                          label="10 การฝึกอบรมอื่นๆ"
+                        />
+                      </div>
+                    </q-item-label>
+                    <q-item-label v-else-if="col.name == 'achievement'">
+                      <q-btn-group outline>
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="0"
+                          :class="props.row.summary == 0 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement0
+                          }}</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="5"
+                          :class="props.row.summary == 5 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement5
+                          }}</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="10"
+                          :class="props.row.summary == 10 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement10
+                          }}</q-tooltip></q-btn
+                        >
+                      </q-btn-group>
+                    </q-item-label>
+                    <q-item-label v-else-if="col.name == 'summary'">
+                      {{ props.row.summary ? props.row.summary : 0 }}
+                    </q-item-label>
+                    <q-item-label v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-separator />
+              <q-card-actions
+                align="around"
+                v-if="
+                  store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                  store.tabMain === '2'
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  icon="mdi-developer-board"
+                  color="blue-6"
+                  size="12px"
+                  dense
+                  @click="openPopupProgress(props.row.id)"
+                >
+                  <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="warning"
+                  color="red-5"
+                  size="12px"
+                  dense
+                  main="problem"
+                  @click="openPopupProblem(props.row.id)"
+                >
+                  <q-tooltip>รายงานปัญหา</q-tooltip>
+                </q-btn>
+              </q-card-actions>
+
+              <q-card-actions align="around" v-if="isEditStep1">
+                <q-btn
+                  flat
+                  round
+                  icon="edit"
+                  color="edit"
+                  @click.stop.pervent="onEdit(props.row.id)"
+                >
+                  <q-tooltip>แก้ไข </q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  @click.stop.pervent="onDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล </q-tooltip>
+                </q-btn>
+              </q-card-actions>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 94b90cf..e0ea245 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -130,7 +130,7 @@ function onSubmit() {
             ? commanderHighId.value.id
             : null,
         })
-        .then(() => {
+        .then((res) => {
           success($q, "บันทึกสำเร็จ");
           close();
         })
@@ -246,11 +246,13 @@ function filterOption(val: any, update: Function, refData: string) {
 //   getAll();
 // }
 
-function getAll() {
-  getProfile();
-  fetchEvaluation();
-  store.checkStep();
-  getOrgOp();
+async function getAll() {
+  await getProfile();
+  await fetchEvaluation();
+
+  await store.checkStep();
+
+  await getOrgOp();
 }
 
 function sendToEvaluatore(status: string) {
@@ -263,7 +265,7 @@ function sendToEvaluatore(status: string) {
           .put(config.API.kpiSendToStatus(id.value), {
             status: status,
           })
-          .then(() => {
+          .then((res) => {
             success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
             close();
           })
@@ -290,7 +292,7 @@ function requireEdit() {
           .put(config.API.kpiReqEdit(id.value), {
             status: "EVALUATOR",
           })
-          .then(() => {
+          .then((res) => {
             success($q, "ขอแก้ไขสำเร็จ");
             close();
           })
@@ -307,9 +309,10 @@ function requireEdit() {
   );
 }
 
-onMounted(() => {
+onMounted(async () => {
   showLoader();
-  getAll();
+  await getAll();
+  console.log(store.dataEvaluation.avartar);
 });
 </script>
 
@@ -340,11 +343,25 @@ onMounted(() => {
       </div>
       <div class="col-12">
         <q-card bordered flat class="relative-position">
+          <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
+            <q-avatar size="80px">
+              <q-img
+                :src="store.dataEvaluation.avartar"
+                v-if="store.dataEvaluation.avartar !== undefined"
+              />
+              <q-img src="@/assets/avatar_user.jpg" v-else />
+            </q-avatar>
+          </div>
+          <!-- <div class="row text-center">
+        
+          </div> -->
+
           <div
+            v-if="$q.screen.gt.xs"
             class="absolute-center-left"
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
-            <q-avatar size="95px">
+            <q-avatar size="80px">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -354,12 +371,16 @@ onMounted(() => {
           </div>
           <div class="row col-12">
             <div class="row items-center col-12 q-pa-sm">
-              <div class="col-12" style="padding-left: 12%">
-                <div class="row col-12 items-center">
+              <div
+                class="col-12"
+                :style="$q.screen.gt.xs ? 'padding-left: 12%' : ''"
+              >
+                <div class="row col-12 items-center justify-center">
                   <span class="text-h6 text-weight-medium text-primary">{{
                     `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
                   }}</span>
-                  <q-space />
+                  <q-space v-if="$q.screen.gt.xs" />
+
                   <div class="q-gutter-x-sm">
                     <span
                       v-if="
@@ -473,7 +494,12 @@ onMounted(() => {
             </div>
 
             <div class="row items-center bg-toolbar col-12 q-pa-sm">
-              <div class="col-12 q-py-xs" style="padding-left: 12%">
+              <div
+                class="col-12 q-py-xs"
+                :style="
+                  $q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'
+                "
+              >
                 <div class="row no-wrap">
                   <div class="col-2">
                     <div class="column">