From 5c3c18dd5c64403f0753ddf1920914005c6e43b9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 5 Apr 2024 17:54:56 +0700
Subject: [PATCH] =?UTF-8?q?API=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/14_KPI/api.KPI.ts                     |   6 +-
 src/api/15_development/api.development.ts     |   1 +
 src/modules/14_KPI/views/round.vue            | 206 ++++++++++++------
 .../components/scholarship/DetailView.vue     |   2 +-
 .../15_development/views/Scholarship.vue      |   2 +-
 5 files changed, 146 insertions(+), 71 deletions(-)

diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 2c654582d..1bca35e14 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -1,6 +1,10 @@
 import env from "../index";
-const KPI = `${env.API_URI}/KPI`;
+const KPI = `${env.API_URI}/kpi`;
+const kpiPeriod = `${env.API_URI}/kpi/period`;
 
 export default {
   KPI,
+  /** รอบการประเมินผล*/
+  kpiPeriod: `${kpiPeriod}`,
+  kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
 };
diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index 02c60b99f..b696507c4 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -19,4 +19,5 @@ export default {
   /** ทุนการศึกษา/ฝึกอบรม*/
   devScholarship,
   devScholarshipByid: (id: string) => `${devScholarship}/${id}`,
+ 
 };
diff --git a/src/modules/14_KPI/views/round.vue b/src/modules/14_KPI/views/round.vue
index 2aacf2c8f..76812a118 100644
--- a/src/modules/14_KPI/views/round.vue
+++ b/src/modules/14_KPI/views/round.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -12,51 +14,53 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, date2Thai, dialogConfirm, dialogRemove } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  date2Thai,
+  dialogConfirm,
+  dialogRemove,
+} = useCounterMixin();
 
 /** หัวตาราง */
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "round",
+    name: "durationKPI",
     align: "left",
     label: "รอบการประเมิน ",
     sortable: true,
