summaryrefslogtreecommitdiff
path: root/lib/welding/table
diff options
context:
space:
mode:
Diffstat (limited to 'lib/welding/table')
-rw-r--r--lib/welding/table/ocr-table-columns.tsx115
-rw-r--r--lib/welding/table/ocr-table-toolbar-actions.tsx96
-rw-r--r--lib/welding/table/ocr-table.tsx16
-rw-r--r--lib/welding/table/update-ocr-row-sheet.tsx187
4 files changed, 339 insertions, 75 deletions
diff --git a/lib/welding/table/ocr-table-columns.tsx b/lib/welding/table/ocr-table-columns.tsx
index 85830405..d1aefe06 100644
--- a/lib/welding/table/ocr-table-columns.tsx
+++ b/lib/welding/table/ocr-table-columns.tsx
@@ -14,11 +14,11 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
-import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
import { toast } from "sonner"
import { formatDate } from "@/lib/utils"
import { OcrRow } from "@/db/schema"
import { type DataTableRowAction } from "@/types/table"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
interface GetColumnsProps {
setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<OcrRow> | null>>
@@ -56,26 +56,16 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
{
accessorKey: "reportNo",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Report No" />
+ <DataTableColumnHeaderSimple column={column} title="Report No" />
),
cell: ({ getValue }) => {
const reportNo = getValue() as string
return (
<div className="flex items-center gap-2">
- <Badge variant="outline" className="font-mono text-xs">
+ {/* <Badge variant="outline" className="font-mono text-xs"> */}
{reportNo || "N/A"}
- </Badge>
- <Button
- variant="ghost"
- size="icon"
- className="size-6"
- onClick={() => {
- navigator.clipboard.writeText(reportNo || "")
- toast.success("Report No copied to clipboard")
- }}
- >
- <Copy className="size-3" />
- </Button>
+ {/* </Badge> */}
+
</div>
)
},
@@ -87,7 +77,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
{
accessorKey: "no",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="No" />
+ <DataTableColumnHeaderSimple column={column} title="No" />
),
cell: ({ getValue }) => {
const no = getValue() as string
@@ -104,7 +94,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
{
accessorKey: "identificationNo",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Identification No" />
+ <DataTableColumnHeaderSimple column={column} title="Identification No" />
),
cell: ({ getValue }) => {
const identificationNo = getValue() as string
@@ -121,7 +111,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
{
accessorKey: "tagNo",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Tag No" />
+ <DataTableColumnHeaderSimple column={column} title="Tag No" />
),
cell: ({ getValue }) => {
const tagNo = getValue() as string
@@ -138,7 +128,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
{
accessorKey: "jointNo",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Joint No" />
+ <DataTableColumnHeaderSimple column={column} title="Joint No" />
),
cell: ({ getValue }) => {
const jointNo = getValue() as string
@@ -155,7 +145,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
{
accessorKey: "jointType",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Joint Type" />
+ <DataTableColumnHeaderSimple column={column} title="Joint Type" />
),
cell: ({ getValue }) => {
const jointType = getValue() as string
@@ -172,7 +162,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
{
accessorKey: "weldingDate",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Welding Date" />
+ <DataTableColumnHeaderSimple column={column} title="Welding Date" />
),
cell: ({ getValue }) => {
const weldingDate = getValue() as string
@@ -189,7 +179,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
{
accessorKey: "confidence",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Confidence" />
+ <DataTableColumnHeaderSimple column={column} title="Confidence" />
),
cell: ({ getValue }) => {
const confidence = parseFloat(getValue() as string) || 0
@@ -209,46 +199,78 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
},
// Source Table 컬럼
+ // {
+ // accessorKey: "sourceTable",
+ // header: ({ column }) => (
+ // <DataTableColumnHeaderSimple column={column} title="Table" />
+ // ),
+ // cell: ({ getValue }) => {
+ // const sourceTable = getValue() as number
+ // return (
+ // <div className="text-center">
+ // <Badge variant="outline" className="text-xs">
+ // T{sourceTable}
+ // </Badge>
+ // </div>
+ // )
+ // },
+ // enableSorting: true,
+ // },
+
+ // // Source Row 컬럼
+ // {
+ // accessorKey: "sourceRow",
+ // header: ({ column }) => (
+ // <DataTableColumnHeaderSimple column={column} title="Row" />
+ // ),
+ // cell: ({ getValue }) => {
+ // const sourceRow = getValue() as number
+ // return (
+ // <div className="text-center text-sm text-muted-foreground">
+ // {sourceRow}
+ // </div>
+ // )
+ // },
+ // enableSorting: true,
+ // },
+
+
{
- accessorKey: "sourceTable",
+ accessorKey: "userName",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Table" />
+ <DataTableColumnHeaderSimple column={column} title="User Name" />
),
cell: ({ getValue }) => {
- const sourceTable = getValue() as number
+ const userName = getValue() as string
return (
- <div className="text-center">
- <Badge variant="outline" className="text-xs">
- T{sourceTable}
- </Badge>
+ <div className="text-sm">
+ {userName || "-"}
</div>
)
},
enableSorting: true,
},
- // Source Row 컬럼
{
- accessorKey: "sourceRow",
+ accessorKey: "userEmail",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="Row" />
+ <DataTableColumnHeaderSimple column={column} title="User Email" />
),
cell: ({ getValue }) => {
- const sourceRow = getValue() as number
+ const userEmail = getValue() as string
return (
- <div className="text-center text-sm text-muted-foreground">
- {sourceRow}
+ <div className="text-sm">
+ {userEmail || "-"}
</div>
)
},
enableSorting: true,
},
-
// Created At 컬럼
{
accessorKey: "createdAt",
header: ({ column }) => (
- <DataTableColumnHeader column={column} title="생성일" />
+ <DataTableColumnHeaderSimple column={column} title="생성일" />
),
cell: ({ cell }) => {
const date = cell.getValue() as Date
@@ -276,24 +298,17 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40">
- <DropdownMenuItem
+ <DropdownMenuItem
onClick={() => {
- const rowData = row.original
- navigator.clipboard.writeText(JSON.stringify(rowData, null, 2))
- toast.success("Row data copied to clipboard")
+ setRowAction({ type: "update", row })
}}
+ // className="text-destructive focus:text-destructive"
>
- <Copy className="mr-2 size-4" aria-hidden="true" />
- Copy Row Data
+ Update
</DropdownMenuItem>
+
<DropdownMenuSeparator />
- <DropdownMenuItem
- onClick={() => {
- setRowAction({ type: "view", row })
- }}
- >
- View Details
- </DropdownMenuItem>
+
<DropdownMenuItem
onClick={() => {
setRowAction({ type: "delete", row })
diff --git a/lib/welding/table/ocr-table-toolbar-actions.tsx b/lib/welding/table/ocr-table-toolbar-actions.tsx
index 001b21cb..6c6d0637 100644
--- a/lib/welding/table/ocr-table-toolbar-actions.tsx
+++ b/lib/welding/table/ocr-table-toolbar-actions.tsx
@@ -39,6 +39,24 @@ export function OcrTableToolbarActions({ table }: OcrTableToolbarActionsProps) {
const [selectedFile, setSelectedFile] = React.useState<File | null>(null)
const fileInputRef = React.useRef<HTMLInputElement>(null)
+ // 다이얼로그 닫기 핸들러 - 업로드 중에는 닫기 방지
+ const handleDialogOpenChange = (open: boolean) => {
+ // 다이얼로그를 닫으려고 할 때
+ if (!open) {
+ // 업로드가 진행 중이면 닫기를 방지
+ if (isUploading && uploadProgress?.stage !== "complete") {
+ toast.warning("Cannot close while processing. Please wait for completion.", {
+ description: "OCR processing is in progress..."
+ })
+ return // 다이얼로그를 닫지 않음
+ }
+
+ // 업로드가 진행 중이 아니거나 완료되었으면 초기화 후 닫기
+ resetUpload()
+ }
+
+ setIsUploadDialogOpen(open)
+ }
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0]
@@ -142,11 +160,7 @@ export function OcrTableToolbarActions({ table }: OcrTableToolbarActionsProps) {
// 성공 후 다이얼로그 닫기 및 상태 초기화
setTimeout(() => {
setIsUploadDialogOpen(false)
- setSelectedFile(null)
- setUploadProgress(null)
- if (fileInputRef.current) {
- fileInputRef.current.value = ''
- }
+ resetUpload()
// 테이블 새로고침
window.location.reload()
@@ -177,21 +191,60 @@ export function OcrTableToolbarActions({ table }: OcrTableToolbarActionsProps) {
}
}
+ // Cancel 버튼 핸들러
+ const handleCancelClick = () => {
+ if (isUploading && uploadProgress?.stage !== "complete") {
+ // 업로드 진행 중이면 취소 불가능 메시지
+ toast.warning("Cannot cancel while processing. Please wait for completion.", {
+ description: "OCR processing cannot be interrupted safely."
+ })
+ } else {
+ // 업로드 중이 아니거나 완료되었으면 다이얼로그 닫기
+ setIsUploadDialogOpen(false)
+ resetUpload()
+ }
+ }
+
return (
<div className="flex items-center gap-2">
{/* OCR 업로드 다이얼로그 */}
- <Dialog open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen}>
+ <Dialog open={isUploadDialogOpen} onOpenChange={handleDialogOpenChange}>
<DialogTrigger asChild>
<Button variant="samsung" size="sm" className="gap-2">
<Upload className="size-4" aria-hidden="true" />
<span className="hidden sm:inline">Upload OCR</span>
</Button>
</DialogTrigger>
- <DialogContent className="sm:max-w-md">
+ <DialogContent
+ className="sm:max-w-md"
+ // 업로드 중에는 ESC 키로도 닫기 방지
+ onEscapeKeyDown={(e) => {
+ if (isUploading && uploadProgress?.stage !== "complete") {
+ e.preventDefault()
+ toast.warning("Cannot close while processing. Please wait for completion.")
+ }
+ }}
+ // 업로드 중에는 외부 클릭으로도 닫기 방지
+ onInteractOutside={(e) => {
+ if (isUploading && uploadProgress?.stage !== "complete") {
+ e.preventDefault()
+ toast.warning("Cannot close while processing. Please wait for completion.")
+ }
+ }}
+ >
<DialogHeader>
- <DialogTitle>Upload Document for OCR</DialogTitle>
+ <DialogTitle className="flex items-center gap-2">
+ Upload Document for OCR
+ {/* 업로드 중일 때 로딩 인디케이터 표시 */}
+ {isUploading && uploadProgress?.stage !== "complete" && (
+ <Loader2 className="size-4 animate-spin text-muted-foreground" />
+ )}
+ </DialogTitle>
<DialogDescription>
- Upload a PDF or image file to extract table data using OCR technology.
+ {isUploading && uploadProgress?.stage !== "complete"
+ ? "Processing in progress. Please do not close this dialog."
+ : "Upload a PDF or image file to extract table data using OCR technology."
+ }
</DialogDescription>
</DialogHeader>
@@ -239,6 +292,16 @@ export function OcrTableToolbarActions({ table }: OcrTableToolbarActionsProps) {
<p className="text-xs text-muted-foreground">
{uploadProgress.message}
</p>
+
+ {/* 진행 중일 때 안내 메시지 */}
+ {isUploading && uploadProgress.stage !== "complete" && (
+ <div className="flex items-center gap-2 p-2 bg-blue-50 dark:bg-blue-950/20 rounded-md">
+ <Loader2 className="size-3 animate-spin text-blue-600" />
+ <p className="text-xs text-blue-700 dark:text-blue-300">
+ Please wait... This dialog will close automatically when complete.
+ </p>
+ </div>
+ )}
</div>
)}
@@ -247,18 +310,10 @@ export function OcrTableToolbarActions({ table }: OcrTableToolbarActionsProps) {
<Button
variant="outline"
size="sm"
- onClick={() => {
- if (isUploading) {
- // 업로드 중이면 취소 불가능하다는 메시지
- toast.warning("Cannot cancel while processing. Please wait...")
- } else {
- setIsUploadDialogOpen(false)
- resetUpload()
- }
- }}
- disabled={isUploading && uploadProgress?.stage !== "complete"}
+ onClick={handleCancelClick}
+ disabled={false} // 항상 클릭 가능하지만 핸들러에서 처리
>
- {isUploading ? "Close" : "Cancel"}
+ {isUploading && uploadProgress?.stage !== "complete" ? "Close" : "Cancel"}
</Button>
<Button
size="sm"
@@ -277,6 +332,7 @@ export function OcrTableToolbarActions({ table }: OcrTableToolbarActionsProps) {
</div>
</DialogContent>
</Dialog>
+
{/* Export 버튼 */}
<Button
variant="outline"
diff --git a/lib/welding/table/ocr-table.tsx b/lib/welding/table/ocr-table.tsx
index 91af1c67..e14c53d1 100644
--- a/lib/welding/table/ocr-table.tsx
+++ b/lib/welding/table/ocr-table.tsx
@@ -15,6 +15,7 @@ import { OcrTableToolbarActions } from "./ocr-table-toolbar-actions"
import { getColumns } from "./ocr-table-columns"
import { OcrRow } from "@/db/schema"
import { getOcrRows } from "../service"
+import { UpdateOcrRowSheet } from "./update-ocr-row-sheet"
interface ItemsTableProps {
promises: Promise<
@@ -74,8 +75,8 @@ export function OcrTable({ promises }: ItemsTableProps) {
type: "text",
// group: "Basic Info",
},
-
-
+
+
{
id: "identificationNo",
label: "Identification No",
@@ -88,19 +89,19 @@ export function OcrTable({ promises }: ItemsTableProps) {
type: "text",
// group: "Metadata",
},
- {
+ {
id: "jointNo",
label: "Joint No",
type: "text",
// group: "Metadata",
},
- {
+ {
id: "weldingDate",
label: "Welding Date",
type: "date",
// group: "Metadata",
},
- {
+ {
id: "createdAt",
label: "생성일",
type: "date",
@@ -138,6 +139,11 @@ export function OcrTable({ promises }: ItemsTableProps) {
<OcrTableToolbarActions table={table} />
</DataTableAdvancedToolbar>
</DataTable>
+ <UpdateOcrRowSheet
+ open={rowAction?.type === "update"}
+ onOpenChange={() => setRowAction(null)}
+ ocrRow={rowAction?.type === "update" ? rowAction.row.original : null}
+ />
</>
)
}
diff --git a/lib/welding/table/update-ocr-row-sheet.tsx b/lib/welding/table/update-ocr-row-sheet.tsx
new file mode 100644
index 00000000..cbb4f030
--- /dev/null
+++ b/lib/welding/table/update-ocr-row-sheet.tsx
@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { OcrRow } from "@/db/schema"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet"
+
+import { modifyOcrRow } from "../service"
+import { updateOcrRowSchema, type UpdateOcrRowSchema } from "../validation"
+
+interface UpdateOcrRowSheetProps
+ extends React.ComponentPropsWithRef<typeof Sheet> {
+ ocrRow: OcrRow | null
+}
+
+export function UpdateOcrRowSheet({ ocrRow, ...props }: UpdateOcrRowSheetProps) {
+ const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+ const form = useForm<UpdateOcrRowSchema>({
+ resolver: zodResolver(updateOcrRowSchema),
+ defaultValues: {
+ identificationNo: ocrRow?.identificationNo ?? "",
+ tagNo: ocrRow?.tagNo ?? "",
+ weldingDate: ocrRow?.weldingDate ?? "",
+ jointType: ocrRow?.jointType ?? "",
+ },
+ })
+
+ React.useEffect(() => {
+ if (ocrRow) {
+ form.reset({
+ identificationNo: ocrRow.identificationNo ?? "",
+ tagNo: ocrRow.tagNo ?? "",
+ weldingDate: ocrRow.weldingDate ?? "",
+ jointType: ocrRow.jointType ?? "",
+ })
+ }
+ }, [ocrRow, form])
+
+ function onSubmit(input: UpdateOcrRowSchema) {
+ startUpdateTransition(async () => {
+ if (!ocrRow) return
+
+ const { error } = await modifyOcrRow({
+ id: ocrRow.id,
+ ...input,
+ })
+
+ if (error) {
+ toast.error(error)
+ return
+ }
+
+ form.reset()
+ props.onOpenChange?.(false)
+ toast.success("OCR 행이 업데이트되었습니다")
+ })
+ }
+
+
+
+ return (
+ <Sheet {...props}>
+ <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+ <SheetHeader className="text-left">
+ <SheetTitle>OCR 행 업데이트</SheetTitle>
+ <SheetDescription>
+ OCR 행의 세부 정보를 수정하고 변경 사항을 저장하세요
+ </SheetDescription>
+ </SheetHeader>
+ <Form {...form}>
+ <form
+ onSubmit={form.handleSubmit(onSubmit)}
+ className="flex flex-col gap-4"
+ >
+ <FormField
+ control={form.control}
+ name="identificationNo"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Identification No</FormLabel>
+ <FormControl>
+ <Input
+ placeholder="식별 번호를 입력하세요"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="tagNo"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Tag No</FormLabel>
+ <FormControl>
+ <Input
+ placeholder="태그 번호를 입력하세요"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="weldingDate"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Welding Date</FormLabel>
+ <FormControl>
+ <Input
+ placeholder="용접 날짜를 입력하세요 (예: 2024-12-01)"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="jointType"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Joint Type</FormLabel>
+ <FormControl>
+ <Input
+ placeholder="조인트 타입을 입력하세요"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+ <SheetClose asChild>
+ <Button type="button" variant="outline">
+ 취소
+ </Button>
+ </SheetClose>
+ <Button disabled={isUpdatePending}>
+ {isUpdatePending && (
+ <Loader
+ className="mr-2 size-4 animate-spin"
+ aria-hidden="true"
+ />
+ )}
+ 저장
+ </Button>
+ </SheetFooter>
+ </form>
+ </Form>
+ </SheetContent>
+ </Sheet>
+ )
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 05:28:46 +0000