127 lines
3.8 KiB
TypeScript
127 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useRvwMnpwMngPage } from "@/entities/rvw-mnpw";
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
Skeleton,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@common/components";
|
|
|
|
import { fromRvwMnpwMng, type ReviewerOption } from "../model/reviewer-option";
|
|
|
|
const PAGE_SIZE = 500;
|
|
|
|
interface AprvrPickerDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
atrzSeComCd: string;
|
|
onSelect: (reviewer: ReviewerOption) => void;
|
|
}
|
|
|
|
function AprvrPickerDialog({
|
|
open,
|
|
onOpenChange,
|
|
atrzSeComCd,
|
|
onSelect,
|
|
}: AprvrPickerDialogProps) {
|
|
const { data, isPending, isError } = useRvwMnpwMngPage(
|
|
{
|
|
atrzSeComCd,
|
|
page: 0,
|
|
size: PAGE_SIZE,
|
|
sort: "userUuidNm,asc",
|
|
},
|
|
{ enabled: open },
|
|
);
|
|
|
|
const items = data?.content ?? [];
|
|
|
|
const handleSelect = (item: (typeof items)[number]) => {
|
|
onSelect(fromRvwMnpwMng(item));
|
|
onOpenChange(false);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-[56rem]" aria-describedby={undefined}>
|
|
<DialogHeader>
|
|
<DialogTitle>검토인력 선택</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="h-[36rem] overflow-auto">
|
|
{isPending ? (
|
|
<div className="flex flex-col gap-2">
|
|
<Skeleton className="h-[4rem]" />
|
|
<Skeleton className="h-[16rem]" />
|
|
</div>
|
|
) : isError ? (
|
|
<p className="py-8 text-center text-lg text-muted-foreground">
|
|
검토인력 목록을 불러오지 못했습니다.
|
|
</p>
|
|
) : items.length === 0 ? (
|
|
<p className="py-8 text-center text-lg text-muted-foreground">
|
|
배치된 검토인력이 없습니다.
|
|
</p>
|
|
) : (
|
|
<Table caption="검토인력 선택 목록으로 성명, 부서, 직위, 직급, 선택 정보 제공" className="w-full">
|
|
<colgroup>
|
|
<col width="25%" />
|
|
<col width="25%" />
|
|
<col width="15%" />
|
|
<col width="15%" />
|
|
<col width="20%" />
|
|
</colgroup>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>성명</TableHead>
|
|
<TableHead>부서</TableHead>
|
|
<TableHead>직위</TableHead>
|
|
<TableHead>직급</TableHead>
|
|
<TableHead>선택</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{items.map((item) => (
|
|
<TableRow
|
|
key={`${item.atrzSeComCd}-${item.ognzSn}-${item.userUuid}`}
|
|
>
|
|
<TableCell align="center">
|
|
{item.userUuidNm || item.userUuid}
|
|
</TableCell>
|
|
<TableCell align="center">{item.ognzNm || "-"}</TableCell>
|
|
<TableCell align="center">{item.jbpsSeNm || "-"}</TableCell>
|
|
<TableCell align="center">{item.jbgdSeNm || "-"}</TableCell>
|
|
<TableCell align="center">
|
|
<Button type="button" size="sm" onClick={() => handleSelect(item)}>
|
|
선택
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button type="button" color="white" onClick={() => onOpenChange(false)}>
|
|
닫기
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export { AprvrPickerDialog };
|