feat(universal-form-modal): 조건부 테이블, 동적 Select 옵션, 서브 테이블 수정 로드 기능 구현
- 조건부 테이블: 체크박스/탭으로 조건 선택 시 다른 테이블 데이터 관리 - 동적 Select 옵션: 소스 테이블에서 드롭다운 옵션 동적 로드 - 행 선택 모드: Select 값 변경 시 같은 소스 행의 연관 컬럼 자동 채움 - 수정 모드 서브 테이블 로드: loadOnEdit 옵션으로 반복 섹션 데이터 자동 로드 - SplitPanelLayout2 메인 테이블 병합: 서브 테이블 수정 시 메인 데이터 함께 조회 - 연결 필드 그룹 표시 형식: subDisplayColumn 추가로 메인/서브 컬럼 분리 설정 - UX 개선: 컬럼 선택 UI를 검색 가능한 Combobox로 전환 - saveMainAsFirst 로직 개선: items 없어도 메인 데이터 저장 가능
This commit is contained in:
SeongHyun Kim
parent
6365ce4921
commit
00376202fd
|
|
@ -672,3 +672,4 @@ export const ActionButtonConfigModal: React.FC<ActionButtonConfigModalProps> = (
|
|||
|
||||
export default ActionButtonConfigModal;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -803,3 +803,4 @@ export const ColumnConfigModal: React.FC<ColumnConfigModalProps> = ({
|
|||
|
||||
export default ColumnConfigModal;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -102,3 +102,4 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -42,3 +42,4 @@ SplitPanelLayout2Renderer.registerSelf();
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -161,3 +161,4 @@ export const SearchableColumnSelect: React.FC<SearchableColumnSelectProps> = ({
|
|||
|
||||
export default SearchableColumnSelect;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -116,3 +116,4 @@ export const SortableColumnItem: React.FC<SortableColumnItemProps> = ({
|
|||
|
||||
export default SortableColumnItem;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1125,3 +1125,4 @@ export function SectionLayoutModal({
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1538,12 +1538,12 @@ function ColumnSettingItem({
|
|||
</p>
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Select
|
||||
value={col.dynamicSelectOptions.labelField || ""}
|
||||
value={col.dynamicSelectOptions.labelField || "__same_as_source__"}
|
||||
onValueChange={(value) => {
|
||||
onUpdate({
|
||||
dynamicSelectOptions: {
|
||||
...col.dynamicSelectOptions!,
|
||||
labelField: value,
|
||||
labelField: value === "__same_as_source__" ? "" : value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
|
|
@ -1552,7 +1552,7 @@ function ColumnSettingItem({
|
|||
<SelectValue placeholder="(소스 컬럼과 동일)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="" className="text-xs text-muted-foreground">
|
||||
<SelectItem value="__same_as_source__" className="text-xs text-muted-foreground">
|
||||
(소스 컬럼과 동일)
|
||||
</SelectItem>
|
||||
{sourceTableColumns.map((c) => (
|
||||
|
|
@ -3207,6 +3207,32 @@ export function TableSectionSettingsModal({
|
|||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 사용 가이드 */}
|
||||
<div className="mt-4 p-3 bg-blue-50/50 border border-blue-200/50 rounded-lg space-y-2">
|
||||
<p className="text-xs font-medium text-blue-700">사용 가이드</p>
|
||||
<div className="text-[10px] text-blue-600 space-y-1.5">
|
||||
<p className="font-medium">1. 소스 테이블 필터링 활성화 후:</p>
|
||||
<ul className="list-disc pl-4 space-y-0.5">
|
||||
<li><span className="font-medium">항목 검색</span>: 검색 모달에서 필터링된 데이터만 표시</li>
|
||||
<li><span className="font-medium">빈 행 추가</span>: 드롭다운 옵션이 필터링된 데이터로 제한</li>
|
||||
</ul>
|
||||
<p className="font-medium mt-2">2. 컬럼 설정에서 추가 설정:</p>
|
||||
<ul className="list-disc pl-4 space-y-0.5">
|
||||
<li>컬럼 타입을 <span className="font-medium">"선택(드롭다운)"</span>으로 변경</li>
|
||||
<li><span className="font-medium">"동적 드롭다운 옵션"</span> 섹션이 나타남</li>
|
||||
<li>소스 컬럼 선택 → 해당 컬럼 값이 드롭다운 옵션으로 표시</li>
|
||||
<li><span className="font-medium">"행 선택 모드"</span> 활성화 시 → 선택한 값의 같은 행 데이터를 다른 컬럼에 자동 채움</li>
|
||||
</ul>
|
||||
<p className="font-medium mt-2">3. 예시 (품목검사정보):</p>
|
||||
<ul className="list-disc pl-4 space-y-0.5">
|
||||
<li>"입고검사" 체크박스 선택 → 테이블 탭 표시</li>
|
||||
<li>"항목 추가" 클릭 → 빈 행 생성</li>
|
||||
<li>"검사항목" 드롭다운 → inspection_type='입고검사'인 항목만 표시</li>
|
||||
<li>검사항목 선택 시 → 검사기준, 검사방법 자동 채움 (행 선택 모드)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue