ปรับ API จัดการผู้ใช้งาน

src/modules/02_users/views/01_user.vue

@@ -10,6 +10,7 @@ import { useCounterMixin } from "@/stores/mixin";
 /** importType*/
 import type { QTableProps } from "quasar";
 import type {
+  DataOption,
   ItemsMenu,
   Pagination,
 } from "@/modules/02_users/interface/index/Main";
@@ -37,6 +38,7 @@ const currentPage = ref<number>(1); // หน้า
 const total = ref<number>(0); // จำนวนรายการ
 const maxPage = ref<number>(0); // จำนวนหน้า
 const pageSize = ref<number>(10); // จำนวนข้อมูลต่อหน้า
+const employeeClass = ref<string>("officer");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -149,24 +151,28 @@ const itemMenu = ref<ItemsMenu[]>([
   },
 ]);
 
+const employeeClassMain = ref<DataOption[]>([
+  { id: "employee", name: "ลูกจ้างประจำ" },
+  { id: "officer", name: "ข้าราชการ" },
+]);
+
+const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
+
 /**
  * ฟังก์ชันดึงข้อมูลรายชื่อผู้ใช้งาน
  */
 async function fetchListUsers() {
-  let max = pageSize.value;
-  let first = (currentPage.value - 1) * pageSize.value;
   showLoader();
   await http
     .get(
       config.API.managementUser +
-        `?max=${max}&first=${first}&search=${keyword.value}`
+        `?pageSize=${pageSize.value}&page=${currentPage.value}&keyword=${keyword.value}&type=${employeeClass.value}`
     )
     .then(async (res) => {
-      const data = await res.data.data;
+      const data = await res.data.result;
-
+      total.value = data.total;
-      total.value = res.data.total;
       maxPage.value = Math.ceil(total.value / pageSize.value);
-      rows.value = data.map((e: Users) => ({
+      rows.value = data.data.map((e: Users) => ({
         ...e,
         roles: Array.isArray(e.roles)
           ? e.roles.filter(
@@ -288,6 +294,24 @@ function updatePagination(initialPagination: Pagination) {
   pageSize.value = initialPagination.rowsPerPage;
 }
 
+/**
+ * function ค้นหาข้อมูล Option
+ * @param val คำค้นหา
+ * @param update  function
+ * @param type   ประเภท option
+ */
+function filterFnOptions(val: string, update: Function, type: string) {
+  switch (type) {
+    case "employeeClass":
+      update(() => {
+        employeeClassOption.value = employeeClassMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+  }
+}
+
 /**
  * ดูการเปลี่ยนแปลงของจำนวนข้อมูลต่อหน้า
  *
@@ -318,8 +342,38 @@ onMounted(async () => {
   </div>
 
   <q-card flast bordered class="q-pa-md">
-    <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+    <div class="items-center col-12 row q-col-gutter-sm">
-      <q-btn flat round dense color="primary" icon="add" @click="openDialog()">
+      <q-select
+        outlined
+        dense
+        v-model="employeeClass"
+        :options="employeeClassOption"
+        label="สถานภาพ"
+        emit-value
+        map-options
+        option-label="name"
+        option-value="id"
+        use-input
+        style="width: 230px"
+        @update:model-value="(currentPage = 1), fetchListUsers()"
+        @filter="(inputValue: string,
+  doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
+        ><template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-btn
+        class="q-ml-sm"
+        flat
+        round
+        dense
+        color="primary"
+        icon="add"
+        @click="openDialog()"
+      >
         <q-tooltip>เพิ่มผู้ใช้งาน </q-tooltip>
       </q-btn>
       <q-space />