กำหนดสิทธิ์จัดการโครงสร้าง

src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue

@@ -30,16 +30,15 @@ const props = defineProps({
 });
 
 const qurey = reactive({
-  searchKeyword: "",
-  searchField: "fullName",
-  page: 1,
-  pageSize: 10,
+  searchKeyword: "", // คำค้นหา
+  searchField: "fullName", // field ที่ต้องการค้นหา
+  page: 1, // หน้า
+  pageSize: 10, // จำนวนที่ต้องการ
 });
-const selected = ref<DataProfile[]>([]);
-const rows = ref<DataProfile[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
-
+const selected = ref<DataProfile[]>([]); //รายชื่อที่เลือก
+const rows = ref<DataProfile[]>([]); // ข้อมูลรายชื่อ
+const total = ref<number>(0); // จำนวนข้อมูลทั้งหมด
+const maxPage = ref<number>(0); // จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "fullName",
@@ -83,6 +82,12 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายชื่อ
+ * @param newPage โหลดหน้าแรก ถ้าเป็บ true  โหลดหน้าแรก false ให้โหลดหน้าปัจจุบัน
+ *
+ * เก็บมูลรายชื่อไว่ใน rows.value
+ */
 async function onSearchListPerson(newPage: boolean = false) {
   qurey.page = newPage ? 1 : qurey.page;
   selected.value = [];
@@ -105,6 +110,11 @@ async function onSearchListPerson(newPage: boolean = false) {
     });
 }
 
