ERP-node/frontend/lib/registry/components/v2-repeat-screen-modal/index.ts

115 lines
3.7 KiB
TypeScript

"use client";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { RepeatScreenModalComponent } from "./RepeatScreenModalComponent";
import { RepeatScreenModalConfigPanel } from "./RepeatScreenModalConfigPanel";
import type {
RepeatScreenModalProps,
CardRowConfig,
CardColumnConfig,
ColumnSourceConfig,
ColumnTargetConfig,
DataSourceConfig,
CardData,
GroupingConfig,
AggregationConfig,
TableLayoutConfig,
TableColumnConfig,
GroupedCardData,
CardRowData,
CardContentRowConfig,
AggregationDisplayConfig,
} from "./types";
/**
* RepeatScreenModal 컴포넌트 정의 v3
* 반복 화면 모달 - 선택한 행 개수만큼 카드를 생성하며, 각 카드는 커스터마이징 가능한 레이아웃
*
* 주요 기능:
* - 🆕 v3: 자유 레이아웃 - 행(Row)을 추가하고 각 행마다 타입(헤더/집계/테이블/필드) 선택
* - 그룹핑: 특정 필드 기준으로 여러 행을 하나의 카드로 묶기
* - 집계: 그룹 내 데이터의 합계/평균/개수 등 자동 계산
* - 카드 내 테이블: 그룹 내 각 행을 테이블 형태로 표시
* - 유연한 레이아웃: 행 타입 자유 선택, 순서 자유 배치
* - 컬럼별 소스 설정: 직접 조회/조인 조회/수동 입력
* - 컬럼별 타겟 설정: 어느 테이블의 어느 컬럼에 저장할지 설정
* - 다중 테이블 저장: 하나의 카드에서 여러 테이블 동시 저장
*
* 사용 시나리오:
* - 출하계획 동시 등록 (품목별 그룹핑 + 수주별 테이블)
* - 구매발주 일괄 등록 (공급업체별 그룹핑 + 품목별 테이블)
* - 생산계획 일괄 등록 (제품별 그룹핑 + 작업지시별 테이블)
* - 입고검사 일괄 처리 (발주번호별 그룹핑 + 품목별 검사결과)
*/
export const V2RepeatScreenModalDefinition = createComponentDefinition({
id: "v2-repeat-screen-modal",
name: "반복 화면 모달",
nameEng: "Repeat Screen Modal",
description:
"선택한 행을 그룹핑하여 카드로 표시하고, 각 카드는 헤더/집계/테이블을 자유롭게 구성 가능한 폼 (출하계획, 구매발주 등)",
category: ComponentCategory.DATA,
webType: "form",
component: RepeatScreenModalComponent,
defaultConfig: {
// 기본 설정
showCardTitle: true,
cardTitle: "카드 {index}",
cardSpacing: "24px",
showCardBorder: true,
saveMode: "all",
// 데이터 소스
dataSource: {
sourceTable: "",
filterField: "selectedIds",
},
// 그룹핑 설정
grouping: {
enabled: false,
groupByField: "",
aggregations: [],
},
// 🆕 v3: 자유 레이아웃 (행 추가 후 타입 선택)
contentRows: [],
// (레거시 호환)
cardMode: "simple",
cardLayout: [],
tableLayout: {
headerRows: [],
tableColumns: [],
},
} as Partial<RepeatScreenModalProps>,
defaultSize: { width: 1000, height: 800 },
configPanel: RepeatScreenModalConfigPanel,
icon: "LayoutGrid",
tags: ["모달", "폼", "반복", "카드", "그룹핑", "집계", "테이블", "편집", "데이터", "출하계획", "일괄등록", "자유레이아웃"],
version: "3.0.0",
author: "개발팀",
});
// 타입 재 export
export type {
RepeatScreenModalProps,
CardRowConfig,
CardColumnConfig,
ColumnSourceConfig,
ColumnTargetConfig,
DataSourceConfig,
CardData,
GroupingConfig,
AggregationConfig,
TableLayoutConfig,
TableColumnConfig,
GroupedCardData,
CardRowData,
CardContentRowConfig,
AggregationDisplayConfig,
};
// 컴포넌트 재 export
export { RepeatScreenModalComponent, RepeatScreenModalConfigPanel };