From 93bdc791dc56319c25cd47ce95b8d0be600512c5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 27 May 2024 15:29:13 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20Res?=
 =?UTF-8?q?ponensive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue  |   6 +-
 .../Tab/Dialog/01_FormIndicator.vue           |   8 +-
 .../Tab/Dialog/04_FormCompetency.vue          |  39 +++++-
 .../components/Tab/Dialog/DialogViewInfo.vue  |   6 +-
 src/modules/08_KPI/components/Tab/TabMain.vue |  36 +++--
 .../components/Tab/Topic/01_Indicator.vue     | 117 ++++++++++++----
 .../components/Tab/Topic/02_Competency.vue    | 127 ++++++++++++++----
 .../components/Tab/Topic/03_Develop.vue       |   1 -
 src/views/MainLayout.vue                      |   6 +-
 9 files changed, 266 insertions(+), 80 deletions(-)

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 27b38e9..e0111e4 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -6,6 +6,7 @@ import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import keycloak from "@/plugins/keycloak";
 import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
 import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
 
@@ -13,7 +14,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
-const fullname = ref<string>("ธัญลักษณ์");
+const fullname = ref<string>("");
 const inboxList = ref<any>([
   //   {
   //     no: 1,
@@ -108,6 +109,9 @@ const items = ref<any>([
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
+  if (keycloak.tokenParsed != null) {
+    fullname.value = keycloak.tokenParsed.name;
+  }
 });
 const fetchlistInbox = async (index: number) => {
   index === 1 && showLoader();
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 90937c5..0f3a90e 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -462,7 +462,7 @@ const title = computed(() => {
 
         <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
           <div class="col-12 row">
-            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
               <div class="col-12 fit">
                 <div class="row col-12" v-if="numpage !== 3">
                   <q-checkbox
@@ -617,14 +617,14 @@ const title = computed(() => {
               </div>
             </div>
 
-            <div class="col-9">
+            <div class="col-xs-12 col-md-9">
               <div class="row q-pa-md q-col-gutter-sm">
                 <div class="col-12">
                   <span class="text-body2 text-weight-medium"
                     >รายละเอียดตัวชี้วัด</span
                   >
                 </div>
-                <div class="col-6">
+                <div class="col-xs-12 col-6">
                   <q-card bordered class="full-height q-pa-sm">
                     <div class="q-pa-sm q-col-gutter-lg">
                       <div class="col-12 row" v-if="numpage !== 3">
@@ -733,7 +733,7 @@ const title = computed(() => {
                     </div>
                   </q-card>
                 </div>
-                <div class="col-6 row">
+                <div class="col-xs-12 col-6 row">
                   <div class="row col-12 card-box">
                     <div
                       class="col-12 bg-grey-2 row items-center text-weight-medium"
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index 7d3ecb7..8d57926 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -282,7 +282,7 @@ watch(
 
         <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
           <div class="row">
-            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
               <div class="col-12 q-col-gutter-sm fit">
                 <div class="col-12">
                   <q-select
@@ -362,13 +362,13 @@ watch(
               </div>
             </div>
 
-            <div class="col-9 q-pa-md q-col-gutter-sm">
+            <div class="col-xs-12 col-md-9 q-pa-md q-col-gutter-sm">
               <span class="text-body2 text-weight-medium"
                 >รายละเอียดสมรรถนะ</span
               >
 
               <div class="row q-col-gutter-sm">
-                <div class="col-5 row">
+                <div class="col-xs-12 col-md-5 row">
                   <q-card bordered class="fit q-pa-sm no-shadow">
                     <div
                       v-for="(field, index) in Object.keys(fieldDetailLabels)"
@@ -442,14 +442,13 @@ watch(
                     </div>
                   </q-card>
                 </div>
-                <div class="col-7">
-                  <q-table
+                <div class="col-xs-12 col-md-7">
+                  <d-table
                     flat
                     bordered
                     dense
                     :paging="true"
                     row-key="level"
-                    class="custom-table2"
                     virtual-scroll
                     :rows="dataListCapacityDetails"
                     hide-pagination
@@ -486,6 +485,32 @@ watch(
                         </q-td>
                       </q-tr>
                     </template>
+                    <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 = 'description')">
+                                  <span v-html="col.value"></span
+                                ></q-item-label>
+
+                                <q-item-label v-else>{{
+                                  col.value ?? "-"
+                                }}</q-item-label>
+                              </q-item-section>
+                            </q-item>
+                          </q-list>
+                        </q-card>
+                      </div>
+                    </template>
                     <template v-slot:no-data="{ icon, message }">
                       <div
                         class="q-pa-md text-weight-bold full-width text-center"
@@ -493,7 +518,7 @@ watch(
                         <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
                       </div>
                     </template>
-                  </q-table>
+                  </d-table>
 
                   <!-- <q-card bordered class="col-12 no-shadow">
                     <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
index 12c71e8..e911d34 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
@@ -1,4 +1,3 @@
-divdiv
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -79,7 +78,10 @@ watch(
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 45%">
+    <q-card
+      class="col-12"
+      :style="!$q.screen.gt.xs ? 'width: 100%' : 'width: 45%'"
+    >
       <DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
       <q-separator />
       <q-card-section>
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index 6672963..d613417 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -36,10 +36,10 @@ const splitterModel = ref<number>(12);
 
 <template>
   <q-splitter
+    v-if="$q.screen.gt.xs"
     v-model="splitterModel"
     :horizontal="!$q.screen.gt.xs"
     disable
-    v-if="$q.screen.gt.xs"
   >
     <template v-slot:before>
       <q-tabs
@@ -89,20 +89,38 @@ const splitterModel = ref<number>(12);
   </q-splitter>
 
   <q-list bordered class="rounded-borders" v-else>
-    <q-expansion-item expand-separator label="จัดทำข้อตกลง">
-      <Assessment />
+    <q-expansion-item
+      expand-separator
+      label="จัดทำข้อตกลง"
+      @click="store.tabMain = '1'"
+    >
+      <Assessment v-if="store.tabMain === '1'" />
     </q-expansion-item>
 
-    <q-expansion-item expand-separator label="รายงานความก้าวหน้า">
-      <Assessment :type="'evaluator'" />
+    <q-expansion-item
+      expand-separator
+      label="รายงานความก้าวหน้า"
+      @click="store.tabMain = '2'"
+      :disable="store.tabOpen < 2"
+    >
+      <Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
     </q-expansion-item>
 
-    <q-expansion-item expand-separator label="รายงานผลสำเร็จของงาน">
-      <Assessment :type="'commander'" />
+    <q-expansion-item
+      expand-separator
+      label="รายงานผลสำเร็จของงาน"
+      @click="store.tabMain = '3'"
+      :disable="store.tabOpen < 3"
+    >
+      <Assessment v-if="store.tabMain === '3'" :type="'commander'" />
     </q-expansion-item>
 
-    <q-expansion-item expand-separator label="ไฟล์เอกสาร">
-      <File />
+    <q-expansion-item
+      expand-separator
+      label="ไฟล์เอกสาร"
+      @click="store.tabMain = '5'"
+    >
+      <File v-if="store.tabMain === '5'" />
     </q-expansion-item>
   </q-list>
 </template>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 50f7993..c399fef 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -238,7 +238,7 @@ const isEditStep3 = computed(() => {
 </script>
 
 <template>
-  <q-card bordered style="border-radius: 5px" class="no-shadow">
+  <q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
     <q-card-section class="bg-grey-2 q-py-sm">
       <div class="row items-center no-wrap">
         <div class="col">
@@ -285,7 +285,6 @@ const isEditStep3 = computed(() => {
         bordered
         dense
         hide-pagination
-        class="custom-table2"
         :visible-columns="visibleColumns"
         :rows-per-page-options="[20]"
         no-data-label="ไม่มีข้อมูล"
@@ -331,31 +330,6 @@ const isEditStep3 = computed(() => {
                     </q-tooltip>
                   </q-btn>
                 </q-btn-group>
-                <!-- <q-rating
-                  v-model="props.row.point"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="store.ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  disable
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
-                  </template>
-                </q-rating> -->
               </div>
               <div v-else-if="col.name === 'achievement'">
                 {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@@ -431,6 +405,95 @@ const isEditStep3 = computed(() => {
             </td>
           </q-tr>
         </template>
+        <template #item="props">
+          <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <div class="row justify-end">
+                <q-btn
+                  flat
+                  round
+                  icon="info"
+                  color="info"
+                  size="14px"
+                  @click="onClickView(props.row.id)"
+                >
+                  <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
+                </q-btn>
+              </div>
+
+              <q-separator />
+              <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>{{ 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"
+                  size="12px"
+                  dense
+                  @click="onAdd(true, props.row.id)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  size="12px"
+                  dense
+                  @click="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/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 6564cdb..1d91d35 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -266,7 +266,7 @@ onMounted(() => {
 
 <template>
   <div v-for="(item, index) in store.competencyType" :key="index">
-    <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
       <q-card-section class="bg-grey-2 q-py-sm">
         <div class="row items-center">
           <div class="col">
@@ -302,7 +302,7 @@ onMounted(() => {
         </div>
       </q-card-section>
       <q-card-section class="q-pa-sm">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="rows[item.id]"
@@ -312,7 +312,6 @@ onMounted(() => {
           :paging="true"
           dense
           hide-pagination
-          class="custom-table2"
           no-data-label="ไม่มีข้อมูล"
           :visible-columns="visibleColumns"
         >
@@ -348,29 +347,7 @@ onMounted(() => {
                         </q-tooltip>
                       </q-btn>
                     </q-btn-group>
-                    <!-- <q-rating
-                      v-model="props.row.point"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="store.ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                      disable
-                    >
-                      <template
-                        v-for="(i, index) in sortedDataListCriteria"
-                        :key="i.level"
-                        v-slot:[`tip-${index+1}`]
-                      >
-                        <q-tooltip>
-                          <div class="text-body2">
-                            <span v-html="i.description"></span>
-                          </div>
-                        </q-tooltip>
-                      </template>
-                    </q-rating> -->
                   </div>
-                  <!-- <div v-else>รอ ทำ select</div> -->
                 </div>
                 <div v-else-if="col.name == 'summary'">
                   {{
@@ -438,7 +415,105 @@ 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 == 'point'">
+                        <q-btn-group outline>
+                          <q-btn
+                            v-for="(i, index) in sortedDataListCriteria"
+                            :key="index"
+                            :class="props.row.point == i.level && 'active'"
+                            outline
+                            color="grey-6"
+                            :label="i.level"
+                          >
+                            <q-tooltip>
+                              <div class="text-body2">
+                                <span v-html="i.description"></span>
+                              </div>
+                            </q-tooltip>
+                          </q-btn>
+                        </q-btn-group>
+                      </q-item-label>
+                      <q-item-label v-else-if="col.name == 'summary'">
+                        {{
+                          props.row.point !== 0
+                            ? (props.row.point / 5) * props.row.weight
+                            : "-"
+                        }}
+                      </q-item-label>
+                      <q-item-label v-else>{{ 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, item.id)"
+                  >
+                    <q-tooltip>แก้ไข </q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    flat
+                    round
+                    icon="delete"
+                    color="red"
+                    @click.stop.pervent="onDelete(props.row.id, item.id)"
+                  >
+                    <q-tooltip>ลบข้อมูล </q-tooltip>
+                  </q-btn>
+                </q-card-actions>
+              </q-card>
+            </div>
+          </template>
+        </d-table>
       </q-card-section>
     </q-card>
   </div>
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 dcc510b..6da04f9 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -237,7 +237,6 @@ onMounted(() => {
         :paging="true"
         dense
         hide-pagination
-        class="custom-table2"
         no-data-label="ไม่มีข้อมูล"
         :visible-columns="visibleColumns"
       >
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index c058e0f..476b933 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -473,16 +473,16 @@ function onInfo(){
             flat
             round
             color="white"
-            icon="mdi-view-dashboard-outline"
+            icon="mdi-home"
             @click="router.push(`/`)"
           />
-          <q-btn
+          <!-- <q-btn
             flat
             round
             color="white"
             icon="mdi-map-marker-check-outline"
             @click="router.push(`/check-in`)"
-          />
+          /> -->
           <q-btn
             flat
             round