From 9f5147b92339e3e1b65e11662613a1ba1baafcbc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 28 Nov 2024 15:25:03 +0700
Subject: [PATCH] kpi

---
 src/modules/08_KPI/store.ts       |  95 ++++++-
 src/modules/08_KPI/views/main.vue | 416 +++++++++++++++++++-----------
 src/style/quasar-variables.sass   |  17 ++
 3 files changed, 371 insertions(+), 157 deletions(-)

diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index 5074234..2765555 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -111,6 +111,57 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     return competency?.name;
   }
 
+  const statusOptions = ref<DataOptions[]>([
+    {
+      id: "",
+      name: "ทั้งหมด",
+    },
+    {
+      id: "NEW",
+      name: "จัดทำข้อตกลง",
+    },
+    {
+      id: "NEW_EVALUATOR",
+      name: "รอผู้ประเมินตรวจสอบข้อตกลง",
+    },
+    {
+      id: "NEW_COMMANDER",
+      name: "รอผู้บังคับบัญชาเหนือขึ้นไปตรวจสอบข้อตกลง",
+    },
+    {
+      id: "NEW_COMMANDER_HIGH",
+      name: "รอผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่งตรวจสอบข้อตกลง",
+    },
+    {
+      id: "APPROVE",
+      name: "รายงานความก้าวหน้า",
+    },
+    {
+      id: "EVALUATING",
+      name: "รายงานผลสำเร็จของงาน",
+    },
+    {
+      id: "EVALUATING_EVALUATOR",
+      name: "รอผู้ประเมินตรวจสอบผล",
+    },
+    {
+      id: "EVALUATING_COMMANDER",
+      name: "รอผู้บังคับบัญชาเหนือขึ้นไปตรวจสอบผล",
+    },
+    {
+      id: "EVALUATING_COMMANDER_HIGH",
+      name: "รอผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่งตรวจสอบผล",
+    },
+    {
+      id: "COMPLETE",
+      name: "รอประกาศผลการประเมิน",
+    },
+    {
+      id: "KP7",
+      name: "ประกาศและลงทะเบียนประวัติแล้ว",
+    },
+  ]);
+
   function convertStatus(val: string) {
     switch (val) {
       case "NEW":
@@ -142,6 +193,45 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     }
   }
 
+  const resultsOptions = ref<DataOptions[]>([
+    {
+      id: "",
+      name: "ทั้งหมด",
+    },
+    {
+      id: "PENDING",
+      name: "รอดำเนินการ",
+    },
+    {
+      id: "PASSED",
+      name: "ผ่านการประเมิน",
+    },
+    {
+      id: "NOTPASSED",
+      name: "ไม่ผ่านการประเมิน",
+    },
+    {
+      id: "EXCELLENT",
+      name: "ดีเด่น",
+    },
+    {
+      id: "VERY_GOOD",
+      name: "ดีมาก",
+    },
+    {
+      id: "GOOD",
+      name: "ดี",
+    },
+    {
+      id: "FAIR",
+      name: "พอใช้",
+    },
+    {
+      id: "IMPROVEMENT",
+      name: "ต้องปรับปรุง",
+    },
+  ]);
+
   function convertResults(val: string) {
     switch (val) {
       case "EXCELLENT":
@@ -159,7 +249,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     }
   }
 
-  const defaultCompetencyCoreLevel = ref<number|null>(null);
+  const defaultCompetencyCoreLevel = ref<number | null>(null);
   const defaultCompetencyGroupLevel = ref<number | null>(null);
   function checkCompetencyDefaultCompetencyLevel() {
     const posTypeName = dataEvaluation.value.posTypeName;
@@ -422,5 +512,8 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     selected,
     work,
     isUpdate,
+
+    resultsOptions,
+    statusOptions,
   };
 });
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index ff56a5e..272ef00 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -115,6 +115,9 @@ const evaluatorIdMainOp = ref<DataOptions[]>([]);
 const commanderIdMainOp = ref<DataOptions[]>([]);
 const commanderHighMainOp = ref<DataOptions[]>([]);
 
