feat(ModalRepeaterTable): 항목 검색 모달 컬럼 라벨 설정 기능 추가
- sourceColumnLabels 타입 정의 (Record<string, string>) - ConfigPanel에 소스 컬럼별 표시 라벨 입력 UI 추가 - columnLabels 생성 시 sourceColumnLabels 우선 적용 - 컬럼 삭제 시 해당 라벨도 함께 삭제 - 빈 상태 안내 메시지 추가
This commit is contained in:
parent
892278853c
commit
61c1f10495
|
|
@ -185,6 +185,9 @@ export function ModalRepeaterTableComponent({
|
|||
const rawSourceColumns = componentConfig?.sourceColumns || propSourceColumns || [];
|
||||
const sourceColumns = rawSourceColumns.filter((col: string) => col && col.trim() !== "");
|
||||
|
||||
// 모달 컬럼 라벨 (컬럼명 -> 표시 라벨)
|
||||
const sourceColumnLabels = componentConfig?.sourceColumnLabels || {};
|
||||
|
||||
const sourceSearchFields = componentConfig?.sourceSearchFields || propSourceSearchFields || [];
|
||||
const modalTitle = componentConfig?.modalTitle || propModalTitle || "항목 검색";
|
||||
const modalButtonText = componentConfig?.modalButtonText || propModalButtonText || "품목 검색";
|
||||
|
|
@ -546,11 +549,12 @@ export function ModalRepeaterTableComponent({
|
|||
handleChange(newData);
|
||||
};
|
||||
|
||||
// 컬럼명 -> 라벨명 매핑 생성
|
||||
// 컬럼명 -> 라벨명 매핑 생성 (sourceColumnLabels 우선, 없으면 columns에서 가져옴)
|
||||
const columnLabels = columns.reduce((acc, col) => {
|
||||
acc[col.field] = col.label;
|
||||
// sourceColumnLabels에 정의된 라벨 우선 사용
|
||||
acc[col.field] = sourceColumnLabels[col.field] || col.label;
|
||||
return acc;
|
||||
}, {} as Record<string, string>);
|
||||
}, { ...sourceColumnLabels } as Record<string, string>);
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-4", className)}>
|
||||
|
|
|
|||
|
|
@ -520,7 +520,7 @@ export function ModalRepeaterTableConfigPanel({
|
|||
{/* 소스 컬럼 */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs sm:text-sm">소스 컬럼</Label>
|
||||
<Label className="text-xs sm:text-sm">소스 컬럼 (항목 검색 모달)</Label>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
|
|
@ -533,17 +533,21 @@ export function ModalRepeaterTableConfigPanel({
|
|||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
모달 테이블에 표시할 컬럼들
|
||||
모달 테이블에 표시할 컬럼과 헤더 라벨을 설정합니다
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3">
|
||||
{(localConfig.sourceColumns || []).map((column, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<div key={index} className="flex items-start gap-2 p-3 border rounded-md bg-background">
|
||||
<div className="flex-1 space-y-2">
|
||||
{/* 컬럼 선택 */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-[10px] text-muted-foreground">컬럼</Label>
|
||||
<Select
|
||||
value={column}
|
||||
onValueChange={(value) => updateSourceColumn(index, value)}
|
||||
disabled={!localConfig.sourceTable || isLoadingColumns}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -554,16 +558,50 @@ export function ModalRepeaterTableConfigPanel({
|
|||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{/* 라벨 입력 */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-[10px] text-muted-foreground">표시 라벨</Label>
|
||||
<Input
|
||||
value={localConfig.sourceColumnLabels?.[column] || ""}
|
||||
onChange={(e) => {
|
||||
const newLabels = { ...(localConfig.sourceColumnLabels || {}) };
|
||||
if (e.target.value) {
|
||||
newLabels[column] = e.target.value;
|
||||
} else {
|
||||
delete newLabels[column];
|
||||
}
|
||||
updateConfig({ sourceColumnLabels: newLabels });
|
||||
}}
|
||||
placeholder={tableColumns.find(c => c.columnName === column)?.displayName || column || "라벨 입력"}
|
||||
className="h-8 text-xs"
|
||||
disabled={!column}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => removeSourceColumn(index)}
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={() => {
|
||||
// 컬럼 삭제 시 해당 라벨도 삭제
|
||||
const newLabels = { ...(localConfig.sourceColumnLabels || {}) };
|
||||
delete newLabels[column];
|
||||
updateConfig({ sourceColumnLabels: newLabels });
|
||||
removeSourceColumn(index);
|
||||
}}
|
||||
className="h-8 w-8 p-0 mt-5"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{(localConfig.sourceColumns || []).length === 0 && (
|
||||
<div className="text-center py-4 border-2 border-dashed rounded-lg">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
"추가" 버튼을 클릭하여 모달에 표시할 컬럼을 추가하세요
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export interface ModalRepeaterTableProps {
|
|||
// 소스 데이터 (모달에서 가져올 데이터)
|
||||
sourceTable: string; // 검색할 테이블 (예: "item_info")
|
||||
sourceColumns: string[]; // 모달에 표시할 컬럼들
|
||||
sourceColumnLabels?: Record<string, string>; // 모달 컬럼 라벨 (컬럼명 -> 표시 라벨)
|
||||
sourceSearchFields?: string[]; // 검색 가능한 필드들
|
||||
|
||||
// 🆕 저장 대상 테이블 설정
|
||||
|
|
|
|||
Loading…
Reference in New Issue