feat(modal-repeater-table): 체크박스 기반 일괄 삭제 기능 추가
- RepeaterTable: 체크박스 컬럼 추가 (전체 선택/개별 선택 지원) - RepeaterTable: 선택된 행 시각적 피드백 (bg-blue-50) - RepeaterTable: 기존 개별 삭제 버튼 컬럼 제거 - ModalRepeaterTableComponent: selectedRows 상태 및 handleBulkDelete 함수 추가 - ModalRepeaterTableComponent: "선택 삭제" 버튼 UI 추가 - RepeatScreenModalConfigPanel: 행 번호 컬럼 선택에서 빈 값 필터링
This commit is contained in:
@@ -328,6 +328,9 @@ export function ModalRepeaterTableComponent({
|
||||
const companyCode = componentConfig?.companyCode || propCompanyCode;
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
// 체크박스 선택 상태
|
||||
const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
|
||||
|
||||
// 🆕 납기일 일괄 적용 플래그 (딱 한 번만 실행)
|
||||
const [isDeliveryDateApplied, setIsDeliveryDateApplied] = useState(false);
|
||||
|
||||
@@ -794,6 +797,18 @@ export function ModalRepeaterTableComponent({
|
||||
handleChange(newData);
|
||||
};
|
||||
|
||||
// 선택된 항목 일괄 삭제 핸들러
|
||||
const handleBulkDelete = () => {
|
||||
if (selectedRows.size === 0) return;
|
||||
|
||||
// 선택되지 않은 항목만 남김
|
||||
const newData = localValue.filter((_, index) => !selectedRows.has(index));
|
||||
|
||||
// 데이터 업데이트 및 선택 상태 초기화
|
||||
handleChange(newData);
|
||||
setSelectedRows(new Set());
|
||||
};
|
||||
|
||||
// 컬럼명 -> 라벨명 매핑 생성 (sourceColumnLabels 우선, 없으면 columns에서 가져옴)
|
||||
const columnLabels = columns.reduce((acc, col) => {
|
||||
// sourceColumnLabels에 정의된 라벨 우선 사용
|
||||
@@ -807,14 +822,26 @@ export function ModalRepeaterTableComponent({
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{localValue.length > 0 && `${localValue.length}개 항목`}
|
||||
{selectedRows.size > 0 && ` (${selectedRows.size}개 선택됨)`}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{selectedRows.size > 0 && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleBulkDelete}
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
선택 삭제 ({selectedRows.size})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{modalButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{modalButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Repeater 테이블 */}
|
||||
@@ -826,6 +853,8 @@ export function ModalRepeaterTableComponent({
|
||||
onRowDelete={handleRowDelete}
|
||||
activeDataSources={activeDataSources}
|
||||
onDataSourceChange={handleDataSourceChange}
|
||||
selectedRows={selectedRows}
|
||||
onSelectionChange={setSelectedRows}
|
||||
/>
|
||||
|
||||
{/* 항목 선택 모달 */}
|
||||
|
||||
Reference in New Issue
Block a user