diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/[lng]/evcp/(evcp)/(system)/change-vendor/change-vendor-client.tsx | 424 |
1 files changed, 424 insertions, 0 deletions
diff --git a/app/[lng]/evcp/(evcp)/(system)/change-vendor/change-vendor-client.tsx b/app/[lng]/evcp/(evcp)/(system)/change-vendor/change-vendor-client.tsx new file mode 100644 index 00000000..47776bba --- /dev/null +++ b/app/[lng]/evcp/(evcp)/(system)/change-vendor/change-vendor-client.tsx @@ -0,0 +1,424 @@ +'use client'; + +import * as React from 'react'; +import { useState, useTransition } from 'react'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Alert, AlertDescription } from '@/components/ui/alert'; +import { Loader2, Search, User, Building2 } from 'lucide-react'; +import { searchUsers, getUserVendorInfo, getVendorList, changeVendor } from '@/lib/change-vendor/service'; +import { toast } from 'sonner'; + +interface User { + id: number; + name: string; + email: string; + companyId: number | null; +} + +interface UserVendorInfo { + userId: number; + userName: string; + userEmail: string; + currentVendorId: number | null; + currentVendorName: string | null; + currentVendorCode: string | null; +} + +interface Vendor { + id: number; + vendorName: string; + vendorCode: string | null; + status: string; +} + +export function ChangeVendorClient() { + const [isPending, startTransition] = useTransition(); + const [isSearchingUsers, setIsSearchingUsers] = React.useState(false); + const [isSearchingVendors, setIsSearchingVendors] = React.useState(false); + const [isLoadingVendorInfo, setIsLoadingVendorInfo] = React.useState(false); + + const [userSearchQuery, setUserSearchQuery] = useState(''); + const [users, setUsers] = useState<User[]>([]); + const [selectedUserId, setSelectedUserId] = useState<number | null>(null); + const [userVendorInfo, setUserVendorInfo] = useState<UserVendorInfo | null>(null); + + const [vendorSearchQuery, setVendorSearchQuery] = useState(''); + const [vendors, setVendors] = useState<Vendor[]>([]); + const [selectedVendorId, setSelectedVendorId] = useState<string>(''); + + const [error, setError] = useState<string | null>(null); + + // 유저 검색 + const handleSearchUsers = async () => { + if (isSearchingUsers) return; + + setIsSearchingUsers(true); + setError(null); + setSelectedUserId(null); + setUserVendorInfo(null); + setSelectedVendorId(''); + + try { + const result = await searchUsers(userSearchQuery); + + if (result.error) { + setError(result.error); + return; + } + + setUsers(result.data || []); + + if (result.data && result.data.length === 0) { + toast.info('검색 결과가 없습니다.'); + } + } catch (err) { + setError('유저 검색 중 오류가 발생했습니다.'); + console.error(err); + } finally { + setIsSearchingUsers(false); + } + }; + + // 유저 검색어 입력 시 엔터키 처리 + const handleUserSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { + if (e.key === 'Enter') { + handleSearchUsers(); + } + }; + + // 유저 선택 시 해당 유저의 벤더 정보 조회 + const handleUserSelect = async (userId: number) => { + setSelectedUserId(userId); + setUserVendorInfo(null); + setSelectedVendorId(''); + setIsLoadingVendorInfo(true); + setError(null); + + try { + const result = await getUserVendorInfo(userId); + + if (result.error) { + setError(result.error); + return; + } + + setUserVendorInfo(result.data); + + // 벤더 목록도 함께 로드 + await loadVendors(); + } catch (err) { + setError('유저 정보를 불러오는 중 오류가 발생했습니다.'); + console.error(err); + } finally { + setIsLoadingVendorInfo(false); + } + }; + + // 벤더 목록 로드 + const loadVendors = async () => { + setIsSearchingVendors(true); + try { + const result = await getVendorList(vendorSearchQuery); + + if (result.error) { + setError(result.error); + return; + } + + setVendors(result.data || []); + } catch (err) { + setError('벤더 목록을 불러오는 중 오류가 발생했습니다.'); + console.error(err); + } finally { + setIsSearchingVendors(false); + } + }; + + // 벤더 검색 + const handleSearchVendors = async () => { + if (isSearchingVendors) return; + + setIsSearchingVendors(true); + setError(null); + setSelectedVendorId(''); + + try { + const result = await getVendorList(vendorSearchQuery); + + if (result.error) { + setError(result.error); + return; + } + + setVendors(result.data || []); + + if (result.data && result.data.length === 0) { + toast.info('검색 결과가 없습니다.'); + } + } catch (err) { + setError('벤더 검색 중 오류가 발생했습니다.'); + console.error(err); + } finally { + setIsSearchingVendors(false); + } + }; + + // 벤더 검색어 입력 시 엔터키 처리 + const handleVendorSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { + if (e.key === 'Enter') { + handleSearchVendors(); + } + }; + + // 벤더 변경 처리 + const handleChangeVendor = () => { + if (!selectedUserId) { + toast.error('유저를 선택해주세요.'); + return; + } + + if (!selectedVendorId) { + toast.error('변경할 벤더를 선택해주세요.'); + return; + } + + const vendorId = Number(selectedVendorId); + + if (userVendorInfo?.currentVendorId === vendorId) { + toast.error('현재 선택된 벤더와 동일합니다.'); + return; + } + + startTransition(async () => { + try { + const result = await changeVendor(selectedUserId, vendorId); + + if (result.error || !result.success) { + toast.error(result.error || '벤더 변경에 실패했습니다.'); + return; + } + + toast.success(`"${result.data?.userName}"님의 벤더가 "${result.data?.vendorName}"로 변경되었습니다.`); + + // 유저 정보 새로고침 + await handleUserSelect(selectedUserId); + } catch (err) { + toast.error('벤더 변경 중 오류가 발생했습니다.'); + console.error(err); + } + }); + }; + + return ( + <div className="space-y-6"> + {/* 1단계: 유저 검색 및 선택 */} + <Card> + <CardHeader> + <CardTitle className="flex items-center gap-2"> + <User className="h-5 w-5" /> + 유저 검색 및 선택 + </CardTitle> + <CardDescription> + 벤더를 변경할 유저를 검색하고 선택하세요. + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + {/* 유저 검색 */} + <div className="flex gap-2"> + <div className="flex-1"> + <Input + placeholder="유저명 또는 이메일로 검색..." + value={userSearchQuery} + onChange={(e) => setUserSearchQuery(e.target.value)} + onKeyDown={handleUserSearchKeyDown} + disabled={isSearchingUsers} + /> + </div> + <Button + type="button" + variant="outline" + onClick={handleSearchUsers} + disabled={isSearchingUsers} + > + {isSearchingUsers ? ( + <Loader2 className="h-4 w-4 animate-spin" /> + ) : ( + <Search className="h-4 w-4" /> + )} + <span className="ml-2">검색</span> + </Button> + </div> + + {/* 유저 선택 */} + {users.length > 0 && ( + <div className="grid gap-2"> + <Label>유저 선택</Label> + <Select + value={selectedUserId?.toString() || ''} + onValueChange={(value) => handleUserSelect(Number(value))} + disabled={isLoadingVendorInfo} + > + <SelectTrigger> + <SelectValue placeholder="유저를 선택하세요" /> + </SelectTrigger> + <SelectContent> + {users.map((user) => ( + <SelectItem key={user.id} value={user.id.toString()}> + <div className="flex flex-col"> + <span>{user.name}</span> + <span className="text-xs text-muted-foreground">{user.email}</span> + </div> + </SelectItem> + ))} + </SelectContent> + </Select> + </div> + )} + + {isLoadingVendorInfo && ( + <div className="flex items-center justify-center py-4"> + <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /> + </div> + )} + + {/* 선택한 유저의 현재 벤더 정보 */} + {userVendorInfo && ( + <div className="rounded-lg border p-4 bg-muted/50"> + <div className="grid gap-2"> + <div className="flex items-center gap-2"> + <User className="h-4 w-4 text-muted-foreground" /> + <Label className="text-sm font-medium">선택한 유저</Label> + </div> + <div className="text-sm"> + <div className="font-semibold">{userVendorInfo.userName}</div> + <div className="text-muted-foreground">{userVendorInfo.userEmail}</div> + </div> + <div className="mt-2 pt-2 border-t"> + <div className="flex items-center gap-2 mb-1"> + <Building2 className="h-4 w-4 text-muted-foreground" /> + <Label className="text-sm font-medium">현재 벤더</Label> + </div> + <div className="text-sm font-semibold"> + {userVendorInfo.currentVendorName || '벤더 정보 없음'} + {userVendorInfo.currentVendorCode && ( + <span className="text-muted-foreground ml-2"> + ({userVendorInfo.currentVendorCode}) + </span> + )} + </div> + </div> + </div> + </div> + )} + </CardContent> + </Card> + + {/* 2단계: 벤더 검색 및 선택 (유저 선택 후에만 표시) */} + {selectedUserId && userVendorInfo && ( + <Card> + <CardHeader> + <CardTitle className="flex items-center gap-2"> + <Building2 className="h-5 w-5" /> + 벤더 변경 + </CardTitle> + <CardDescription> + 변경할 벤더를 검색하고 선택하세요. + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + {/* 벤더 검색 */} + <div className="flex gap-2"> + <div className="flex-1"> + <Input + placeholder="벤더명 또는 벤더코드로 검색..." + value={vendorSearchQuery} + onChange={(e) => setVendorSearchQuery(e.target.value)} + onKeyDown={handleVendorSearchKeyDown} + disabled={isSearchingVendors} + /> + </div> + <Button + type="button" + variant="outline" + onClick={handleSearchVendors} + disabled={isSearchingVendors} + > + {isSearchingVendors ? ( + <Loader2 className="h-4 w-4 animate-spin" /> + ) : ( + <Search className="h-4 w-4" /> + )} + <span className="ml-2">검색</span> + </Button> + </div> + + {/* 벤더 선택 */} + {vendors.length > 0 && ( + <div className="grid gap-2"> + <Label htmlFor="vendor-select">변경할 벤더 선택</Label> + <Select + value={selectedVendorId} + onValueChange={setSelectedVendorId} + disabled={isPending} + > + <SelectTrigger id="vendor-select"> + <SelectValue placeholder="벤더를 선택하세요" /> + </SelectTrigger> + <SelectContent> + {vendors.map((vendor) => ( + <SelectItem key={vendor.id} value={vendor.id.toString()}> + <div className="flex flex-col"> + <span>{vendor.vendorName}</span> + {vendor.vendorCode && ( + <span className="text-xs text-muted-foreground"> + {vendor.vendorCode} + </span> + )} + </div> + </SelectItem> + ))} + </SelectContent> + </Select> + </div> + )} + + {error && ( + <Alert variant="destructive"> + <AlertDescription>{error}</AlertDescription> + </Alert> + )} + + {/* 저장 버튼 */} + <Button + onClick={handleChangeVendor} + disabled={isPending || !selectedVendorId} + className="w-full" + > + {isPending ? ( + <> + <Loader2 className="mr-2 h-4 w-4 animate-spin" /> + 변경 중... + </> + ) : ( + <> + <Building2 className="mr-2 h-4 w-4" /> + 벤더 변경 + </> + )} + </Button> + </CardContent> + </Card> + )} + </div> + ); +} |