From b49adf1aaaeecaea351bb028f75c9107c5aa4b70 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 19 Mar 2024 17:13:44 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B8=9C=E0=B8=A5=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=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=8F=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/05_ResultsPerformance.vue     | 350 ++++++++++--------
 .../interface/request/ResultsPerformance.ts   |  39 +-
 .../interface/response/ResultsPerformance.ts  |  27 +-
 3 files changed, 228 insertions(+), 188 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
index a23c9ac7c..771ffa1a4 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -1,81 +1,62 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, useAttrs } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import type { QTableProps, QForm } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
+
 import type {
   RequestItemsObject,
-  DataProps,
+  FormData,
 } from "@/modules/04_registryNew/interface/request/ResultsPerformance";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
 
 const $q = useQuasar();
-const attrs = ref<any>(useAttrs());
+const route = useRoute();
 const mixin = useCounterMixin();
 const {
   date2Thai,
   success,
-  dateToISO,
   messageError,
   showLoader,
   hideLoader,
-  convertDate,
-  convertDateDisplay,
+  dialogConfirm,
+  dialogRemove,
 } = mixin;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
-const id = ref<string>("");
-const name = ref<string>();
-const point1Total = ref<number>(0);
-const point1 = ref<number>(0);
-const point2Total = ref<number>(0);
-const point2 = ref<number>(0);
-const pointSumTotal = ref<number>(0);
-const pointSum = ref<number>(0);
-const date = ref<Date>();
+const resPerformData = reactive<FormData>({
+  id: "",
+  isActive: true,
+  name: "",
+  point1Total: 0,
+  point1: 0,
+  point2Total: 0,
+  point2: 0,
+  pointSumTotal: 0,
+  pointSum: 0,
+  date: null,
+});
 
+const isEdit = ref<boolean>(false);
 const editRow = ref<boolean>(false);
-const myForm = ref<any>();
-const edit = ref<boolean>(false);
+const myForm = ref<QForm>();
 const modal = ref<boolean>(false);
 const modelView = ref<string>("table");
 const filterSearch = ref("");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<RequestItemsObject[]>([]);
+const rowsHistory = ref<ResponseObject[]>([]);
 const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ");
 
