feat:select org

src/modules/02_users/interface/response/Main.ts

@@ -49,6 +49,11 @@ interface NodeTree {
   totalRootPositionNextVacant: number;
   children: NodeTree[];
   isOfficer: boolean;
+  orgRootDnaId: string;
+  orgChild1DnaId: string;
+  orgChild2DnaId: string;
+  orgChild3DnaId: string;
+  orgChild4DnaId: string;
 }
 
 interface PosMaster {

src/modules/06_webservices/components/DialogApiKey.vue

@@ -3,13 +3,18 @@ import { computed, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { tokenParsed } from "@/plugins/auth";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
 import type { ListApi } from "@/modules/06_webservices/interface/index/Main";
-import type { FormCreate } from "@/modules/06_webservices/interface/request/Main";
+import type {
+  FormCreate,
+  DnaId,
+} from "@/modules/06_webservices/interface/request/Main";
 import type { ResApiName } from "@/modules/06_webservices/interface/response/Main";
+import type { NodeTree } from "@/modules/02_users/interface/response/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -35,24 +40,44 @@ const props = defineProps({
 });
 
 const topicRef = ref<any>(null); //refinput ชื่อ/คำอธิบาย
+const accessTypeRef = ref<any>(null); //ref select การเข้าถึง
 const isAPIKey = ref<boolean>(false); //status API Key
 const apiKey = ref<string>(""); // API Key
 const options = ref<ListApi[]>([]); //รายการ API ที่เข้าถึงได้
+const optionsAccessType = ref([
+  { label: "ทั้งหมด", value: "ALL" },
+  { label: "ROOT", value: "ROOT" },
+  { label: "CHILD", value: "CHILD" },
+  { label: "NORMAL", value: "NORMAL" },
+]);
 
 // form การสร้างรายการ API Key
 const formData = reactive<FormCreate>({
   name: "", //ชื่อ/คำอธิบาย
+  accessType: "", //การเข้าถึง
   apiId: [], //id รายการ API ที่เข้าถึงได้
 });
+const dnaId = reactive<DnaId>({
+  dnaRootId: "",
+  dnaChild1Id: "",
+  dnaChild2Id: "",
+  dnaChild3Id: "",
+  dnaChild4Id: "",
+});
+
+const filter = ref<string>(""); // ตัวกรองค้นหา
+const expanded = ref<string[]>([]); // ขยายรายการ tree
+const orgId = ref<string>(""); // รหัสหน่วยงาน
+const nodeTree = ref<Array<NodeTree>>([]);
+const lazy = ref(nodeTree);
 
 const titleName = computed<string>(() => {
   return !isAPIKey.value ? "สร้าง API Key" : "API Key";
 });
 
 /** ฟังก์ชันเรียกรายการข้อมูล API ที่เข้าถึงได้*/
