diff options
| -rw-r--r-- | lib/general-contracts/main/create-general-contract-dialog.tsx | 112 |
1 files changed, 19 insertions, 93 deletions
diff --git a/lib/general-contracts/main/create-general-contract-dialog.tsx b/lib/general-contracts/main/create-general-contract-dialog.tsx index d0ccfe5b..bb251408 100644 --- a/lib/general-contracts/main/create-general-contract-dialog.tsx +++ b/lib/general-contracts/main/create-general-contract-dialog.tsx @@ -20,18 +20,19 @@ import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react"
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
+import { CalendarIcon } from "lucide-react"
import { format } from "date-fns"
import { ko } from "date-fns/locale"
import { cn } from "@/lib/utils"
-import { createContract, getVendors } from "@/lib/general-contracts/service"
+import { createContract } from "@/lib/general-contracts/service"
import {
GENERAL_CONTRACT_CATEGORIES,
GENERAL_CONTRACT_TYPES,
GENERAL_EXECUTION_METHODS
} from "@/lib/general-contracts/types"
import { useSession } from "next-auth/react"
+import { VendorSelectorDialogSingle } from "@/components/common/vendor/vendor-selector-dialog-single"
+import { VendorSearchItem } from "@/components/common/vendor/vendor-service"
interface CreateContractForm {
contractNumber: string
@@ -39,7 +40,6 @@ interface CreateContractForm { category: string
type: string
executionMethod: string
- vendorId: number | null
startDate: Date | undefined
endDate: Date | undefined
validityEndDate: Date | undefined
@@ -51,9 +51,7 @@ export function CreateGeneralContractDialog() { const { data: session } = useSession()
const [open, setOpen] = React.useState(false)
const [isLoading, setIsLoading] = React.useState(false)
- const [vendors, setVendors] = React.useState<Array<{ id: number; vendorName: string; vendorCode: string | null }>>([])
- const [vendorSearchTerm, setVendorSearchTerm] = React.useState("")
- const [vendorOpen, setVendorOpen] = React.useState(false)
+ const [selectedVendor, setSelectedVendor] = React.useState<VendorSearchItem | null>(null)
const [form, setForm] = React.useState<CreateContractForm>({
contractNumber: '',
@@ -61,40 +59,12 @@ export function CreateGeneralContractDialog() { category: '',
type: '',
executionMethod: '',
- vendorId: null,
startDate: undefined,
endDate: undefined,
validityEndDate: undefined,
notes: '',
})
- // 업체 목록 조회
- React.useEffect(() => {
- const fetchData = async () => {
- try {
- const vendorList = await getVendors()
- console.log('vendorList', vendorList)
- setVendors(vendorList)
- } catch (error) {
- console.error('데이터 조회 오류:', error)
- toast.error('데이터를 불러오는데 실패했습니다')
- setVendors([])
- }
- }
- fetchData()
- }, [])
-
- // 협력업체 검색 필터링
- const filteredVendors = React.useMemo(() => {
- if (!vendorSearchTerm.trim()) return vendors
- const lowerSearch = vendorSearchTerm.toLowerCase()
- return vendors.filter(
- vendor =>
- vendor.vendorName.toLowerCase().includes(lowerSearch) ||
- (vendor.vendorCode && vendor.vendorCode.toLowerCase().includes(lowerSearch))
- )
- }, [vendors, vendorSearchTerm])
-
const handleSubmit = async () => {
// 필수 필드 검증
const validationErrors: string[] = []
@@ -103,7 +73,7 @@ export function CreateGeneralContractDialog() { if (!form.category) validationErrors.push('계약구분')
if (!form.type) validationErrors.push('계약종류')
if (!form.executionMethod) validationErrors.push('체결방식')
- if (!form.vendorId) validationErrors.push('협력업체')
+ if (!selectedVendor) validationErrors.push('협력업체')
// AD, LO, OF 계약이 아닌 경우에만 계약기간 필수값 체크
if (!['AD', 'LO', 'OF'].includes(form.type)) {
@@ -135,7 +105,7 @@ export function CreateGeneralContractDialog() { type: form.type,
executionMethod: form.executionMethod,
contractSourceType: 'manual',
- vendorId: form.vendorId!,
+ vendorId: selectedVendor!.id,
startDate: form.startDate!.toISOString().split('T')[0],
endDate: form.endDate!.toISOString().split('T')[0],
validityEndDate: (form.validityEndDate || form.endDate!).toISOString().split('T')[0],
@@ -168,12 +138,12 @@ export function CreateGeneralContractDialog() { category: '',
type: '',
executionMethod: '',
- vendorId: null,
startDate: undefined,
endDate: undefined,
validityEndDate: undefined,
notes: '',
})
+ setSelectedVendor(null)
}
return (
@@ -291,61 +261,17 @@ export function CreateGeneralContractDialog() { <div className="grid gap-2">
<Label htmlFor="vendor">협력업체 *</Label>
- <Popover open={vendorOpen} onOpenChange={setVendorOpen}>
- <PopoverTrigger asChild>
- <Button
- variant="outline"
- role="combobox"
- aria-expanded={vendorOpen}
- className="w-full justify-between"
- >
- {form.vendorId ? (
- (() => {
- const selected = vendors.find(v => v.id === form.vendorId)
- return selected ? `${selected.vendorName} (${selected.vendorCode || ''})` : "협력업체 선택"
- })()
- ) : (
- "협력업체 선택"
- )}
- <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
- </Button>
- </PopoverTrigger>
- <PopoverContent className="w-[400px] p-0">
- <Command>
- <CommandInput
- placeholder="협력업체명/코드 검색..."
- onValueChange={setVendorSearchTerm}
- />
- <CommandList className="max-h-[300px]">
- <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
- <CommandGroup>
- {filteredVendors.map((vendor) => (
- <CommandItem
- key={vendor.id}
- value={`${vendor.vendorName} ${vendor.vendorCode || ''}`}
- onSelect={() => {
- setForm(prev => ({ ...prev, vendorId: vendor.id }))
- setVendorOpen(false)
- setVendorSearchTerm("")
- }}
- >
- <Check
- className={cn(
- "mr-2 h-4 w-4",
- form.vendorId === vendor.id ? "opacity-100" : "opacity-0"
- )}
- />
- <span className="font-medium">{vendor.vendorName}</span>
- {vendor.vendorCode && (
- <span className="ml-2 text-gray-500">({vendor.vendorCode})</span>
- )}
- </CommandItem>
- ))}
- </CommandGroup>
- </CommandList>
- </Command>
- </PopoverContent>
- </Popover>
+ <VendorSelectorDialogSingle
+ triggerLabel="협력업체 선택"
+ selectedVendor={selectedVendor}
+ onVendorSelect={setSelectedVendor}
+ placeholder="협력업체를 검색하세요..."
+ title="협력업체 선택"
+ description="계약할 협력업체를 검색하고 선택해주세요."
+ triggerVariant="outline"
+ statusFilter="ACTIVE"
+ showInitialData={true}
+ />
</div>
<div className="grid grid-cols-3 gap-4">
|