Merge branch 'develop' into devTee

# Conflicts:
#	src/api/KPI/api.kpis.ts

src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue

@@ -1,36 +1,57 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
 import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue";
 import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
+
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
 const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
 
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const props = defineProps({
+  fetchList: { type: Function, required: true },
+});
+
+const kpiUserPlannedId = ref<string>("");
 const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
 const modalAssigned = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
 
 const visibleColumns = ref<string[]>([
-  "indicators",
+  "includingName",
   "target",
-  "scoreLevel",
+  "point",
   "weight",
-  "workResult",
+  "achievement",
   "evaluationResults",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "indicators",
+    name: "includingName",
     align: "left",
     label: "ตัวชี้วัด",
     sortable: true,
-    field: "indicators",
+    field: "includingName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -48,11 +69,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "scoreLevel",
+    name: "point",
     align: "left",
     label: "ระดับคะแนนตามเกณฑ์การประเมิน",
     sortable: true,
-    field: "scoreLevel",
+    field: "point",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -70,11 +91,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "workResult",
+    name: "achievement",
     align: "left",
     label: "ผลสำเร็จของงาน",
     sortable: true,
-    field: "workResult",
+    field: "achievement",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -93,13 +114,43 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onAdd() {
+function onAdd(edit: boolean = false, id: string = "") {
   if (numpage.value !== 3) {
     modal.value = true;
+    isStatusEdit.value = edit;
+    kpiUserPlannedId.value = id;
   } else if (numpage.value == 3) {
     modalAssigned.value = true;
   }
 }
+
+function onDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      const url =
+        numpage.value === 1
+          ? config.API.kpiAchievement("planned") + `/${id}`
+          : config.API.kpiAchievement("role") + `/${id}`;
+      await http.delete(url);
+      props.fetchList?.();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (!modal.value) {
+      props.fetchList?.();
+    }
+  }
+);
 </script>
 <template>
   <q-card bordered style="border-radius: 5px" class="no-shadow">
@@ -114,7 +165,7 @@ function onAdd() {
         color="primary"
         size="12px"
         dense
-        @click="onAdd"
+        @click="onAdd()"
       >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
@@ -129,11 +180,11 @@ function onAdd() {
         row-key="id"
         flat
         bordered
-        :paging="true"
         dense
         hide-pagination
         class="custom-table2"
         :visible-columns="visibleColumns"
+        :rows-per-page-options="[20]"
         no-data-label="ไม่มีข้อมูล"
       >
         <template v-slot:header="props">
@@ -154,13 +205,43 @@ function onAdd() {
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
+            <td>
+              <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>
+            </td>
           </q-tr>
         </template>
       </q-table>
     </q-card-section>
   </q-card>
 
-  <Dialog v-model:modal="modal" :numpage="numpage" />
+  <Dialog
+    v-model:modal="modal"
+    :numpage="numpage"
+    :isStatusEdit="isStatusEdit"
+    :kpiUserPlannedId="kpiUserPlannedId"
+  />
   <Dialog03 v-model:modal="modalAssigned" :numpage="numpage" />
 </template>
 <style scoped>