feat(TableSection): 날짜 컬럼 일괄 적용 기능 추가
TableColumnConfig에 batchApply 속성 추가 날짜 타입 컬럼 설정 시 "일괄 적용" 스위치 표시 첫 번째 날짜 입력 시 모든 행에 자동 적용 중복 적용 방지를 위한 batchAppliedFields 플래그 관리 데이터 전체 삭제 시 플래그 리셋
This commit is contained in:
parent
228fd33a2a
commit
9684a83f37
|
|
@ -335,6 +335,9 @@ export function TableSectionRenderer({
|
|||
|
||||
// 동적 데이터 소스 활성화 상태
|
||||
const [activeDataSources, setActiveDataSources] = useState<Record<string, string>>({});
|
||||
|
||||
// 날짜 일괄 적용 완료 플래그 (컬럼별로 한 번만 적용)
|
||||
const [batchAppliedFields, setBatchAppliedFields] = useState<Set<string>>(new Set());
|
||||
|
||||
// RepeaterColumnConfig로 변환
|
||||
const columns: RepeaterColumnConfig[] = (tableConfig.columns || []).map(convertToRepeaterColumn);
|
||||
|
|
@ -381,13 +384,43 @@ export function TableSectionRenderer({
|
|||
[calculateRow]
|
||||
);
|
||||
|
||||
// 데이터 변경 핸들러
|
||||
// 데이터 변경 핸들러 (날짜 일괄 적용 로직 포함)
|
||||
const handleDataChange = useCallback(
|
||||
(newData: any[]) => {
|
||||
setTableData(newData);
|
||||
onTableDataChange(newData);
|
||||
let processedData = newData;
|
||||
|
||||
// 날짜 일괄 적용 로직: batchApply가 활성화된 날짜 컬럼 처리
|
||||
const batchApplyColumns = tableConfig.columns.filter(
|
||||
(col) => col.type === "date" && col.batchApply === true
|
||||
);
|
||||
|
||||
for (const dateCol of batchApplyColumns) {
|
||||
// 이미 일괄 적용된 컬럼은 건너뜀
|
||||
if (batchAppliedFields.has(dateCol.field)) continue;
|
||||
|
||||
// 해당 컬럼에 값이 있는 행과 없는 행 분류
|
||||
const itemsWithDate = processedData.filter((item) => item[dateCol.field]);
|
||||
const itemsWithoutDate = processedData.filter((item) => !item[dateCol.field]);
|
||||
|
||||
// 조건: 정확히 1개만 날짜가 있고, 나머지는 모두 비어있을 때
|
||||
if (itemsWithDate.length === 1 && itemsWithoutDate.length > 0) {
|
||||
const selectedDate = itemsWithDate[0][dateCol.field];
|
||||
|
||||
// 모든 행에 동일한 날짜 적용
|
||||
processedData = processedData.map((item) => ({
|
||||
...item,
|
||||
[dateCol.field]: selectedDate,
|
||||
}));
|
||||
|
||||
// 플래그 활성화 (이후 개별 수정 가능)
|
||||
setBatchAppliedFields((prev) => new Set([...prev, dateCol.field]));
|
||||
}
|
||||
}
|
||||
|
||||
setTableData(processedData);
|
||||
onTableDataChange(processedData);
|
||||
},
|
||||
[onTableDataChange]
|
||||
[onTableDataChange, tableConfig.columns, batchAppliedFields]
|
||||
);
|
||||
|
||||
// 행 변경 핸들러
|
||||
|
|
@ -416,6 +449,11 @@ export function TableSectionRenderer({
|
|||
const newData = tableData.filter((_, index) => !selectedRows.has(index));
|
||||
handleDataChange(newData);
|
||||
setSelectedRows(new Set());
|
||||
|
||||
// 데이터가 모두 삭제되면 일괄 적용 플래그도 리셋
|
||||
if (newData.length === 0) {
|
||||
setBatchAppliedFields(new Set());
|
||||
}
|
||||
}, [tableData, selectedRows, handleDataChange]);
|
||||
|
||||
// 아이템 추가 핸들러 (모달에서 선택)
|
||||
|
|
|
|||
|
|
@ -419,6 +419,17 @@ function ColumnSettingItem({
|
|||
조회
|
||||
</span>
|
||||
</label>
|
||||
{/* 날짜 타입일 때만 일괄 적용 옵션 표시 */}
|
||||
{col.type === "date" && (
|
||||
<label className="flex items-center gap-2 text-xs cursor-pointer" title="첫 번째 날짜 입력 시 모든 행에 동일하게 적용">
|
||||
<Switch
|
||||
checked={col.batchApply ?? false}
|
||||
onCheckedChange={(checked) => onUpdate({ batchApply: checked })}
|
||||
className="scale-75"
|
||||
/>
|
||||
<span>일괄 적용</span>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 조회 설정 (조회 ON일 때만 표시) */}
|
||||
|
|
|
|||
|
|
@ -331,6 +331,10 @@ export interface TableColumnConfig {
|
|||
|
||||
// 조회 설정 (동적 값 조회)
|
||||
lookup?: LookupConfig;
|
||||
|
||||
// 날짜 일괄 적용 (type이 "date"일 때만 사용)
|
||||
// 활성화 시 첫 번째 날짜 입력 시 모든 행에 동일한 날짜가 자동 적용됨
|
||||
batchApply?: boolean;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
|
|
|
|||
Loading…
Reference in New Issue