Refactoring code module 01_metadata => 01_personal

src/modules/01_metadata/components/personal/province/01_District.vue

@@ -1,29 +1,26 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
-import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore";
 import { useQuasar } from "quasar";
-import DialogForm from "@/modules/01_metadata/components/personal/DialogForm.vue";
+
+import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
+import type { QTableProps } from "quasar";
 import type { FormDistrict } from "@/modules/01_metadata/interface/response/personal/personal";
 
+import DialogForm from "@/modules/01_metadata/components/personal/DialogForm.vue"; // เพิ่มข้อมูล,แก้ไขข้อมูล
+
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const store = usePersonalDataStore();
-const mixin = useCounterMixin();
-const {
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  date2Thai,
-} = mixin;
+const { messageError, showLoader, hideLoader, success, date2Thai } =
+  useCounterMixin();
+
+/**
+ * Table
+ */
 const columns = [
   {
     name: "name",
@@ -70,16 +67,6 @@ const columns = [
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-const editId = ref<string>("");
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const district = ref<string>("");
-const rows = ref<FormDistrict[]>([]);
-
-const dialogStatus = ref<string>("");
-const personalName = ref<string>("เขต/อำเภอ");
 const visibleColumns = ref<string[]>([
   "name",
   "createdAt",
@@ -87,16 +74,33 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
 ]);
 
+const id = ref<string>(route.params.id as string); // id จังหวัด
+const filterKeyword = ref<string>(""); //คำค้นหา
+const district = ref<string>(""); // เขต/อำเภอ
+const editId = ref<string>(""); // id รายการ เขต/อำเภอ
+const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
+const dialogStatus = ref<string>(""); // สถานะ เพิ่มข้อมูล,แก้ไขข้อมูล
+const personalName = ref<string>("เขต/อำเภอ"); //label input
+const rows = ref<FormDistrict[]>([]); // ข้อมูลรายการเขต/อำเภอ
+
+/**
+ * fetch ข้อมูลรายการ ระดับการเขต/อำเภอ  ตาม id ของจังหวัด
+ * - จัดการกับข้อมูล
+ * - กำหนด  rows.value เท่ากับข้อมูลที่ respones
+ */
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.orgProvince + `/${id.value}`)
     .then(async (res) => {
-      const data = res.data.result.districts;
-      const list = data.map((e: any) => ({
+      const data = await res.data.result.districts;
+
+      const list = data.map((e: FormDistrict) => ({
         ...e,
-        createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
-        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+        createdAt: e.createdAt ? date2Thai(new Date(e.createdAt)) : "",
+        lastUpdatedAt: e.lastUpdatedAt
+          ? date2Thai(new Date(e.lastUpdatedAt))
+          : "",
       }));
       rows.value = list;
     })
@@ -108,14 +112,19 @@ async function fetchData() {
     });
 }
 
+/**
+ * เพิ่มข้อมูลรายการระดับการเขต/อำเภอ
+ * แล้ว fetch ข้อมูลรายการ ระดับการเขต/อำเภอ ใหม่
+ */
 async function addData() {
+  showLoader();
   await http
     .post(config.API.orgDistrict, {
       name: district.value,
       provinceId: id.value,
     })
-    .then(() => {
-      fetchData();
+    .then(async () => {
+      await fetchData();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((err) => {
@@ -126,13 +135,19 @@ async function addData() {
     });
 }
 
+/**
+ * แก้ไขข้อมูลรายการระดับการเขต/อำเภอ
+ * แล้ว fetch ข้อมูลรายการ ระดับการเขต/อำเภอ ใหม่
+ * @param id รายการระดับการเขต/อำเภอ
+ */
 async function editData(id: string) {
+  showLoader();
   await http
     .put(config.API.orgDistrict + `/${id}`, {
       name: district.value,
     })
-    .then(() => {
-      fetchData();
+    .then(async () => {
+      await fetchData();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((err) => {
@@ -143,27 +158,20 @@ async function editData(id: string) {
     });
 }
 
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgDistrict + `/${id}`)
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
+/**
+ * ไปยังหน้า รายากรเแขวง/ตำบลโดย id ของเขต/อำเภอ
+ * @param idSub เขต/อำเภอ
+ */
 function nextPage(idSub: string) {
   router.push(`/master-data/personal/sub-district/${id.value}/${idSub}`);
 }
 
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ * แล้วเรียก function fetch ข้อมูลรายการระดับการเขต/อำเภอ
+ */
 onMounted(async () => {
-  fetchData();
+  await fetchData();
 });
 </script>
 
@@ -268,20 +276,6 @@ onMounted(async () => {
               >
                 <q-tooltip>แก้ไขข้อมูล</q-tooltip>
               </q-btn>
-              <q-btn
-                color="red"
-                flat
-                dense
-                round
-                icon="mdi-delete"
-                clickable
-                @click.stop="
-                  dialogRemove($q, async () => await deleteData(props.row.id))
-                "
-                v-close-popup
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
             </q-td>
             <q-td
               v-for="col in props.cols"
@@ -301,10 +295,10 @@ onMounted(async () => {
   <DialogForm
     v-model:dialog="dialog"
     v-model:data="district"
-    v-model:personalName="personalName"
-    v-model:dialogStatus="dialogStatus"
-    v-model:editId="editId"
-    :addData="addData"
+    v-model:personal-name="personalName"
+    v-model:dialog-status="dialogStatus"
+    v-model:edit-id="editId"
+    :add-data="addData"
     :fetch-data="fetchData"
     :edit-data="editData"
   />