Refactoring code module 02_organization

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

@@ -1,165 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { ListMenu } from "@/modules/02_organization/interface/index/Main";
-import type { OrgTree } from "@/modules/02_organization/interface/response/organizational";
-
-/** importStore*/
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
-const store = useOrganizational();
-const { dialogRemove, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
-const $q = useQuasar();
-
-const filter = ref<string>("");
-const nodes = ref<Array<any>>([]);
-const lazy = ref(nodes);
-const expanded = ref<Array<any>>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่มีข้อมูล");
-const selected = ref("");
-
-const idVal = ref("");
-async function fetchDataTree(id: string) {
-  showLoader();
-  await http
-    .get(config.API.orgByid(id))
-    .then((res) => {
-      const data = res.data.result;
-      nodes.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-const breakLoop = ref<boolean>(false);
-const dataObject = ref([]);
-async function onSort(orgRootId: string) {
-  if (orgRootId) {
-    idVal.value = "children => " + orgRootId;
-    breakLoop.value = false;
-
-    const targetNodeId = orgRootId;
-
-    for (let index = 0; index < nodes.value.length; index++) {
-      const element = nodes.value[index];
-      searchAndReplace(element, targetNodeId);
-      if (breakLoop.value) break;
-    }
-  } else {
-    idVal.value = "root";
-  }
-}
-
-function searchAndReplace(treeNode: any, organizationId: string) {
-  if (treeNode.orgTreeId === organizationId) {
-    dataObject.value = treeNode.children;
-    breakLoop.value = true;
-  } else if (treeNode.children) {
-    for (const child of treeNode.children) {
-      searchAndReplace(child, organizationId);
-    }
-  }
-}
-
-const listAdd = ref<ListMenu[]>([
-  {
-    label: "จัดลำดับ",
-    icon: "filter_list",
-    type: "SORT",
-    color: "green-7",
-  },
-]);
-
-onMounted(async () => {
-  await fetchDataTree("a449eac0-93a5-4ccc-8fbc-2974ca8ee61b");
-});
-</script>
-
-<template>
-  <div class="col-12 q-py-md q-px-lg">
-    <q-tree
-      class="q-pa-md q-gutter-sm"
-      dense
-      default-expand-all
-      selected-color="primary"
-      :nodes="lazy"
-      node-key="orgTreeId"
-      label-key="orgTreeName"
-      :filter="filter"
-      :no-results-label="notFound"
-      :no-nodes-label="noData"
-      v-model:expanded="expanded"
-      v-model:selected="selected"
-    >
-      <template v-slot:default-header="prop">
-        <!-- {{ prop.node.orgTreeName }} -->
-
-        <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-          <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-          <div>
-            <div class="text-weight-medium">
-              {{ prop.node.orgTreeName }}
-            </div>
-            <div class="text-weight-light">
-              {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
-              {{
-                prop.node.orgTreeShortName == null
-                  ? null
-                  : prop.node.orgTreeShortName
-              }}
-            </div>
-          </div>
-        </div>
-
-        <q-btn
-          flat
-          dense
-          icon="mdi-dots-vertical"
-          class="q-pa-none q-ml-xs"
-          color="grey-13"
-        >
-          <q-menu>
-            <q-list
-              dense
-              v-for="(item, index) in prop.node.orgLevel === 4
-                ? listAdd.slice(1, 6)
-                : listAdd"
-              :key="index"
-              style="min-width: 100px"
-            >
-              <q-item
-                clickable
-                v-close-popup
-                @click="onSort(prop.node.orgRootId)"
-              >
-                <q-item-section avatar>
-                  <q-icon :color="item.color" :name="item.icon" />
-                </q-item-section>
-                <div>
-                  <q-item-section> {{ item.label }}หน่วยงาน </q-item-section>
-                </div>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
-      </template>
-    </q-tree>
-
-    <h5>orgRootId = {{ idVal }}</h5>
-    <div>
-      {{ dataObject }}
-    </div>
-  </div>
-</template>
-
-<style scoped></style>

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>