-function fetchListApiKeyName() {
-  showLoader();
-  http
+async function fetchListApiKeyName() {
+  await http
     .get(config.API.apiKeyMain + "/name")
     .then(async (res) => {
       const data = (await res.data?.result) || [];
@@ -63,42 +88,50 @@ function fetchListApiKeyName() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** ฟังก์ชันยืนยันการสร้าง API Key */
 function onCreateAPIKey() {
   topicRef.value.validate();
+  accessTypeRef.value.validate();
+
+  const isCheckRootID = orgId.value ? true : false;
+  const isCheckAscessType = formData.accessType === "ALL" ? true : false;
+
   //เช็คข้อมูล ชื่อ/คำอธิบาย
-  if (topicRef.value.validate()) {
+  if (topicRef.value.validate() && accessTypeRef.value.validate()) {
     // ช็คข้อมูล รายการ API ที่เข้าถึงได้ที่เลือก ถ้ามีแสดง popup ยืนยันการสร้าง API Key
-    if (formData.apiId.length > 0) {
-      dialogConfirm($q, async () => {
-        showLoader();
-        await http
-          .post(config.API.apiKeyMain, {
-            ...formData,
-            name: formData.name.replace(/\s+/g, ""), //ตัดช่องว่างทั้งหมด
-          })
-          .then(async (res) => {
-            const data = await res.data.result;
-            apiKey.value = data;
-            success($q, "สร้าง API Key สำเร็จ");
-            isAPIKey.value = true;
-          })
-          .catch((err) => {
-            messageError($q, err);
-          })
-          .finally(() => {
-            hideLoader();
-          });
-      });
+
+    if (!isCheckAscessType && !isCheckRootID) {
+      dialogMessageNotify($q, "กรุณาเลือก หน่วยงาน/ส่วนราชการ");
     } else {
-      //ไม่มีรายการ แสดง Popup กรุณาเลือก API ที่เข้าถึงได้
-      dialogMessageNotify($q, "กรุณาเลือก API ที่เข้าถึงได้");
+      if (formData.apiId.length > 0) {
+        dialogConfirm($q, async () => {
+          showLoader();
+          await http
+            .post(config.API.apiKeyMain, {
+              ...formData,
+              name: formData.name.replace(/\s+/g, ""), //ตัดช่องว่างทั้งหมด
+              ...dnaId,
+            })
+            .then(async (res) => {
+              const data = await res.data.result;
+              apiKey.value = data;
+              success($q, "สร้าง API Key สำเร็จ");
+              isAPIKey.value = true;
+            })
+            .catch((err) => {
+              messageError($q, err);
+            })
+            .finally(() => {
+              hideLoader();
+            });
+        });
+      } else {
+        //ไม่มีรายการ แสดง Popup กรุณาเลือก API ที่เข้าถึงได้
+        dialogMessageNotify($q, "กรุณาเลือก API ที่เข้าถึงได้");
+      }
     }
   }
 }
@@ -120,78 +153,243 @@ function onCloseDialog() {
   modal.value = false;
   isAPIKey.value = false;
   formData.name = "";
+  formData.accessType = "";
   formData.apiId = [];
+  nodeTree.value = [];
+  expanded.value = [];
+}
+
+/** ฟังก์ชันเรียกข้อมูลโครงสร้าง แบบปัจุบัน*/
+async function fetchOrganizationActive() {
+  await http
+    .get(config.API.activeOrganization)
+    .then(async (res) => {
+      const data = res.data.result;
+      if (data) {
+        // activeId.value = data.activeId;
+        await fetchDataTree(data.activeId);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชัน fetch ข้อมูลของโครงสร้าง
+ * @param id id โครงสร้าง
+ */
+async function fetchDataTree(id: string) {
+  const tokenParsedData = await tokenParsed();
+  const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
+  if (!isSuperAdmin) {
+    nodeTree.value = [];
+  }
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then(async (res) => {
+      const data = await res.data.result;
+      nodeTree.value.push(...data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function selectedOrg(node: NodeTree) {
+  if (node.orgTreeId) {
+    orgId.value = node.orgTreeId;
+    dnaId.dnaRootId = node.orgRootDnaId || "";
+    dnaId.dnaChild1Id = node.orgChild1DnaId || "";
+    dnaId.dnaChild2Id = node.orgChild2DnaId || "";
+    dnaId.dnaChild3Id = node.orgChild3DnaId || "";
+    dnaId.dnaChild4Id = node.orgChild4DnaId || "";
+  }
+}
+
+async function onChangeAccessType(val: string) {
+  if (val === "ALL") {
+    orgId.value = "";
+    dnaId.dnaRootId = "";
+    dnaId.dnaChild1Id = "";
+    dnaId.dnaChild2Id = "";
+    dnaId.dnaChild3Id = "";
+    dnaId.dnaChild4Id = "";
+  }
 }
 
 /**
  * ดูการเปลี่ยนแปลงข้อมูลของ `modal`
  * ถ้า modal เป็น True เรียกรายการข้อมูล API ที่เข้าถึงได้
  */
-watch(modal, (val) => {
+watch(modal, async (val) => {
   if (val) {
-    fetchListApiKeyName();
+    try {
+      showLoader();
+      await Promise.all([fetchOrganizationActive(), fetchListApiKeyName()]);
+    } finally {
+      hideLoader();
+    }
   }
 });
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 700px; max-width: 80vw">
+    <q-card style="min-width: 60%">
       <!-- header -->
       <DialogHeader :tittle="titleName" :close="onCloseDialog" />
       <q-separator />
 
-      <q-card-section>
-        <div class="row q-col-gutter-sm">
-          <!-- ชื่อ/คำอธิบาย -->
-          <div class="col-12" v-if="!isAPIKey">
-            <q-input
-              ref="topicRef"
-              class="inputgreen"
-              dense
-              outlined
-              v-model="formData.name"
-              label="ชื่อ/คำอธิบาย"
-              hide-bottom-space
-              lazy-rules
-              :rules="[(val:string) => !!val || 'กรุณากรอกชื่อ/คำอธิบาย']"
-            />
-          </div>
-
-          <!-- apiKey -->
-          <div class="col-12" v-else>
-            <span class="text-red">
-              * API Key ด้านล่างนี้จะแสดงเพียงครั้งเดียว
-              ขอให้ทำสำเนาไว้ในที่ปลอดภัย
-            </span>
-            <q-input dense outlined readonly bottom-slots v-model="apiKey">
-              <template v-slot:append>
-                <q-btn
-                  round
-                  dense
-                  flat
-                  color="primary"
-                  icon="mdi-content-copy"
-                  @click.pervent="onCopyToClipboard"
-                >
-                  <q-tooltip>คัดลอก</q-tooltip></q-btn
-                >
-              </template>
-            </q-input>
-          </div>
-
-          <!-- API ที่เข้าถึงได้ -->
+      <q-card-section :horizontal="$q.screen.gt.xs" class="row">
+        <q-card-section class="col-5">
           <div class="col-12">
-            API ที่เข้าถึงได้
-            <q-option-group
-              :disable="isAPIKey"
-              :options="options"
-              type="checkbox"
-              keep-color
-              color="primary"
-              v-model="formData.apiId"
-            />
+            <div class="q-gutter-sm">
+              <div class="row q-col-gutter-sm q-pl-sm">
+                <div class="col-12">
+                  <q-input dense outlined v-model="filter" label="ค้นหา">
+                    <template v-slot:append>
+                      <q-icon name="search" />
+                    </template>
+                  </q-input>
+                </div>
+              </div>
+              <div class="bg-white tree-container q-pa-xs">
+                <q-tree
+                  class="q-pa-sm q-gutter-sm"
+                  dense
+                  default-expand-all
+                  :nodes="lazy"
+                  node-key="orgTreeId"
+                  label-key="labelName"
+                  :filter="filter?.trim()"
+                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                  no-nodes-label="ไม่มีข้อมูล"
+                  v-model:expanded="expanded"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      @click.stop="selectedOrg(prop.node)"
+                      :active="orgId == prop.node.orgTreeId"
+                      clickable
+                      active-class="my-list-link text-primary text-weight-medium"
+                      class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                    >
+                      <div>
+                        <div
+                          :class="
+                            prop.node.isOfficer
+                              ? 'text-weight-medium text-blue'
+                              : 'text-weight-medium'
+                          "
+                        >
+                          <div
+                            v-if="
+                              prop.node.isDeputy == true &&
+                              prop.node.orgLevel == 0
+                            "
+                            class="text-info"
+                          >
+                            {{ prop.node.orgTreeName }}
+                          </div>
+                          <div v-else>
+                            {{ prop.node.orgTreeName }}
+                          </div>
+                          {{ prop.node.isOfficer ? "(สกจ.)" : "" }}
+                        </div>
+                        <div class="text-weight-light text-grey-8">
+                          {{
+                            prop.node.orgCode == null ? null : prop.node.orgCode
+                          }}
+                          {{
+                            prop.node.orgTreeShortName == null
+                              ? null
+                              : prop.node.orgTreeShortName
+                          }}
+                        </div>
+                      </div>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </div>
+            </div>
           </div>
-        </div>
+        </q-card-section>
+
+        <q-separator :vertical="$q.screen.gt.xs" />
+
+        <q-card-section class="col">
+          <div class="row q-col-gutter-sm">
+            <!-- ชื่อ/คำอธิบาย -->
+            <div class="col-9" v-if="!isAPIKey">
+              <q-input
+                ref="topicRef"
+                class="inputgreen"
+                dense
+                outlined
+                v-model="formData.name"
+                label="ชื่อ/คำอธิบาย"
+                hide-bottom-space
+                lazy-rules
+                :rules="[(val:string) => !!val || 'กรุณากรอกชื่อ/คำอธิบาย']"
+              />
+            </div>
+
+            <div class="col-3" v-if="!isAPIKey">
+              <q-select
+                ref="accessTypeRef"
+                outlined
+                v-model="formData.accessType"
+                emit-value
+                map-options
+                :options="optionsAccessType"
+                option-value="value"
+                option-label="label"
+                label="การเข้าถึง"
+                dense
+                lazy-rules
+                borderless
+                hide-bottom-space
+                :rules="[(val:string) => !!val || 'กรุณาเลือกการเข้าถึง']"
+                @update:model-value="onChangeAccessType"
+              />
+            </div>
+
+            <!-- apiKey -->
+            <div class="col-12" v-else>
+              <span class="text-red">
+                * API Key ด้านล่างนี้จะแสดงเพียงครั้งเดียว
+                ขอให้ทำสำเนาไว้ในที่ปลอดภัย
+              </span>
+              <q-input dense outlined readonly bottom-slots v-model="apiKey">
+                <template v-slot:append>
+                  <q-btn
+                    round
+                    dense
+                    flat
+                    color="primary"
+                    icon="mdi-content-copy"
+                    @click.pervent="onCopyToClipboard"
+                  >
+                    <q-tooltip>คัดลอก</q-tooltip></q-btn
+                  >
+                </template>
+              </q-input>
+            </div>
+
+            <!-- API ที่เข้าถึงได้ -->
+            <div class="col-12">
+              API ที่เข้าถึงได้
+              <q-option-group
+                :disable="isAPIKey"
+                :options="options"
+                type="checkbox"
+                keep-color
+                color="primary"
+                v-model="formData.apiId"
+              />
+            </div>
+          </div>
+        </q-card-section>
       </q-card-section>
 
       <q-separator />
@@ -208,4 +406,19 @@ watch(modal, (val) => {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 76vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/06_webservices/interface/request/Main.ts

@@ -1,6 +1,15 @@
 interface FormCreate {
   name: string;
+  accessType: string;
   apiId: string[];
 }
 
-export type { FormCreate };
+interface DnaId {
+  dnaRootId: string;
+  dnaChild1Id: string;
+  dnaChild2Id: string;
+  dnaChild3Id: string;
+  dnaChild4Id: string;
+}
+
+export type { FormCreate, DnaId };