From 532992509041c9fdb30fb9b05e0c8129c2425b8f Mon Sep 17 00:00:00 2001 From: sianida26 Date: Fri, 29 Mar 2024 03:43:38 +0700 Subject: [PATCH] Fix user cant load modal --- src/app/dashboard/users/page.tsx | 8 +++--- .../auth/utils/checkMultiplePermissions.ts | 1 - .../permission/data/initialPermissions.ts | 6 ++++ .../PermissionTable/PermissionTable.tsx | 5 +--- .../tables/UsersTable/UsersTable.tsx | 28 ++++++++++++------- .../tables/UsersTable/columns.tsx | 2 +- 6 files changed, 30 insertions(+), 20 deletions(-) diff --git a/src/app/dashboard/users/page.tsx b/src/app/dashboard/users/page.tsx index fe4c556..8b9c747 100644 --- a/src/app/dashboard/users/page.tsx +++ b/src/app/dashboard/users/page.tsx @@ -2,8 +2,8 @@ import { Card, Stack, Title } from "@mantine/core"; import React from "react"; import getUsers from "@/modules/userManagement/actions/getAllUsers"; import { Metadata } from "next"; -import checkMultiplePermissions from "@/modules/dashboard/services/checkMultiplePermissions"; import UsersTable from "@/modules/userManagement/tables/UsersTable/UsersTable"; +import checkMultiplePermissions from "@/modules/auth/utils/checkMultiplePermissions"; export const metadata: Metadata = { title: "Users - Dashboard", @@ -14,9 +14,9 @@ export default async function UsersPage() { const permissions = await checkMultiplePermissions({ create: "users.create", readAll: "users.readAll", - read: "permission.read", - update: "permission.update", - delete: "permission.delete", + read: "users.read", + update: "users.update", + delete: "users.delete", }); const users = await getUsers(); diff --git a/src/modules/auth/utils/checkMultiplePermissions.ts b/src/modules/auth/utils/checkMultiplePermissions.ts index 099d389..75a3fe1 100644 --- a/src/modules/auth/utils/checkMultiplePermissions.ts +++ b/src/modules/auth/utils/checkMultiplePermissions.ts @@ -17,7 +17,6 @@ async function checkMultiplePermissions< | "authenticated-only" | "*" | PermissionCode - | (string & {}) > >(permissions: T): Promise<{ [K in keyof T]: boolean }> { const permissionResults: Partial<{ [K in keyof T]: boolean }> = {}; diff --git a/src/modules/permission/data/initialPermissions.ts b/src/modules/permission/data/initialPermissions.ts index 9d4391e..c041fb8 100644 --- a/src/modules/permission/data/initialPermissions.ts +++ b/src/modules/permission/data/initialPermissions.ts @@ -52,6 +52,12 @@ const permissionData = [ isActive: true, }, // User group + { + code: "users.create", + name: "Create user", + description: "Allows creating a user", + isActive: true, + }, { code: "users.read", name: "Read user", diff --git a/src/modules/permission/tables/PermissionTable/PermissionTable.tsx b/src/modules/permission/tables/PermissionTable/PermissionTable.tsx index e939cb0..65e5df9 100644 --- a/src/modules/permission/tables/PermissionTable/PermissionTable.tsx +++ b/src/modules/permission/tables/PermissionTable/PermissionTable.tsx @@ -1,15 +1,12 @@ "use client"; import CrudPermissions from "@/modules/dashboard/types/CrudPermissions"; -import { Table, Text, Flex, Button, Center } from "@mantine/core"; +import { Text, Flex, Button } from "@mantine/core"; import { - flexRender, getCoreRowModel, useReactTable, } from "@tanstack/react-table"; import React, { useState } from "react"; import { TbPlus } from "react-icons/tb"; -import getPermissions from "../../actions/getAllPermissions"; -import getAllPermissions from "../../actions/getAllPermissions"; import FormModal, { ModalProps } from "../../modals/PermissionFormModal"; import DeleteModal, { DeleteModalProps } from "../../modals/PermissionDeleteModal"; import Permission from "../../types/Permission"; diff --git a/src/modules/userManagement/tables/UsersTable/UsersTable.tsx b/src/modules/userManagement/tables/UsersTable/UsersTable.tsx index b947cbf..d3b44c6 100644 --- a/src/modules/userManagement/tables/UsersTable/UsersTable.tsx +++ b/src/modules/userManagement/tables/UsersTable/UsersTable.tsx @@ -1,15 +1,13 @@ "use client"; import CrudPermissions from "@/modules/dashboard/types/CrudPermissions"; -import { Table, Text, Flex, Button, Center } from "@mantine/core"; -import { - flexRender, - getCoreRowModel, - useReactTable, -} from "@tanstack/react-table"; -import React, { useState } from "react"; +import { Text, Flex, Button } from "@mantine/core"; +import { getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import React, { useMemo, useState } from "react"; import { TbPlus } from "react-icons/tb"; import UserFormModal, { ModalProps } from "../../modals/UserFormModal"; -import UserDeleteModal, { DeleteModalProps } from "../../modals/UserDeleteModal"; +import UserDeleteModal, { + DeleteModalProps, +} from "../../modals/UserDeleteModal"; import createColumns from "./columns"; import getAllUsers from "../../actions/getAllUsers"; import DashboardTable from "@/modules/dashboard/components/DashboardTable"; @@ -20,7 +18,9 @@ interface Props { } export default function UsersTable(props: Props) { + const [modalProps, setModalProps] = useState({ + id: "", opened: false, title: "", }); @@ -31,8 +31,16 @@ export default function UsersTable(props: Props) { data: undefined, }); + const userData = useMemo( + () => props.userData.map((data) => ({ + ...data, + roles: data.roles.map((x) => x.name), + })), + [props.userData] + ); + const table = useReactTable({ - data: props.userData.map(data => ({...data, roles: data.roles.map(x => x.name)})), + data: userData, columns: createColumns({ permissions: props.permissions, actions: { @@ -111,7 +119,7 @@ export default function UsersTable(props: Props) { )} - + diff --git a/src/modules/userManagement/tables/UsersTable/columns.tsx b/src/modules/userManagement/tables/UsersTable/columns.tsx index 237370c..28e100b 100644 --- a/src/modules/userManagement/tables/UsersTable/columns.tsx +++ b/src/modules/userManagement/tables/UsersTable/columns.tsx @@ -73,7 +73,7 @@ const createColumns = (options: ColumnOptions) => { columnHelper.display({ id: "status", header: "Status", - cell: (props) => Active, + cell: () => Active, }), columnHelper.display({