+const statusOp = ref<DataOptions[]>(store.statusOptions);
+const resultOp = ref<DataOptions[]>(store.resultsOptions);
+
 /** Dialog*/
 const modalDialog = ref<boolean>(false);
 const yearDialog = ref<number | null>(null);
@@ -137,6 +140,8 @@ const formRound = reactive({
 const formQuery = reactive({
   page: 1,
   pageSize: 10,
+  status: "",
+  results: "",
 });
 const total = ref<number>(0);
 const totalList = ref<number>(1);
@@ -151,7 +156,7 @@ const pagination = ref({
 
 /**
  * ดึงข้อมูลรอบการประเมิน
- * @param type 
+ * @param type
  */
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
@@ -194,11 +199,17 @@ async function fetchRoundOption(type: string) {
  */
 async function fetchList() {
   showLoader();
+  let queryParams = {
+    page: formQuery.page,
+    pageSize: formQuery.pageSize,
+    kpiPeriodId: round.value,
+    status: formQuery.status === "" ? undefined : formQuery.status,
+    results: formQuery.results === "" ? undefined : formQuery.results,
+  };
   await http
-    .get(
-      config.API.kpiEvaluation +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}`
-    )
+    .get(config.API.kpiEvaluation, {
+      params: queryParams,
+    })
     .then(async (res) => {
       const data = await res.data.result;
       total.value = data.total;
@@ -369,6 +380,21 @@ function filterOption(val: string, update: Function, refData: string) {
         );
       });
       break;
+
+    case "status":
+      update(() => {
+        statusOp.value = store.statusOptions.filter(
+          (v: DataOptions) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "result":
+      update(() => {
+        resultOp.value = store.resultsOptions.filter(
+          (v: DataOptions) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
     default:
       break;
   }
@@ -405,161 +431,239 @@ onMounted(async () => {
 
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <div class="row q-col-gutter-sm q-mb-sm">
-            <div class="col-xs-12 col-md-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="year"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:model-value="  formQuery.page = 1,fetchRoundOption('main')"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    hide-bottom-space
-                    :model-value="!!year ? year + 543 : null"
-                    :label="`${'ปีงบประมาณ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+          <div class="col-12 q-col-gutter-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-xs-12 col-md-1">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="year"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:model-value="
+                    (formQuery.page = 1), fetchRoundOption('main')
+                  "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      hide-bottom-space
+                      :model-value="!!year ? year + 543 : null"
+                      :label="`${'ปีงบประมาณ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-2 col-md-2">
+                <q-btn
+                  flat
+                  round
+                  color="primary"
+                  icon="add"
+                  @click="onClickAddList"
+                >
+                  <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+                </q-btn>
+              </div>
+
+              <q-space />
+              <div class="col-xs-12 col-md-2">
+                <q-select
+                  v-model="visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="columns"
+                  option-value="name"
+                  style="min-width: 140px"
+                />
+              </div>
             </div>
 
-            <div class="col-xs-10 col-md-3">
-              <q-select
-                v-model="round"
-                outlined
-                label="รอบการประเมิน"
-                dense
-                option-label="name"
-                option-value="id"
-                :options="roundMainOp"
-                emit-value
-                map-options
-                @update:model-value="changRound"
-              />
-            </div>
+            <div class="col-12">
+              <q-card bordered class="col-12 filter-card q-pa-sm">
+                <div class="items-center col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-md-2">
+                    <q-select
+                      v-model="round"
+                      outlined
+                      label="รอบการประเมิน"
+                      dense
+                      option-label="name"
+                      option-value="id"
+                      :options="roundMainOp"
+                      emit-value
+                      map-options
+                      @update:model-value="changRound"
+                    />
+                  </div>
 
-            <div class="col-xs-2 col-md-2">
-              <q-btn
-                flat
-                round
-                color="primary"
-                icon="add"
-                @click="onClickAddList"
-              >
-                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-              </q-btn>
-            </div>
-
-            <q-space />
-            <div class="col-xs-12 col-md-2">
-              <q-select
-                v-model="visibleColumns"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns"
-                option-value="name"
-                
-                style="min-width: 140px"
-              />
-            </div>
-          </div>
-
-          <div class="col-12">
-            <d-table
-              ref="table"
-              :columns="columns"
-              :rows="rows"
-              :filter="filterKeyword"
-              row-key="id"
-              flat
-              bordered
-              :paging="true"
-              dense
-              :rows-per-page-options="[10, 25, 50, 100]"
-              :visible-columns="visibleColumns"
-              v-model:pagination="pagination"
-              @update:pagination="updatePagination"
-            >
-              <template v-slot:header="props">
-                <q-tr :props="props">
-                  <q-th
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <span class="text-weight-medium">{{ col.label }}</span>
-                  </q-th>
-                </q-tr>
-              </template>
-              <template v-slot:body="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.id"
-                    @click="redirectViewDetail(props.row.id)"
-                  >
-                    <div>
-                      {{ col.value ? col.value : "-" }}
-                    </div>
-                  </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 @click="redirectViewDetail(props.row.id)">
-                      <q-item v-for="col in props.cols" :key="col.name">
-                        <q-item-section>
-                          <q-item-label caption>{{ col.label }}</q-item-label>
-
-                          <q-item-label>
-                            {{ col.value ? col.value : "-" }}</q-item-label
-                          >
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-card>
+                  <div class="col-xs-12 col-md-3">
+                    <q-select
+                      v-model="formQuery.status"
+                      label="สถานะการประเมิน"
+                      class="select_ellipsis2"
+                      dense
+                      emit-value
+                      map-options
+                      :options="statusOp"
+                      option-value="id"
+                      option-label="name"
+                      lazy-rules
+                      hide-bottom-space
+                      outlined
+                      use-input
+                      input-debounce="0"
+                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      :clearable="formQuery.status !== ''"
+                      @clear="
+                        (formQuery.status = ''),
+                          (statusOp = store.statusOptions)
+                      "
+                      @filter="(inputValue: string,
+                    doneFn: Function) => filterOption(inputValue, doneFn, 'status'
+                    )"
+                      ><template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+                  <div class="col-xs-12 col-md-3">
+                    <q-select
+                      v-model="formQuery.results"
+                      label="ผลการประเมิน"
+                      class="select_ellipsis3"
+                      dense
+                      emit-value
+                      map-options
+                      :options="resultOp"
+                      option-value="id"
+                      option-label="name"
+                      lazy-rules
+                      hide-bottom-space
+                      outlined
+                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      use-input
+                      @clear="
+                        (formQuery.results = ''),
+                          (resultOp = store.resultsOptions)
+                      "
+                      input-debounce="0"
+                      :clearable="formQuery.results !== ''"
+                      @filter="(inputValue: string,
+                  doneFn: Function) => filterOption(inputValue, doneFn, 'result'
+                  )"
+                      ><template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
                 </div>
-              </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total }} รายการ
-                <q-pagination
-                  v-model="formQuery.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(totalList)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="fetchList"
-                ></q-pagination>
-              </template>
-            </d-table>
+              </q-card>
+            </div>
+
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                :filter="filterKeyword"
+                row-key="id"
+                flat
+                bordered
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                :visible-columns="visibleColumns"
+                v-model:pagination="pagination"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.id"
+                      @click="redirectViewDetail(props.row.id)"
+                    >
+                      <div>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </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 @click="redirectViewDetail(props.row.id)">
+                        <q-item v-for="col in props.cols" :key="col.name">
+                          <q-item-section>
+                            <q-item-label caption>{{ col.label }}</q-item-label>
+
+                            <q-item-label>
+                              {{ col.value ? col.value : "-" }}</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-card>
+                  </div>
+                </template>
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="formQuery.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(totalList)"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="fetchList"
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </div>
           </div>
         </q-card>
       </div>
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 1930ed5..d628cea 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -114,3 +114,20 @@ input.input-alert
     overflow: visible
     white-space: normal
     transition: width 2s
+
+.select_ellipsis3 .q-field__native > span
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    width: auto
+    max-width: 60ch
+
+.select_ellipsis2 .q-field__native > span
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    width: auto
+    max-width: 30ch
+
+.filter-card
+    background-color: #f1f1f1b0