Merge pull request '툴바 선택' (#265) from lhj into main
Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/265
This commit is contained in:
commit
d11ffb1b00
|
|
@ -4675,6 +4675,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
||||||
{/* 새로고침 버튼 */}
|
{/* 새로고침 버튼 */}
|
||||||
|
{(tableConfig.toolbar?.showRefresh ?? true) && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -4684,10 +4685,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
>
|
>
|
||||||
<RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
|
<RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}, [tableConfig.pagination, isDesignMode, currentPage, totalPages, totalItems, loading, selectedRows.size, exportToExcel, exportToPdf]);
|
}, [tableConfig.pagination, tableConfig.toolbar?.showRefresh, isDesignMode, currentPage, totalPages, totalItems, loading, selectedRows.size, exportToExcel, exportToPdf]);
|
||||||
|
|
||||||
// ========================================
|
// ========================================
|
||||||
// 렌더링
|
// 렌더링
|
||||||
|
|
@ -4790,6 +4792,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
{/* 🆕 DevExpress 스타일 기능 툴바 */}
|
{/* 🆕 DevExpress 스타일 기능 툴바 */}
|
||||||
<div className="border-border bg-muted/20 flex flex-wrap items-center gap-1 border-b px-2 py-1.5 sm:gap-2 sm:px-4 sm:py-2">
|
<div className="border-border bg-muted/20 flex flex-wrap items-center gap-1 border-b px-2 py-1.5 sm:gap-2 sm:px-4 sm:py-2">
|
||||||
{/* 편집 모드 토글 */}
|
{/* 편집 모드 토글 */}
|
||||||
|
{(tableConfig.toolbar?.showEditMode ?? true) && (
|
||||||
<div className="flex items-center gap-1 border-r border-border pr-2">
|
<div className="flex items-center gap-1 border-r border-border pr-2">
|
||||||
<Button
|
<Button
|
||||||
variant={editMode === "batch" ? "default" : "ghost"}
|
variant={editMode === "batch" ? "default" : "ghost"}
|
||||||
|
|
@ -4802,9 +4805,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
{editMode === "batch" ? "배치 모드" : "즉시 저장"}
|
{editMode === "batch" ? "배치 모드" : "즉시 저장"}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 내보내기 버튼들 */}
|
{/* 내보내기 버튼들 */}
|
||||||
|
{((tableConfig.toolbar?.showExcel ?? true) || (tableConfig.toolbar?.showPdf ?? true)) && (
|
||||||
<div className="flex items-center gap-1 border-r border-border pr-2">
|
<div className="flex items-center gap-1 border-r border-border pr-2">
|
||||||
|
{(tableConfig.toolbar?.showExcel ?? true) && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -4815,6 +4821,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
<FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
|
<FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
|
||||||
Excel
|
Excel
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
|
{(tableConfig.toolbar?.showPdf ?? true) && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -4825,9 +4833,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
<FileText className="mr-1 h-3 w-3 text-red-600" />
|
<FileText className="mr-1 h-3 w-3 text-red-600" />
|
||||||
PDF
|
PDF
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 복사 버튼 */}
|
{/* 복사 버튼 */}
|
||||||
|
{(tableConfig.toolbar?.showCopy ?? true) && (
|
||||||
<div className="flex items-center gap-1 border-r border-border pr-2">
|
<div className="flex items-center gap-1 border-r border-border pr-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
|
@ -4841,6 +4852,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
복사
|
복사
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 선택 정보 */}
|
{/* 선택 정보 */}
|
||||||
{selectedRows.size > 0 && (
|
{selectedRows.size > 0 && (
|
||||||
|
|
@ -4861,6 +4873,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 🆕 통합 검색 패널 */}
|
{/* 🆕 통합 검색 패널 */}
|
||||||
|
{(tableConfig.toolbar?.showSearch ?? true) && (
|
||||||
<div className="flex items-center gap-1 border-r border-border pr-2">
|
<div className="flex items-center gap-1 border-r border-border pr-2">
|
||||||
{isSearchPanelOpen ? (
|
{isSearchPanelOpen ? (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
|
|
@ -4934,8 +4947,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 🆕 Filter Builder (고급 필터) 버튼 */}
|
{/* 🆕 Filter Builder (고급 필터) 버튼 */}
|
||||||
|
{(tableConfig.toolbar?.showFilter ?? true) && (
|
||||||
<div className="flex items-center gap-1 border-r border-border pr-2">
|
<div className="flex items-center gap-1 border-r border-border pr-2">
|
||||||
<Button
|
<Button
|
||||||
variant={activeFilterCount > 0 ? "default" : "ghost"}
|
variant={activeFilterCount > 0 ? "default" : "ghost"}
|
||||||
|
|
@ -4964,8 +4979,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 새로고침 */}
|
{/* 새로고침 */}
|
||||||
|
{(tableConfig.toolbar?.showRefresh ?? true) && (
|
||||||
<div className="ml-auto flex items-center gap-1">
|
<div className="ml-auto flex items-center gap-1">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
|
@ -4979,6 +4996,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
새로고침
|
새로고침
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 🆕 배치 편집 툴바 */}
|
{/* 🆕 배치 편집 툴바 */}
|
||||||
|
|
|
||||||
|
|
@ -765,6 +765,73 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 툴바 버튼 설정 */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold">툴바 버튼 설정</h3>
|
||||||
|
<p className="text-muted-foreground text-[10px]">테이블 상단에 표시할 버튼을 선택합니다</p>
|
||||||
|
</div>
|
||||||
|
<hr className="border-border" />
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="showEditMode"
|
||||||
|
checked={config.toolbar?.showEditMode ?? true}
|
||||||
|
onCheckedChange={(checked) => handleNestedChange("toolbar", "showEditMode", checked)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="showEditMode" className="text-xs">즉시 저장</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="showExcel"
|
||||||
|
checked={config.toolbar?.showExcel ?? true}
|
||||||
|
onCheckedChange={(checked) => handleNestedChange("toolbar", "showExcel", checked)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="showExcel" className="text-xs">Excel</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="showPdf"
|
||||||
|
checked={config.toolbar?.showPdf ?? true}
|
||||||
|
onCheckedChange={(checked) => handleNestedChange("toolbar", "showPdf", checked)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="showPdf" className="text-xs">PDF</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="showCopy"
|
||||||
|
checked={config.toolbar?.showCopy ?? true}
|
||||||
|
onCheckedChange={(checked) => handleNestedChange("toolbar", "showCopy", checked)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="showCopy" className="text-xs">복사</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="showSearch"
|
||||||
|
checked={config.toolbar?.showSearch ?? true}
|
||||||
|
onCheckedChange={(checked) => handleNestedChange("toolbar", "showSearch", checked)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="showSearch" className="text-xs">검색</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="showFilter"
|
||||||
|
checked={config.toolbar?.showFilter ?? true}
|
||||||
|
onCheckedChange={(checked) => handleNestedChange("toolbar", "showFilter", checked)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="showFilter" className="text-xs">필터</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="showRefresh"
|
||||||
|
checked={config.toolbar?.showRefresh ?? true}
|
||||||
|
onCheckedChange={(checked) => handleNestedChange("toolbar", "showRefresh", checked)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="showRefresh" className="text-xs">새로고침</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 체크박스 설정 */}
|
{/* 체크박스 설정 */}
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -164,6 +164,19 @@ export interface PaginationConfig {
|
||||||
pageSizeOptions: number[];
|
pageSizeOptions: number[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 툴바 버튼 표시 설정
|
||||||
|
*/
|
||||||
|
export interface ToolbarConfig {
|
||||||
|
showEditMode?: boolean; // 즉시 저장/배치 모드 버튼
|
||||||
|
showExcel?: boolean; // Excel 내보내기 버튼
|
||||||
|
showPdf?: boolean; // PDF 내보내기 버튼
|
||||||
|
showCopy?: boolean; // 복사 버튼
|
||||||
|
showSearch?: boolean; // 검색 버튼
|
||||||
|
showFilter?: boolean; // 필터 버튼
|
||||||
|
showRefresh?: boolean; // 새로고침 버튼
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 체크박스 설정
|
* 체크박스 설정
|
||||||
*/
|
*/
|
||||||
|
|
@ -259,6 +272,9 @@ export interface TableListConfig extends ComponentConfig {
|
||||||
autoLoad: boolean;
|
autoLoad: boolean;
|
||||||
refreshInterval?: number; // 초 단위
|
refreshInterval?: number; // 초 단위
|
||||||
|
|
||||||
|
// 🆕 툴바 버튼 표시 설정
|
||||||
|
toolbar?: ToolbarConfig;
|
||||||
|
|
||||||
// 🆕 컬럼 값 기반 데이터 필터링
|
// 🆕 컬럼 값 기반 데이터 필터링
|
||||||
dataFilter?: DataFilterConfig;
|
dataFilter?: DataFilterConfig;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue