Merge pull request #58 from Frappet/fix/user

fix(ManagementRoleUser)page to dialog

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

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { tokenParsed } from "@/plugins/auth";
+
+/** 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";
+
+/** use*/
+const $q = useQuasar();
+const roleSuper = ref<boolean>(false);
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modelValue", {
+  required: true,
+});
+const userId = defineModel<string>("userId", {
+  required: true,
+});
+const props = defineProps({
+  fetchList: {
+    type: Function,
+    required: true,
+  },
+});
+
+// Table
+const rows = ref<Roles[]>([]); //ข้อมูลรายการสิทธิ์
+const keyword = ref<string>(""); // ค้นหา
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    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); // เพิ่มสิทธิ์
+const isUpdate = ref<boolean>(false); // เพิ่ม/แก้ไข
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายการสิทธิ์ที่มีตามผู้ใช้งาน
+ */
+async function fetchListRoleUser() {
+  showLoader();
+  http
+    .get(config.API.managementUser + `/role/${userId.value}`)
+    .then(async (res) => {
+      const item = roleSuper.value
+        ? ["STAFF", "SUPER_ADMIN", "ADMIN", "USER"]
+        : ["STAFF", "USER"];
+
+      rows.value = await res.data.filter((e: Roles) => item.includes(e.name));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันลบข้อมูลสิทธิ์ออกจากผู้ใช้งาน
+ * @param id สิทธิ์
+ *
+ * ลบข้อมูลเสร็จโหลดข้อมูลรายการสิทธิ์ที่ใหม่
+ */
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.management + `/${userId.value}/role/${id}`)
+      .then(async () => {
+        await fetchListRoleUser();
+        success($q, "ลบข้อมูลสำเร็จ");
+        isUpdate.value = true;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ฟังก์เพิ่มสิทธิ์
+ */
+function openDialog() {
+  modalDialogAdd.value = true;
+}
+
+async function closeDialog() {
+  isUpdate.value && (await props.fetchList?.());
+  modal.value = false;
+}
+
+/**
+ * hook ทำงานเมื่อมีการเรียกใช้ components
+ *
+ * โหลดข้อมูลรายการสิทธิ์ที่มี
+ */
+
+watch(
+  () => modal.value,
+  async (newVal) => {
+    if (newVal) {
+      const checkToken: any = await tokenParsed();
+      roleSuper.value = await checkToken.role.includes("SUPER_ADMIN");
+      await fetchListRoleUser();
+      isUpdate.value = false;
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 55vw">
+      <DialogHeader :tittle="'จัดการสิทธิ์'" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <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
+            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"
+            style="min-width: 140px"
+          />
+        </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"
+            :filter="keyword"
+          >
+            <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 v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else>
+                    {{ 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-section>
+    </q-card>
+  </q-dialog>
+
+  <DialogAddRoleUser
+    :fetchlist="fetchListRoleUser"
+    v-model:modal="modalDialogAdd"
+    :userId="userId"
+    :roles="rows"
+    v-model:role-super="roleSuper"
+    v-model:is-update="isUpdate"
+  />
+</template>
+
+<style scoped></style>

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

@@ -5,7 +5,6 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
-import { setAuthen, authenticated, tokenParsed } from "@/plugins/auth";
 
 import type { QTableProps } from "quasar";
 import type { Roles } from "@/modules/02_users/interface/request/Main";
@@ -28,6 +27,7 @@ const {
 const modal = defineModel<boolean>("modal", { required: true });
 const roleSuper = defineModel<boolean>("roleSuper", { required: true });
 const userId = defineModel<string>("userId", { required: true });
+const isUpdate = defineModel<boolean>("isUpdate", { required: true });
 const roles = defineModel<any[]>("roles");
 const props = defineProps({
   fetchlist: {
@@ -108,6 +108,7 @@ function onSubmit() {
           await props.fetchlist?.();
           success($q, "บันทึกข้อมูลสำเร็จ");
           closeDialog();
+          isUpdate.value = true;
         })
         .catch((err) => {
           messageError($q, err);
@@ -142,7 +143,7 @@ watch(
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 50%">
+    <q-card class="col-12" style="width: 35%">
       <DialogHeader tittle="เพิ่มสิทธิ์" :close="closeDialog" />
       <q-separator />
       <q-card-section>

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

@@ -23,6 +23,7 @@ import type { Users, Roles } from "@/modules/02_users/interface/response/Main";
 
 /** importComponents*/
 import DialogAddUser from "@/modules/02_users/components/Users/DialogFormUser.vue";
+import DialogManagementRole from "@/modules/02_users/components/Users/DialogManagementRole.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -207,6 +208,8 @@ const employeeClassMain = ref<DataOption[]>([
 ]);
 const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 
+const modalDialogManagementRole = ref<boolean>(false); // จัดการสิทธิ์ผู้ใช้งาน
+
 /** ฟังก์ชันเรียกข้อมูลโครงสร้าง แบบปัจุบัน*/
 async function fetchOrganizationActive() {
   showLoader();
@@ -308,7 +311,10 @@ function onClickAction(type: string, data: Users) {
     onDeleteUser(data.id);
   } else if (type === "managementRole") {
     // ไปยังหน้าจัดการสิทธิ์ของผู้ใช้งาน
-    data && router.push(`/users/roles/${data.id}`);
+    // data && router.push(`/users/roles/${data.id}`);
+    // data && (userId.value = data.id);
+    userId.value = data.id;
+    modalDialogManagementRole.value = true;
   } else if (type === "open" || type === "close") {
     // เปลี่ยนสถานะเปิด/ปิดของผู้ใช้งาน
     const status = type === "open" ? true : false;
@@ -760,6 +766,12 @@ onMounted(async () => {
     :user-id="userId"
     :employee-class="employeeClass"
   />
+
+  <DialogManagementRole
+    v-model:model-value="modalDialogManagementRole"
+    v-model:user-id="userId"
+    :fetch-list="fetchListUsers"
+  />
 </template>
 
 <style scoped>