diff options
18 files changed, 1227 insertions, 866 deletions
diff --git a/lib/docu-list-rule/code-groups/service.ts b/lib/docu-list-rule/code-groups/service.ts index 34ec5610..2c30cedb 100644 --- a/lib/docu-list-rule/code-groups/service.ts +++ b/lib/docu-list-rule/code-groups/service.ts @@ -6,28 +6,18 @@ import { codeGroups, comboBoxSettings, documentClasses } from "@/db/schema/docu- import { eq, sql, count } from "drizzle-orm" import { unstable_noStore } from "next/cache" -// Code Groups 목록 조회 -export async function getCodeGroups(input: { - page: number - perPage: number - search?: string - sort?: Array<{ id: string; desc: boolean }> - filters?: Array<{ id: string; value: string }> - joinOperator?: "and" | "or" - flags?: string[] - groupId?: string - description?: string - controlType?: string - isActive?: string -} | any) { +// Code Groups 목록 조회 +export async function getCodeGroups(input: any) { unstable_noStore() try { - const { page, perPage, sort, search } = input + const { page, perPage, search, filters, joinOperator } = input const offset = (page - 1) * perPage // 검색 조건 (Document Class 제외) let whereConditions = sql`${codeGroups.groupId} != 'DOC_CLASS'` + + // 검색어 필터링 if (search) { const searchTerm = `%${search}%` whereConditions = sql`${codeGroups.groupId} != 'DOC_CLASS' AND ( @@ -38,33 +28,50 @@ export async function getCodeGroups(input: { )` } - // 정렬 + // 고급 필터링 (단순화) + if (filters && filters.length > 0) { + const filterConditions = filters.map(filter => { + const { id, value } = filter + if (!value || Array.isArray(value)) return null + + switch (id) { + case "groupId": + return sql`${codeGroups.groupId} ILIKE ${`%${value}%`}` + case "description": + return sql`${codeGroups.description} ILIKE ${`%${value}%`}` + case "codeFormat": + return sql`${codeGroups.codeFormat} ILIKE ${`%${value}%`}` + case "controlType": + return sql`${codeGroups.controlType} = ${value}` + case "isActive": + return sql`${codeGroups.isActive} = ${value === "true"}` + case "createdAt": + return sql`${codeGroups.createdAt}::text ILIKE ${`%${value}%`}` + default: + return null + } + }).filter(Boolean) + + if (filterConditions.length > 0) { + const operator = joinOperator === "or" ? sql` OR ` : sql` AND ` + const combinedFilters = filterConditions.reduce((acc, condition, index) => { + if (index === 0) return condition + return sql`${acc}${operator}${condition}` + }) + + whereConditions = sql`${whereConditions} AND (${combinedFilters})` + } + } + + // 정렬 (안전한 필드 체크 적용) let orderBy = sql`${codeGroups.createdAt} DESC` - if (sort && sort.length > 0) { - const sortField = sort[0] - const direction = sortField.desc ? sql`DESC` : sql`ASC` - - switch (sortField.id) { - case "groupId": - orderBy = sql`${codeGroups.groupId} ${direction}` - break - case "description": - orderBy = sql`${codeGroups.description} ${direction}` - break - case "codeFormat": - orderBy = sql`${codeGroups.codeFormat} ${direction}` - break - case "controlType": - orderBy = sql`${codeGroups.controlType} ${direction}` - break - case "isActive": - orderBy = sql`${codeGroups.isActive} ${direction}` - break - case "createdAt": - orderBy = sql`${codeGroups.createdAt} ${direction}` - break - default: - orderBy = sql`${codeGroups.createdAt} DESC` + if (input.sort && input.sort.length > 0) { + const sortField = input.sort[0] + // 안전성 체크: 필드가 실제 테이블에 존재하는지 확인 + if (sortField && sortField.id && typeof sortField.id === "string" && sortField.id in codeGroups) { + const direction = sortField.desc ? sql`DESC` : sql`ASC` + const col = codeGroups[sortField.id as keyof typeof codeGroups] + orderBy = sql`${col} ${direction}` } } diff --git a/lib/docu-list-rule/code-groups/table/code-groups-table-columns.tsx b/lib/docu-list-rule/code-groups/table/code-groups-table-columns.tsx index cb6cdf8b..c15dd676 100644 --- a/lib/docu-list-rule/code-groups/table/code-groups-table-columns.tsx +++ b/lib/docu-list-rule/code-groups/table/code-groups-table-columns.tsx @@ -1,3 +1,4 @@ + "use client" import * as React from "react" diff --git a/lib/docu-list-rule/code-groups/table/code-groups-table.tsx b/lib/docu-list-rule/code-groups/table/code-groups-table.tsx index 6d8bb907..c10d3445 100644 --- a/lib/docu-list-rule/code-groups/table/code-groups-table.tsx +++ b/lib/docu-list-rule/code-groups/table/code-groups-table.tsx @@ -1,5 +1,6 @@ "use client"; import * as React from "react"; +import { useRouter } from "next/navigation"; import { useDataTable } from "@/hooks/use-data-table"; import { DataTable } from "@/components/data-table/data-table"; import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"; @@ -8,7 +9,6 @@ import type { DataTableFilterField, DataTableRowAction, } from "@/types/table" -import { getCodeGroups } from "../service"; import { getColumns } from "./code-groups-table-columns"; import { DeleteCodeGroupsDialog } from "./delete-code-groups-dialog"; import { CodeGroupsEditSheet } from "./code-groups-edit-sheet"; @@ -20,14 +20,15 @@ interface CodeGroupsTableProps { } export function CodeGroupsTable({ promises }: CodeGroupsTableProps) { + const router = useRouter(); const [rowAction, setRowAction] = React.useState<DataTableRowAction<typeof codeGroups.$inferSelect> | null>(null); const [{ data, pageCount }] = promises ? React.use(promises) : [{ data: [], pageCount: 0 }]; const refreshData = React.useCallback(async () => { - // 페이지 새로고침으로 처리 - window.location.reload(); - }, []); + // 전체 페이지 새로고침 대신 router.refresh() 사용 (성능 개선) + router.refresh(); + }, [router]); // 컬럼 설정 - 외부 파일에서 가져옴 const columns = React.useMemo( diff --git a/lib/docu-list-rule/combo-box-settings/service.ts b/lib/docu-list-rule/combo-box-settings/service.ts index b603ee71..70046828 100644 --- a/lib/docu-list-rule/combo-box-settings/service.ts +++ b/lib/docu-list-rule/combo-box-settings/service.ts @@ -22,7 +22,7 @@ export async function getComboBoxCodeGroups(input: { unstable_noStore() try { - const { page, perPage, sort, search } = input + const { page, perPage, sort, search, filters, joinOperator } = input const offset = (page - 1) * perPage // Control Type이 combobox인 조건 @@ -38,33 +38,50 @@ export async function getComboBoxCodeGroups(input: { )` } - // 정렬 + // 고급 필터링 + if (filters && filters.length > 0) { + const filterConditions = filters.map(filter => { + const { id, value } = filter + if (!value) return null + + switch (id) { + case "groupId": + return sql`${codeGroups.groupId} ILIKE ${`%${value}%`}` + case "description": + return sql`${codeGroups.description} ILIKE ${`%${value}%`}` + case "codeFormat": + return sql`${codeGroups.codeFormat} ILIKE ${`%${value}%`}` + case "controlType": + return sql`${codeGroups.controlType} = ${value}` + case "isActive": + return sql`${codeGroups.isActive} = ${value === "true"}` + case "createdAt": + return sql`${codeGroups.createdAt}::text ILIKE ${`%${value}%`}` + default: + return null + } + }).filter(Boolean) + + if (filterConditions.length > 0) { + const operator = joinOperator === "or" ? sql` OR ` : sql` AND ` + const combinedFilters = filterConditions.reduce((acc, condition, index) => { + if (index === 0) return condition + return sql`${acc}${operator}${condition}` + }) + + whereConditions = sql`${whereConditions} AND (${combinedFilters})` + } + } + + // 정렬 (안전한 필드 체크 적용) let orderBy = sql`${codeGroups.createdAt} DESC` if (sort && sort.length > 0) { const sortField = sort[0] - const direction = sortField.desc ? sql`DESC` : sql`ASC` - - switch (sortField.id) { - case "groupId": - orderBy = sql`${codeGroups.groupId} ${direction}` - break - case "description": - orderBy = sql`${codeGroups.description} ${direction}` - break - case "codeFormat": - orderBy = sql`${codeGroups.codeFormat} ${direction}` - break - case "controlType": - orderBy = sql`${codeGroups.controlType} ${direction}` - break - case "isActive": - orderBy = sql`${codeGroups.isActive} ${direction}` - break - case "createdAt": - orderBy = sql`${codeGroups.createdAt} ${direction}` - break - default: - orderBy = sql`${codeGroups.createdAt} DESC` + // 안전성 체크: 필드가 실제 테이블에 존재하는지 확인 + if (sortField && sortField.id && typeof sortField.id === "string" && sortField.id in codeGroups) { + const direction = sortField.desc ? sql`DESC` : sql`ASC` + const col = codeGroups[sortField.id as keyof typeof codeGroups] + orderBy = sql`${col} ${direction}` } } @@ -137,30 +154,15 @@ export async function getComboBoxOptions(codeGroupId: number, input?: { )` } - // 정렬 + // 정렬 (안전한 필드 체크 적용) let orderBy = sql`${comboBoxSettings.createdAt} DESC` if (sort && sort.length > 0) { const sortField = sort[0] - const direction = sortField.desc ? sql`DESC` : sql`ASC` - - switch (sortField.id) { - case "code": - orderBy = sql`${comboBoxSettings.code} ${direction}` - break - case "description": - orderBy = sql`${comboBoxSettings.description} ${direction}` - break - case "remark": - orderBy = sql`${comboBoxSettings.remark} ${direction}` - break - case "createdAt": - orderBy = sql`${comboBoxSettings.createdAt} ${direction}` - break - case "updatedAt": - orderBy = sql`${comboBoxSettings.updatedAt} ${direction}` - break - default: - orderBy = sql`${comboBoxSettings.createdAt} DESC` + // 안전성 체크: 필드가 실제 테이블에 존재하는지 확인 + if (sortField && sortField.id && typeof sortField.id === "string" && sortField.id in comboBoxSettings) { + const direction = sortField.desc ? sql`DESC` : sql`ASC` + const col = comboBoxSettings[sortField.id as keyof typeof comboBoxSettings] + orderBy = sql`${col} ${direction}` } } diff --git a/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx b/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx index 1c145c55..0b2a76a4 100644 --- a/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx +++ b/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx @@ -88,13 +88,12 @@ export function ComboBoxOptionsDetailSheet({ const result = await getComboBoxOptions(codeGroup.id, { page: 1, perPage: 10, - search: "", - sort: [{ id: "createdAt", desc: true }], - filters: [], + search: table.getState().globalFilter || "", + sort: table.getState().sorting, + filters: table.getState().columnFilters, joinOperator: "and", }) if (result.success && result.data) { - // isActive 필드가 없는 경우 기본값 true로 설정 const optionsWithIsActive = result.data.map(option => ({ ...option, isActive: (option as any).isActive ?? true @@ -126,6 +125,7 @@ export function ComboBoxOptionsDetailSheet({ enableAdvancedFilter: true, manualSorting: true, manualFiltering: true, + manualPagination: true, // 수동 페이징 활성화 initialState: { sorting: [{ id: "createdAt", desc: true }], columnPinning: { right: ["actions"] }, diff --git a/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table.tsx b/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table.tsx index 356b2706..f6216363 100644 --- a/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table.tsx +++ b/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table.tsx @@ -1,6 +1,7 @@ "use client" import * as React from "react" +import { useRouter } from "next/navigation" import { useDataTable } from "@/hooks/use-data-table" import { DataTable } from "@/components/data-table/data-table" import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" @@ -16,13 +17,15 @@ interface ComboBoxSettingsTableProps { } export function ComboBoxSettingsTable({ promises }: ComboBoxSettingsTableProps) { + const router = useRouter() const rawData = React.use(promises!) const [isDetailSheetOpen, setIsDetailSheetOpen] = React.useState(false) const [selectedCodeGroup, setSelectedCodeGroup] = React.useState<typeof codeGroups.$inferSelect | null>(null) const refreshData = React.useCallback(() => { - window.location.reload() - }, []) + // 전체 페이지 새로고침 대신 router.refresh() 사용 (성능 개선) + router.refresh() + }, [router]) // Detail 버튼 클릭 핸들러 const handleDetail = (codeGroup: typeof codeGroups.$inferSelect) => { diff --git a/lib/docu-list-rule/document-class/service.ts b/lib/docu-list-rule/document-class/service.ts index 04dfa50e..99d85ea5 100644 --- a/lib/docu-list-rule/document-class/service.ts +++ b/lib/docu-list-rule/document-class/service.ts @@ -19,7 +19,7 @@ export async function getDocumentClassCodeGroups(input: { isActive?: string }) { try { - const { page, perPage, sort, search } = input + const { page, perPage, sort, search, filters, joinOperator } = input const offset = (page - 1) * perPage // 기본 조건 @@ -35,27 +35,48 @@ export async function getDocumentClassCodeGroups(input: { )` } - // 정렬 + // 고급 필터링 + if (filters && filters.length > 0) { + const filterConditions = filters.map(filter => { + const { id, value } = filter + if (!value) return null + + switch (id) { + case "code": + return sql`${documentClasses.code} ILIKE ${`%${value}%`}` + case "value": + return sql`${documentClasses.value} ILIKE ${`%${value}%`}` + case "description": + return sql`${documentClasses.description} ILIKE ${`%${value}%`}` + case "isActive": + return sql`${documentClasses.isActive} = ${value === "true"}` + case "createdAt": + return sql`${documentClasses.createdAt}::text ILIKE ${`%${value}%`}` + default: + return null + } + }).filter(Boolean) + + if (filterConditions.length > 0) { + const operator = joinOperator === "or" ? sql` OR ` : sql` AND ` + const combinedFilters = filterConditions.reduce((acc, condition, index) => { + if (index === 0) return condition + return sql`${acc}${operator}${condition}` + }) + + whereConditions = sql`${whereConditions} AND (${combinedFilters})` + } + } + + // 정렬 (안전한 필드 체크 적용) let orderBy = sql`${documentClasses.createdAt} DESC` if (sort && sort.length > 0) { const sortField = sort[0] - const direction = sortField.desc ? sql`DESC` : sql`ASC` - - switch (sortField.id) { - case "code": - orderBy = sql`${documentClasses.code} ${direction}` - break - case "value": - orderBy = sql`${documentClasses.value} ${direction}` - break - case "description": - orderBy = sql`${documentClasses.description} ${direction}` - break - case "createdAt": - orderBy = sql`${documentClasses.createdAt} ${direction}` - break - default: - orderBy = sql`${documentClasses.createdAt} DESC` + // 안전성 체크: 필드가 실제 테이블에 존재하는지 확인 + if (sortField && sortField.id && typeof sortField.id === "string" && sortField.id in documentClasses) { + const direction = sortField.desc ? sql`DESC` : sql`ASC` + const col = documentClasses[sortField.id as keyof typeof documentClasses] + orderBy = sql`${col} ${direction}` } } diff --git a/lib/docu-list-rule/document-class/table/document-class-table.tsx b/lib/docu-list-rule/document-class/table/document-class-table.tsx index bbe79800..e3daac8a 100644 --- a/lib/docu-list-rule/document-class/table/document-class-table.tsx +++ b/lib/docu-list-rule/document-class/table/document-class-table.tsx @@ -1,6 +1,7 @@ "use client" import * as React from "react" +import { useRouter } from "next/navigation" import { useDataTable } from "@/hooks/use-data-table" import { DataTable } from "@/components/data-table/data-table" import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" @@ -18,13 +19,15 @@ interface DocumentClassTableProps { } export function DocumentClassTable({ promises }: DocumentClassTableProps) { + const router = useRouter() const rawData = React.use(promises!) const [rowAction, setRowAction] = React.useState<DataTableRowAction<typeof documentClasses.$inferSelect> | null>(null) const [selectedDocumentClass, setSelectedDocumentClass] = React.useState<typeof documentClasses.$inferSelect | null>(null) const refreshData = React.useCallback(() => { - window.location.reload() - }, []) + // 전체 페이지 새로고침 대신 router.refresh() 사용 (성능 개선) + router.refresh() + }, [router]) const columns = React.useMemo(() => getColumns({ setRowAction }), [setRowAction]) diff --git a/lib/docu-list-rule/number-type-configs/repository.ts b/lib/docu-list-rule/number-type-configs/repository.ts new file mode 100644 index 00000000..56be1bcf --- /dev/null +++ b/lib/docu-list-rule/number-type-configs/repository.ts @@ -0,0 +1,269 @@ +import db from "@/db/db" +import { documentNumberTypeConfigs } from "@/db/schema/docu-list-rule" +import { codeGroups, documentClasses } from "@/db/schema/docu-list-rule" +import { eq, asc, sql, count, ilike, or, and } from "drizzle-orm" +import { PgTransaction } from "drizzle-orm/pg-core" + +// Number Type Configs 조회 (고급 필터링 지원) +export async function selectNumberTypeConfigs( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db, + params: { + numberTypeId: number + // eslint-disable-next-line @typescript-eslint/no-explicit-any + where?: any + // eslint-disable-next-line @typescript-eslint/no-explicit-any + orderBy?: any[] + offset?: number + limit?: number + search?: string + } +) { + const { numberTypeId, where, orderBy, offset = 0, limit = 10, search } = params + + let query = tx + .select({ + id: documentNumberTypeConfigs.id, + documentNumberTypeId: documentNumberTypeConfigs.documentNumberTypeId, + codeGroupId: documentNumberTypeConfigs.codeGroupId, + documentClassId: documentNumberTypeConfigs.documentClassId, + sdq: documentNumberTypeConfigs.sdq, + description: documentNumberTypeConfigs.description, + remark: documentNumberTypeConfigs.remark, + isActive: documentNumberTypeConfigs.isActive, + createdAt: documentNumberTypeConfigs.createdAt, + updatedAt: documentNumberTypeConfigs.updatedAt, + // Code Group 정보도 함께 가져오기 + codeGroupName: codeGroups.description, + codeGroupControlType: codeGroups.controlType, + // Document Class 정보도 함께 가져오기 + documentClassName: documentClasses.value, + documentClassDescription: documentClasses.description, + }) + .from(documentNumberTypeConfigs) + .leftJoin(codeGroups, eq(documentNumberTypeConfigs.codeGroupId, codeGroups.id)) + .leftJoin(documentClasses, eq(documentNumberTypeConfigs.documentClassId, documentClasses.id)) + + // 기본 조건: 특정 Number Type + let whereCondition = eq(documentNumberTypeConfigs.documentNumberTypeId, numberTypeId) + + // 고급 필터 조건 추가 + if (where) { + whereCondition = and(whereCondition, where) || whereCondition + } + + // 검색 조건 추가 + if (search) { + const searchTerm = `%${search}%` + const searchCondition = or( + ilike(codeGroups.description, searchTerm), + ilike(documentNumberTypeConfigs.description, searchTerm), + ilike(documentNumberTypeConfigs.remark, searchTerm), + ilike(documentClasses.value, searchTerm) + ) + if (searchCondition) { + whereCondition = and(whereCondition, searchCondition) || whereCondition + } + } + + query = query.where(whereCondition) + + // 정렬 적용 + if (orderBy && orderBy.length > 0) { + query = query.orderBy(...orderBy) + } else { + query = query.orderBy(asc(documentNumberTypeConfigs.sdq)) + } + + return query.offset(offset).limit(limit) +} + +// Number Type Configs 개수 조회 +export async function countNumberTypeConfigs( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db, + params: { + numberTypeId: number + // eslint-disable-next-line @typescript-eslint/no-explicit-any + where?: any + search?: string + } +) { + const { numberTypeId, where, search } = params + + let query = tx + .select({ count: count() }) + .from(documentNumberTypeConfigs) + .leftJoin(codeGroups, eq(documentNumberTypeConfigs.codeGroupId, codeGroups.id)) + .leftJoin(documentClasses, eq(documentNumberTypeConfigs.documentClassId, documentClasses.id)) + + // 기본 조건: 특정 Number Type + let whereCondition = eq(documentNumberTypeConfigs.documentNumberTypeId, numberTypeId) + + // 고급 필터 조건 추가 + if (where) { + whereCondition = and(whereCondition, where) || whereCondition + } + + // 검색 조건 추가 + if (search) { + const searchTerm = `%${search}%` + const searchCondition = or( + ilike(codeGroups.description, searchTerm), + ilike(documentNumberTypeConfigs.description, searchTerm), + ilike(documentNumberTypeConfigs.remark, searchTerm), + ilike(documentClasses.value, searchTerm) + ) + if (searchCondition) { + whereCondition = and(whereCondition, searchCondition) || whereCondition + } + } + + const result = await query.where(whereCondition) + return result[0]?.count ?? 0 +} + +// Number Type Config 생성 +export async function insertNumberTypeConfig( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db, + input: { + documentNumberTypeId: number + codeGroupId: number | null + documentClassId: number | null + sdq: number + description?: string + remark?: string + } +) { + return tx + .insert(documentNumberTypeConfigs) + .values({ + documentNumberTypeId: input.documentNumberTypeId, + codeGroupId: input.codeGroupId, + documentClassId: input.documentClassId, + sdq: input.sdq, + description: input.description, + remark: input.remark, + }) + .returning({ id: documentNumberTypeConfigs.id }) +} + +// Number Type Config 수정 +export async function updateNumberTypeConfigById( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db, + id: number, + input: { + codeGroupId: number | null + documentClassId: number | null + sdq: number + description?: string + remark?: string + } +) { + return tx + .update(documentNumberTypeConfigs) + .set({ + codeGroupId: input.codeGroupId, + documentClassId: input.documentClassId, + sdq: input.sdq, + description: input.description, + remark: input.remark, + updatedAt: new Date(), + }) + .where(eq(documentNumberTypeConfigs.id, id)) + .returning({ id: documentNumberTypeConfigs.id }) +} + +// Number Type Config 삭제 +export async function deleteNumberTypeConfigById( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db, + id: number +) { + return tx + .delete(documentNumberTypeConfigs) + .where(eq(documentNumberTypeConfigs.id, id)) +} + +// 삭제할 Config 정보 조회 +export async function selectConfigToDelete( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db, + id: number +) { + return tx + .select({ + documentNumberTypeId: documentNumberTypeConfigs.documentNumberTypeId, + sdq: documentNumberTypeConfigs.sdq, + }) + .from(documentNumberTypeConfigs) + .where(eq(documentNumberTypeConfigs.id, id)) +} + +// 순서 재정렬 (삭제 후) +export async function reorderConfigsAfterDelete( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db, + documentNumberTypeId: number, + deletedSdq: number +) { + return tx + .update(documentNumberTypeConfigs) + .set({ + sdq: sql`${documentNumberTypeConfigs.sdq} - 1`, + updatedAt: new Date(), + }) + .where( + sql`${documentNumberTypeConfigs.documentNumberTypeId} = ${documentNumberTypeId} AND ${documentNumberTypeConfigs.sdq} > ${deletedSdq}` + ) +} + +// 활성화된 Code Groups 조회 +export async function selectActiveCodeGroups( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db +) { + return tx + .select({ + id: codeGroups.id, + groupId: codeGroups.groupId, + description: codeGroups.description, + controlType: codeGroups.controlType, + isActive: codeGroups.isActive, + }) + .from(codeGroups) + .where(eq(codeGroups.isActive, true)) + .orderBy(asc(codeGroups.description)) +} + +// Document Class Code Group ID 조회 +export async function selectDocumentClassCodeGroupId( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db +) { + return tx + .select({ id: codeGroups.id }) + .from(codeGroups) + .where(eq(codeGroups.groupId, 'DOC_CLASS')) + .limit(1) +} + +// 활성화된 Document Classes 조회 +export async function selectActiveDocumentClasses( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + tx: PgTransaction<any, any, any> | typeof db +) { + return tx + .select({ + id: documentClasses.id, + code: documentClasses.code, + value: documentClasses.value, + description: documentClasses.description, + isActive: documentClasses.isActive, + }) + .from(documentClasses) + .where(eq(documentClasses.isActive, true)) + .orderBy(asc(documentClasses.value)) +}
\ No newline at end of file diff --git a/lib/docu-list-rule/number-type-configs/service.ts b/lib/docu-list-rule/number-type-configs/service.ts index 3e2cfc8e..1ba9b8f0 100644 --- a/lib/docu-list-rule/number-type-configs/service.ts +++ b/lib/docu-list-rule/number-type-configs/service.ts @@ -2,60 +2,96 @@ import { revalidatePath } from "next/cache" import db from "@/db/db" -import { documentNumberTypes, documentNumberTypeConfigs } from "@/db/schema/docu-list-rule" -import { codeGroups, documentClasses } from "@/db/schema/docu-list-rule" -import { eq, asc, sql } from "drizzle-orm" import { unstable_noStore } from "next/cache" +import { unstable_cache } from "@/lib/unstable-cache" +import { filterColumns } from "@/lib/filter-columns" +import { documentNumberTypeConfigs, codeGroups, documentClasses } from "@/db/schema/docu-list-rule" +import { asc, desc, eq, sql } from "drizzle-orm" +import { + selectNumberTypeConfigs, + countNumberTypeConfigs, + insertNumberTypeConfig, + updateNumberTypeConfigById, + deleteNumberTypeConfigById, + selectConfigToDelete, + reorderConfigsAfterDelete, + selectActiveCodeGroups, + selectDocumentClassCodeGroupId, + selectActiveDocumentClasses, +} from "./repository" +import { GetNumberTypeConfigsSchema } from "./validation" +// 특정 Number Type의 Configs 조회 (고급 필터링 지원) +export async function getNumberTypeConfigs(input: GetNumberTypeConfigsSchema) { + return unstable_cache( + async () => { + try { + const offset = (input.page - 1) * input.perPage + // 고급 필터링 지원 + const advancedWhere = filterColumns({ + table: documentNumberTypeConfigs, + filters: input.filters, + joinOperator: input.joinOperator, + }) -// 특정 Number Type의 Configs 조회 -export async function getNumberTypeConfigs(numberTypeId: number) { - console.log("=== getNumberTypeConfigs START ===") - console.log("getNumberTypeConfigs called with numberTypeId:", numberTypeId) - - try { - console.log("About to execute database query...") - - const configs = await db - .select({ - id: documentNumberTypeConfigs.id, - documentNumberTypeId: documentNumberTypeConfigs.documentNumberTypeId, - codeGroupId: documentNumberTypeConfigs.codeGroupId, - documentClassId: documentNumberTypeConfigs.documentClassId, - sdq: documentNumberTypeConfigs.sdq, - description: documentNumberTypeConfigs.description, - remark: documentNumberTypeConfigs.remark, - isActive: documentNumberTypeConfigs.isActive, - createdAt: documentNumberTypeConfigs.createdAt, - updatedAt: documentNumberTypeConfigs.updatedAt, - // Code Group 정보도 함께 가져오기 - codeGroupName: codeGroups.description, - codeGroupControlType: codeGroups.controlType, - // Document Class 정보도 함께 가져오기 - documentClassName: documentClasses.value, - documentClassDescription: documentClasses.description, - }) - .from(documentNumberTypeConfigs) - .leftJoin(codeGroups, eq(documentNumberTypeConfigs.codeGroupId, codeGroups.id)) - .leftJoin(documentClasses, eq(documentNumberTypeConfigs.documentClassId, documentClasses.id)) - .where(eq(documentNumberTypeConfigs.documentNumberTypeId, numberTypeId)) - .orderBy(asc(documentNumberTypeConfigs.sdq)) + // 정렬 처리 + const orderBy = input.sort.length > 0 + ? input.sort + .map((item) => { + // 안전성 체크: 필드가 실제 테이블에 존재하는지 확인 + if (!item || !item.id || typeof item.id !== "string" || !(item.id in documentNumberTypeConfigs)) { + return null; + } + const col = documentNumberTypeConfigs[item.id as keyof typeof documentNumberTypeConfigs]; + return item.desc ? desc(col) : asc(col); + }) + .filter((v): v is Exclude<typeof v, null> => v !== null) + : [asc(documentNumberTypeConfigs.sdq)] - + // 트랜잭션 내부에서 Repository 호출 + const { data, total } = await db.transaction(async (tx) => { + const data = await selectNumberTypeConfigs(tx, { + numberTypeId: input.numberTypeId, + where: advancedWhere, + orderBy, + offset, + limit: input.perPage, + search: input.search || undefined, + }) - return { - success: true, - data: configs, - } - } catch (error) { - - return { - success: false, - error: "Failed to fetch number type configs", - data: [], + const total = await countNumberTypeConfigs(tx, { + numberTypeId: input.numberTypeId, + where: advancedWhere, + search: input.search || undefined, + }) + + return { data, total } + }) + + const pageCount = Math.ceil(total / input.perPage) + + return { + success: true, + data, + pageCount, + } + } catch (error) { + console.error("Error fetching number type configs:", error) + return { + success: false, + error: "Failed to fetch number type configs", + data: [], + pageCount: 0, + } + } + }, + [JSON.stringify(input)], // 캐싱 키 + { + revalidate: 300, // 5분 캐시 + tags: ["number-type-configs"], } - } + )() } // Number Type Config 생성 @@ -68,23 +104,16 @@ export async function createNumberTypeConfig(input: { remark?: string }) { try { - const [newConfig] = await db - .insert(documentNumberTypeConfigs) - .values({ - documentNumberTypeId: input.documentNumberTypeId, - codeGroupId: input.codeGroupId, - documentClassId: input.documentClassId, - sdq: input.sdq, - description: input.description, - remark: input.remark, - }) - .returning({ id: documentNumberTypeConfigs.id }) + const result = await db.transaction(async (tx) => { + const [newConfig] = await insertNumberTypeConfig(tx, input) + return newConfig + }) revalidatePath("/evcp/docu-list-rule/number-type-configs") return { success: true, - data: newConfig, + data: result, message: "Number Type Config created successfully" } } catch (error) { @@ -106,24 +135,22 @@ export async function updateNumberTypeConfig(input: { remark?: string }) { try { - const [updatedConfig] = await db - .update(documentNumberTypeConfigs) - .set({ + const result = await db.transaction(async (tx) => { + const [updatedConfig] = await updateNumberTypeConfigById(tx, input.id, { codeGroupId: input.codeGroupId, documentClassId: input.documentClassId, sdq: input.sdq, description: input.description, remark: input.remark, - updatedAt: new Date(), }) - .where(eq(documentNumberTypeConfigs.id, input.id)) - .returning({ id: documentNumberTypeConfigs.id }) + return updatedConfig + }) revalidatePath("/evcp/docu-list-rule/number-type-configs") return { success: true, - data: updatedConfig, + data: result, message: "Number Type Config updated successfully" } } catch (error) { @@ -138,37 +165,24 @@ export async function updateNumberTypeConfig(input: { // Number Type Config 삭제 export async function deleteNumberTypeConfig(id: number) { try { - // 삭제할 항목의 정보를 먼저 가져옴 - const [configToDelete] = await db - .select({ - documentNumberTypeId: documentNumberTypeConfigs.documentNumberTypeId, - sdq: documentNumberTypeConfigs.sdq, - }) - .from(documentNumberTypeConfigs) - .where(eq(documentNumberTypeConfigs.id, id)) + await db.transaction(async (tx) => { + // 삭제할 항목의 정보를 먼저 가져옴 + const [configToDelete] = await selectConfigToDelete(tx, id) - if (!configToDelete) { - return { - success: false, - error: "Config not found" + if (!configToDelete) { + throw new Error("Config not found") } - } - // 항목 삭제 - await db - .delete(documentNumberTypeConfigs) - .where(eq(documentNumberTypeConfigs.id, id)) + // 항목 삭제 + await deleteNumberTypeConfigById(tx, id) - // 같은 Number Type의 남은 항목들 중에서 삭제된 항목보다 큰 순서를 가진 항목들의 순서를 1씩 감소 - await db - .update(documentNumberTypeConfigs) - .set({ - sdq: sql`${documentNumberTypeConfigs.sdq} - 1`, - updatedAt: new Date(), - }) - .where( - sql`${documentNumberTypeConfigs.documentNumberTypeId} = ${configToDelete.documentNumberTypeId} AND ${documentNumberTypeConfigs.sdq} > ${configToDelete.sdq}` + // 같은 Number Type의 남은 항목들 중에서 삭제된 항목보다 큰 순서를 가진 항목들의 순서를 1씩 감소 + await reorderConfigsAfterDelete( + tx, + configToDelete.documentNumberTypeId, + configToDelete.sdq ) + }) revalidatePath("/evcp/docu-list-rule/number-type-configs") @@ -178,6 +192,14 @@ export async function deleteNumberTypeConfig(id: number) { } } catch (error) { console.error("Error deleting number type config:", error) + + if (error instanceof Error && error.message === "Config not found") { + return { + success: false, + error: "Config not found" + } + } + return { success: false, error: "Failed to delete number type config" @@ -187,22 +209,10 @@ export async function deleteNumberTypeConfig(id: number) { // 활성화된 Code Groups 조회 (Config 생성/수정 시 사용) export async function getActiveCodeGroups() { + unstable_noStore() + try { - console.log("getActiveCodeGroups: 함수 시작") - - const codeGroupsData = await db - .select({ - id: codeGroups.id, - groupId: codeGroups.groupId, - description: codeGroups.description, - controlType: codeGroups.controlType, - isActive: codeGroups.isActive, - }) - .from(codeGroups) - .where(eq(codeGroups.isActive, true)) - .orderBy(asc(codeGroups.description)) - - console.log("getActiveCodeGroups: 쿼리 결과", codeGroupsData) + const codeGroupsData = await selectActiveCodeGroups(db) return { success: true, @@ -221,12 +231,7 @@ export async function getActiveCodeGroups() { // Document Class Code Group ID 조회 export async function getDocumentClassCodeGroupId() { try { - const [codeGroup] = await db - .select({ id: codeGroups.id }) - .from(codeGroups) - .where(eq(codeGroups.groupId, 'DOC_CLASS')) - .limit(1) - + const [codeGroup] = await selectDocumentClassCodeGroupId(db) return codeGroup?.id || null } catch (error) { console.error("Error fetching document class code group id:", error) @@ -236,23 +241,20 @@ export async function getDocumentClassCodeGroupId() { // 활성화된 Document Classes 조회 (Config 생성/수정 시 사용) export async function getActiveDocumentClasses() { + unstable_noStore() + try { - console.log("getActiveDocumentClasses: 함수 시작") - const documentClassesData = await db .select({ id: documentClasses.id, code: documentClasses.code, value: documentClasses.value, description: documentClasses.description, - isActive: documentClasses.isActive, }) .from(documentClasses) .where(eq(documentClasses.isActive, true)) .orderBy(asc(documentClasses.value)) - console.log("getActiveDocumentClasses: 쿼리 결과", documentClassesData) - return { success: true, data: documentClassesData, diff --git a/lib/docu-list-rule/number-type-configs/table/drag-drop-table.tsx b/lib/docu-list-rule/number-type-configs/table/drag-drop-table.tsx new file mode 100644 index 00000000..3141e450 --- /dev/null +++ b/lib/docu-list-rule/number-type-configs/table/drag-drop-table.tsx @@ -0,0 +1,193 @@ +"use client" + +import * as React from "react" +import { flexRender } from "@tanstack/react-table" +import { + DndContext, + closestCenter, + KeyboardSensor, + PointerSensor, + useSensor, + useSensors, + DragEndEvent, +} from '@dnd-kit/core' +import { + SortableContext, + sortableKeyboardCoordinates, + verticalListSortingStrategy, +} from '@dnd-kit/sortable' +import { + useSortable, +} from '@dnd-kit/sortable' +import { CSS } from '@dnd-kit/utilities' + +import { cn } from "@/lib/utils" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table" +import { DataTablePagination } from "@/components/data-table/data-table-pagination" + +// 드래그 가능한 행 컴포넌트 +function SortableRow({ + children, + id, + isDragging +}: { + children: React.ReactNode + id: string + isDragging: boolean +}) { + const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id }) + + const style = { + transform: CSS.Transform.toString(transform), + transition, + opacity: isDragging ? 0.5 : 1, + } + + return ( + <TableRow + ref={setNodeRef} + style={style} + className={cn( + "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", + isDragging && "opacity-50" + )} + > + <TableCell className="w-8 p-1 text-center"> + <div + {...attributes} + {...listeners} + className="cursor-grab active:cursor-grabbing inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-6 w-6" + > + ⋮⋮ + </div> + </TableCell> + {children} + </TableRow> + ) +} + +// 커스텀 드래그 앤 드롭 테이블 컴포넌트 +interface DragDropTableProps<TData> { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + table: any + data: TData[] + onDragEnd: (event: DragEndEvent) => void + children?: React.ReactNode + className?: string + maxHeight?: string +} + +export function DragDropTable<TData>({ + table, + data, + onDragEnd, + children, + className, + maxHeight = '35rem' +}: DragDropTableProps<TData>) { + const sensors = useSensors( + useSensor(PointerSensor), + useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), + ) + + return ( + <div className={cn("w-full space-y-2.5 overflow-auto", className)}> + {children} + <div className="max-w-[100vw] overflow-auto" style={{ maxHeight }}> + <DndContext + sensors={sensors} + collisionDetection={closestCenter} + onDragEnd={onDragEnd} + > + <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed"> + <TableHeader> + <TableRow> + <TableHead className="w-8 p-1 text-center"></TableHead> + {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} + {table.getHeaderGroups()[0].headers.map((header: any) => { + if (header.column.getIsGrouped()) { + return null + } + + return ( + <TableHead + key={header.id} + colSpan={header.colSpan} + data-column-id={header.column.id} + className="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]" + style={{ + width: header.getSize(), + }} + > + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + </TableHead> + ) + })} + </TableRow> + </TableHeader> + + <TableBody> + {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} + <SortableContext items={data.map((item: any) => item.id.toString())} strategy={verticalListSortingStrategy}> + {table.getRowModel().rows?.length ? ( + /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ + table.getRowModel().rows.map((row: any) => { + if (row.getIsGrouped()) { + return null + } + + return ( + <SortableRow key={row.id} id={row.id} isDragging={false}> + {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} + {row.getVisibleCells().map((cell: any) => { + if (cell.column.getIsGrouped()) { + return null + } + + return ( + <TableCell + key={cell.id} + data-column-id={cell.column.id} + className="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]" + style={{ + width: cell.column.getSize(), + }} + > + {flexRender(cell.column.columnDef.cell, cell.getContext())} + </TableCell> + ) + })} + </SortableRow> + ) + }) + ) : ( + <TableRow> + <TableCell + colSpan={table.getAllColumns().length + 1} + className="h-24 text-center" + > + No results. + </TableCell> + </TableRow> + )} + </SortableContext> + </TableBody> + </Table> + </DndContext> + </div> + + <div className="flex flex-col gap-2.5"> + <DataTablePagination table={table} /> + </div> + </div> + ) +}
\ No newline at end of file diff --git a/lib/docu-list-rule/number-type-configs/table/number-type-configs-edit-dialog.tsx b/lib/docu-list-rule/number-type-configs/table/number-type-configs-edit-dialog.tsx index d3215958..72ee2698 100644 --- a/lib/docu-list-rule/number-type-configs/table/number-type-configs-edit-dialog.tsx +++ b/lib/docu-list-rule/number-type-configs/table/number-type-configs-edit-dialog.tsx @@ -55,7 +55,7 @@ export function NumberTypeConfigsEditDialog({ React.useEffect(() => { if (data) { setFormData({ - codeGroupId: data.codeGroupId.toString(), + codeGroupId: data.codeGroupId?.toString() || "", // null 체크 추가 sdq: data.sdq.toString(), description: data.description || "", remark: data.remark || "" @@ -100,6 +100,7 @@ export function NumberTypeConfigsEditDialog({ const result = await updateNumberTypeConfig({ id: data.id, codeGroupId: parseInt(formData.codeGroupId), + documentClassId: data.documentClassId, // 누락된 필드 추가 sdq: newSdq, description: formData.description || undefined, remark: formData.remark || undefined, diff --git a/lib/docu-list-rule/number-type-configs/table/number-type-configs-table.tsx b/lib/docu-list-rule/number-type-configs/table/number-type-configs-table.tsx index 89a92a88..3b3d0180 100644 --- a/lib/docu-list-rule/number-type-configs/table/number-type-configs-table.tsx +++ b/lib/docu-list-rule/number-type-configs/table/number-type-configs-table.tsx @@ -2,488 +2,91 @@ import * as React from "react" import { useDataTable } from "@/hooks/use-data-table" -import { flexRender } from "@tanstack/react-table" import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" import type { DataTableAdvancedFilterField, DataTableRowAction } from "@/types/table" +import { arrayMove } from '@dnd-kit/sortable' +import { DragEndEvent } from '@dnd-kit/core' +import { toast } from "sonner" -import { getNumberTypeConfigs, createNumberTypeConfig, getActiveCodeGroups, getActiveDocumentClasses, getDocumentClassCodeGroupId, updateNumberTypeConfig } from "../service" -import { getNumberTypes } from "@/lib/docu-list-rule/number-types/service" +import { getNumberTypeConfigs, updateNumberTypeConfig } from "../service" import { getColumns } from "./number-type-configs-table-columns" import { DeleteNumberTypeConfigsDialog } from "./delete-number-type-configs-dialog" import { NumberTypeConfigsEditDialog } from "./number-type-configs-edit-dialog" +import { NumberTypeSelector } from "./number-type-selector" +import { DragDropTable } from "./drag-drop-table" +import { NumberTypeConfigsToolbarActions } from "./number-type-configs-toolbar-actions" import { documentNumberTypes } from "@/db/schema/docu-list-rule" -import { Plus, Loader2 } from "lucide-react" -import { Button } from "@/components/ui/button" -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog" -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" -import { Textarea } from "@/components/ui/textarea" -import { toast } from "sonner" -import { - DndContext, - closestCenter, - KeyboardSensor, - PointerSensor, - useSensor, - useSensors, - DragEndEvent, -} from '@dnd-kit/core' -import { - arrayMove, - SortableContext, - sortableKeyboardCoordinates, - verticalListSortingStrategy, -} from '@dnd-kit/sortable' -import { - useSortable, -} from '@dnd-kit/sortable' -import { CSS } from '@dnd-kit/utilities' - -import { cn } from "@/lib/utils" -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table" -import { DataTablePagination } from "@/components/data-table/data-table-pagination" import { NumberTypeConfig } from "../../types" +import { GetNumberTypeConfigsSchema } from "../validation" interface NumberTypeConfigsTableProps { promises?: Promise<[{ data: typeof documentNumberTypes.$inferSelect[]; pageCount: number }]> + searchParams: GetNumberTypeConfigsSchema } -// 드래그 가능한 행 컴포넌트 -function SortableRow({ - children, - id, - isDragging -}: { - children: React.ReactNode - id: string - isDragging: boolean -}) { - const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id }) - - const style = { - transform: CSS.Transform.toString(transform), - transition, - opacity: isDragging ? 0.5 : 1, - } - - return ( - <TableRow - ref={setNodeRef} - style={style} - className={cn( - "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", - isDragging && "opacity-50" - )} - > - <TableCell className="w-8 p-1 text-center"> - <div - {...attributes} - {...listeners} - className="cursor-grab active:cursor-grabbing flex items-center justify-center w-5 h-5 text-muted-foreground hover:text-foreground" - > - <span className="text-sm">≡</span> - </div> - </TableCell> - {children} - </TableRow> - ) -} - -// 커스텀 드래그 앤 드롭 테이블 컴포넌트 -function DragDropTable<TData>({ - table, - data, - onDragEnd, - children, - className, - maxHeight = '35rem' -}: { - table: any - data: TData[] - onDragEnd: (event: DragEndEvent) => void - children?: React.ReactNode - className?: string - maxHeight?: string -}) { - const sensors = useSensors( - useSensor(PointerSensor), - useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), - ) - - return ( - <div className={cn("w-full space-y-2.5 overflow-auto", className)}> - {children} - <div className="max-w-[100vw] overflow-auto" style={{ maxHeight }}> - <DndContext - sensors={sensors} - collisionDetection={closestCenter} - onDragEnd={onDragEnd} - > - <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed"> - <TableHeader> - <TableRow> - <TableHead className="w-8 p-1 text-center"></TableHead> - {table.getHeaderGroups()[0].headers.map((header: any) => { - if (header.column.getIsGrouped()) { - return null - } - - return ( - <TableHead - key={header.id} - colSpan={header.colSpan} - data-column-id={header.column.id} - className="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]" - style={{ - width: header.getSize(), - }} - > - {header.isPlaceholder - ? null - : flexRender(header.column.columnDef.header, header.getContext())} - </TableHead> - ) - })} - </TableRow> - </TableHeader> - - <TableBody> - <SortableContext items={data.map((item: any) => item.id.toString())} strategy={verticalListSortingStrategy}> - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row: any) => { - if (row.getIsGrouped()) { - return null - } - - return ( - <SortableRow key={row.id} id={row.id} isDragging={false}> - {row.getVisibleCells().map((cell: any) => { - if (cell.column.getIsGrouped()) { - return null - } - - return ( - <TableCell - key={cell.id} - data-column-id={cell.column.id} - className="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]" - style={{ - width: cell.column.getSize(), - }} - > - {flexRender(cell.column.columnDef.cell, cell.getContext())} - </TableCell> - ) - })} - </SortableRow> - ) - }) - ) : ( - <TableRow> - <TableCell - colSpan={table.getAllColumns().length + 1} - className="h-24 text-center" - > - No results. - </TableCell> - </TableRow> - )} - </SortableContext> - </TableBody> - </Table> - </DndContext> - </div> - - <div className="flex flex-col gap-2.5"> - <DataTablePagination table={table} /> - </div> - </div> - ) -} - -// 툴바 액션 컴포넌트 (incoterms와 동일한 스타일) -function NumberTypeConfigsTableToolbarActions({ - table, - onSuccess, - selectedNumberType, - configsData -}: { - table: any - onSuccess?: () => void - selectedNumberType: number | null - configsData: NumberTypeConfig[] -}) { - const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false) - const [isLoading, setIsLoading] = React.useState(false) - const [formData, setFormData] = React.useState({ codeGroupId: "", description: "", remark: "" }) - const [codeGroups, setCodeGroups] = React.useState<{ id: number; description: string }[]>([]) - const [allOptions, setAllOptions] = React.useState<{ id: string; name: string }[]>([]) +export function NumberTypeConfigsTable({ promises, searchParams }: NumberTypeConfigsTableProps) { + const rawData = React.use(promises!) + const [selectedNumberType, setSelectedNumberType] = React.useState<number | null>(null) + const [configsData, setConfigsData] = React.useState<{ data: NumberTypeConfig[]; pageCount: number }>({ data: [], pageCount: 0 }) + const [rowAction, setRowAction] = React.useState<DataTableRowAction<NumberTypeConfig> | null>(null) - const loadCodeGroups = React.useCallback(async () => { + // configs 데이터 로드 함수 + const fetchConfigs = React.useCallback(async (numberTypeId: number, params?: Partial<GetNumberTypeConfigsSchema>) => { try { - console.log("NumberTypeConfigsTableToolbarActions: Code Groups 로딩 시작") - console.log("NumberTypeConfigsTableToolbarActions: getActiveCodeGroups 함수 호출") - const result = await getActiveCodeGroups() - console.log("NumberTypeConfigsTableToolbarActions: getActiveCodeGroups 결과", result) - console.log("NumberTypeConfigsTableToolbarActions: result.success", result.success) - console.log("NumberTypeConfigsTableToolbarActions: result.data", result.data) - console.log("NumberTypeConfigsTableToolbarActions: result.error", result.error) - + const result = await getNumberTypeConfigs({ + ...searchParams, + ...params, + numberTypeId, + }) if (result.success && result.data) { - console.log("NumberTypeConfigsTableToolbarActions: Code Groups 설정", result.data) - - // 이미 추가된 Code Group들을 제외하고 필터링 - const usedCodeGroupIds = configsData.map(config => config.codeGroupId) - const availableCodeGroups = result.data.filter(codeGroup => - !usedCodeGroupIds.includes(codeGroup.id) - ) - - console.log("NumberTypeConfigsTableToolbarActions: 사용된 Code Group IDs", usedCodeGroupIds) - console.log("NumberTypeConfigsTableToolbarActions: 사용 가능한 Code Groups", availableCodeGroups) - - setCodeGroups(availableCodeGroups) + setConfigsData({ data: result.data, pageCount: result.pageCount }) } else { - console.error("NumberTypeConfigsTableToolbarActions: Code Groups 로딩 실패", result.error) + setConfigsData({ data: [], pageCount: 0 }) } } catch (error) { - console.error("Error loading code groups:", error) - console.error("Error details:", error) + console.error("Error fetching configs:", error) + setConfigsData({ data: [], pageCount: 0 }) } - }, [configsData]) - - + }, [searchParams]) + // Number Types 데이터 로드 및 첫 번째 타입의 configs 데이터 로드 React.useEffect(() => { - loadCodeGroups() - }, [loadCodeGroups]) - - // Code Groups를 옵션 목록으로 만드는 함수 - const combineOptions = React.useCallback(() => { - const codeGroupOptions = codeGroups.map(cg => ({ - id: `cg_${cg.id}`, - name: cg.description - })) - - setAllOptions(codeGroupOptions) - }, [codeGroups]) - - // Code Groups가 변경될 때마다 옵션 목록 업데이트 - React.useEffect(() => { - combineOptions() - }, [combineOptions]) - - // 다이얼로그가 열릴 때마다 Code Groups 다시 로드 - React.useEffect(() => { - if (isAddDialogOpen) { - loadCodeGroups() - } - }, [isAddDialogOpen, loadCodeGroups, configsData]) - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault() - if (!selectedNumberType || !formData.codeGroupId) { - toast.error("필수 필드를 모두 입력해주세요.") - return - } - - const sdq = getNextSdq() - setIsLoading(true) - - try { - // Code Group ID 추출 - const codeGroupId = parseInt(formData.codeGroupId.replace('cg_', '')) - - const result = await createNumberTypeConfig({ - documentNumberTypeId: selectedNumberType, - codeGroupId: codeGroupId, - documentClassId: null, - sdq: sdq, - description: formData.description || undefined, - remark: formData.remark || undefined, - }) - - if (result.success) { - toast.success("Number Type Config가 성공적으로 추가되었습니다.") - setIsAddDialogOpen(false) - setFormData({ codeGroupId: "", description: "", remark: "" }) - onSuccess?.() - } else { - toast.error(result.error || "추가에 실패했습니다.") + const loadData = async () => { + try { + const result = rawData[0] + + if (result.data && result.data.length > 0) { + const firstNumberTypeId = result.data[0].id + setSelectedNumberType(firstNumberTypeId) + + // 첫 번째 타입의 configs 데이터도 바로 로드 + await fetchConfigs(firstNumberTypeId) + } + } catch (error) { + console.error("Error in loadData:", error) } - } catch (error) { - console.error("Error creating number type config:", error) - toast.error("추가 중 오류가 발생했습니다.") - } finally { - setIsLoading(false) } - } - - const getNextSdq = () => { - if (configsData.length === 0) return 1 - const maxSdq = Math.max(...configsData.map(config => config.sdq)) - return maxSdq + 1 - } - - return ( - <div className="flex items-center gap-2"> - {/** 1) 선택된 로우가 있으면 삭제 다이얼로그 */} - {table.getFilteredSelectedRowModel().rows.length > 0 ? ( - <DeleteNumberTypeConfigsDialog - configs={table - .getFilteredSelectedRowModel() - .rows.map((row: any) => row.original)} - onSuccess={() => { - table.toggleAllRowsSelected(false); - onSuccess?.(); - }} - /> - ) : null} - - <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}> - <DialogTrigger asChild> - <Button variant="outline" size="sm" disabled={!selectedNumberType || codeGroups.length === 0}> - <Plus className="mr-2 h-4 w-4" /> - Add - </Button> - </DialogTrigger> - <DialogContent className="max-w-md"> - <DialogHeader> - <DialogTitle>Number Type Config 추가</DialogTitle> - <DialogDescription> - 새로운 구성 요소를 추가합니다. 필수 정보를 입력해주세요. - <span className="text-red-500 mt-1 block text-sm">* 표시된 항목은 필수 입력사항입니다.</span> - </DialogDescription> - </DialogHeader> - <form onSubmit={handleSubmit} className="space-y-4"> - <div className="grid gap-4 py-2"> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="codeGroup" className="text-right"> - Code Group <span className="text-red-500">*</span> - </Label> - <div className="col-span-3"> - <Select - value={formData.codeGroupId} - onValueChange={(value) => setFormData(prev => ({ ...prev, codeGroupId: value }))} - > - <SelectTrigger> - <SelectValue placeholder="Code Group 선택" /> - </SelectTrigger> - <SelectContent> - {allOptions.length > 0 ? ( - allOptions.map((option) => ( - <SelectItem key={option.id} value={option.id}> - {option.name} - </SelectItem> - )) - ) : ( - <div className="px-2 py-1.5 text-sm text-muted-foreground"> - 사용 가능한 옵션이 없습니다. - </div> - )} - </SelectContent> - </Select> - </div> - </div> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="description" className="text-right"> - Description - </Label> - <div className="col-span-3"> - <Input - id="description" - value={formData.description} - onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))} - placeholder="예: PROJECT NO" - /> - </div> - </div> - <div className="grid grid-cols-4 items-center gap-4"> - <Label htmlFor="remark" className="text-right"> - Remark - </Label> - <div className="col-span-3"> - <Textarea - id="remark" - value={formData.remark} - onChange={(e) => setFormData(prev => ({ ...prev, remark: e.target.value }))} - placeholder="비고 사항" - rows={3} - /> - </div> - </div> - </div> - <DialogFooter> - <Button - type="button" - variant="outline" - onClick={() => setIsAddDialogOpen(false)} - disabled={isLoading} - > - 취소 - </Button> - <Button - type="submit" - disabled={isLoading} - > - {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} - {isLoading ? "추가 중..." : "추가"} - </Button> - </DialogFooter> - </form> - </DialogContent> - </Dialog> - </div> - ) -} - -export function NumberTypeConfigsTable({ promises }: NumberTypeConfigsTableProps) { - const rawData = React.use(promises!) - const [selectedNumberType, setSelectedNumberType] = React.useState<number | null>(null) - const [configsData, setConfigsData] = React.useState<NumberTypeConfig[]>([]) - const [rowAction, setRowAction] = React.useState<DataTableRowAction<NumberTypeConfig> | null>(null) - - // 상태 변화 추적 - React.useEffect(() => { - console.log("selectedNumberType changed:", selectedNumberType) - }, [selectedNumberType]) + + loadData() + }, [rawData, fetchConfigs]) - React.useEffect(() => { - console.log("configsData changed:", configsData) - console.log("configsData length:", configsData.length) - }, [configsData]) + // Number Type 변경 핸들러 (서버 사이드 처리 지원) + const handleNumberTypeChange = React.useCallback((numberTypeId: number) => { + setSelectedNumberType(numberTypeId) + // searchParams를 업데이트하여 서버 사이드 필터링 적용 + fetchConfigs(numberTypeId, { page: 1 }) // 페이지 리셋 + }, [fetchConfigs]) // 드래그 종료 핸들러 - const handleDragEnd = async (event: DragEndEvent) => { + const handleDragEnd = React.useCallback(async (event: DragEndEvent) => { const { active, over } = event if (active.id !== over?.id) { - const oldIndex = configsData.findIndex(config => config.id.toString() === active.id) - const newIndex = configsData.findIndex(config => config.id.toString() === over?.id) + const oldIndex = configsData.data.findIndex(config => config.id.toString() === active.id) + const newIndex = configsData.data.findIndex(config => config.id.toString() === over?.id) if (oldIndex !== -1 && newIndex !== -1) { - const newConfigsData = arrayMove(configsData, oldIndex, newIndex) + const newConfigsData = arrayMove(configsData.data, oldIndex, newIndex) // 순서 업데이트 const updatedConfigsData = newConfigsData.map((config, index) => ({ @@ -491,7 +94,7 @@ export function NumberTypeConfigsTable({ promises }: NumberTypeConfigsTableProps sdq: index + 1 })) - setConfigsData(updatedConfigsData) + setConfigsData(prev => ({ ...prev, data: updatedConfigsData })) // 서버에 순서 업데이트 try { @@ -511,92 +114,12 @@ export function NumberTypeConfigsTable({ promises }: NumberTypeConfigsTableProps toast.error("순서 변경 중 오류가 발생했습니다.") // 에러 시 원래 데이터로 복원 if (selectedNumberType) { - const refreshResult = await getNumberTypeConfigs(selectedNumberType) - if (refreshResult.success && refreshResult.data) setConfigsData(refreshResult.data) + await fetchConfigs(selectedNumberType) } } } } - } - - // Number Type Configs를 가져오는 함수 - const fetchConfigs = React.useCallback(async (numberTypeId: number) => { - try { - const result = await getNumberTypeConfigs(numberTypeId) - if (result.success && result.data) { - console.log("Configs data loaded:", result.data) - setConfigsData(result.data) - } - } catch (error) { - console.error("Error loading configs:", error) - } - }, []) - - // Number Types 데이터 로드 및 첫 번째 타입의 configs 데이터 로드 - React.useEffect(() => { - const loadData = async () => { - console.log("useEffect triggered - rawData:", !!rawData) - - try { - const result = rawData[0] - console.log("Raw data result:", result) - - if (result.data && result.data.length > 0) { - const firstNumberTypeId = result.data[0].id - console.log("Setting first number type ID:", firstNumberTypeId) - setSelectedNumberType(firstNumberTypeId) - - // 첫 번째 타입의 configs 데이터도 바로 로드 - console.log("Loading configs for first number type:", firstNumberTypeId) - const configsResult = await getNumberTypeConfigs(firstNumberTypeId) - console.log("Configs result received:", configsResult) - - if (configsResult && configsResult.success && configsResult.data) { - console.log("Setting configs data:", configsResult.data) - setConfigsData(configsResult.data) - } else { - console.log("Configs result not successful or no data:", configsResult) - setConfigsData([]) - } - } - } catch (error) { - console.error("Error in loadData:", error) - } - } - - loadData() - }, [rawData]) - - // selectedNumberType이 변경될 때 configs 데이터 로드 (첫 번째 로드 이후) - React.useEffect(() => { - console.log("Second useEffect triggered - selectedNumberType:", selectedNumberType) - - const loadConfigs = async () => { - if (selectedNumberType) { - console.log("Loading configs for selectedNumberType:", selectedNumberType) - - try { - const configsResult = await getNumberTypeConfigs(selectedNumberType) - console.log("Configs result received:", configsResult) - - if (configsResult && configsResult.success && configsResult.data) { - console.log("Setting configs data:", configsResult.data) - setConfigsData(configsResult.data) - } else { - console.log("Configs result not successful or no data:", configsResult) - setConfigsData([]) - } - } catch (error) { - console.error("Error loading configs:", error) - setConfigsData([]) - } - } else { - console.log("selectedNumberType is null, skipping configs load") - } - } - - loadConfigs() - }, [selectedNumberType]) + }, [configsData.data, selectedNumberType, fetchConfigs]) // advanced filter fields 정의 const advancedFilterFields: DataTableAdvancedFilterField<NumberTypeConfig>[] = [ @@ -607,31 +130,23 @@ export function NumberTypeConfigsTable({ promises }: NumberTypeConfigsTableProps { id: "isActive", label: "상태", type: "select", options: [ { label: "활성", value: "true"}, { label: "비활성", value: "false" }] }, ] - // useDataTable 적용 + // useDataTable 적용 (서버 사이드 처리) const columns = React.useMemo(() => { const cols = getColumns({ setRowAction }) - console.log("Generated columns:", cols.map(col => (col as any).id || (col as any).accessorKey)) return cols }, [setRowAction]) - // 클라이언트 사이드 정렬을 위한 정렬된 데이터 - const sortedConfigsData = React.useMemo(() => { - return [...configsData].sort((a, b) => { - // 기본적으로 sdq 순으로 정렬 - return a.sdq - b.sdq - }) - }, [configsData]) - const { table } = useDataTable({ - data: sortedConfigsData, + data: configsData.data, columns: columns, - pageCount: 1, + pageCount: configsData.pageCount, enablePinning: true, enableAdvancedFilter: true, - manualSorting: false, + manualSorting: true, + manualFiltering: true, + manualPagination: true, initialState: { sorting: [{ id: "sdq", desc: false }], - // columnPinning: { right: ["actions"] }, // 일시적으로 제거 }, getRowId: (row) => String(row.id), shallow: false, @@ -640,80 +155,75 @@ export function NumberTypeConfigsTable({ promises }: NumberTypeConfigsTableProps const refreshData = React.useCallback(async () => { if (selectedNumberType) { - try { - const result = await getNumberTypeConfigs(selectedNumberType) - if (result.success && result.data) setConfigsData(result.data) - } catch (error) { - console.error("Error refreshing data:", error) - } + await fetchConfigs(selectedNumberType) } - }, [selectedNumberType]) + }, [selectedNumberType, fetchConfigs]) + + // 테이블 상태가 변경될 때 서버 데이터 다시 로드 + React.useEffect(() => { + if (selectedNumberType) { + const state = table.getState() + fetchConfigs(selectedNumberType, { + page: state.pagination.pageIndex + 1, + perPage: state.pagination.pageSize, + sort: state.sorting.map(s => ({ id: s.id as keyof NumberTypeConfig, desc: s.desc })), + search: state.globalFilter || "", + }) + } + }, [table, selectedNumberType, fetchConfigs]) return ( <> {/* Number Type 선택 */} - <div className="mb-6"> - <label className="text-sm font-medium mb-2 block">Number Type 선택</label> - <div className="flex gap-2"> - {rawData[0]?.data && rawData[0].data.length > 0 ? ( - rawData[0].data.map((numberType) => ( - <button - key={numberType.id} - onClick={() => { - setSelectedNumberType(numberType.id) - fetchConfigs(numberType.id) - }} - className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${ - selectedNumberType === numberType.id - ? "bg-primary text-primary-foreground" - : "bg-muted text-muted-foreground hover:bg-muted/80" - }`} - > - {numberType.name} - </button> - )) - ) : ( - <div className="px-4 py-2 text-sm text-muted-foreground"> - Number Type을 불러오는 중... - </div> - )} - </div> - </div> + <NumberTypeSelector + numberTypes={rawData[0]?.data || []} + selectedNumberType={selectedNumberType} + onNumberTypeChange={handleNumberTypeChange} + isLoading={!rawData[0]?.data} + /> {/* 선택된 Number Type 정보 및 테이블: 조건부 렌더링 */} {selectedNumberType && rawData[0]?.data && rawData[0].data.length > 0 && ( - <> - <DragDropTable - table={table} - data={configsData} - onDragEnd={handleDragEnd} + <DragDropTable + table={table} + data={configsData.data} + onDragEnd={handleDragEnd} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} > - <DataTableAdvancedToolbar table={table} filterFields={advancedFilterFields}> - <NumberTypeConfigsTableToolbarActions - table={table} - onSuccess={refreshData} - selectedNumberType={selectedNumberType} - configsData={configsData} - /> - </DataTableAdvancedToolbar> - </DragDropTable> - </> + <NumberTypeConfigsToolbarActions + table={table} + onSuccess={refreshData} + selectedNumberType={selectedNumberType} + configsData={configsData.data} + /> + </DataTableAdvancedToolbar> + </DragDropTable> )} {/* 삭제/수정 다이얼로그 */} <DeleteNumberTypeConfigsDialog open={rowAction?.type === "delete"} onOpenChange={() => setRowAction(null)} - configs={rowAction?.row ? [rowAction.row.original] : []} + configs={rowAction?.row.original ? [rowAction.row.original] : []} showTrigger={false} - onSuccess={refreshData} + onSuccess={() => { + setRowAction(null) + refreshData() + }} /> + <NumberTypeConfigsEditDialog open={rowAction?.type === "update"} onOpenChange={() => setRowAction(null)} - data={rowAction?.row?.original ?? null} - existingConfigs={configsData} - onSuccess={refreshData} + data={rowAction?.row.original ?? null} + existingConfigs={configsData.data} + onSuccess={() => { + setRowAction(null) + refreshData() + }} /> </> ) diff --git a/lib/docu-list-rule/number-type-configs/table/number-type-configs-toolbar-actions.tsx b/lib/docu-list-rule/number-type-configs/table/number-type-configs-toolbar-actions.tsx new file mode 100644 index 00000000..4923bd1d --- /dev/null +++ b/lib/docu-list-rule/number-type-configs/table/number-type-configs-toolbar-actions.tsx @@ -0,0 +1,251 @@ +"use client" + +import * as React from "react" +import { Plus, Loader2 } from "lucide-react" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { Textarea } from "@/components/ui/textarea" +import { toast } from "sonner" + +import { createNumberTypeConfig, getActiveCodeGroups } from "../service" +import { DeleteNumberTypeConfigsDialog } from "./delete-number-type-configs-dialog" +import { NumberTypeConfig } from "../../types" + +interface NumberTypeConfigsToolbarActionsProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + table: any + onSuccess?: () => void + selectedNumberType: number | null + configsData: NumberTypeConfig[] +} + +export function NumberTypeConfigsToolbarActions({ + table, + onSuccess, + selectedNumberType, + configsData +}: NumberTypeConfigsToolbarActionsProps) { + const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false) + const [isLoading, setIsLoading] = React.useState(false) + const [formData, setFormData] = React.useState({ codeGroupId: "", description: "", remark: "" }) + const [codeGroups, setCodeGroups] = React.useState<{ id: number; description: string }[]>([]) + const [allOptions, setAllOptions] = React.useState<{ id: string; name: string }[]>([]) + + const loadCodeGroups = React.useCallback(async () => { + try { + const result = await getActiveCodeGroups() + if (result.success && result.data) { + + // 이미 추가된 Code Group들을 제외하고 필터링 + const usedCodeGroupIds = configsData.map(config => config.codeGroupId) + const availableCodeGroups = result.data.filter(codeGroup => + !usedCodeGroupIds.includes(codeGroup.id) + ) + setCodeGroups(availableCodeGroups) + } + } catch (error) { + console.error("Error details:", error) + } + }, [configsData]) + + React.useEffect(() => { + loadCodeGroups() + }, [loadCodeGroups]) + + // Code Groups를 옵션 목록으로 만드는 함수 + const combineOptions = React.useCallback(() => { + const codeGroupOptions = codeGroups.map(cg => ({ + id: `cg_${cg.id}`, + name: cg.description + })) + + setAllOptions(codeGroupOptions) + }, [codeGroups]) + + // Code Groups가 변경될 때마다 옵션 목록 업데이트 + React.useEffect(() => { + combineOptions() + }, [combineOptions]) + + // 다이얼로그가 열릴 때마다 Code Groups 다시 로드 + React.useEffect(() => { + if (isAddDialogOpen) { + loadCodeGroups() + } + }, [isAddDialogOpen, loadCodeGroups, configsData]) + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + if (!selectedNumberType || !formData.codeGroupId) { + toast.error("필수 필드를 모두 입력해주세요.") + return + } + + const sdq = getNextSdq() + setIsLoading(true) + + try { + // Code Group ID 추출 + const codeGroupId = parseInt(formData.codeGroupId.replace('cg_', '')) + + const result = await createNumberTypeConfig({ + documentNumberTypeId: selectedNumberType, + codeGroupId: codeGroupId, + documentClassId: null, + sdq: sdq, + description: formData.description || undefined, + remark: formData.remark || undefined, + }) + + if (result.success) { + toast.success("Number Type Config가 성공적으로 추가되었습니다.") + setIsAddDialogOpen(false) + setFormData({ codeGroupId: "", description: "", remark: "" }) + onSuccess?.() + } else { + toast.error(result.error || "추가에 실패했습니다.") + } + } catch (error) { + console.error("Error creating number type config:", error) + toast.error("추가 중 오류가 발생했습니다.") + } finally { + setIsLoading(false) + } + } + + const getNextSdq = () => { + if (configsData.length === 0) return 1 + const maxSdq = Math.max(...configsData.map(config => config.sdq)) + return maxSdq + 1 + } + + return ( + <div className="flex items-center gap-2"> + {/** 1) 선택된 로우가 있으면 삭제 다이얼로그 */} + {table.getFilteredSelectedRowModel().rows.length > 0 ? ( + <DeleteNumberTypeConfigsDialog + // eslint-disable-next-line @typescript-eslint/no-explicit-any + configs={table + .getFilteredSelectedRowModel() + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .rows.map((row: any) => row.original)} + onSuccess={() => { + table.toggleAllRowsSelected(false); + onSuccess?.(); + }} + /> + ) : null} + + <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}> + <DialogTrigger asChild> + <Button variant="outline" size="sm" disabled={!selectedNumberType || codeGroups.length === 0}> + <Plus className="mr-2 h-4 w-4" /> + Add + </Button> + </DialogTrigger> + <DialogContent className="max-w-md"> + <DialogHeader> + <DialogTitle>Number Type Config 추가</DialogTitle> + <DialogDescription> + 새로운 구성 요소를 추가합니다. 필수 정보를 입력해주세요. + <span className="text-red-500 mt-1 block text-sm">* 표시된 항목은 필수 입력사항입니다.</span> + </DialogDescription> + </DialogHeader> + <form onSubmit={handleSubmit} className="space-y-4"> + <div className="grid gap-4 py-2"> + <div className="grid grid-cols-4 items-center gap-4"> + <Label htmlFor="codeGroup" className="text-right"> + Code Group <span className="text-red-500">*</span> + </Label> + <div className="col-span-3"> + <Select + value={formData.codeGroupId} + onValueChange={(value) => setFormData(prev => ({ ...prev, codeGroupId: value }))} + > + <SelectTrigger> + <SelectValue placeholder="Code Group 선택" /> + </SelectTrigger> + <SelectContent> + {allOptions.length > 0 ? ( + allOptions.map((option) => ( + <SelectItem key={option.id} value={option.id}> + {option.name} + </SelectItem> + )) + ) : ( + <div className="px-2 py-1.5 text-sm text-muted-foreground"> + 사용 가능한 옵션이 없습니다. + </div> + )} + </SelectContent> + </Select> + </div> + </div> + <div className="grid grid-cols-4 items-center gap-4"> + <Label htmlFor="description" className="text-right"> + Description + </Label> + <div className="col-span-3"> + <Input + id="description" + value={formData.description} + onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))} + placeholder="예: PROJECT NO" + /> + </div> + </div> + <div className="grid grid-cols-4 items-center gap-4"> + <Label htmlFor="remark" className="text-right"> + Remark + </Label> + <div className="col-span-3"> + <Textarea + id="remark" + value={formData.remark} + onChange={(e) => setFormData(prev => ({ ...prev, remark: e.target.value }))} + placeholder="비고 사항" + rows={3} + /> + </div> + </div> + </div> + <DialogFooter> + <Button + type="button" + variant="outline" + onClick={() => setIsAddDialogOpen(false)} + disabled={isLoading} + > + 취소 + </Button> + <Button + type="submit" + disabled={isLoading} + > + {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} + {isLoading ? "추가 중..." : "추가"} + </Button> + </DialogFooter> + </form> + </DialogContent> + </Dialog> + </div> + ) +}
\ No newline at end of file diff --git a/lib/docu-list-rule/number-type-configs/table/number-type-selector.tsx b/lib/docu-list-rule/number-type-configs/table/number-type-selector.tsx new file mode 100644 index 00000000..c311730e --- /dev/null +++ b/lib/docu-list-rule/number-type-configs/table/number-type-selector.tsx @@ -0,0 +1,61 @@ +"use client" + +import * as React from "react" +import { documentNumberTypes } from "@/db/schema/docu-list-rule" + +interface NumberTypeSelectorProps { + numberTypes: typeof documentNumberTypes.$inferSelect[] + selectedNumberType: number | null + onNumberTypeChange: (numberTypeId: number) => void + isLoading?: boolean +} + +export function NumberTypeSelector({ + numberTypes, + selectedNumberType, + onNumberTypeChange, + isLoading = false +}: NumberTypeSelectorProps) { + if (isLoading) { + return ( + <div className="mb-6"> + <label className="text-sm font-medium mb-2 block">Number Type 선택</label> + <div className="px-4 py-2 text-sm text-muted-foreground"> + Number Type을 불러오는 중... + </div> + </div> + ) + } + + if (!numberTypes || numberTypes.length === 0) { + return ( + <div className="mb-6"> + <label className="text-sm font-medium mb-2 block">Number Type 선택</label> + <div className="px-4 py-2 text-sm text-muted-foreground"> + 사용 가능한 Number Type이 없습니다. + </div> + </div> + ) + } + + return ( + <div className="mb-6"> + <label className="text-sm font-medium mb-2 block">Number Type 선택</label> + <div className="flex gap-2 flex-wrap"> + {numberTypes.map((numberType) => ( + <button + key={numberType.id} + onClick={() => onNumberTypeChange(numberType.id)} + className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${ + selectedNumberType === numberType.id + ? "bg-primary text-primary-foreground" + : "bg-muted text-muted-foreground hover:bg-muted/80" + }`} + > + {numberType.name} + </button> + ))} + </div> + </div> + ) +}
\ No newline at end of file diff --git a/lib/docu-list-rule/number-type-configs/validation.ts b/lib/docu-list-rule/number-type-configs/validation.ts index 2b3aaa2d..02b99290 100644 --- a/lib/docu-list-rule/number-type-configs/validation.ts +++ b/lib/docu-list-rule/number-type-configs/validation.ts @@ -1,12 +1,30 @@ import { createSearchParamsCache } from "nuqs/server"; import { parseAsInteger, parseAsString, parseAsArrayOf, parseAsStringEnum } from "nuqs/server"; import { getSortingStateParser, getFiltersStateParser } from "@/lib/parsers"; +import * as z from "zod" +import { NumberTypeConfig } from "../types"; export const searchParamsNumberTypeConfigsCache = createSearchParamsCache({ + flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]), page: parseAsInteger.withDefault(1), perPage: parseAsInteger.withDefault(10), - sort: getSortingStateParser<any>(), - filters: getFiltersStateParser(), - search: parseAsString.withDefault(""), + sort: getSortingStateParser<NumberTypeConfig>().withDefault([ + { id: "sdq", desc: false }, + ]), + + // Number Type ID (필수) + numberTypeId: parseAsInteger.withDefault(0), + + // 기본 필터들 + codeGroupName: parseAsString.withDefault(""), + description: parseAsString.withDefault(""), + remark: parseAsString.withDefault(""), + isActive: parseAsString.withDefault(""), + + // 고급 필터 + filters: getFiltersStateParser().withDefault([]), joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), -});
\ No newline at end of file + search: parseAsString.withDefault(""), +}); + +export type GetNumberTypeConfigsSchema = Awaited<ReturnType<typeof searchParamsNumberTypeConfigsCache.parse>>
\ No newline at end of file diff --git a/lib/docu-list-rule/number-types/service.ts b/lib/docu-list-rule/number-types/service.ts index 8eaf19c7..17373848 100644 --- a/lib/docu-list-rule/number-types/service.ts +++ b/lib/docu-list-rule/number-types/service.ts @@ -22,7 +22,7 @@ export async function getNumberTypes(input: { unstable_noStore() try { - const { page, perPage, sort, search } = input + const { page, perPage, sort, search, filters, joinOperator } = input const offset = (page - 1) * perPage // 기본 조건 @@ -37,30 +37,46 @@ export async function getNumberTypes(input: { )` } - // 정렬 + // 고급 필터링 + if (filters && filters.length > 0) { + const filterConditions = filters.map(filter => { + const { id, value } = filter + if (!value) return null + + switch (id) { + case "name": + return sql`${documentNumberTypes.name} ILIKE ${`%${value}%`}` + case "description": + return sql`${documentNumberTypes.description} ILIKE ${`%${value}%`}` + case "isActive": + return sql`${documentNumberTypes.isActive} = ${value === "true"}` + case "createdAt": + return sql`${documentNumberTypes.createdAt}::text ILIKE ${`%${value}%`}` + default: + return null + } + }).filter(Boolean) + + if (filterConditions.length > 0) { + const operator = joinOperator === "or" ? sql` OR ` : sql` AND ` + const combinedFilters = filterConditions.reduce((acc, condition, index) => { + if (index === 0) return condition + return sql`${acc}${operator}${condition}` + }) + + whereConditions = sql`${whereConditions} AND (${combinedFilters})` + } + } + + // 정렬 (안전한 필드 체크 적용) let orderBy = sql`${documentNumberTypes.createdAt} DESC` if (sort && sort.length > 0) { const sortField = sort[0] - const direction = sortField.desc ? sql`DESC` : sql`ASC` - - switch (sortField.id) { - case "id": - orderBy = sql`${documentNumberTypes.id} ${direction}` - break - case "name": - orderBy = sql`${documentNumberTypes.name} ${direction}` - break - case "description": - orderBy = sql`${documentNumberTypes.description} ${direction}` - break - case "isActive": - orderBy = sql`${documentNumberTypes.isActive} ${direction}` - break - case "createdAt": - orderBy = sql`${documentNumberTypes.createdAt} ${direction}` - break - default: - orderBy = sql`${documentNumberTypes.createdAt} DESC` + // 안전성 체크: 필드가 실제 테이블에 존재하는지 확인 + if (sortField && sortField.id && typeof sortField.id === "string" && sortField.id in documentNumberTypes) { + const direction = sortField.desc ? sql`DESC` : sql`ASC` + const col = documentNumberTypes[sortField.id as keyof typeof documentNumberTypes] + orderBy = sql`${col} ${direction}` } } diff --git a/lib/docu-list-rule/number-types/table/number-types-table.tsx b/lib/docu-list-rule/number-types/table/number-types-table.tsx index 5d25c4b5..00f7e2ab 100644 --- a/lib/docu-list-rule/number-types/table/number-types-table.tsx +++ b/lib/docu-list-rule/number-types/table/number-types-table.tsx @@ -1,6 +1,7 @@ "use client" import * as React from "react" +import { useRouter } from "next/navigation" import { useDataTable } from "@/hooks/use-data-table" import { DataTable } from "@/components/data-table/data-table" import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" @@ -17,12 +18,13 @@ interface NumberTypesTableProps { } export function NumberTypesTable({ promises }: NumberTypesTableProps) { + const router = useRouter() const rawData = React.use(promises!) const [rowAction, setRowAction] = React.useState<DataTableRowAction<typeof documentNumberTypes.$inferSelect> | null>(null) const refreshData = React.useCallback(() => { - window.location.reload() - }, []) + router.refresh() + }, [router]) const columns = React.useMemo(() => getColumns({ setRowAction }), [setRowAction]) |