diff --git a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx index c7f8cdcdb..46f3d45f0 100644 --- a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx +++ b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx @@ -1,5 +1,6 @@ -import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table"; +import { useState, useRef } from "react"; import { useQuery, useQueryClient } from "@tanstack/react-query"; +import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table"; import { Dialog, DialogTrigger, @@ -8,6 +9,7 @@ import { DialogTitle, Button, Switch, + Input, } from "@common/components"; import { RoleAuthorizationsApi, @@ -31,12 +33,18 @@ function MappingRoleDialog({ }: MappingRoleDialogProps) { const queryClient = useQueryClient(); const alert = useAlertStore((state) => state.setMessage); + const inputRef = useRef(null); + const [searchParams, setSearchParams] = useState({ + keyword: "", + keywordType: "authorizationName", + }); const query = useQuery({ - queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS], + queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS, searchParams], queryFn: () => RoleAuthorizationsApi.getRoleAuthorizationsListByRoleId({ roleId, + ...searchParams, }), enabled: open, }); @@ -46,7 +54,7 @@ function MappingRoleDialog({ RoleAuthorizationsApi.createRoleAuthorizations(data), onSuccess: () => { queryClient.invalidateQueries({ - queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS], + queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS], }); alert("권한 맵핑이 완료되었습니다."); }, @@ -66,6 +74,26 @@ function MappingRoleDialog({ ); }; + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const keyword = formData.get("keyword") as string; + setSearchParams({ + ...searchParams, + keyword, + }); + }; + + const handleReset = () => { + if (inputRef.current) { + inputRef.current.value = ""; + } + setSearchParams({ + ...searchParams, + keyword: "", + }); + }; + const { tableComponent } = useDataTable({ query, tableOptions: { @@ -79,21 +107,31 @@ function MappingRoleDialog({ - + 모듈 목록 -
-
- + - +
- {tableComponent}
+
{tableComponent}
);