RelatedDataButtons 컴포넌트
좌측 패널에서 선택한 데이터를 기반으로 연관 테이블의 데이터를 버튼으로 표시하는 컴포넌트
개요
- ID:
related-data-buttons
- 카테고리: data
- 웹타입: container
- 버전: 1.0.0
사용 사례
품목별 라우팅 버전 관리
┌─────────────────────────────────────────────────────┐
│ 알루미늄 프레임 [+ 라우팅 버전 추가] │
│ ITEM001 │
│ ┌──────────────┐ ┌─────────┐ │
│ │ 기본 라우팅 ★ │ │ 개선버전 │ │
│ └──────────────┘ └─────────┘ │
└─────────────────────────────────────────────────────┘
데이터 흐름
1. 좌측 패널: item_info 선택
↓ SplitPanelContext.selectedLeftData
2. RelatedDataButtons: item_code로 item_routing_version 조회
↓ 버튼 클릭 시 이벤트 발생
3. 하위 테이블: routing_version_id로 item_routing_detail 필터링
설정 옵션
소스 매핑 (sourceMapping)
| 속성 |
타입 |
설명 |
| sourceTable |
string |
좌측 패널 테이블명 (예: item_info) |
| sourceColumn |
string |
필터에 사용할 컬럼 (예: item_code) |
| 속성 |
타입 |
설명 |
| show |
boolean |
헤더 표시 여부 |
| titleColumn |
string |
제목으로 표시할 컬럼 (예: item_name) |
| subtitleColumn |
string |
부제목으로 표시할 컬럼 (예: item_code) |
버튼 데이터 소스 (buttonDataSource)
| 속성 |
타입 |
설명 |
| tableName |
string |
조회할 테이블명 (예: item_routing_version) |
| filterColumn |
string |
필터링할 컬럼명 (예: item_code) |
| displayColumn |
string |
버튼에 표시할 컬럼명 (예: version_name) |
| valueColumn |
string |
선택 시 전달할 값 컬럼 (기본: id) |
| orderColumn |
string |
정렬 컬럼 |
| orderDirection |
"ASC" | "DESC" |
정렬 방향 |
버튼 스타일 (buttonStyle)
| 속성 |
타입 |
설명 |
| variant |
string |
기본 버튼 스타일 (default, outline, secondary, ghost) |
| activeVariant |
string |
선택 시 버튼 스타일 |
| size |
string |
버튼 크기 (sm, default, lg) |
| defaultIndicator.column |
string |
기본 버전 판단 컬럼 |
| defaultIndicator.showStar |
boolean |
별표 아이콘 표시 여부 |
추가 버튼 (addButton)
| 속성 |
타입 |
설명 |
| show |
boolean |
추가 버튼 표시 여부 |
| label |
string |
버튼 라벨 |
| position |
"header" | "inline" |
버튼 위치 |
| modalScreenId |
number |
연결할 모달 화면 ID |
이벤트 설정 (events)
| 속성 |
타입 |
설명 |
| targetTable |
string |
필터링할 하위 테이블명 |
| targetFilterColumn |
string |
하위 테이블의 필터 컬럼명 |
이벤트
related-button-select
버튼 선택 시 발생하는 커스텀 이벤트
window.addEventListener("related-button-select", (e: CustomEvent) => {
const { targetTable, filterColumn, filterValue, selectedData } = e.detail;
// 하위 테이블 필터링 처리
});
사용 예시
품목별 라우팅 버전 화면
const config: RelatedDataButtonsConfig = {
sourceMapping: {
sourceTable: "item_info",
sourceColumn: "item_code",
},
headerDisplay: {
show: true,
titleColumn: "item_name",
subtitleColumn: "item_code",
},
buttonDataSource: {
tableName: "item_routing_version",
filterColumn: "item_code",
displayColumn: "version_name",
valueColumn: "id",
},
buttonStyle: {
variant: "outline",
activeVariant: "default",
defaultIndicator: {
column: "is_default",
showStar: true,
},
},
events: {
targetTable: "item_routing_detail",
targetFilterColumn: "routing_version_id",
},
addButton: {
show: true,
label: "+ 라우팅 버전 추가",
position: "header",
},
autoSelectFirst: true,
};
분할 패널과 함께 사용
┌─────────────────┬──────────────────────────────────────────────┐
│ │ [RelatedDataButtons 컴포넌트] │
│ 품목 목록 │ 품목명 표시 + 버전 버튼들 │
│ (좌측 패널) ├──────────────────────────────────────────────┤
│ │ [DataTable 컴포넌트] │
│ item_info │ 공정 순서 테이블 (item_routing_detail) │
│ │ related-button-select 이벤트로 필터링 │
└─────────────────┴──────────────────────────────────────────────┘
개발자 정보
- 생성일: 2024-12
- 경로:
lib/registry/components/related-data-buttons/
kjs
3d287bb883