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

src/api/manage/api.management.ts

@@ -3,5 +3,7 @@ import env from "../index";
 const management = `${env.API_URI}/org/keycloak`;
 
 export default {
+  management,
   managementUser: `${management}/user`,
+  managementRole: `${management}/role`,
 };

src/modules/02_users/components/Roles/DialogAddRole.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { FormRole } from "@/modules/02_users/interface/request/Main";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogConfirm, messageError, success } =
+  useCounterMixin();
+
+/**  props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const roleId = defineModel<string>("roleId", { required: true });
+const props = defineProps({
+  fetchlist: {
+    type: Function,
+    required: true,
+  },
+});
+
+const formData = reactive<FormRole>({
+  role: "",
+  description: "",
+});
+
+/**
+ * function fetch ข้อมูลผู้ใช้งาน
+ * @param id ผู้ใช้งาน
+ */
+function fetchRoleDetail(id: string) {
+  // showLoader();
+  // http
+  //   .get(config.API.managementUser + `/${id}`)
+  //   .then((res) => {
+  //     const data = res.data;
+  //     formData.username = data.username;
+  //     formData.firstName = data.firstName;
+  //     formData.lastName = data.lastName;
+  //     formData.email = data.email;
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+/** function บันทึกข้อมูลผู้ใช้งาน*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    // showLoader();
+    // const url = isStatusEdit.value
+    //   ? config.API.managementUser + `/${roleId.value}`
+    //   : config.API.managementUser;
+    // http[isStatusEdit.value ? "put" : "post"](url, formData)
+    //   .then(() => {
+    //     success($q, "บันทึกข้อมูลสำเร็จ");
+    //     props.fetchlist?.();
+    closeDialog();
+    //   })
+    //   .catch((e) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(() => {
+    //     hideLoader();
+    //   });
+  });
+}
+
+/** function ปิด Dialog */
+function closeDialog() {
+  modal.value = false;
+  formData.role = "";
+  formData.description = "";
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value && isStatusEdit.value) {
+      fetchRoleDetail(roleId.value);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 25%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="isStatusEdit ? 'แก้ไขบทบาท' : 'เพิ่มบทบาท'"
+          :close="closeDialog"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-md">
+            <div class="col-12">
+              <q-input
+                v-model="formData.role"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                label="ชื่อบทบาท"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formData.description"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                label="คำอิบาย"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/02_users/components/Users/DialogAddUser.vue

@@ -4,7 +4,10 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { FormUser } from "@/modules/02_users/interface/request/Main";
+import type {
+  FormUser,
+  Roles,
+} from "@/modules/02_users/interface/request/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -29,13 +32,17 @@ const props = defineProps({
 });
 
 const isPwd = ref<boolean>(true);
+const roles = ref<Roles[]>([]);
 const formData = reactive<FormUser>({
   username: "",
   password: "",
   firstName: "",
   lastName: "",
   email: "",
+  roles: [],
 });
