blob: 11c6a1ff0e6f92fd4921258e7e3341e9d1a3b42e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
"use client"
import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Loader } from "lucide-react"
import { AssginedUserTable } from "../userTable/assignedUsers-table"
import { assignUsersToRole } from "@/lib/users/service"
import { RoleView } from "@/db/schema/users"
export interface UpdateRoleSheetProps
extends React.ComponentPropsWithRef<typeof Sheet> {
role: RoleView | null
// ★ 새로 추가: 테이블에 필요한 데이터 로딩 promise
assignedTablePromises: Promise<[
{ data: any[]; pageCount: number }
]>
}
export function AssignRolesSheet({ role, assignedTablePromises, ...props }: UpdateRoleSheetProps) {
const [isUpdatePending, startUpdateTransition] = React.useTransition()
const [selectedUserIds, setSelectedUserIds] = React.useState<number[]>([])
// 2) 자식에서 호출될 콜백
function handleSelectedChange(ids: number[]) {
setSelectedUserIds(ids)
}
async function handleAssign() {
startUpdateTransition(async () => {
if (!role) return
const { error } = await assignUsersToRole(role.id, selectedUserIds)
if (error) {
toast.error(error)
return
}
props.onOpenChange?.(false)
toast.success(`Assigned ${selectedUserIds.length} users!`)
})
}
return (
<Sheet {...props}>
<SheetContent className="flex flex-col gap-6 sm:max-w-md">
<SheetHeader className="text-left">
<SheetTitle>"{role?.name}"에 유저를 할당하세요</SheetTitle>
<SheetDescription>
현재 {role?.name}에는 {role?.user_count}명이 할당되어있습니다. 이 롤은 다음과 같습니다.<br/> {role?.description}
</SheetDescription>
</SheetHeader>
<AssginedUserTable promises={assignedTablePromises} onSelectedChange={handleSelectedChange} />
<SheetFooter className="gap-2 pt-2 sm:space-x-0">
<SheetClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</SheetClose>
{/* <Button disabled={isUpdatePending} onClick={onSubmitAssignUsers}> */}
<Button disabled={isUpdatePending} onClick={handleAssign}>
{isUpdatePending && (
<Loader className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
)}
Assign
</Button>
</SheetFooter>
</SheetContent>
</Sheet>
)
}
|
