เงินเดือน => ปรีบ code รอบการขึ้นเงินเดือน

src/modules/13_salary/views/salaryRound.vue

@@ -2,31 +2,36 @@
 import { ref, watch, onMounted } from "vue";
 import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
 import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import type { RowList, Row } from "@/modules/13_salary/interface/response/Main";
-import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { RowList } from "@/modules/13_salary/interface/response/Main";
+
+/** importComponents*/
+import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
+
+/** importStore*/
 import { useQuasar } from "quasar";
 
-const idRound = ref<string>("");
+/** use*/
 const $q = useQuasar();
-const mixin = useCounterMixin();
+const dataStore = useSalaryDataStore();
 const {
   dialogRemove,
   showLoader,
   hideLoader,
   messageError,
   date2Thai,
-  dateToISO,
   dialogConfirm,
   success,
-} = mixin;
-const dataStore = useSalaryDataStore();
+} = useCounterMixin();
+
+const idRound = ref<string>("");
 const year = ref<number>(0);
 const filterKeyword = ref<string>("");
-const rowsPerPage = ref<number>(10);
 const editCheck = ref<boolean>(false);
 const dialog = ref<boolean>(false);
 const period = ref<string>("");
@@ -39,23 +44,9 @@ const maxPage = ref<number>(1);
 const totalList = ref<number>(0);
 const currentPage = ref<number>(1);
 const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
 
-const pagination = ref({
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
-});
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "period",
-  "year",
-  "effectiveDate",
-  "isActive",
-  "isClose",
-]);
-
-// หัวตาราง
+/** Table*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -112,11 +103,26 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "period",
+  "year",
+  "effectiveDate",
+  "isActive",
+  "isClose",
+]);
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
 
+/** function เปืด Dialog เพิ่มรอบการขึ้นเงินเดือน */
 function clickAdd() {
   dialog.value = true;
   editCheck.value = false;
 }
+
 /** ดึงข้อมูลเริ่มต้น */
 function getData() {
   showLoader();
@@ -137,7 +143,9 @@ function getData() {
       hideLoader();
     });
 }
-function dataUpdate() {
+
+/** function เลือกปีงบประมาณ*/
+function updateYear() {
   page.value = 1;
   getData();
 }
@@ -147,33 +155,33 @@ function yearAll() {
   getData();
 }
 
-/** ฟังชั่น เคลียฟิลเตอร์ */
-function resetFilter() {
-  filterKeyword.value = "";
-  getData();
-}
-
-// /** ดึงข้อมูลเมื่อ กด enter */
-// function filterFn() {
-//   getData();
-// }
-
+/**
+ * function ลบรายการรอบการขึ้นเงินเดือน
+ * @param id รอบการขึ้นเงินเดือน
+ */
 function deleteData(id: string) {
-  showLoader();
-  http
-    .delete(config.API.salaryPeriod() + `/${id}`)
-    .then((res) => {
-      getData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.salaryPeriod() + `/${id}`)
+      .then(() => {
+        getData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
+/**
+ * function เปืด Dialog ข้อมูลรอบการขึ้นเงินเดือน
+ * @param data ข้อมูลรอบการขึ้นเงินเดือน
+ * @param status สะถานะการแก่้ไข
+ */
 function editPopup(data: RowList, status: string) {
   if (status == "read") {
     isRead.value = true;
@@ -186,7 +194,11 @@ function editPopup(data: RowList, status: string) {
   effectiveDate.value = data.effectiveDate as Date;
   isActive.value = data.isActive ? data.isActive : false;
 }
-/** ปิดรอบ */
+
+/**
+ * function ปิดรอการขึ้นเงินเดือน
+ * @param id รอบการขึ้นเงินเดือน
+ */
 function dialogClose(id: string) {
   dialogConfirm(
     $q,
@@ -206,6 +218,24 @@ function dialogClose(id: string) {
   );
 }
 
+/**
+ * function อัปเดท แถวต่อหน้า
+ * @param newPagination
+ */
+function updatePageSize(newPagination: NewPagination) {
+  page.value = 1;
+  rowsPerPage.value = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน*/
+watch(
+  () => rowsPerPage.value,
+  () => {
+    getData();
+  }
+);
+
+/** Hooklifecycle*/
 onMounted(async () => {
   year.value = new Date().getFullYear();
   getData();
@@ -213,18 +243,6 @@ onMounted(async () => {
   dataStore.visibleColumns = visibleColumns.value;
   dataStore.columns = columns.value;
 });
-
-function updatePageSize(newPagination: any) {
-  page.value = 1;
-  rowsPerPage.value = newPagination.rowsPerPage;
-}
-
-watch(
-  () => rowsPerPage.value,
-  () => {
-    getData();
-  }
-);
 </script>
 
 <template>
@@ -244,7 +262,7 @@ watch(
           autoApply
           year-picker
           :enableTimePicker="false"
-          @update:model-value="dataUpdate"
+          @update:model-value="updateYear"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -290,26 +308,6 @@ watch(
         >
       </div>
       <q-space />
-      <!-- <q-input
-        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input> -->
 
       <q-select
         id="visibleColumns"
@@ -477,12 +475,7 @@ watch(
                       v-if="props.row.revisionId == null"
                       clickable
                       v-close-popup
-                      @click.stop="
-                        dialogRemove(
-                          $q,
-                          async () => await deleteData(props.row.id)
-                        )
-                      "
+                      @click.stop="deleteData(props.row.id)"
                     >
                       <q-item-section>
                         <div class="row items-center">