diff options
Diffstat (limited to 'lib/approval-template/table')
5 files changed, 580 insertions, 36 deletions
diff --git a/lib/approval-template/table/approval-template-table-toolbar-actions.tsx b/lib/approval-template/table/approval-template-table-toolbar-actions.tsx index 08aba97a..62754cc1 100644 --- a/lib/approval-template/table/approval-template-table-toolbar-actions.tsx +++ b/lib/approval-template/table/approval-template-table-toolbar-actions.tsx @@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button" import { type ApprovalTemplate } from "@/lib/approval-template/service" import { toast } from "sonner" import { DeleteApprovalTemplateDialog } from "./delete-approval-template-dialog" +import { CategoryManagementDialog } from "./category-management-dialog" interface ApprovalTemplateTableToolbarActionsProps { table: Table<ApprovalTemplate> @@ -19,6 +20,7 @@ export function ApprovalTemplateTableToolbarActions({ onCreateTemplate, }: ApprovalTemplateTableToolbarActionsProps) { const [showDeleteDialog, setShowDeleteDialog] = React.useState(false) + const [showCategoryDialog, setShowCategoryDialog] = React.useState(false) const selectedRows = table.getFilteredSelectedRowModel().rows const selectedTemplates = selectedRows.map((row) => row.original) @@ -72,6 +74,18 @@ export function ApprovalTemplateTableToolbarActions({ return ( <div className="flex items-center gap-2"> + {/* 카테고리 관리 버튼 */} + <CategoryManagementDialog + open={showCategoryDialog} + onOpenChange={setShowCategoryDialog} + showTrigger={false} + /> + + {/* 새 템플릿 버튼 */} + <Button variant="outline" size="sm" onClick={() => setShowCategoryDialog(true)}> + 카테고리 관리 + </Button> + {/* 새 템플릿 버튼 */} <Button variant="default" size="sm" onClick={onCreateTemplate}> <Plus className="mr-2 size-4" aria-hidden="true" /> diff --git a/lib/approval-template/table/approval-template-table.tsx b/lib/approval-template/table/approval-template-table.tsx index d7f0e478..84d615a8 100644 --- a/lib/approval-template/table/approval-template-table.tsx +++ b/lib/approval-template/table/approval-template-table.tsx @@ -15,7 +15,6 @@ import { getApprovalTemplateList } from '../service'; import { type ApprovalTemplate } from '../service'; import { ApprovalTemplateTableToolbarActions } from './approval-template-table-toolbar-actions'; import { CreateApprovalTemplateSheet } from './create-approval-template-sheet'; -import { UpdateApprovalTemplateSheet } from './update-approval-template-sheet'; import { DuplicateApprovalTemplateSheet } from './duplicate-approval-template-sheet'; import { DeleteApprovalTemplateDialog } from './delete-approval-template-dialog'; @@ -27,7 +26,6 @@ interface ApprovalTemplateTableProps { export function ApprovalTemplateTable({ promises }: ApprovalTemplateTableProps) { const [{ data, pageCount }] = React.use(promises); - const [rowAction, setRowAction] = React.useState<DataTableRowAction<ApprovalTemplate> | null>(null); @@ -105,13 +103,6 @@ export function ApprovalTemplateTable({ promises }: ApprovalTemplateTableProps) onOpenChange={setShowCreateSheet} /> - {/* 템플릿 수정 Sheet */} - <UpdateApprovalTemplateSheet - open={rowAction?.type === "update"} - onOpenChange={() => setRowAction(null)} - template={rowAction?.type === "update" ? rowAction.row.original : null} - /> - {/* 템플릿 복제 Sheet */} <DuplicateApprovalTemplateSheet open={rowAction?.type === "duplicate"} diff --git a/lib/approval-template/table/category-management-dialog.tsx b/lib/approval-template/table/category-management-dialog.tsx new file mode 100644 index 00000000..7f8b202d --- /dev/null +++ b/lib/approval-template/table/category-management-dialog.tsx @@ -0,0 +1,515 @@ +"use client" + +import * as React from "react" +import { Loader, Plus, Settings, Trash, Edit, Eye, EyeOff } from "lucide-react" +import { toast } from "sonner" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" + +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table" +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from "@/components/ui/alert-dialog" +import { Badge } from "@/components/ui/badge" + +import { type ApprovalTemplateCategory } from "../category-service" +import { + createApprovalTemplateCategory, + updateApprovalTemplateCategory, + deleteApprovalTemplateCategory, + getApprovalTemplateCategoryList, + getActiveApprovalTemplateCategories, +} from "../category-service" +import { + createApprovalTemplateCategorySchema, + updateApprovalTemplateCategorySchema, + type CreateApprovalTemplateCategorySchema, + type UpdateApprovalTemplateCategorySchema, +} from "../category-validations" + +interface CategoryManagementDialogProps extends React.ComponentPropsWithRef<typeof Dialog> { + showTrigger?: boolean + onSuccess?: () => void +} + +export function CategoryManagementDialog({ + showTrigger = true, + onSuccess, + ...props +}: CategoryManagementDialogProps) { + const [categories, setCategories] = React.useState<ApprovalTemplateCategory[]>([]) + const [isLoading, setIsLoading] = React.useState(false) + const [editingCategory, setEditingCategory] = React.useState<ApprovalTemplateCategory | null>(null) + const [deletingCategory, setDeletingCategory] = React.useState<ApprovalTemplateCategory | null>(null) + const [showCreateForm, setShowCreateForm] = React.useState(false) + + // 폼 상태 + const createForm = useForm<CreateApprovalTemplateCategorySchema>({ + resolver: zodResolver(createApprovalTemplateCategorySchema), + defaultValues: { + name: "", + description: "", + sortOrder: 0, + }, + }) + + const updateForm = useForm<UpdateApprovalTemplateCategorySchema>({ + resolver: zodResolver(updateApprovalTemplateCategorySchema), + defaultValues: { + name: "", + description: "", + isActive: true, + sortOrder: 0, + }, + }) + + // 카테고리 목록 로드 + const loadCategories = React.useCallback(async () => { + setIsLoading(true) + try { + const result = await getApprovalTemplateCategoryList({ + page: 1, + perPage: 100, // 충분히 큰 수로 모든 카테고리 로드 + sort: [ + { id: 'sortOrder', desc: false }, + { id: 'name', desc: false } + ], + }) + setCategories(result.data) + } catch (error) { + toast.error("카테고리 목록을 불러오는데 실패했습니다.") + } finally { + setIsLoading(false) + } + }, []) + + React.useEffect(() => { + if (props.open) { + loadCategories() + } + }, [props.open, loadCategories]) + + // 생성 핸들러 + const handleCreate = async (data: CreateApprovalTemplateCategorySchema) => { + try { + // 임시 사용자 ID (실제로는 세션에서 가져와야 함) + const userId = 1 // TODO: 실제 사용자 ID로 변경 + + await createApprovalTemplateCategory({ + ...data, + createdBy: userId, + }) + + toast.success("카테고리가 생성되었습니다.") + createForm.reset() + setShowCreateForm(false) + loadCategories() + onSuccess?.() + } catch (error) { + toast.error(error instanceof Error ? error.message : "카테고리 생성에 실패했습니다.") + } + } + + // 수정 핸들러 + const handleUpdate = async (data: UpdateApprovalTemplateCategorySchema) => { + if (!editingCategory) return + + try { + // 임시 사용자 ID (실제로는 세션에서 가져와야 함) + const userId = 1 // TODO: 실제 사용자 ID로 변경 + + await updateApprovalTemplateCategory(editingCategory.id, { + ...data, + updatedBy: userId, + }) + + toast.success("카테고리가 수정되었습니다.") + setEditingCategory(null) + updateForm.reset() + loadCategories() + onSuccess?.() + } catch (error) { + toast.error(error instanceof Error ? error.message : "카테고리 수정에 실패했습니다.") + } + } + + // 삭제 핸들러 + const handleDelete = async () => { + if (!deletingCategory) return + + try { + // 임시 사용자 ID (실제로는 세션에서 가져와야 함) + const userId = 1 // TODO: 실제 사용자 ID로 변경 + + const result = await deleteApprovalTemplateCategory(deletingCategory.id, userId) + if (result.error) { + toast.error(result.error) + } else { + toast.success("카테고리가 삭제되었습니다.") + loadCategories() + onSuccess?.() + } + } catch (error) { + toast.error("카테고리 삭제에 실패했습니다.") + } finally { + setDeletingCategory(null) + } + } + + // 수정 폼 열기 + const openEditForm = (category: ApprovalTemplateCategory) => { + setEditingCategory(category) + updateForm.reset({ + name: category.name, + description: category.description || "", + isActive: category.isActive, + sortOrder: category.sortOrder, + }) + } + + const trigger = showTrigger ? ( + <DialogTrigger asChild> + <Button variant="outline" size="sm"> + <Settings className="mr-2 size-4" aria-hidden="true" /> + 카테고리 관리 + </Button> + </DialogTrigger> + ) : null + + return ( + <> + {trigger} + <Dialog {...props}> + <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto"> + <DialogHeader> + <DialogTitle>결재 템플릿 카테고리 관리</DialogTitle> + <DialogDescription> + 결재 템플릿의 카테고리를 관리합니다. 카테고리는 부서별로 분류하여 사용하세요. + </DialogDescription> + </DialogHeader> + + <div className="space-y-4"> + {/* 생성 폼 */} + {showCreateForm && ( + <div className="border rounded-lg p-4 space-y-4"> + <h3 className="text-lg font-semibold">새 카테고리 추가</h3> + <Form {...createForm}> + <form onSubmit={createForm.handleSubmit(handleCreate)} className="space-y-4"> + <div className="grid grid-cols-2 gap-4"> + <FormField + control={createForm.control} + name="name" + render={({ field }) => ( + <FormItem> + <FormLabel>카테고리 이름 *</FormLabel> + <FormControl> + <Input placeholder="카테고리 이름을 입력하세요" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={createForm.control} + name="sortOrder" + render={({ field }) => ( + <FormItem> + <FormLabel>정렬 순서</FormLabel> + <FormControl> + <Input + type="number" + placeholder="0" + {...field} + onChange={(e) => field.onChange(parseInt(e.target.value) || 0)} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + <FormField + control={createForm.control} + name="description" + render={({ field }) => ( + <FormItem> + <FormLabel>설명</FormLabel> + <FormControl> + <Textarea + placeholder="카테고리에 대한 설명을 입력하세요" + className="min-h-[80px]" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <div className="flex gap-2"> + <Button type="submit" size="sm"> + <Plus className="mr-2 size-4" /> + 추가 + </Button> + <Button + type="button" + variant="outline" + size="sm" + onClick={() => { + setShowCreateForm(false) + createForm.reset() + }} + > + 취소 + </Button> + </div> + </form> + </Form> + </div> + )} + + {/* 카테고리 목록 */} + <div className="space-y-4"> + <div className="flex items-center justify-between"> + <h3 className="text-lg font-semibold">카테고리 목록</h3> + <Button + variant="outline" + size="sm" + onClick={() => setShowCreateForm(!showCreateForm)} + > + <Plus className="mr-2 size-4" /> + {showCreateForm ? "취소" : "새 카테고리"} + </Button> + </div> + + {isLoading ? ( + <div className="flex items-center justify-center py-8"> + <Loader className="size-4 animate-spin" /> + <span className="ml-2">로딩 중...</span> + </div> + ) : ( + <Table> + <TableHeader> + <TableRow> + <TableHead>이름</TableHead> + <TableHead>설명</TableHead> + <TableHead>정렬순서</TableHead> + <TableHead>상태</TableHead> + <TableHead className="w-[120px]">작업</TableHead> + </TableRow> + </TableHeader> + <TableBody> + {categories.length === 0 ? ( + <TableRow> + <TableCell colSpan={5} className="text-center py-8 text-muted-foreground"> + 등록된 카테고리가 없습니다. + </TableCell> + </TableRow> + ) : ( + categories.map((category) => ( + <TableRow key={category.id}> + <TableCell className="font-medium">{category.name}</TableCell> + <TableCell className="max-w-[200px] truncate"> + {category.description || "-"} + </TableCell> + <TableCell>{category.sortOrder}</TableCell> + <TableCell> + <Badge variant={category.isActive ? "default" : "secondary"}> + {category.isActive ? ( + <> + <Eye className="mr-1 size-3" /> + 활성 + </> + ) : ( + <> + <EyeOff className="mr-1 size-3" /> + 비활성 + </> + )} + </Badge> + </TableCell> + <TableCell> + <div className="flex gap-1"> + <Button + variant="ghost" + size="sm" + onClick={() => openEditForm(category)} + > + <Edit className="size-4" /> + </Button> + <Button + variant="ghost" + size="sm" + onClick={() => setDeletingCategory(category)} + > + <Trash className="size-4" /> + </Button> + </div> + </TableCell> + </TableRow> + )) + )} + </TableBody> + </Table> + )} + </div> + + {/* 수정 폼 */} + {editingCategory && ( + <div className="border rounded-lg p-4 space-y-4"> + <h3 className="text-lg font-semibold">카테고리 수정</h3> + <Form {...updateForm}> + <form onSubmit={updateForm.handleSubmit(handleUpdate)} className="space-y-4"> + <div className="grid grid-cols-2 gap-4"> + <FormField + control={updateForm.control} + name="name" + render={({ field }) => ( + <FormItem> + <FormLabel>카테고리 이름 *</FormLabel> + <FormControl> + <Input placeholder="카테고리 이름을 입력하세요" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={updateForm.control} + name="sortOrder" + render={({ field }) => ( + <FormItem> + <FormLabel>정렬 순서</FormLabel> + <FormControl> + <Input + type="number" + placeholder="0" + {...field} + onChange={(e) => field.onChange(parseInt(e.target.value) || 0)} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + <FormField + control={updateForm.control} + name="description" + render={({ field }) => ( + <FormItem> + <FormLabel>설명</FormLabel> + <FormControl> + <Textarea + placeholder="카테고리에 대한 설명을 입력하세요" + className="min-h-[80px]" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={updateForm.control} + name="isActive" + render={({ field }) => ( + <FormItem className="flex items-center space-x-2"> + <FormControl> + <input + type="checkbox" + checked={field.value} + onChange={field.onChange} + className="rounded" + /> + </FormControl> + <FormLabel>활성 상태</FormLabel> + <FormMessage /> + </FormItem> + )} + /> + <div className="flex gap-2"> + <Button type="submit" size="sm"> + <Edit className="mr-2 size-4" /> + 수정 + </Button> + <Button + type="button" + variant="outline" + size="sm" + onClick={() => { + setEditingCategory(null) + updateForm.reset() + }} + > + 취소 + </Button> + </div> + </form> + </Form> + </div> + )} + </div> + + <DialogFooter> + <Button variant="outline" onClick={() => props.onOpenChange?.(false)}> + 닫기 + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + + {/* 삭제 확인 다이얼로그 */} + <AlertDialog open={!!deletingCategory} onOpenChange={() => setDeletingCategory(null)}> + <AlertDialogContent> + <AlertDialogHeader> + <AlertDialogTitle>카테고리 삭제</AlertDialogTitle> + <AlertDialogDescription> + "{deletingCategory?.name}" 카테고리를 삭제하시겠습니까? + 이 작업은 되돌릴 수 없습니다. + </AlertDialogDescription> + </AlertDialogHeader> + <AlertDialogFooter> + <AlertDialogCancel>취소</AlertDialogCancel> + <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90"> + 삭제 + </AlertDialogAction> + </AlertDialogFooter> + </AlertDialogContent> + </AlertDialog> + </> + ) +} diff --git a/lib/approval-template/table/create-approval-template-sheet.tsx b/lib/approval-template/table/create-approval-template-sheet.tsx index 7e899175..b8e7eafb 100644 --- a/lib/approval-template/table/create-approval-template-sheet.tsx +++ b/lib/approval-template/table/create-approval-template-sheet.tsx @@ -20,6 +20,7 @@ import { FormDescription, } from "@/components/ui/form" import { Input } from "@/components/ui/input" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Sheet, SheetClose, @@ -31,6 +32,7 @@ import { } from "@/components/ui/sheet" import { createApprovalTemplate } from "../service" +import { getActiveApprovalTemplateCategories, type ApprovalTemplateCategory } from "../category-service" const createSchema = z.object({ name: z.string().min(1, "이름은 필수입니다").max(100, "100자 이하"), @@ -47,6 +49,8 @@ export function CreateApprovalTemplateSheet({ ...props }: CreateApprovalTemplate const [isPending, startTransition] = React.useTransition() const router = useRouter() const { data: session } = useSession() + const [categories, setCategories] = React.useState<ApprovalTemplateCategory[]>([]) + const [isLoadingCategories, setIsLoadingCategories] = React.useState(false) const form = useForm<CreateSchema>({ resolver: zodResolver(createSchema), @@ -58,6 +62,30 @@ export function CreateApprovalTemplateSheet({ ...props }: CreateApprovalTemplate }, }) + // 카테고리 목록 로드 + React.useEffect(() => { + let active = true + const loadCategories = async () => { + if (!props.open) return + + setIsLoadingCategories(true) + try { + const data = await getActiveApprovalTemplateCategories() + if (active) { + setCategories(data) + } + } catch (error) { + console.error('카테고리 로드 실패:', error) + } finally { + if (active) setIsLoadingCategories(false) + } + } + loadCategories() + return () => { + active = false + } + }, [props.open]) + function onSubmit(values: CreateSchema) { startTransition(async () => { if (!session?.user?.id) { @@ -132,10 +160,29 @@ export function CreateApprovalTemplateSheet({ ...props }: CreateApprovalTemplate render={({ field }) => ( <FormItem> <FormLabel>카테고리 (선택)</FormLabel> - <FormControl> - <Input placeholder="카테고리" {...field} /> - </FormControl> - <FormDescription>카테고리를 입력하지 않으면 미분류로 저장됩니다.</FormDescription> + <Select + value={field.value || "none"} + onValueChange={(value) => field.onChange(value === "none" ? undefined : value)} + disabled={isLoadingCategories} + > + <SelectTrigger> + <SelectValue placeholder={isLoadingCategories ? "카테고리 로드 중..." : "카테고리를 선택하세요"} /> + </SelectTrigger> + <SelectContent> + <SelectItem value="none">선택 안함</SelectItem> + {categories + .sort((a, b) => a.sortOrder - b.sortOrder) + .map((category) => ( + <SelectItem key={category.id} value={category.name}> + {category.name} + {category.description && ( + <span className="text-muted-foreground ml-2">({category.description})</span> + )} + </SelectItem> + ))} + </SelectContent> + </Select> + <FormDescription>카테고리를 선택하지 않으면 미분류로 저장됩니다.</FormDescription> <FormMessage /> </FormItem> )} diff --git a/lib/approval-template/table/update-approval-template-sheet.tsx b/lib/approval-template/table/update-approval-template-sheet.tsx deleted file mode 100644 index 05f4069c..00000000 --- a/lib/approval-template/table/update-approval-template-sheet.tsx +++ /dev/null @@ -1,23 +0,0 @@ -"use client" - -import * as React from "react" -import { Sheet } from "@/components/ui/sheet" -import { type ApprovalTemplate } from "@/lib/approval-template/service" - -interface UpdateApprovalTemplateSheetProps extends React.ComponentPropsWithRef<typeof Sheet> { - template: ApprovalTemplate | null -} - -export function UpdateApprovalTemplateSheet({ template, ...props }: UpdateApprovalTemplateSheetProps) { - // 현재 프로젝트 요구사항 범위 내에서는 상세 편집 페이지 또는 별도 에디터가 준비되지 않았으므로 - // 업데이트 시트는 추후 구현합니다. (이메일 템플릿에서는 사용되지 않아 주석 처리되어 있었음) - // 이를 사용하려 할 경우 안내 문구만 표시합니다. - - return ( - <Sheet {...props}> - <div className="p-6 text-sm text-muted-foreground"> - 템플릿 편집 기능은 아직 구현되지 않았습니다. - </div> - </Sheet> - ) -} |