Refactoring code module 02_organization

src/modules/02_organization/views/main.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { checkPermission } from "@/utils/permissions";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -20,12 +23,6 @@ import StructureOrgMain from "@/modules/02_organization/components/StructureOrgM
 import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
 
-/**
- * importStore
- */
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -46,9 +43,7 @@ const historyId = ref<string>(""); // ID ประวัติโครงสร
 const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
 const count = ref<number>(0);
 
-/**
- * List เพิ่มโครงสร้าง
- */
+// รายการเมนูเพิ่มโครงสร้าง
 const itemStructure = ref<DataOption[]>([
   {
     id: "NEW",
@@ -70,15 +65,17 @@ const itemStructure = ref<DataOption[]>([
 
 /**
  * function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
+ *
+ * เก็บข่อมูลใน store
  */
-function fetchOrganizationActive() {
+async function fetchOrganizationActive() {
   showLoader();
-  http
+  await http
     .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       if (data) {
-        store.fetchDataActive(data);
+        await store.fetchDataActive(data);
         if (data.activeName === null && data.draftName === null) {
           isStatusData.value = false;
         } else {
@@ -100,13 +97,13 @@ function fetchOrganizationActive() {
 }
 
 /**
- * function เรียกข้อมูลประวัติโครงสร้าง
+ * function เรียกข้อมูรายการลประวัติโครงสร้าง
  */
-function fetchHistory() {
-  http
+async function fetchHistory() {
+  await http
     .get(config.API.organizationHistoryNew)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       const filterData = data.filter(
         (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
       );
@@ -150,12 +147,13 @@ function onClickHistory(id: string, name: string) {
 }
 
 /**
- * lifecycleHook
+ * lifecycleHook ทำงานเมื่อมีการเรียกใช้ Components
+ *
+ * ดึงข้อมูลโครงสร้างและรายการประวัติโครงสร้าง
  */
 onMounted(async () => {
   store.typeOrganizational = "current";
-  await fetchOrganizationActive();
-  await fetchHistory();
+  await Promise.all([fetchOrganizationActive(), fetchHistory()]);
 });
 </script>
 <template>
@@ -370,11 +368,8 @@ onMounted(async () => {
   <DialogDateTime
     :modal="modalDateTime"
     :close="onClickDateTime"
-    :fetchActive="fetchOrganizationActive"
+    :fetch-active="fetchOrganizationActive"
   />
-
-  <!-- รายละเอียดตำแหน่ง -->
-  <!-- <DialogPositionDetail v-model:position-detail="modalPositionDetail" /> -->
 </template>
 
 <style scoped></style>