จัดการข้แมูลผู้ใช้ => จัดการสิทธิ์

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

@@ -1,34 +1,42 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { ItemsMenu } from "@/modules/02_users/interface/index/Main";
-import type { Users } from "@/modules/02_users/interface/response/Main";
+import type { Users, Roles } from "@/modules/02_users/interface/response/Main";
 
 /** importComponents*/
 import DialogAddUser from "@/modules/02_users/components/Users/DialogAddUser.vue";
+// import DialogManagementRole from "@/modules/02_users/components/Users/DialogManagementRole.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
+const router = useRouter();
 const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
 /** Table*/
 const rows = ref<Users[]>([]);
+const total = ref<number>(0);
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(0);
+const pageSize = ref<number>(10);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     sortable: true,
-    field: (row) => rows.value.indexOf(row) + 1,
+    field: (row) =>
+      (currentPage.value - 1) * pageSize.value + rows.value.indexOf(row) + 1,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -51,33 +59,47 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "firstName",
+    name: "firstname",
     align: "left",
     label: "ชื่อ",
     sortable: true,
-    field: "firstName",
+    field: "firstname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "lastName",
+    name: "lastname",
     align: "left",
     label: "นามสกุล",
     sortable: true,
-    field: "lastName",
+    field: "lastname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "role",
+    align: "left",
+    label: "สิทธิ์",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    field: (row) => {
+      const names = row.roles.map((role: Roles) => role.name);
+      return names.join(", ");
+    },
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
   "username",
   "email",
-  "firstName",
-  "lastName",
+  "firstname",
+  "lastname",
+  "role",
 ]);
 const keyword = ref<string>("");
 
+/** addUser*/
 const modalDialogAdd = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const userId = ref<string>("");
@@ -90,6 +112,12 @@ const itemMenu = ref<ItemsMenu[]>([
     color: "edit",
     type: "edit",
   },
+  {
+    label: "จัดการสิทธิ์",
+    icon: "mdi-account-group",
+    color: "blue-9",
+    type: "managementRole",
+  },
   {
     label: "ลบ",
     icon: "delete",
@@ -100,11 +128,18 @@ const itemMenu = ref<ItemsMenu[]>([
 
 /** function fetch รายชื่อผู้ใช้งาน*/
 function fetchListUsers() {
+  let max = pageSize.value;
+  let first = (currentPage.value - 1) * pageSize.value;
   showLoader();
   http
-    .get(config.API.managementUser)
+    .get(
+      config.API.managementUser +
+        `?max=${max}&first=${first}&search=${keyword.value}`
+    )
     .then((res) => {
-      const data = res.data;
+      const data = res.data.data;
+      total.value = res.data.total;
+      maxPage.value = Math.ceil(total.value / pageSize.value);
       rows.value = data;
     })
     .catch((err) => {
@@ -127,6 +162,8 @@ function onClickAction(type: string, data: Users) {
     userId.value = data.id;
   } else if (type === "delete") {
     onDeleteUser(data.id);
+  } else if (type === "managementRole") {
+    data && router.push(`/users/roles/${data.id}`);
   }
 }
 
@@ -158,6 +195,22 @@ function onDeleteUser(id: string) {
   });
 }
 
+/**
+ * function อัปเดท paging
+ * @param initialPagination ข้อมูล pagination
+ */
+async function updatePagination(initialPagination: any) {
+  currentPage.value = 1;
+  pageSize.value = initialPagination.rowsPerPage;
+}
+
+watch(
+  () => pageSize.value,
+  () => {
+    fetchListUsers();
+  }
+);
+
 onMounted(() => {
   fetchListUsers();
 });
@@ -180,10 +233,10 @@ onMounted(() => {
       <q-input
         borderless
         dense
-        debounce="300"
         outlined
         v-model="keyword"
         placeholder="ค้นหา"
+        @keydown.enter.prevent="(currentPage = 1), fetchListUsers()"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -210,13 +263,13 @@ onMounted(() => {
         :columns="columns"
         :rows="rows"
         row-key="id"
-        :filter="keyword"
         flat
         bordered
         :paging="true"
         dense
         :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
+        @update:pagination="updatePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -268,6 +321,20 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ total }} รายการ
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+            :max-pages="5"
+            @update:model-value="fetchListUsers"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>