fix: expand model after edting replicas
This commit is contained in:
@@ -135,7 +135,11 @@ const CellContent: React.FC<CellContentProps> = (props) => {
|
|||||||
...row,
|
...row,
|
||||||
[dataIndex]: current
|
[dataIndex]: current
|
||||||
},
|
},
|
||||||
dataIndex
|
{
|
||||||
|
dataIndex,
|
||||||
|
newValue: current,
|
||||||
|
oldValue: row[dataIndex]
|
||||||
|
}
|
||||||
);
|
);
|
||||||
setIsEditing(false);
|
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 classNames from 'classnames';
|
||||||
import _ from 'lodash';
|
import React from 'react';
|
||||||
import React, { useContext, useEffect } from 'react';
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import RowContext from '../row-context';
|
|
||||||
import { SealColumnProps } from '../types';
|
import { SealColumnProps } from '../types';
|
||||||
import CellContent from './cell-content';
|
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 TableCell: React.FC<SealColumnProps> = (props) => {
|
||||||
const { row, onCell } = useContext(RowContext);
|
|
||||||
const { dataIndex, render, align, editable } = props;
|
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 (
|
return (
|
||||||
<CellWrapper
|
<CellWrapper
|
||||||
@@ -182,23 +39,6 @@ const TableCell: React.FC<SealColumnProps> = (props) => {
|
|||||||
right: align === 'right'
|
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
|
<CellContent
|
||||||
dataIndex={dataIndex}
|
dataIndex={dataIndex}
|
||||||
render={render}
|
render={render}
|
||||||
|
|||||||
@@ -2,7 +2,10 @@ import React from 'react';
|
|||||||
|
|
||||||
interface RowContextType {
|
interface RowContextType {
|
||||||
row: Record<string, any>;
|
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);
|
const RowContext = React.createContext<RowContextType>({} as RowContextType);
|
||||||
|
|||||||
@@ -218,14 +218,17 @@ const Models: React.FC<ModelsProps> = ({
|
|||||||
setSortOrder(order);
|
setSortOrder(order);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOnCell = useCallback(async (record: any) => {
|
const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {
|
||||||
try {
|
try {
|
||||||
await updateModel(getFormattedData(record));
|
await updateModel(getFormattedData(record));
|
||||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||||
|
if (extra.newValue > extra.oldValue) {
|
||||||
|
updateExpandedRowKeys([record.id, ...expandedRowKeys]);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// ignore
|
// ignore
|
||||||
}
|
}
|
||||||
}, []);
|
});
|
||||||
|
|
||||||
const handleStartModel = async (row: ListItem) => {
|
const handleStartModel = async (row: ListItem) => {
|
||||||
await updateModel(getFormattedData(row, { replicas: 1 }));
|
await updateModel(getFormattedData(row, { replicas: 1 }));
|
||||||
@@ -236,23 +239,23 @@ const Models: React.FC<ModelsProps> = ({
|
|||||||
removeExpandedRowKey([row.id]);
|
removeExpandedRowKey([row.id]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleModalOk = useCallback(
|
const handleModalOk = async (data: FormData) => {
|
||||||
async (data: FormData) => {
|
try {
|
||||||
try {
|
await updateModel({
|
||||||
await updateModel({
|
data,
|
||||||
data,
|
id: currentData.current?.id as number
|
||||||
id: currentData.current?.id as number
|
});
|
||||||
});
|
setOpenAddModal(false);
|
||||||
setOpenAddModal(false);
|
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
if (data.replicas > currentData.current?.replicas) {
|
||||||
setTimeout(() => {
|
updateExpandedRowKeys([currentData.current?.id, ...expandedRowKeys]);
|
||||||
handleSearch();
|
}
|
||||||
}, 150);
|
setTimeout(() => {
|
||||||
restoreScrollHeight();
|
handleSearch();
|
||||||
} catch (error) {}
|
}, 150);
|
||||||
},
|
restoreScrollHeight();
|
||||||
[handleSearch]
|
} catch (error) {}
|
||||||
);
|
};
|
||||||
|
|
||||||
const handleModalCancel = useCallback(() => {
|
const handleModalCancel = useCallback(() => {
|
||||||
setOpenAddModal(false);
|
setOpenAddModal(false);
|
||||||
|
|||||||
@@ -102,6 +102,10 @@ const AddModal: React.FC<AddModalProps> = ({
|
|||||||
<Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
|
<Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
|
||||||
<SealSelect
|
<SealSelect
|
||||||
label={intl.formatMessage({ id: 'users.table.role' })}
|
label={intl.formatMessage({ id: 'users.table.role' })}
|
||||||
|
disabled={
|
||||||
|
data?.id === initialState?.currentUser?.id &&
|
||||||
|
action === PageAction.EDIT
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{UserRolesOptions.map((item) => {
|
{UserRolesOptions.map((item) => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user