update จัดการ web services

src/modules/06_webservices/view/manage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, toRefs } from "vue";
+import { onMounted, ref, toRefs, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,9 +9,14 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { DataOption } from "@/modules/06_webservices/interface/index/Main";
-import type { ListWebServices } from "@/modules/06_webservices/interface/index/Main";
-import type { ResApiName } from "@/modules/06_webservices/interface/response/Main";
+import type {
+  DataOption,
+  Pagination,
+} from "@/modules/06_webservices/interface/index/Main";
+import type {
+  ListSystems,
+  ListApiManages,
+} from "@/modules/06_webservices/interface/response/Main";
 
 /** importComponents*/
 import DialogApi from "@/modules/06_webservices/components/DialogApi.vue";
@@ -33,9 +38,12 @@ const systemOptions = ref<DataOption[]>(systemList.value);
 /** Table*/
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนรายการต่อหน้า
-const rows = ref<any[]>([]); //รายการ webservices
+const rows = ref<ListApiManages[]>([]); //รายการ webservices
+const total = ref<number>(0); //จำนวนรายการทั้งหมด
+const maxPage = ref<number>(1); //จำนวนหน้าสูงสุด
 const keyword = ref<string>(""); //คำค้นหา รายการ webservices
 const systemfilter = ref<string>("all"); //ตัวกรองระบบ
+const isActive = ref<boolean>(true); //ตัวกรองสถานะ
 const visibleColumns = ref<string[]>([
   "system",
   "name",
@@ -99,12 +107,13 @@ const modalDialog = ref<boolean>(false); //ตัวแปรเปิดปิ
 const isEditData = ref<boolean>(false); //ตัวแปรเช็คว่าเป็นการแก้ไขข้อมูลหรือไม่
 const apiId = ref<string>(""); //ตัวแปรเก็บ id ของ api ที่จะแก้ไข
 
+/** ฟังก์ชันดึงข้อมูลรายการระบบ */
 async function fetchSystemData() {
   if (systemList.value.length > 1) return; // ถ้ามีข้อมูลแล้วไม่ต้องดึงใหม่
   try {
     const res = await http.get(`${config.API.apiManage}systems`);
     const data = res.data.result;
-    const systemData = data.map((item: any) => ({
+    const systemData = data.map((item: ListSystems) => ({
       id: item.code,
       name: item.name,
     }));
@@ -114,6 +123,7 @@ async function fetchSystemData() {
   }
 }
 
+/** ฟังก์ชันดึงข้อมูลรายการ API */
 async function fetchData() {
   try {
     const queryParams = {
@@ -121,18 +131,25 @@ async function fetchData() {
       pageSize: pageSize.value,
       keyword: keyword.value,
       systems: systemfilter.value === "all" ? "" : systemfilter.value,
+      isActive: isActive.value,
     };
 
     const res = await http.get(`${config.API.apiManage}lists`, {
       params: queryParams,
     });
     const result = res.data.result;
+    total.value = result.total;
+    maxPage.value = Math.ceil(total.value / pageSize.value);
     rows.value = result.data;
   } catch (error) {
     messageError(error);
   }
 }
 
+/**
+ * ฟังก์ชันลบข้อมูลรายการ API
+ * @param id ID ของ API ที่ต้องการลบ
+ */
 function onDeleteData(id: string) {
   dialogRemove($q, async () => {
     try {
@@ -148,19 +165,24 @@ function onDeleteData(id: string) {
   });
 }
 
+/**
+ * ฟังก์ชันแก้ไขข้อมูลรายการ API
+ * @param id ID ของ API ที่ต้องการแก้ไข
+ */
 function onEditData(id: string) {
   isEditData.value = true;
   modalDialog.value = true;
   apiId.value = id; // เก็บ id ของ api ที่จะแก้ไข
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตารางใหม่ */
 function onSearchDataTable() {
   page.value = 1; // รีเซ็ตหน้าเป็น 1 เมื่อค้นหาใหม่
   fetchData();
 }
 
 /**
- * function ค้นหาคำใน select
+ * ฟังก์ชันค้นหาคำใน select
  * @param val คำค้นหา
  * @param update function
  */
@@ -173,6 +195,23 @@ function filterSelector(val: string, update: Function) {
   });
 }
 
+/**
+ * ฟังก์ชันอัปเดท paging
+ * @param initialPagination ข้อมูล pagination
+ */
+async function updatePagination(initialPagination: Pagination) {
+  pageSize.value = initialPagination.rowsPerPage;
+}
+
+/** function callback เมื่อมีการเปลี่ยนหน้า*/
+watch(
+  () => pageSize.value,
+  () => {
+    onSearchDataTable();
+  }
+);
+
+/** ทำงานเมื่อ component ถูก mount */
 onMounted(async () => {
   try {
     showLoader();
@@ -232,13 +271,20 @@ onMounted(async () => {
 
     <q-space />
     <div class="row q-col-gutter-sm col-xs-12 col-sm-auto">
+      <div class="col-xs-12 col-sm-auto">
+        <q-toggle
+          v-model="isActive"
+          label="แสดงเฉพาะที่ใช้งาน"
+          @update:model-value="onSearchDataTable"
+        />
+      </div>
       <div class="col-xs-12 col-sm-auto">
         <q-input
           borderless
           dense
           outlined
           v-model="keyword"
-          placeholder="ค้นหา"
+          placeholder="ค้นหาชื่อ API"
           @keydown.enter.prevent="onSearchDataTable"
         >
           <template v-slot:append>
@@ -277,6 +323,7 @@ onMounted(async () => {
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
+      @update:pagination="updatePagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -317,6 +364,21 @@ onMounted(async () => {
           </q-td>
         </q-tr>
       </template>
+
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ total }} รายการ
+        <q-pagination
+          v-model="page"
+          active-color="primary"
+          color="dark"
+          :max="Number(maxPage)"
+          size="sm"
+          boundary-links
+          direction-links
+          :max-pages="5"
+          @update:model-value="fetchData"
+        ></q-pagination>
+      </template>
     </d-table>
   </div>