From c7ec71595209c0a7c7ad5d518ac30c74b3ae36f3 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Sun, 14 Jul 2024 23:04:43 +0700
Subject: [PATCH] updated KPI

---
 .../Tab/Dialog/DialogGovernment.vue           |  13 +-
 src/modules/08_KPI/views/form.vue             | 346 +++++++++++++-----
 2 files changed, 266 insertions(+), 93 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index d9e31ca..f3519c9 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -153,6 +153,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format: (val) => statusText(val),
   },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "commandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
@@ -166,6 +176,7 @@ const visibleColumns = ref<string[]>([
   "dateEnd",
   "createdAt",
   "status",
+  "commandNo",
 ]);
 
 const statusText = (val: string) => {
@@ -195,7 +206,7 @@ function close() {
 function getData() {
   showLoader();
   http
-    .get(config.API.placementKeycloak + `/${store.dataProfile.profileId}`)
+    .get(config.API.placementKeycloak + `/${store.dataEvaluation.profileId}`)
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 02eafe2..76bf07e 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -13,10 +13,10 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
 import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
-import DialogStatus from "@/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue";
+// import DialogStatus from "@/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue";
 
 const modalGovernment = ref<boolean>(false);
-const modalStatus = ref<boolean>(false);
+// const modalStatus = ref<boolean>(false);
 // const modalScore = ref<boolean>(false);
 const modalEdit = ref<boolean>(false);
 const route = useRoute();
@@ -132,6 +132,11 @@ async function fetchProfile(id: string) {
     });
 }
 
+function openEvaluator() {
+  modalEdit.value = true;
+  getOrgOp();
+}
+
 function close() {
   modalEdit.value = false;
   evaluatorId.value = null;
@@ -384,7 +389,9 @@ function openGovernment() {
   modalGovernment.value = true;
 }
 function openStatus() {
-  modalStatus.value = true;
+  // router.push(`/probation/${store.dataEvaluation.profileId}`);
+  router.push(`/probation`);
+  // modalStatus.value = true;
 }
 
 function sendToEvauator() {
@@ -462,6 +469,49 @@ async function goToSummary() {
   );
 }
 
+const modalEvaluatorDetail = ref<boolean>(false);
+const topic = ref<string>("");
+function viewEvaluatorDetail(profileId: string, type: string) {
+  modalEvaluatorDetail.value = true;
+  topic.value =
+    type == "evaluator"
+      ? "ข้อมูลของผู้ประเมิน"
+      : type == "commander"
+      ? "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไป"
+      : "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง";
+  fetchProfileEvaluator(profileId);
+}
+
+const evaluator = ref<any>({
+  fullName: "",
+  position: "",
+  avartar: "",
+  posTypeName: "",
+  posLevelName: "",
+  org: "",
+});
+async function fetchProfileEvaluator(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgPosition + `/${id}`)
+    .then((res) => {
+      console.log(res.data.result);
+      const data = res.data.result;
+      evaluator.value.fullName =
+        data.prefix + data.firstName + " " + data.lastName;
+      evaluator.value.position = data.position;
+      evaluator.value.posTypeName = data.posTypeName;
+      evaluator.value.posLevelName = data.posLevelName;
+      evaluator.value.org = findOrgName(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   showLoader();
   store.isUpdate = await false;
@@ -685,7 +735,7 @@ onMounted(async () => {
                       color="grey-2"
                       text-color="edit"
                       size="md"
-                      @click="modalEdit = true"
+                      @click="openEvaluator()"
                     >
                       <q-tooltip>{{
                         store.dataEvaluation.evaluationStatus === "NEW" &&
@@ -820,103 +870,155 @@ onMounted(async () => {
         <q-separator />
         <q-card-section>
           <div class="column q-gutter-sm">
-            <q-select
-              :readonly="
-                !(
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER'
-                )
-              "
-              v-model="evaluatorId"
-              outlined
-              label="ผู้ประเมิน"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="evaluatorIdOp"
-              class="inputgreen"
-              map-options
-              hide-bottom-space
-              lazy-rules
-              :rules="[ (val:string) => !!val ||
+            <div class="row">
+              <div class="col-10">
+                <q-select
+                  :readonly="
+                    !(
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER'
+                    )
+                  "
+                  v-model="evaluatorId"
+                  outlined
+                  label="ผู้ประเมิน"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="evaluatorIdOp"
+                  class="inputgreen"
+                  map-options
+                  hide-bottom-space
+                  lazy-rules
+                  :rules="[ (val:string) => !!val ||
             `${'กรุณาเลือกผู้ประเมิน'}`, ]"
-              use-input
-              @filter="(inputValue:any,
+                  use-input
+                  @filter="(inputValue:any,
             doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
             ) "
-            />
-            <q-select
-              :readonly="
-                !(
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER'
-                )
-              "
-              v-model="commanderId"
-              outlined
-              label="ผู้บังคับบัญชาเหนือขึ้นไป"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="commanderIdOp"
-              map-options
-              class="inputgreen"
-              use-input
-              @filter="(inputValue:any,
+                />
+              </div>
+              <div class="col-2 q-pa-sm text-right">
+                <q-icon
+                  v-if="evaluatorId"
+                  name="mdi-eye"
+                  size="sm"
+                  color="info"
+                  class="cursor-pointer"
+                  @click="viewEvaluatorDetail(evaluatorId.id, 'evaluator')"
+                >
+                  <q-tooltip>ดูข้อมูลผู้ประเมิน</q-tooltip>
+                </q-icon>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-10">
+                <q-select
+                  :readonly="
+                    !(
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER'
+                    )
+                  "
+                  v-model="commanderId"
+                  outlined
+                  label="ผู้บังคับบัญชาเหนือขึ้นไป"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="commanderIdOp"
+                  map-options
+                  class="inputgreen"
+                  use-input
+                  @filter="(inputValue:any,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
                     ) "
-            >
-              <template
-                v-if="
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER' &&
-                  commanderId
-                "
-                v-slot:append
-              >
+                >
+                  <template
+                    v-if="
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER' &&
+                      commanderId
+                    "
+                    v-slot:append
+                  >
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="commanderId = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-2 q-pa-sm text-right">
                 <q-icon
-                  name="cancel"
-                  @click.stop.prevent="commanderId = null"
+                  v-if="commanderId"
+                  name="mdi-eye"
+                  size="sm"
+                  color="info"
                   class="cursor-pointer"
-                />
-              </template>
-            </q-select>
-            <q-select
-              :readonly="
-                !(
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER'
-                )
-              "
-              v-model="commanderHighId"
-              outlined
-              label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="commanderHighOp"
-              map-options
-              use-input
-              class="inputgreen"
-              @filter="(inputValue:any,
+                  @click="viewEvaluatorDetail(commanderId.id, 'commander')"
+                >
+                  <q-tooltip>ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไป</q-tooltip>
+                </q-icon>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-10">
+                <q-select
+                  :readonly="
+                    !(
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER'
+                    )
+                  "
+                  v-model="commanderHighId"
+                  outlined
+                  label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="commanderHighOp"
+                  map-options
+                  use-input
+                  class="inputgreen"
+                  @filter="(inputValue:any,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
                     ) "
-            >
-              <template
-                v-if="
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER' &&
-                  commanderHighId
-                "
-                v-slot:append
-              >
+                >
+                  <template
+                    v-if="
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER' &&
+                      commanderHighId
+                    "
+                    v-slot:append
+                  >
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="commanderHighId = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-2 q-pa-sm text-right">
                 <q-icon
-                  name="cancel"
-                  @click.stop.prevent="commanderHighId = null"
+                  v-if="commanderHighId"
+                  name="mdi-eye"
+                  size="sm"
+                  color="info"
                   class="cursor-pointer"
-                />
-              </template>
-            </q-select>
+                  @click="
+                    viewEvaluatorDetail(commanderHighId.id, 'commanderHigh')
+                  "
+                >
+                  <q-tooltip
+                    >ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</q-tooltip
+                  >
+                </q-icon>
+              </div>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -936,6 +1038,66 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="modalEvaluatorDetail" persistent>
+    <q-card style="width: 700px; max-width: 80vw; min-height: 40vh">
+      <DialogHeader
+        :tittle="topic"
+        :close="() => (modalEvaluatorDetail = false)"
+      />
+      <q-separator />
+
+      <q-card>
+        <div class="q-pa-md">
+          <span class="text-teal text-weight-bold text-body2">{{
+            evaluator.fullName
+          }}</span>
+        </div>
+
+        <q-card-section class="q-pa-md">
+          <div class="row">
+            <div class="col-12 column justify-center no-wrap">
+              <div class="row text-grey-6">
+                <div class="col-3">ตำแหน่งในสายงาน</div>
+                <div class="col-3">ตำแหน่งประเภท</div>
+                <div class="col-3">ตำแหน่งทางการบริหาร</div>
+                <div class="col-3">สังกัด</div>
+              </div>
+              <div class="row">
+                <div class="col-3">
+                  {{ evaluator.position ? evaluator.position : "-" }}
+                </div>
+                <div class="col-3">
+                  {{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
+                  {{
+                    evaluator.posLevelName
+                      ? ` (${evaluator.posLevelName})`
+                      : "-"
+                  }}
+                </div>
+                <div class="col-3">
+                  {{
+                    evaluator.posExecutiveName
+                      ? evaluator.posExecutiveName
+                      : "-"
+                  }}
+                </div>
+                <div class="col-3">
+                  {{ evaluator.org ? evaluator.org : "-" }}
+                </div>
+              </div>
+
+              <div class="row q-mt-md text-grey-6">
+                <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
+              </div>
+              <div class="row">
+                <div class="col-12">-</div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-card>
+  </q-dialog>
   <!-- <q-dialog v-model="modalScore" persistent>
     <q-card bordered style="width: 50vh">
       <q-form greedy @submit.prevent @validation-success="onSubmitScore">
@@ -1014,10 +1176,10 @@ onMounted(async () => {
   </q-dialog> -->
 
   <DialogGovernment v-model:modal="modalGovernment" />
-  <DialogStatus
+  <!-- <DialogStatus
     v-model:modal="modalStatus"
     v-model:is-probation="store.dataProfile.isProbation"
-  />
+  /> -->
 </template>
 <style>
 .bg-toolbar {