-    field: "round",
+    field: "durationKPI",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => connvertName(val),
   },
   {
-    name: "dateStart",
+    name: "startDate",
     align: "left",
     label: "วันเริ่มต้น",
     sortable: true,
-    field: "dateStart",
+    field: "startDate",
     format: (val) => date2Thai(val),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 
   {
-    name: "dateEnd",
+    name: "endDate",
     align: "left",
     label: "วันสิ้นสุด",
     sortable: true,
-    field: "dateEnd",
+    field: "endDate",
     format: (val) => date2Thai(val),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>(["round", "dateStart", "dateEnd"]);
+const visibleColumns = ref<string[]>(["durationKPI", "startDate", "endDate"]);
 
-const options = ref<any>([
-  "การศึกษาในประเทศ",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
-]);
 const itemMenu = ref<any>([
   {
     label: "เปิดรอบ",
@@ -79,46 +83,45 @@ const itemMenu = ref<any>([
 ]);
 
 const roundOp = ref<any>([
-  { id: "1", label: "รอบเมษายน" },
+  { id: "APR", name: "รอบเมษายน" },
   {
-    id: "2",
-    label: "รอบตุลาคม",
+    id: "OCT",
+    name: "รอบตุลาคม",
   },
 ]);
 
-const formFilter = reactive({
+const formQuery = reactive({
   page: 1,
   pageSize: 10,
   year: new Date().getFullYear(),
   keyword: "",
 });
+const totalList = ref<number>(1);
 
 const formData = reactive({
-  round: "",
-  dateStart: null,
-  dateEnd: null,
+  durationKPI: "",
+  startDate: null,
+  endDate: null,
 });
 
 function fetchList() {
   showLoader();
-  const data = [
-    {
-      id: "1",
-      round: "รอบเมษายน",
-      dateStart: new Date("2024-4-12"),
-      dateEnd: new Date("2024-4-12"),
-    },
-    {
-      id: "2",
-      round: "รอบตุลาคม",
-      dateStart: new Date("2024-4-12"),
-      dateEnd: new Date("2024-4-12"),
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 const modalDialog = ref<boolean>(false);
@@ -134,28 +137,41 @@ function closeDialog() {
 }
 
 function changeDateStart() {
-  if (formData?.dateStart !== null && formData?.dateEnd !== null) {
-    const startDate = new Date(formData.dateStart);
-    const endDate = new Date(formData?.dateEnd);
+  if (formData?.startDate !== null && formData?.endDate !== null) {
+    const startDate = new Date(formData.startDate);
+    const endDate = new Date(formData?.endDate);
     if (startDate > endDate) {
-      formData.dateEnd = null;
+      formData.endDate = null;
     }
   }
 }
 
 function clearFormData() {
-  formData.round = "";
-  formData.dateStart = null;
-  formData.dateEnd = null;
+  formData.durationKPI = "";
+  formData.startDate = null;
+  formData.endDate = null;
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    closeDialog();
+  dialogConfirm($q, async () => {
+    try {
+      const url = isStatusEdit.value
+        ? config.API.kpiPeriodById("12")
+        : config.API.kpiPeriod;
+      const method = isStatusEdit.value ? "put" : "post";
+      await http[method](url, formData);
+      fetchList();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (e) {
+      messageError($q, e);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
   });
 }
 
-function onClickAction(action: string) {
+function onClickAction(action: string, id: string) {
   switch (action) {
     case "open":
       onOpenRounde();
@@ -164,7 +180,7 @@ function onClickAction(action: string) {
       onCloseRounde();
       break;
     case "delete":
-      onDeleteRound();
+      onDeleteRound(id);
       break;
     default:
       break;
@@ -187,10 +203,45 @@ function onCloseRounde() {
     "ต้องการยืนยันการปิดรอบนี้หรือไม่ ?"
   );
 }
-function onDeleteRound() {
-  dialogRemove($q, () => {});
+function onDeleteRound(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiPeriodById(id))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchList();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
+function connvertName(val: string) {
+  const findData = roundOp.value.find((e: any) => e.id === val);
+  return findData.name;
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(() => {
   fetchList();
 });
@@ -205,11 +256,12 @@ onMounted(() => {
       <div class="row q-gutter-sm">
         <datepicker
           menu-class-name="modalfix"
-          v-model="formFilter.year"
+          v-model="formQuery.year"
           :locale="'th'"
           autoApply
           year-picker
           :enableTimePicker="false"
+          @update:model-value="(formQuery.page = 1), fetchList()"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -220,7 +272,7 @@ onMounted(() => {
               dense
               lazy-rules
               outlined
-              :model-value="Number(formFilter.year) + 543"
+              :model-value="Number(formQuery.year) + 543"
               :label="`${'ปีงบประมาณ'}`"
             >
               <template v-slot:prepend>
@@ -272,19 +324,22 @@ onMounted(() => {
         <q-input
           standout
           dense
-          v-model="formFilter.keyword"
+          v-model="formQuery.keyword"
           ref="filterRef"
           outlined
           debounce="300"
           placeholder="ค้นหา"
+          @keyup.enter="(formQuery.page = 1), fetchList()"
         >
           <template v-slot:append>
-            <q-icon v-if="formFilter.keyword == ''" name="search" />
+            <q-icon v-if="formQuery.keyword == ''" name="search" />
             <q-icon
-              v-if="formFilter.keyword !== ''"
+              v-if="formQuery.keyword !== ''"
               name="clear"
               class="cursor-pointer"
-              @click="formFilter.keyword = ''"
+              @click="
+                (formQuery.keyword = ''), (formQuery.page = 1), fetchList()
+              "
             />
           </template>
         </q-input>
@@ -318,6 +373,8 @@ onMounted(() => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        :rows-per-page-options="[2, 10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -342,7 +399,7 @@ onMounted(() => {
                       clickable
                       v-close-popup
                       v-for="items in itemMenu"
-                      @click="onClickAction(items.value)"
+                      @click="onClickAction(items.value, props.row.id)"
                     >
                       <q-item-section avatar>
                         <q-icon :color="items.color" :name="items.icon" />
@@ -356,6 +413,19 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          <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>
   </q-card>
@@ -377,9 +447,9 @@ onMounted(() => {
                 outlined
                 hide-bottom-space
                 lazy-rules
-                v-model="formData.round"
+                v-model="formData.durationKPI"
                 :options="roundOp"
-                option-label="label"
+                option-label="name"
                 option-value="id"
                 emit-value
                 map-options
@@ -395,7 +465,7 @@ onMounted(() => {
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.dateStart"
+                v-model="formData.startDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -411,7 +481,7 @@ onMounted(() => {
                     dense
                     outlined
                     :model-value="
-                      formData.dateStart ? date2Thai(formData.dateStart) : null
+                      formData.startDate ? date2Thai(formData.startDate) : null
                     "
                     :label="`${'วันเริ่มต้น'}`"
                     hide-bottom-space
@@ -436,12 +506,12 @@ onMounted(() => {
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.dateEnd"
+                v-model="formData.endDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
                 week-start="0"
-                :min-date="formData.dateStart"
+                :min-date="formData.startDate"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -452,7 +522,7 @@ onMounted(() => {
                     dense
                     outlined
                     :model-value="
-                      formData.dateEnd ? date2Thai(formData.dateEnd) : null
+                      formData.endDate ? date2Thai(formData.endDate) : null
                     "
                     :label="`${'วันสิ้นสุด'}`"
                     class="inputgreen"
diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index 84ad0ad54..bc500b20c 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -227,7 +227,7 @@ function fetchDataDetail(id: string) {
 }
 
 function onSubmit() {
-  console.log(formBody);
+ 
   dialogConfirm($q, async () => {
     showLoader();
     formBody.budgetApprove =
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index dadc1afcf..aa4099865 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -332,7 +332,7 @@ onMounted(() => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
-        :rows-per-page-options="[2, 10, 25, 50, 100]"
+        :rows-per-page-options="[10, 25, 50, 100]"
         @update:pagination="updatePagination"
       >
         <template v-slot:header="props">