feat: enhance item routing modal configuration
- Added new properties for configuring the item addition modal's maximum width and list height in the ItemRoutingConfig interface. - Updated the ColumnEditor component to include additional content for modal size settings, allowing users to specify width and height in pixels. - Adjusted the ItemRoutingComponent to apply the new configuration settings for the modal's dimensions, improving the user experience by providing more control over modal appearance. These changes aim to enhance the flexibility and usability of the item routing modal within the application.
This commit is contained in:
parent
6d0c52e17a
commit
2976cad0a5
|
|
@ -180,12 +180,13 @@ function ScreenCombobox({ value, onChange }: { value?: number; onChange: (v?: nu
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── 컬럼 편집 카드 (품목/모달/공정 공용) ───
|
// ─── 컬럼 편집 카드 (품목/모달/공정 공용) ───
|
||||||
function ColumnEditor({ columns, onChange, tableName, title, icon }: {
|
function ColumnEditor({ columns, onChange, tableName, title, icon, extraContent }: {
|
||||||
columns: ColumnDef[];
|
columns: ColumnDef[];
|
||||||
onChange: (cols: ColumnDef[]) => void;
|
onChange: (cols: ColumnDef[]) => void;
|
||||||
tableName: string;
|
tableName: string;
|
||||||
title: string;
|
title: string;
|
||||||
icon: React.ReactNode;
|
icon: React.ReactNode;
|
||||||
|
extraContent?: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
|
@ -263,6 +264,7 @@ function ColumnEditor({ columns, onChange, tableName, title, icon }: {
|
||||||
<Button variant="outline" size="sm" className="h-7 w-full gap-1 text-xs border-dashed" onClick={addColumn}>
|
<Button variant="outline" size="sm" className="h-7 w-full gap-1 text-xs border-dashed" onClick={addColumn}>
|
||||||
<Plus className="h-3 w-3" /> 컬럼 추가
|
<Plus className="h-3 w-3" /> 컬럼 추가
|
||||||
</Button>
|
</Button>
|
||||||
|
{extraContent}
|
||||||
</div>
|
</div>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
|
|
@ -378,13 +380,34 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
icon={<Eye className="h-4 w-4 text-muted-foreground" />}
|
icon={<Eye className="h-4 w-4 text-muted-foreground" />}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* ─── 모달 표시 컬럼 (등록 모드에서만 의미 있지만 항상 설정 가능) ─── */}
|
{/* ─── 품목 추가 모달 (컬럼 + 크기 설정) ─── */}
|
||||||
<ColumnEditor
|
<ColumnEditor
|
||||||
columns={config.modalDisplayColumns || []}
|
columns={config.modalDisplayColumns || []}
|
||||||
onChange={(cols) => update({ modalDisplayColumns: cols })}
|
onChange={(cols) => update({ modalDisplayColumns: cols })}
|
||||||
tableName={config.dataSource.itemTable}
|
tableName={config.dataSource.itemTable}
|
||||||
title="품목 추가 모달 컬럼"
|
title="품목 추가 모달"
|
||||||
icon={<Columns className="h-4 w-4 text-muted-foreground" />}
|
icon={<Columns className="h-4 w-4 text-muted-foreground" />}
|
||||||
|
extraContent={
|
||||||
|
<div className="mt-3 space-y-2 border-t pt-3">
|
||||||
|
<span className="text-[10px] font-medium text-muted-foreground">모달 크기 (px)</span>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<span className="text-[10px] text-muted-foreground">가로 (너비)</span>
|
||||||
|
<Input type="number" min={300} max={1600}
|
||||||
|
value={parseInt(config.addModalMaxWidth || "600")}
|
||||||
|
onChange={(e) => update({ addModalMaxWidth: `${e.target.value}px` })}
|
||||||
|
placeholder="600" className="h-7 text-xs" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<span className="text-[10px] text-muted-foreground">세로 (목록 높이)</span>
|
||||||
|
<Input type="number" min={150} max={900}
|
||||||
|
value={parseInt(config.addModalListMaxHeight || "340")}
|
||||||
|
onChange={(e) => update({ addModalListMaxHeight: `${e.target.value}px` })}
|
||||||
|
placeholder="340" className="h-7 text-xs" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* ─── 품목 필터 조건 ─── */}
|
{/* ─── 품목 필터 조건 ─── */}
|
||||||
|
|
|
||||||
|
|
@ -458,7 +458,7 @@ export function ItemRoutingComponent({
|
||||||
|
|
||||||
{/* ════ 품목 추가 다이얼로그 (테이블 형태 + 검색) ════ */}
|
{/* ════ 품목 추가 다이얼로그 (테이블 형태 + 검색) ════ */}
|
||||||
<Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
|
<Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
|
||||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
<DialogContent className="max-w-[95vw]" style={{ maxWidth: `min(95vw, ${config.addModalMaxWidth || "600px"})` }}>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle className="text-base sm:text-lg">품목 추가</DialogTitle>
|
<DialogTitle className="text-base sm:text-lg">품목 추가</DialogTitle>
|
||||||
<DialogDescription className="text-xs sm:text-sm">
|
<DialogDescription className="text-xs sm:text-sm">
|
||||||
|
|
@ -481,14 +481,14 @@ export function ItemRoutingComponent({
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="max-h-[340px] overflow-auto rounded-md border">
|
<div className="overflow-auto rounded-md border" style={{ maxHeight: config.addModalListMaxHeight || "340px" }}>
|
||||||
{allItems.length === 0 ? (
|
{allItems.length === 0 ? (
|
||||||
<div className="flex items-center justify-center py-8">
|
<div className="flex items-center justify-center py-8">
|
||||||
<p className="text-xs text-muted-foreground">품목이 없습니다</p>
|
<p className="text-xs text-muted-foreground">품목이 없습니다</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<Table>
|
<Table noWrapper>
|
||||||
<TableHeader>
|
<TableHeader className="sticky top-0 z-10 bg-background shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead className="w-[40px] text-center text-[11px] py-1.5" />
|
<TableHead className="w-[40px] text-center text-[11px] py-1.5" />
|
||||||
{modalDisplayCols.map((col) => (
|
{modalDisplayCols.map((col) => (
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,10 @@ export interface ItemRoutingConfig {
|
||||||
modalDisplayColumns?: ColumnDef[];
|
modalDisplayColumns?: ColumnDef[];
|
||||||
/** 품목 조회 시 사전 필터 조건 */
|
/** 품목 조회 시 사전 필터 조건 */
|
||||||
itemFilterConditions?: ItemFilterCondition[];
|
itemFilterConditions?: ItemFilterCondition[];
|
||||||
|
/** 품목 추가 모달 최대 너비 (px 또는 vw, 기본: 600px) */
|
||||||
|
addModalMaxWidth?: string;
|
||||||
|
/** 품목 추가 모달 목록 최대 높이 (px, 기본: 340px) */
|
||||||
|
addModalListMaxHeight?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 컴포넌트 Props
|
// 컴포넌트 Props
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue