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[];
|
||||
onChange: (cols: ColumnDef[]) => void;
|
||||
tableName: string;
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
extraContent?: React.ReactNode;
|
||||
}) {
|
||||
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}>
|
||||
<Plus className="h-3 w-3" /> 컬럼 추가
|
||||
</Button>
|
||||
{extraContent}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
|
@ -378,13 +380,34 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
|||
icon={<Eye className="h-4 w-4 text-muted-foreground" />}
|
||||
/>
|
||||
|
||||
{/* ─── 모달 표시 컬럼 (등록 모드에서만 의미 있지만 항상 설정 가능) ─── */}
|
||||
{/* ─── 품목 추가 모달 (컬럼 + 크기 설정) ─── */}
|
||||
<ColumnEditor
|
||||
columns={config.modalDisplayColumns || []}
|
||||
onChange={(cols) => update({ modalDisplayColumns: cols })}
|
||||
tableName={config.dataSource.itemTable}
|
||||
title="품목 추가 모달 컬럼"
|
||||
title="품목 추가 모달"
|
||||
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}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||||
<DialogContent className="max-w-[95vw]" style={{ maxWidth: `min(95vw, ${config.addModalMaxWidth || "600px"})` }}>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">품목 추가</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
|
|
@ -481,14 +481,14 @@ export function ItemRoutingComponent({
|
|||
</Button>
|
||||
</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 ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<p className="text-xs text-muted-foreground">품목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-10 bg-background shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow>
|
||||
<TableHead className="w-[40px] text-center text-[11px] py-1.5" />
|
||||
{modalDisplayCols.map((col) => (
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@ export interface ItemRoutingConfig {
|
|||
modalDisplayColumns?: ColumnDef[];
|
||||
/** 품목 조회 시 사전 필터 조건 */
|
||||
itemFilterConditions?: ItemFilterCondition[];
|
||||
/** 품목 추가 모달 최대 너비 (px 또는 vw, 기본: 600px) */
|
||||
addModalMaxWidth?: string;
|
||||
/** 품목 추가 모달 목록 최대 높이 (px, 기본: 340px) */
|
||||
addModalListMaxHeight?: string;
|
||||
}
|
||||
|
||||
// 컴포넌트 Props
|
||||
|
|
|
|||
Loading…
Reference in New Issue