+/**
+ * ฟังก์ชันยืนยันการเพิ่มราชื่อ
+ *
+ * เมื่อเพิ่มเสร็จจะดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างตามหน่วยงาน
+ */
 function onSubmitPerson() {
   dialogConfirm(
     $q,
@@ -142,6 +152,11 @@ function updatePagination(newPagination: Pagination) {
   qurey.pageSize = newPagination.rowsPerPage;
 }
 
+/**
+ * ฟังก์ชันปิด popup ราชชื่อ
+ *
+ * และกำหนดค่าของ qurey ไปเป็นค่า defult  rows.value และ selected.value ไปเป็นค่าว่าง
+ */
 function onClose() {
   modal.value = false;
   qurey.page = 1;
@@ -152,6 +167,11 @@ function onClose() {
   selected.value = [];
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
+ *
+ * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก
+ */
 watch(
   () => qurey.pageSize,
   () => {
@@ -165,7 +185,7 @@ watch(
     <q-card style="min-width: 60%">
       <DialogHeader :tittle="'รายชื่อ'" :close="onClose" />
       <q-separator />
-      <q-card-section>
+      <q-card-section style="max-height: 50vh" class="scroll">
         <div class="col-12">
           <q-toolbar style="padding: 0">
             <q-select

src/modules/02_users/views/roleOrganization.vue

@@ -28,7 +28,12 @@ const nodeTree = ref<DataTree[]>([]); // ข้อมูลรายการโ
 const expanded = ref<Array<string>>([]); // เปิดรายการโครงสร้าง
 const orgId = ref<string>(""); // id หน่วยงานที่เลือก
 
-async function fatchOrgg() {
+/**
+ * ฟังก์ชันดึงข้อมูลโครงสร้าง
+ *
+ * เก็บข้อมูลโครงสร้างไว้ใน nodeTree
+ */
+async function fatchOrg() {
   showLoader();
   await http
     .get(config.API.permissionOrg)
@@ -44,23 +49,34 @@ async function fatchOrgg() {
     });
 }
 
+/**
+ * ฟังก์ชันเลือกหน่วยงาน
+ * @param id หน่วยงานที่เลือก
+ *
+ * กำหนดค่าของ qureyBody ให้เป็นค่า defult และกำหนดค่าของ  qureyBody.id  เป็นหน่วยงานที่เลือก
+ * และดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างในหน่วยงานที่เลือก
+ */
 function selectedOrg(id: string) {
   orgId.value = id;
   qureyBody.id = id;
+  qureyBody.searchKeyword = "";
+  qureyBody.searchField = "fullName";
+  qureyBody.page = 1;
+  qureyBody.pageSize = 10;
   fetchListPerson(true);
 }
 
 /******* รายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง *******/
 const qureyBody = reactive<QueryProfile>({
-  searchKeyword: "",
-  searchField: "fullName",
-  page: 1,
-  pageSize: 10,
-  id: null,
+  searchKeyword: "", // คำค้นหา
+  searchField: "fullName", // field ที่ต้องการค้นหา
+  page: 1, // หน้า
+  pageSize: 10, // จำนวนที่ต้องการ
+  id: null, // หน่วยงานที่เลือก
 });
-const rows = ref<DataProfile[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
+const rows = ref<DataProfile[]>([]); // ข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+const total = ref<number>(0); // จำนวนข้อมูลทั้งหมด
+const maxPage = ref<number>(0); // จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "fullName",
@@ -112,9 +128,14 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const modalAdd = ref<boolean>(false); // modal เพิ่มข้อมูลรายชื่อ
 
-const modalAdd = ref<boolean>(false);
-
+/**
+ * ฟังก์ชันดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+ * @param newPage โหลดหน้าแรก ถ้าเป็บ true  โหลดหน้าแรก false ให้โหลดหน้าปัจจุบัน
+ *
+ * เก็บมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างไว่ใน rows.value
+ */
 async function fetchListPerson(newPage: boolean = false) {
   qureyBody.page = newPage ? 1 : qureyBody.page;
   showLoader();
@@ -122,8 +143,8 @@ async function fetchListPerson(newPage: boolean = false) {
     .post(config.API.permissionOrgProfile, qureyBody)
     .then(async (res) => {
       const data = await res.data.result;
-      maxPage.value = Math.ceil(data.total / qureyBody.pageSize);
-      total.value = data.total;
+      maxPage.value = Math.ceil(data.total / qureyBody.pageSize); // คำนวนหาจำนวนหน้า
+      total.value = data.total; // จำนวนรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
       rows.value = data.data;
     })
     .catch((err) => {
@@ -134,19 +155,27 @@ async function fetchListPerson(newPage: boolean = false) {
     });
 }
 
+/**
+ * ฟังก์ชันยืนยันการลบรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+ * @param id รายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+ *
+ * ลบเสร็จจะโหลดข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
+ */
 function onDeletePerson(id: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
       .delete(config.API.permissionOrg + `/${id}`)
       .then(async () => {
+        // ถ้า maxPage.value ไม่เท่ากับ 1 ให้ โหลดข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างหน้าปัจจุบัน
         if (maxPage.value !== 1) {
+          // ถ้ามีแค่หนึ่งแถวในหน้าปัจจุบัน ให้ลด page ลง 1
           if (rows.value.length === 1) {
             qureyBody.page = qureyBody.page - 1;
           }
-          await fetchListPerson(false);
+          await fetchListPerson(false); // โหลดข้อมูลจากหน้าปัจจุบันโดยไม่รีเซ็ต
         } else {
-          await fetchListPerson(true);
+          await fetchListPerson(true); // โหลดข้อมูลหน้าแรก
         }
         success($q, "ลบข้อมูสำเร็จ");
       })
@@ -167,6 +196,11 @@ function updatePagination(newPagination: Pagination) {
   qureyBody.pageSize = newPagination.rowsPerPage;
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
+ *
+ * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก
+ */
 watch(
   () => qureyBody.pageSize,
   () => {
@@ -180,8 +214,8 @@ watch(
  */
 onMounted(async () => {
   await Promise.all([
-    fatchOrgg(), // ดึงข้อมูลโครงสร้าง
-    fetchListPerson(),
+    fatchOrg(), // ดึงข้อมูลโครงสร้าง
+    fetchListPerson(), // ดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้าง
   ]);
 });
 </script>