fix: expand model after edting replicas
This commit is contained in:
@@ -135,7 +135,11 @@ const CellContent: React.FC<CellContentProps> = (props) => {
|
||||
...row,
|
||||
[dataIndex]: current
|
||||
},
|
||||
dataIndex
|
||||
{
|
||||
dataIndex,
|
||||
newValue: current,
|
||||
oldValue: row[dataIndex]
|
||||
}
|
||||
);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
@@ -1,11 +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 _ from 'lodash';
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import RowContext from '../row-context';
|
||||
import { SealColumnProps } from '../types';
|
||||
import CellContent from './cell-content';
|
||||
|
||||
@@ -33,146 +28,8 @@ const CellWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
interface EditButtonsProps {
|
||||
isEditing: boolean;
|
||||
editable?: any;
|
||||
handleSubmit: () => void;
|
||||
handleUndo: () => void;
|
||||
handleEdit: () => void;
|
||||
}
|
||||
|
||||
interface CellContentProps {
|
||||
isEditing: boolean;
|
||||
current: any;
|
||||
editable: any;
|
||||
onChange: (val: any) => void;
|
||||
row?: any;
|
||||
render?: (text: any, record: any) => React.ReactNode;
|
||||
}
|
||||
|
||||
const EditButtons: React.FC<EditButtonsProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const { isEditing, editable, handleSubmit, handleUndo, handleEdit } = props;
|
||||
if (!editable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<span className="flex-column">
|
||||
<Tooltip
|
||||
key="confirm"
|
||||
title={intl.formatMessage({ id: 'common.button.confirm' })}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
className="m-l-10"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
<CheckOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
title={intl.formatMessage({ id: 'common.button.cancel' })}
|
||||
key="undo"
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
className="m-l-10"
|
||||
onClick={handleUndo}
|
||||
>
|
||||
<UndoOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="flex-column">
|
||||
<Tooltip
|
||||
key="edit"
|
||||
title={
|
||||
_.isBoolean(editable) ? (
|
||||
intl.formatMessage({ id: 'common.button.edit' })
|
||||
) : (
|
||||
<span>{editable.title || ''}</span>
|
||||
)
|
||||
}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
className="m-l-10"
|
||||
onClick={handleEdit}
|
||||
>
|
||||
<FormOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const Content: React.FC<CellContentProps> = (props) => {
|
||||
const { editable, current, isEditing, row, render, onChange } = props;
|
||||
if (isEditing && editable) {
|
||||
const isNumType =
|
||||
typeof editable === 'object' && editable?.valueType === 'number';
|
||||
return isNumType ? (
|
||||
<InputNumber
|
||||
style={{ width: '80px' }}
|
||||
min={0}
|
||||
value={current}
|
||||
onChange={onChange}
|
||||
/>
|
||||
) : (
|
||||
<Input value={current} onChange={(e) => onChange(e.target.value)} />
|
||||
);
|
||||
}
|
||||
|
||||
if (render) {
|
||||
return render(current, row);
|
||||
}
|
||||
return current;
|
||||
};
|
||||
|
||||
const TableCell: React.FC<SealColumnProps> = (props) => {
|
||||
const { row, onCell } = useContext(RowContext);
|
||||
const { dataIndex, render, align, editable } = props;
|
||||
const [isEditing, setIsEditing] = React.useState(false);
|
||||
const [current, setCurrent] = React.useState(row[dataIndex]);
|
||||
const cachedValue = React.useRef(null);
|
||||
|
||||
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 handleValueChange = (val: any) => {
|
||||
setCurrent(val);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
cachedValue.current = row[dataIndex];
|
||||
setCurrent(row[dataIndex]);
|
||||
}, [row[dataIndex]]);
|
||||
|
||||
return (
|
||||
<CellWrapper
|
||||
@@ -182,23 +39,6 @@ const TableCell: React.FC<SealColumnProps> = (props) => {
|
||||
right: align === 'right'
|
||||
})}
|
||||
>
|
||||
{/* <span className="cell-content flex-center">
|
||||
<Content
|
||||
onChange={handleValueChange}
|
||||
isEditing={isEditing}
|
||||
editable={editable}
|
||||
current={current}
|
||||
row={row}
|
||||
render={render}
|
||||
></Content>
|
||||
<EditButtons
|
||||
editable={editable}
|
||||
isEditing={isEditing}
|
||||
handleEdit={handleEdit}
|
||||
handleSubmit={handleSubmit}
|
||||
handleUndo={handleUndo}
|
||||
></EditButtons>
|
||||
</span> */}
|
||||
<CellContent
|
||||
dataIndex={dataIndex}
|
||||
render={render}
|
||||
|
||||
@@ -2,7 +2,10 @@ import React from 'react';
|
||||
|
||||
interface RowContextType {
|
||||
row: Record<string, any>;
|
||||
onCell?: (record: any, dataIndex: string) => any;
|
||||
onCell?: (
|
||||
record: any,
|
||||
data: { dataIndex: string; newValue: any; oldValue: any }
|
||||
) => any;
|
||||
}
|
||||
|
||||
const RowContext = React.createContext<RowContextType>({} as RowContextType);
|
||||
|
||||
@@ -218,14 +218,17 @@ const Models: React.FC<ModelsProps> = ({
|
||||
setSortOrder(order);
|
||||
};
|
||||
|
||||
const handleOnCell = useCallback(async (record: any) => {
|
||||
const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {
|
||||
try {
|
||||
await updateModel(getFormattedData(record));
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
if (extra.newValue > extra.oldValue) {
|
||||
updateExpandedRowKeys([record.id, ...expandedRowKeys]);
|
||||
}
|
||||
} catch (error) {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
});
|
||||
|
||||
const handleStartModel = async (row: ListItem) => {
|
||||
await updateModel(getFormattedData(row, { replicas: 1 }));
|
||||
@@ -236,23 +239,23 @@ const Models: React.FC<ModelsProps> = ({
|
||||
removeExpandedRowKey([row.id]);
|
||||
};
|
||||
|
||||
const handleModalOk = useCallback(
|
||||
async (data: FormData) => {
|
||||
try {
|
||||
await updateModel({
|
||||
data,
|
||||
id: currentData.current?.id as number
|
||||
});
|
||||
setOpenAddModal(false);
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
setTimeout(() => {
|
||||
handleSearch();
|
||||
}, 150);
|
||||
restoreScrollHeight();
|
||||
} catch (error) {}
|
||||
},
|
||||
[handleSearch]
|
||||
);
|
||||
const handleModalOk = async (data: FormData) => {
|
||||
try {
|
||||
await updateModel({
|
||||
data,
|
||||
id: currentData.current?.id as number
|
||||
});
|
||||
setOpenAddModal(false);
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
if (data.replicas > currentData.current?.replicas) {
|
||||
updateExpandedRowKeys([currentData.current?.id, ...expandedRowKeys]);
|
||||
}
|
||||
setTimeout(() => {
|
||||
handleSearch();
|
||||
}, 150);
|
||||
restoreScrollHeight();
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const handleModalCancel = useCallback(() => {
|
||||
setOpenAddModal(false);
|
||||
|
||||
@@ -102,6 +102,10 @@ const AddModal: React.FC<AddModalProps> = ({
|
||||
<Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
|
||||
<SealSelect
|
||||
label={intl.formatMessage({ id: 'users.table.role' })}
|
||||
disabled={
|
||||
data?.id === initialState?.currentUser?.id &&
|
||||
action === PageAction.EDIT
|
||||
}
|
||||
>
|
||||
{UserRolesOptions.map((item) => {
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user