From 825683dd756830258082e20ea5d60cd8161bb71b Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 4 Sep 2024 19:33:35 +0800 Subject: [PATCH] feat: edit replicas in the list --- .../seal-table/components/seal-column.tsx | 118 ++++++++++++++++-- .../seal-table/components/table-row.tsx | 18 +-- src/components/seal-table/index.tsx | 2 + src/components/seal-table/row-context.ts | 2 +- src/components/seal-table/types.ts | 3 + src/locales/en-US/common.ts | 1 + src/locales/zh-CN/common.ts | 1 + src/pages/llmodels/components/table-list.tsx | 18 +++ 8 files changed, 138 insertions(+), 25 deletions(-) diff --git a/src/components/seal-table/components/seal-column.tsx b/src/components/seal-table/components/seal-column.tsx index 2ca2b8af..9757fa98 100644 --- a/src/components/seal-table/components/seal-column.tsx +++ b/src/components/seal-table/components/seal-column.tsx @@ -1,3 +1,6 @@ +import { CheckOutlined, FormOutlined, UndoOutlined } from '@ant-design/icons'; +import { useIntl } from '@umijs/max'; +import { Button, Input, InputNumber, Tooltip } from 'antd'; import classNames from 'classnames'; import React, { useContext } from 'react'; import RowContext from '../row-context'; @@ -5,9 +8,59 @@ import '../styles/cell.less'; import { SealColumnProps } from '../types'; const SealColumn: React.FC = (props) => { - const row: Record = useContext(RowContext); - console.log('seal column====', row); - const { dataIndex, render, align } = props; + const intl = useIntl(); + const { row, onCell } = useContext(RowContext); + const { dataIndex, render, align, editable, valueType, title } = props; + const [isEditing, setIsEditing] = React.useState(false); + const [current, setCurrent] = React.useState(row[dataIndex]); + const cachedValue = React.useRef(row[dataIndex]); + + const handleEdit = () => { + setIsEditing(true); + }; + + const handleSubmit = async () => { + cachedValue.current = current; + await onCell?.( + { + ...row, + [dataIndex]: current + }, + dataIndex + ); + setIsEditing(false); + }; + + const handleUndo = () => { + setCurrent(cachedValue.current); + setIsEditing(false); + }; + + const renderContent = () => { + if (isEditing && editable) { + return valueType === 'number' ? ( + { + setCurrent(val as any); + }} + /> + ) : ( + { + setCurrent(e.target.value); + }} + /> + ); + } + if (render) { + return render(current, row); + } + return current; + }; return (
= (props) => { 'cell-right': align === 'right' })} > - - {render - ? render(row[dataIndex], { ...row, dataIndex }) - : row[dataIndex]} - + {renderContent()} + {editable && ( + <> + {isEditing ? ( + <> + + + + + + + + ) : ( + + {intl.formatMessage({ id: 'common.button.edit' })} + {title} + + } + > + + + )} + + )}
); }; diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx index 7c4bcf4b..3ece5d84 100644 --- a/src/components/seal-table/components/table-row.tsx +++ b/src/components/seal-table/components/table-row.tsx @@ -24,6 +24,7 @@ const TableRow: React.FC< columns, pollingChildren, watchChildren, + onCell, onExpand, renderChildren, loadChildren, @@ -43,14 +44,6 @@ const TableRow: React.FC< const childrenDataRef = useRef([]); childrenDataRef.current = childrenData; - console.log( - 'table row====', - record, - childrenData, - record.name, - firstLoad, - expanded - ); const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({ dataList: childrenData, setDataList: setChildrenData @@ -101,7 +94,6 @@ const TableRow: React.FC< }; const handleLoadChildren = async () => { - console.log('first load=====', firstLoad); try { setLoading(true); const data = await loadChildren?.(record); @@ -153,7 +145,6 @@ const TableRow: React.FC< const handleRowExpand = async () => { setExpanded(!expanded); onExpand?.(!expanded, record, record[rowKey]); - console.log('expanded=====', record); if (pollTimer.current) { clearInterval(pollTimer.current); @@ -189,11 +180,6 @@ const TableRow: React.FC< useEffect(() => { if (!firstLoad && expanded) { - console.log( - 'update children=====', - record.name, - tableContext.allChildren - ); cacheDataListRef.current = childrenData; filterUpdateChildrenHandler(); } @@ -249,7 +235,7 @@ const TableRow: React.FC< }; return ( - +
= ( childParentKey, onExpand, onSort, + onCell, expandedRowKeys, loading, expandable, @@ -135,6 +136,7 @@ const SealTable: React.FC = ( renderChildren={renderChildren} loadChildren={loadChildren} loadChildrenAPI={loadChildrenAPI} + onCell={onCell} onExpand={onExpand} expandedRowKeys={expandedRowKeys} > diff --git a/src/components/seal-table/row-context.ts b/src/components/seal-table/row-context.ts index 96d2e7d2..710cd575 100644 --- a/src/components/seal-table/row-context.ts +++ b/src/components/seal-table/row-context.ts @@ -1,5 +1,5 @@ import React from 'react'; -const RowContext = React.createContext({}); +const RowContext = React.createContext({}); export default RowContext; diff --git a/src/components/seal-table/types.ts b/src/components/seal-table/types.ts index e1686557..374708c4 100644 --- a/src/components/seal-table/types.ts +++ b/src/components/seal-table/types.ts @@ -10,6 +10,8 @@ export interface SealColumnProps { headerStyle?: React.CSSProperties; sorter?: boolean; defaultSortOrder?: 'ascend' | 'descend'; + editable?: boolean; + valueType?: 'text' | 'number' | 'date' | 'datetime' | 'time'; sortOrder?: 'ascend' | 'descend' | null; } @@ -42,6 +44,7 @@ export interface SealTableProps { pollingChildren?: boolean; watchChildren?: boolean; loading?: boolean; + onCell?: (record: any, dataIndex: string) => void; onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void; onExpand?: (expanded: boolean, record: any, rowKey: any) => void; renderChildren?: (data: any) => React.ReactNode; diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index 9a5a2516..4d6a98f2 100644 --- a/src/locales/en-US/common.ts +++ b/src/locales/en-US/common.ts @@ -77,6 +77,7 @@ export default { 'common.button.next': 'Next', 'common.button.prev': 'Previous', 'common.button.back': 'Back', + 'common.button.undo': 'Undo', 'common.button.discardChange': 'Discard', 'common.tips.save': 'You have unsaved changes, leaving this page will discard changes.', diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts index 8b1adda3..7c29bb29 100644 --- a/src/locales/zh-CN/common.ts +++ b/src/locales/zh-CN/common.ts @@ -74,6 +74,7 @@ export default { 'common.button.next': '下一步', 'common.button.prev': '上一步', 'common.button.back': '返回', + 'common.button.undo': '撤销', 'common.button.discardChange': '放弃', 'common.tips.save': '您有未保存的更改，离开此页面将放弃更改。', 'common.tips.cancel': '您有未保存的更改。确定放弃更改？', diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 0ec54fac..786834f5 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -196,6 +196,21 @@ const Models: React.FC = ({ setSortOrder(order); }; + const handleOnCell = async (record: any, dataIndex: string) => { + const params = { + id: record.id, + data: _.omit(record, [ + 'id', + 'ready_replicas', + 'created_at', + 'updated_at', + 'rowIndex' + ]) + }; + await updateModel(params); + message.success(intl.formatMessage({ id: 'common.message.success' })); + }; + const handleAddModal = () => { setOpenAddModal(true); setTitle(intl.formatMessage({ id: 'models.button.deploy' })); @@ -420,6 +435,7 @@ const Models: React.FC = ({ childParentKey="model_id" expandable={true} onSort={handleOnSort} + onCell={handleOnCell} pollingChildren={false} watchChildren={true} loadChildren={getModelInstances} @@ -478,6 +494,8 @@ const Models: React.FC = ({ key="replicas" align="center" span={4} + editable + valueType="number" render={(text, record: ListItem) => { return (