130 lines
5.4 KiB
TypeScript
130 lines
5.4 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@common/components";
|
|
|
|
interface UpperCodeSelectDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
candidates: Record<string, string>[];
|
|
codeField: string;
|
|
nameField: string;
|
|
onSelect: (item: Record<string, string>) => void;
|
|
extraFields?: { field: string; header: string }[];
|
|
}
|
|
|
|
export const UpperCodeSelectDialog = ({
|
|
open,
|
|
onOpenChange,
|
|
candidates,
|
|
codeField,
|
|
nameField,
|
|
extraFields,
|
|
onSelect,
|
|
}: UpperCodeSelectDialogProps) => {
|
|
const [selectedCode, setSelectedCode] = useState<string | null>(null);
|
|
|
|
const handleSelect = () => {
|
|
const item = candidates.find((c) => c[codeField] === selectedCode);
|
|
if (!item) return;
|
|
onSelect(item);
|
|
onOpenChange(false);
|
|
setSelectedCode(null);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
onOpenChange(false);
|
|
setSelectedCode(null);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={handleClose}>
|
|
<DialogContent className="max-w-[50rem]" aria-describedby={undefined}>
|
|
<DialogHeader>
|
|
<DialogTitle>상위 코드 리스트</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="border border-gray-300 rounded overflow-hidden">
|
|
<table className="w-full text-[1.3rem]">
|
|
<thead className="sticky top-0 z-10">
|
|
<tr className="bg-blue-600 text-white">
|
|
<th className="py-[0.8rem] px-[1rem] text-center font-semibold border-r border-blue-500 w-[40%]">
|
|
코드
|
|
</th>
|
|
<th className="py-[0.8rem] px-[1rem] text-center font-semibold">
|
|
동명
|
|
</th>
|
|
{extraFields?.map((f) => (
|
|
<th key={f.field} className="py-[0.8rem] px-[1rem] text-center font-semibold border-l border-blue-500">
|
|
{f.header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<div className="max-h-[40rem] overflow-y-auto">
|
|
<table className="w-full text-[1.3rem]">
|
|
<tbody>
|
|
{candidates.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={2} className="py-[1rem] text-center text-gray-400">
|
|
후보 코드가 없습니다.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
candidates.map((item,index) => (
|
|
<tr
|
|
key={`${item[codeField]}-${index}`} // ← index 추가
|
|
onClick={() => setSelectedCode(item[codeField] ?? "")}
|
|
className={`cursor-pointer border-b border-gray-200 transition-colors
|
|
${selectedCode === item[codeField]
|
|
? "bg-blue-100"
|
|
: "hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
<td className="py-[0.7rem] px-[1rem] text-center border-r border-gray-200 w-[40%]">
|
|
{item[codeField]}
|
|
</td>
|
|
<td className="py-[0.7rem] px-[1rem] text-center">
|
|
{item[nameField]}
|
|
</td>
|
|
{extraFields?.map((f) => (
|
|
<td key={f.field} className="py-[0.7rem] px-[1rem] text-center border-l border-gray-200">
|
|
{item[f.field]}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<DialogFooter className="flex flex-col gap-2">
|
|
<Button
|
|
type="button"
|
|
color="primary"
|
|
disabled={!selectedCode}
|
|
onClick={handleSelect}
|
|
className="w-full py-[1rem] text-[1.4rem]"
|
|
>
|
|
선택
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
color="gray"
|
|
onClick={handleClose}
|
|
className="w-full py-[1rem] text-[1.4rem]"
|
|
>
|
|
닫기
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}; |