117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
keepPreviousData,
|
|
useQuery,
|
|
useQueryClient,
|
|
} from "@tanstack/react-query";
|
|
import {
|
|
getCoreRowModel,
|
|
type PaginationState,
|
|
type RowSelectionState,
|
|
} from "@tanstack/react-table";
|
|
import { Button } from "@common/components";
|
|
import { ENDPOINT } from "@/shared/config";
|
|
import { useAlertStore, useDataTable } from "@/shared/lib";
|
|
import { columns } from "../model/group-users-table-columns";
|
|
import { GroupUsersApi } from "../api/group-users-service";
|
|
import { AdditionalUserDialog } from "./additional-user-dialog";
|
|
|
|
type GroupUsersSectionProps = {
|
|
groupId?: string;
|
|
};
|
|
|
|
function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
|
|
const queryClient = useQueryClient();
|
|
const alert = useAlertStore((state) => state.setMessage);
|
|
|
|
const [pagination, setPagination] = useState<PaginationState>({
|
|
pageIndex: 0,
|
|
pageSize: 10,
|
|
});
|
|
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
|
|
|
|
const query = useQuery({
|
|
queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId, pagination],
|
|
queryFn: () =>
|
|
GroupUsersApi.findPageGroupUser({
|
|
keyword: groupId,
|
|
page: pagination.pageIndex,
|
|
size: pagination.pageSize,
|
|
}),
|
|
enabled: !!groupId,
|
|
placeholderData: keepPreviousData,
|
|
});
|
|
|
|
const { tableComponent, tableInstance: table } = useDataTable({
|
|
query,
|
|
tableOptions: {
|
|
columns,
|
|
state: { pagination, rowSelection },
|
|
manualPagination: true,
|
|
enableRowSelection: true,
|
|
enableMultiRowSelection: true,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
onPaginationChange: setPagination,
|
|
onRowSelectionChange: setRowSelection,
|
|
getRowId: (row) => row.userUnqId,
|
|
},
|
|
dataTableOptions: {
|
|
viewPagination: true,
|
|
},
|
|
});
|
|
|
|
const handleDeleteSelected = async () => {
|
|
const selectedRows = Object.keys(rowSelection);
|
|
if (selectedRows.length === 0 || !groupId) return;
|
|
|
|
try {
|
|
const usersToDelete = selectedRows.map((userUnqId) => ({
|
|
mode: "D",
|
|
groupId,
|
|
userUnqId,
|
|
}));
|
|
|
|
await GroupUsersApi.saveGroupUser(usersToDelete);
|
|
queryClient.invalidateQueries({
|
|
queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId],
|
|
});
|
|
alert("사용자 삭제를 완료했습니다.", () => {
|
|
setRowSelection({});
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setPagination({ ...pagination, pageIndex: 0 });
|
|
}, [groupId]);
|
|
|
|
return (
|
|
<div className="flex-1">
|
|
<div className="card card-border">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">그룹 사용자 목록</h3>
|
|
<div className="flex gap-2">
|
|
<AdditionalUserDialog groupId={groupId} />
|
|
<Button
|
|
color="red"
|
|
disabled={table.getSelectedRowModel().rows.length === 0}
|
|
onClick={handleDeleteSelected}
|
|
>
|
|
선택삭제
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
|
|
{tableComponent}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { GroupUsersSection };
|