+const roleOptionsMain = ref([]);
+const roleOptions = ref([]);
 
 /**
  * function fetch ข้อมูลผู้ใช้งาน
@@ -51,6 +58,23 @@ function fetchUserDetail(id: string) {
       formData.firstName = data.firstName;
       formData.lastName = data.lastName;
       formData.email = data.email;
+      roles.value = data.roles;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function fetc รายการ role*/
+function fetchlistRole() {
+  showLoader();
+  http
+    .get(config.API.managementRole)
+    .then((res) => {
+      roleOptions.value = res.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -62,6 +86,11 @@ function fetchUserDetail(id: string) {
 
 /** function บันทึกข้อมูลผู้ใช้งาน*/
 function onSubmit() {
+  formData.roles = !isStatusEdit.value
+    ? roles.value.map((e: { id: string }) => e.id)
+    : undefined;
+  formData.password = !isStatusEdit.value ? formData.password : undefined;
+
   dialogConfirm($q, () => {
     showLoader();
     const url = isStatusEdit.value
@@ -91,6 +120,7 @@ function closeDialog() {
   formData.firstName = "";
   formData.lastName = "";
   formData.email = "";
+  roles.value = [];
 }
 
 watch(
@@ -99,6 +129,7 @@ watch(
     if (modal.value && isStatusEdit.value) {
       fetchUserDetail(userId.value);
     }
+    modal.value && fetchlistRole();
   }
 );
 </script>
@@ -190,6 +221,25 @@ watch(
               >
               </q-input>
             </div>
+            <div class="col-12" v-if="!isStatusEdit">
+              <q-select
+                v-model="roles"
+                outlined
+                label="role"
+                dense
+                option-label="name"
+                option-value="id"
+                :options="roleOptions"
+                class="inputgreen"
+                map-options
+                hide-bottom-space
+                lazy-rules
+                use-chips
+                multiple
+                use-input
+                :rules="[(val:any) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
+              />
+            </div>
           </div>
         </q-card-section>
         <q-separator />

src/modules/02_users/components/Users/DialogRoleUser.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { Roles } from "@/modules/02_users/interface/request/Main";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**  props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const userId = defineModel<string>("userId", { required: true });
+const roles = defineModel<Roles[]>("roles", {});
+
+const props = defineProps({
+  fetchlist: {
+    type: Function,
+    required: true,
+  },
+});
+
+const rows = ref<Roles[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "คำอธิบาย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["name", "description"]);
+
+const selected = ref<Roles[]>([]);
+
+/** function fetc รายการ role*/
+function fetchlistRole() {
+  showLoader();
+  http
+    .get(config.API.managementRole)
+    .then((res) => {
+      const rolesIds = roles.value?.map((e) => e.id);
+      rows.value = res.data.filter((v: Roles) => !rolesIds?.includes(v.id));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmit() {
+  if (selected.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือก role อย่างน้อง 1 role");
+  } else {
+    dialogConfirm($q, () => {
+      showLoader();
+      const body = { role: selected.value.map((e: { id: string }) => e.id) };
+      http
+        .post(config.API.management + `/${userId.value}/role`, body)
+        .then(() => {
+          props.fetchlist?.();
+          closeDialog();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+/** function ปิด Dialog */
+function closeDialog() {
+  modal.value = false;
+  selected.value = [];
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchlistRole();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 50%">
+      <DialogHeader tittle="เพิ่มสิทธิ์" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <div class="col-12 q-pt-sm">
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            selection="multiple"
+            v-model:selected="selected"
+          >
+            <template v-slot:header-selection="scope">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="scope.selected"
+              />
+            </template>
+
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" color="secondary" @click="onSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

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

@@ -1,8 +1,19 @@
 interface FormUser {
   username: string;
-  password: string;
+  password: string | undefined;
   firstName: string;
   lastName: string;
   email: string;
+  roles: string[] | undefined;
 }
-export type { FormUser };
+
+interface FormRole {
+  role: string;
+  description: string;
+}
+
+interface Roles {
+  id: string;
+  name: string;
+}
+export type { FormUser, FormRole, Roles };

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

@@ -4,6 +4,16 @@ interface Users {
   id: string;
   lastName: string;
   username: string;
+  roles: Roles;
 }
 
-export type { Users };
+interface Roles {
+  clientRole?: boolean;
+  composite?: boolean;
+  containerId?: string;
+  description: string;
+  id: string;
+  name: string;
+}
+
+export type { Users, Roles };

src/modules/02_users/router.ts

@@ -1,5 +1,8 @@
 const ListsPageUser = () => import("@/modules/02_users/views/listsUser.vue");
+const PageManagementRole = () =>
+  import("@/modules/02_users/views/managementRoleUser.vue");
 const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue");
+const ListsRoleDetail = () => import("@/modules/02_users/views/roleDetail.vue");
 
 export default [
   {
@@ -12,6 +15,17 @@ export default [
       Role: "user_role",
     },
   },
+  {
+    path: "/users/roles/:id",
+    name: "manageUsersRolesId",
+    component: PageManagementRole,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "user_role",
+    },
+  },
+
   {
     path: "/users/:id",
     name: "masterInsignia",
@@ -27,4 +41,14 @@ export default [
       Role: "user_role",
     },
   },
+  {
+    path: "/roles/:id",
+    name: "manageRolesId",
+    component: ListsRoleDetail,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "user_role",
+    },
+  },
 ];

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

@@ -1,7 +1,274 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } 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 { Roles } from "@/modules/02_users/interface/response/Main";
+
+/** importComponents*/
+import DialogAddRole from "@/modules/02_users/components/Roles/DialogAddRole.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<Roles[]>([
+  {
+    id: "1",
+    name: "ชื่อบทบาท",
+    description: "คำอธิบาย",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: (row) => rows.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อบทบาท",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "คำอธิบาย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["no", "name", "description"]);
+const keyword = ref<string>("");
+
+const modalDialogAdd = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const roleId = ref<string>("");
+
+/** List Mune*/
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    color: "edit",
+    type: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    color: "red",
+    type: "delete",
+  },
+]);
+
+/** function fetch รายการบทบาท*/
+function fetchListRole() {
+  // showLoader();
+  // http
+  //   .get(config.API.managementUser)
+  //   .then((res) => {
+  //     const data = res.data;
+  //     rows.value = data;
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+/**
+ *
+ * @param type ประเภท
+ * @param data ข้อมูลรายการผู้ใช้งาน
+ */
+function onClickAction(type: string, data: Roles) {
+  if (type === "edit") {
+    modalDialogAdd.value = true;
+    isStatusEdit.value = true;
+    roleId.value = data.id;
+  } else if (type === "delete") {
+    onDeleteRole(data.id);
+  }
+}
+
+function openDialog() {
+  modalDialogAdd.value = true;
+  isStatusEdit.value = false;
+  roleId.value = "";
+}
+
+/**
+ * function ยืนยันการลบข้อมูลบทบาท
+ * @param id รายการบทบาท
+ */
+function onDeleteRole(id: string) {
+  dialogRemove($q, () => {
+    // showLoader();
+    // http
+    //   .delete(config.API.managementUser + `/${id}`)
+    //   .then(() => {
+    //     success($q, "ลบข้อมูลสำเร็จ");
+    //     fetchListRole();
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   })
+    //   .finally(() => {
+    //     hideLoader();
+    //   });
+  });
+}
+
+function viewDetail(id: string) {
+  router.push(`/roles/${id}`);
+}
+
+onMounted(() => {
+  fetchListRole();
+});
+</script>
 
 <template>
-  <div>manageRoles</div>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">จัดการบทบาท</div>
+  </div>
+
+  <q-card flast bordered class="q-pa-md">
+    <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+      <q-btn flat round dense color="primary" icon="add" @click="openDialog()">
+        <q-tooltip>เพิ่มบทบาท </q-tooltip>
+      </q-btn>
+      <q-space />
+
+      <q-input
+        borderless
+        dense
+        debounce="300"
+        outlined
+        v-model="keyword"
+        placeholder="ค้นหา"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+
+    <div class="col-12 q-pt-sm">
+      <d-table
+        ref="table"
+        :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"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width></q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="viewDetail(props.row.id)"
+            >
+              <div>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-pa-none q-ml-xs"
+                color="grey-13"
+                size="12px"
+              >
+                <q-menu>
+                  <q-list dense style="min-width: 200px">
+                    <q-item
+                      v-for="(item, index) in itemMenu"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click.stop="onClickAction(item.type, props.row)"
+                    >
+                      <q-item-section>
+                        <div class="row items-center">
+                          <q-icon
+                            :color="item.color"
+                            size="17px"
+                            :name="item.icon"
+                          />
+                          <div class="q-pl-md">{{ item.label }}</div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogAddRole
+    :fetchlist="fetchListRole"
+    v-model:modal="modalDialogAdd"
+    v-model:isStatusEdit="isStatusEdit"
+    :roleId="roleId"
+  />
 </template>
 
 <style scoped></style>

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>

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

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { Roles } from "@/modules/02_users/interface/response/Main";
+
+/** importComponents*/
+import DialogAddRoleUser from "@/modules/02_users/components/Users/DialogRoleUser.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+const userId = ref<string>(route.params.id.toString());
+
+const rows = ref<Roles[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: (row) => rows.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "คำอธิบาย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["no", "name", "description"]);
+
+const modalDialogAdd = ref<boolean>(false);
+
+function fetchListRoleUser() {
+  showLoader();
+  http
+    .get(config.API.managementUser + `/role/${userId.value}`)
+    .then((res) => {
+      rows.value = res.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.management + `/${userId.value}/role/${id}`)
+      .then(() => {
+        fetchListRoleUser();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function openDialog() {
+  modalDialogAdd.value = true;
+}
+
+onMounted(() => {
+  fetchListRoleUser();
+});
+</script>
+
+<template>
+  <div class="toptitle col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    จัดการสิทธิ์
+  </div>
+
+  <q-card flast bordered class="q-pa-md">
+    <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+      <q-btn flat round dense color="primary" icon="add" @click="openDialog">
+        <q-tooltip>เพิ่ม Role </q-tooltip>
+      </q-btn>
+      <q-space />
+
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+    <div class="col-12 q-pt-sm">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width></q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                flat
+                round
+                color="red"
+                icon="delete"
+                @click="onDelete(props.row.id)"
+              >
+                <q-tooltip>ลบ</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogAddRoleUser
+    :fetchlist="fetchListRoleUser"
+    v-model:modal="modalDialogAdd"
+    :userId="userId"
+    :roles="rows"
+  />
+</template>
+
+<style scoped></style>