feat: 검색 필터 위젯 화면별 독립 설정 및 고정 모드 추가
- 검색 필터 설정을 화면별로 독립적으로 저장하도록 개선 (screenId 포함) - FilterPanel, TableSearchWidget, TableListComponent에 화면 ID 기반 localStorage 키 적용 - 동적 모드(사용자 설정)와 고정 모드(디자이너 설정) 2가지 필터 방식 추가 - 고정 모드에서 컬럼 드롭다운 선택 기능 구현 - 컬럼 선택 시 라벨 및 필터 타입 자동 설정 - ConfigPanel 표시 문제 해결 (type='component' 지원) - UnifiedPropertiesPanel에서 독립 컴포넌트 ConfigPanel 조회 개선 주요 변경: - 같은 테이블을 사용하는 다른 화면에서 필터 설정이 독립적으로 관리됨 - 고정 모드에서는 설정 버튼이 숨겨지고 지정된 필터만 표시 - 테이블 정보가 있으면 컬럼을 드롭다운으로 선택 가능 - inputType에 따라 filterType 자동 추론 (number, date, select, text)
This commit is contained in:
@@ -26,6 +26,7 @@ interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onFiltersApplied?: (filters: TableFilter[]) => void; // 필터 적용 시 콜백
|
||||
screenId?: number; // 화면 ID 추가
|
||||
}
|
||||
|
||||
// 필터 타입별 연산자
|
||||
@@ -69,7 +70,7 @@ interface ColumnFilterConfig {
|
||||
selectOptions?: Array<{ label: string; value: string }>;
|
||||
}
|
||||
|
||||
export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied }) => {
|
||||
export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied, screenId }) => {
|
||||
const { getTable, selectedTableId } = useTableOptions();
|
||||
const table = selectedTableId ? getTable(selectedTableId) : undefined;
|
||||
|
||||
@@ -79,7 +80,10 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
|
||||
// localStorage에서 저장된 필터 설정 불러오기
|
||||
useEffect(() => {
|
||||
if (table?.columns && table?.tableName) {
|
||||
const storageKey = `table_filters_${table.tableName}`;
|
||||
// 화면별로 독립적인 필터 설정 저장
|
||||
const storageKey = screenId
|
||||
? `table_filters_${table.tableName}_screen_${screenId}`
|
||||
: `table_filters_${table.tableName}`;
|
||||
const savedFilters = localStorage.getItem(storageKey);
|
||||
|
||||
let filters: ColumnFilterConfig[];
|
||||
@@ -192,9 +196,11 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
|
||||
width: cf.width || 200, // 너비 포함 (기본 200px)
|
||||
}));
|
||||
|
||||
// localStorage에 저장
|
||||
// localStorage에 저장 (화면별로 독립적)
|
||||
if (table?.tableName) {
|
||||
const storageKey = `table_filters_${table.tableName}`;
|
||||
const storageKey = screenId
|
||||
? `table_filters_${table.tableName}_screen_${screenId}`
|
||||
: `table_filters_${table.tableName}`;
|
||||
localStorage.setItem(storageKey, JSON.stringify(columnFilters));
|
||||
}
|
||||
|
||||
@@ -216,9 +222,11 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
|
||||
setColumnFilters(clearedFilters);
|
||||
setSelectAll(false);
|
||||
|
||||
// localStorage에서 제거
|
||||
// localStorage에서 제거 (화면별로 독립적)
|
||||
if (table?.tableName) {
|
||||
const storageKey = `table_filters_${table.tableName}`;
|
||||
const storageKey = screenId
|
||||
? `table_filters_${table.tableName}_screen_${screenId}`
|
||||
: `table_filters_${table.tableName}`;
|
||||
localStorage.removeItem(storageKey);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user