-const rows = ref<RequestItemsObject[]>([
-  {
-    id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
-    point1Total: 100.0,
-    point1: 100.0,
-    point2Total: 100.0,
-    point2: 100.0,
-    pointSumTotal: 100.0,
-    pointSum: 100.0,
-    name: "",
-    date: new Date("2022-05-18T00:00:00"),
-    createdFullName: "สาวิตรี ศรีสมัย",
-    createdAt: new Date("2024-02-13T18:11:09.032485"),
-  },
-  {
-    id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
-    point1Total: 100.0,
-    point1: 100.0,
-    point2Total: 100.0,
-    point2: 100.0,
-    pointSumTotal: 100.0,
-    pointSum: 100.0,
-    name: "",
-    date: new Date("2021-09-25T00:00:00"),
-    createdFullName: "สาวิตรี ศรีสมัย",
-    createdAt: new Date("2024-02-13T18:11:35.602659"),
-  },
-]);
+const rows = ref<ResponseObject[]>([]);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -86,8 +67,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    format: (v) => date2Thai(v),
   },
   {
     name: "point1Total",
@@ -160,7 +140,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ผลประเมิน",
     sortable: true,
-    field: "name",
+    field: (v) => `${textPoint(v.pointSum)} ${textRangePoint(v.pointSum)}`,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -176,8 +156,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "point1Total",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "point1",
@@ -239,7 +217,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     align: "left",
     label: "ผลประเมิน",
     sortable: true,
-    field: "name",
+    field: (v) => `${textPoint(v.pointSum)} ${textRangePoint(v.pointSum)}`,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -264,6 +242,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -292,77 +271,135 @@ const visibleColumns = ref<String[]>([
   "date",
 ]);
 
-function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
-  modal.value = true;
+async function fetchData() {
+  if (!profileId.value) return;
+
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileNewAssessmentsByProfileId(profileId.value)
+    );
+    rows.value = res.data.result;
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
-const clickClose = async () => {
+async function addEditData(editStatus: boolean = false) {
+  if (!profileId.value) return;
+
+  const url = editStatus
+    ? config.API.profileNewAssessmentsById(resPerformData.id)
+    : config.API.profileNewAssessments;
+  const method = editStatus ? "patch" : "post";
+  const reqBody: RequestItemsObject = {
+    profileId: profileId.value,
+    isActive: resPerformData.isActive,
+    name: resPerformData.name,
+    date: resPerformData.date,
+    point1: resPerformData.point1,
+    point1Total: resPerformData.point1Total,
+    point2: resPerformData.point2,
+    point2Total: resPerformData.point2Total,
+    pointSum: resPerformData.pointSum,
+    pointSumTotal: resPerformData.pointSumTotal,
+  };
+
+  try {
+    await http[method](url, reqBody);
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    await fetchData();
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
+}
+
+async function clickDelete(dataId: string) {
+  try {
+    await http.delete(config.API.profileNewAssessmentsById(dataId));
+    success($q, "ลบข้อมูลสำเร็จ");
+    await fetchData();
+    modal.value = false;
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
+function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
+  modal.value = true;
+  editRow.value = false;
+  isEdit.value = editStatus;
+
+  if (editStatus && row) {
+    console.log(row.id);
+    Object.assign(resPerformData, row);
+  } else {
+    (resPerformData.id = ""),
+      (resPerformData.isActive = true),
+      (resPerformData.name = ""),
+      (resPerformData.point1Total = 0),
+      (resPerformData.point1 = 0),
+      (resPerformData.point2Total = 0),
+      (resPerformData.point2 = 0),
+      (resPerformData.pointSumTotal = 0),
+      (resPerformData.pointSum = 0),
+      (resPerformData.date = null);
+  }
+}
+
+async function clickClose() {
   if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      modal.value = false;
-      // next.value = false;
-      // previous.value = false;
-    });
+    dialogConfirm(
+      $q,
+      async () => {
+        modal.value = false;
+        editRow.value = false;
+      },
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
+    );
   } else {
     modal.value = false;
-    // next.value = false;
-    // previous.value = false;
   }
-};
+}
+
+async function clickHistory(row: ResponseObject) {
+  modalHistory.value = true;
+  filterSearch.value = "";
+
+  showLoader();
+  try {
+    const res = await http.get(config.API.profileAssessmentHisId(row.id));
+    rowsHistory.value = res.data.result;
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
+}
 
 function onSubmit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // await saveData();
-      modal.value = false;
-    }
-  });
+  dialogConfirm(
+    $q,
+    async () => {
+      myForm.value?.validate().then(async (result: boolean) => {
+        if (result) {
+          addEditData(isEdit.value);
+          modal.value = false;
+        }
+      });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
 }
 
-function selectData(props: any) {
-  modal.value = true;
-}
-
-const clickHistory = async (row: RequestItemsObject) => {
-  modalHistory.value = true;
-  // tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
-  // filterHistory.value = "";
-  // showLoader();
-  // await http
-  //   .get(config.API.profileAssessmentHisId(row.id))
-  //   .then((res) => {
-  //     let data = res.data.result;
-  //     rowsHistory.value = [];
-  //     data.map((e: ResponseObject) => {
-  //       rowsHistory.value.push({
-  //         id: e.id,
-  //         name: e.name,
-  //         point1Total: e.point1Total,
-  //         point1: e.point1,
-  //         point2Total: e.point2Total,
-  //         point2: e.point2,
-  //         pointSumTotal: e.pointSumTotal,
-  //         pointSum: e.pointSum,
-  //         date: new Date(e.date),
-  //         createdAt: new Date(e.createdAt),
-  //         createdFullName: e.createdFullName,
-  //       });
-  //     });
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-};
-
 function textRangePoint(val: number | undefined) {
   if (val == undefined) val = -1;
   if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
@@ -383,6 +420,9 @@ function textPoint(val: number | undefined) {
   else return "-";
 }
 
+onMounted(async () => {
+  await fetchData();
+});
 </script>
 <template>
   <q-toolbar style="padding: 0px" class="text-primary">
@@ -456,7 +496,7 @@ function textPoint(val: number | undefined) {
     bordered
     virtual-scroll
     ref="table"
-    v-bind="attrs"
+    class="custom-header-table"
     :rows="rows"
     :columns="columns"
     :filter="filterSearch"
@@ -479,21 +519,26 @@ function textPoint(val: number | undefined) {
           v-for="col in props.cols"
           :key="col.name"
           :props="props"
-          @click="selectData(props)"
+          @click="onClickOpenDialog(true, props.row)"
           class="cursor-pointer"
         >
-          <div v-if="col.name == 'date'" class="table_ellipsis">
-            {{ col.value ? date2Thai(col.value) : "-" }}
-          </div>
-          <div v-else-if="col.name == 'name'" class="table_ellipsis">
-            {{ textPoint(props.row.pointSum) }}
-            {{ textRangePoint(props.row.pointSum) }}
-          </div>
-          <div v-else class="table_ellipsis">
+          <div class="table_ellipsis">
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
         <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            color="primary"
+            icon="mdi-pencil-outline"
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -505,6 +550,19 @@ function textPoint(val: number | undefined) {
           >
             <q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
           </q-btn>
+          <!-- <q-btn
+            flat
+            dense
+            round
+            size="14px"
+            color="red"
+            icon="mdi-delete"
+            @click="
+              dialogRemove($q, async () => await clickDelete(props.row.id))
+            "
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn> -->
         </q-td>
       </q-tr>
     </template>
@@ -520,7 +578,7 @@ function textPoint(val: number | undefined) {
               round
               color="primary"
               icon="mdi-pencil-outline"
-              @click.stop.prevent="onClickOpenDialog()"
+              @click.stop.prevent="onClickOpenDialog(true, props.row)"
             >
               <q-tooltip>แก่ไขข้อมุล</q-tooltip>
             </q-btn>
@@ -548,14 +606,7 @@ function textPoint(val: number | undefined) {
               </q-item-section>
 
               <q-item-section class="text-dark">
-                <q-item-label v-if="col.name == 'date'">
-                  {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
-                <q-item-label v-else-if="col.name == 'name'">
-                  {{ textPoint(props.row.pointSum) }}
-                  {{ textRangePoint(props.row.pointSum) }}
-                </q-item-label>
-                <q-item-label v-else>
+                <q-item-label>
                   {{ col.value ? col.value : "-" }}
                 </q-item-label>
               </q-item-section>
@@ -579,7 +630,7 @@ function textPoint(val: number | undefined) {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="date"
+                v-model="resPerformData.date"
                 :locale="'th'"
                 :enableTimePicker="false"
               >
@@ -595,8 +646,9 @@ function textPoint(val: number | undefined) {
                     outlined
                     for="inputDatereceive"
                     ref="dateReceivedRef"
+                    class="inputgreen"
                     hide-bottom-space
-                    :model-value="date2Thai(date as Date)"
+                    :model-value="date2Thai(resPerformData.date as Date)"
                     :label="`${'วันที่ได้รับ'}`"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
                     @update:modelValue="() => (editRow = true)"
@@ -620,7 +672,7 @@ function textPoint(val: number | undefined) {
                 hide-bottom-space
                 type="number"
                 class="inputgreen"
-                v-model="point1Total"
+                v-model="resPerformData.point1Total"
                 input-class="text-right "
                 :label="`${'ส่วนที่1 (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
@@ -635,7 +687,7 @@ function textPoint(val: number | undefined) {
                 hide-bottom-space
                 type="number"
                 class="inputgreen"
-                v-model="point1"
+                v-model="resPerformData.point1"
                 input-class="text-right"
                 :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
                 :rules="[
@@ -652,7 +704,7 @@ function textPoint(val: number | undefined) {
                 hide-bottom-space
                 type="number"
                 class="inputgreen"
-                v-model="point2Total"
+                v-model="resPerformData.point2Total"
                 input-class="text-right"
                 :label="`${'ส่วนที่2 (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
@@ -667,7 +719,7 @@ function textPoint(val: number | undefined) {
                 hide-bottom-space
                 type="number"
                 class="inputgreen"
-                v-model="point2"
+                v-model="resPerformData.point2"
                 input-class="text-right"
                 :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
                 :rules="[
@@ -684,7 +736,7 @@ function textPoint(val: number | undefined) {
                 hide-bottom-space
                 type="number"
                 class="inputgreen"
-                v-model="pointSumTotal"
+                v-model="resPerformData.pointSumTotal"
                 input-class="text-right"
                 :label="`${'ผลรวม (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
@@ -698,7 +750,7 @@ function textPoint(val: number | undefined) {
                 lazy-rules
                 hide-bottom-space
                 type="number"
-                v-model="pointSum"
+                v-model="resPerformData.pointSum"
                 class="inputgreen"
                 input-class="text-right"
                 :label="`${'ผลประเมินรวม (คะแนน)'}`"
@@ -712,9 +764,9 @@ function textPoint(val: number | undefined) {
               <q-space></q-space>
               ผลการประเมิน:
               <div class="text-bold items-center q-px-sm">
-                {{ textPoint(pointSum) }}
+                {{ textPoint(resPerformData.pointSum) }}
               </div>
-              {{ textRangePoint(pointSum) }}
+              {{ textRangePoint(resPerformData.pointSum) }}
             </div>
           </div>
         </q-card-section>
@@ -749,17 +801,7 @@ function textPoint(val: number | undefined) {
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'date' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'name'" class="table_ellipsis">
-            {{ textPoint(props.row.pointSum) }}
-            {{ textRangePoint(props.row.pointSum) }}
-          </div>
-          <div v-else class="table_ellipsis">
+          <div class="table_ellipsis">
             {{ col.value }}
           </div>
         </q-td>
diff --git a/src/modules/04_registryNew/interface/request/ResultsPerformance.ts b/src/modules/04_registryNew/interface/request/ResultsPerformance.ts
index 58bcb2a51..e83f7b1d4 100644
--- a/src/modules/04_registryNew/interface/request/ResultsPerformance.ts
+++ b/src/modules/04_registryNew/interface/request/ResultsPerformance.ts
@@ -1,34 +1,27 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
+interface RequestItemsObject {
+  profileId: string;
+  isActive: boolean;
+  name: string;
+  date: Date | null;
+  point1: number;
+  point1Total: number;
+  point2: number;
+  point2Total: number;
+  pointSum: number;
+  pointSumTotal: number;
 }
 
-//ข้อมูล
-interface RequestItemsObject {
+interface FormData {
   id: string;
+  isActive: boolean;
+  name: string;
   point1Total: number;
   point1: number;
   point2Total: number;
   point2: number;
   pointSumTotal: number;
   pointSum: number;
-  name: string;
-  date: Date;
-  createdFullName: string;
-  createdAt: Date;
+  date: Date | null;
 }
 
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
+export type { RequestItemsObject, FormData };
diff --git a/src/modules/04_registryNew/interface/response/ResultsPerformance.ts b/src/modules/04_registryNew/interface/response/ResultsPerformance.ts
index af1f8598a..90066b4a3 100644
--- a/src/modules/04_registryNew/interface/response/ResultsPerformance.ts
+++ b/src/modules/04_registryNew/interface/response/ResultsPerformance.ts
@@ -1,16 +1,21 @@
-//ข้อมูล
 interface ResponseObject {
-  id: string;
-  point1Total: number;
-  point1: number;
-  point2Total: number;
-  point2: number;
-  pointSumTotal: number;
-  pointSum: number;
-  name: string;
-  date: Date;
-  createdFullName: string;
   createdAt: Date;
+  createdFullName: string;
+  createdUserId: string;
+  date: Date;
+  id: string;
+  isActive: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date;
+  name: string;
+  point1: number;
+  point1Total: number;
+  point2: number;
+  point2Total: number;
+  pointSum: number;
+  pointSumTotal: number;
+  profileId: string;
 }
 
 export type { ResponseObject };