diff --git a/src/models/objectStore.js b/src/models/objectStore.js index a582a78ca..dcc932b39 100644 --- a/src/models/objectStore.js +++ b/src/models/objectStore.js @@ -2,15 +2,16 @@ import { listObjectStores, getObjectStore, createObjectStore, deleteObjectStore import { wsChanges, updateState } from '../utils/websocket' import queryString from 'query-string' import { enableQueryData } from '../utils/dataDependency' +import { getSorter, saveSorter } from '../utils/store' export default { namespace: 'objectstorage', state: { ws: null, data: [], - selected: {}, resourceType: 'objectstore', socketStatus: 'closed', + sorter: getSorter('objectstoreList.sorter'), }, subscriptions: { setup({ dispatch, history }) { @@ -82,5 +83,9 @@ export default { updateWs(state, action) { return { ...state, ws: action.payload } }, + updateSorter(state, action) { + saveSorter('objectstoreList.sorter', action.payload) + return { ...state, sorter: action.payload } + }, }, } diff --git a/src/routes/objectStorage/ObjectStoreActions.js b/src/routes/objectStorage/ObjectStoreActions.js index c1a127c69..352761d8e 100644 --- a/src/routes/objectStorage/ObjectStoreActions.js +++ b/src/routes/objectStorage/ObjectStoreActions.js @@ -8,6 +8,11 @@ const confirm = Modal.confirm function actions({ selected, deleteObjectStore, editObjectStore, administrateObjectStore }) { const handleMenuClick = (event, record) => { + // Stop event propagation, otherwise the click will be processed by + // other UI components, e.g. the table row below the clicked menu, + // which is not wanted in that case. + event.domEvent.stopPropagation() + switch (event.key) { case 'delete': confirm({ diff --git a/src/routes/objectStorage/ObjectStoreList.js b/src/routes/objectStorage/ObjectStoreList.js index 3978b9cc2..d0b3d44e0 100644 --- a/src/routes/objectStorage/ObjectStoreList.js +++ b/src/routes/objectStorage/ObjectStoreList.js @@ -3,6 +3,8 @@ import PropTypes from 'prop-types' import { Table, Tooltip } from 'antd' import { pagination } from '../../utils/page' import ObjectStoreActions from './ObjectStoreActions' +import { sortTable } from '../../utils/sort' +import { setSortOrder } from '../../utils/store' function list({ dataSource, @@ -12,6 +14,9 @@ function list({ editObjectStore, administrateObjectStore, deleteObjectStore, + onSorterChange, + sorter, + onRowClick, }) { const actionsProps = { editObjectStore, @@ -35,6 +40,7 @@ function list({ dataIndex: 'state', key: 'state', width: 160, + sorter: (a, b) => sortTable(a, b, 'state'), render: (text, record) => { const tooltip = `Object Store ${record.name} is ${record.state}` const colormap = storeStateColorMap[record.state] || { color: '', bg: '' } @@ -52,6 +58,7 @@ function list({ dataIndex: 'name', key: 'name', width: 200, + sorter: (a, b) => sortTable(a, b, 'name'), render: (text, record) => { return (
{record.name}
@@ -82,17 +89,21 @@ function list({ }, ] + setSortOrder(columns, sorter) + return (
onSorterChange(s)} rowSelection={rowSelection} dataSource={dataSource} loading={loading} + onRowClick={onRowClick} simple - pagination={pagination} + pagination={pagination('objectStoreSize')} rowKey={record => record.id} scroll={{ x: 970, y: dataSource.length > 0 ? height : 1 }} /> @@ -108,6 +119,9 @@ list.propTypes = { editObjectStore: PropTypes.func, administrateObjectStore: PropTypes.func, deleteObjectStore: PropTypes.func, + sorter: PropTypes.object, + onSorterChange: PropTypes.func, + onRowClick: PropTypes.func, } export default list diff --git a/src/routes/objectStorage/index.js b/src/routes/objectStorage/index.js index ca386c55d..5a165391e 100644 --- a/src/routes/objectStorage/index.js +++ b/src/routes/objectStorage/index.js @@ -22,27 +22,50 @@ class ObjectStore extends React.Component { createModalKey: Math.random(), editModalVisible: false, editModalKey: Math.random(), + commandKeyDown: false, } } componentDidMount() { - let height = document.getElementById('objectStoreTable').offsetHeight - C.ContainerMarginHeight + this.onResize() + window.addEventListener('resize', this.onResize) + window.addEventListener('keydown', this.onKeyDown) + window.addEventListener('keyup', this.onKeyUp) + } + + componentWillUnmount() { + window.removeEventListener('resize', this.onResize) + window.removeEventListener('keydown', this.onKeyDown) + window.removeEventListener('keyup', this.onKeyUp) + } + + onKeyUp = () => { this.setState({ - height, + ...this.state, + commandKeyDown: false, }) - window.onresize = () => { - height = document.getElementById('objectStoreTable').offsetHeight - C.ContainerMarginHeight + } + + onKeyDown = (e) => { + if ((e.keyCode === 91 || e.keyCode === 17) && !this.state.commandKeyDown) { this.setState({ - height, + ...this.state, + commandKeyDown: true, }) - this.props.dispatch({ type: 'app/changeNavbar' }) } } + onResize = () => { + const height = document.getElementById('objectStoreTable').offsetHeight - C.ContainerMarginHeight + this.setState({ + height, + }) + } + showCreateModal = () => { this.setState({ ...this.state, - selected: {}, + selectedRows: [], createModalVisible: true, createModalKey: Math.random(), }) @@ -51,7 +74,7 @@ class ObjectStore extends React.Component { render() { const me = this const { dispatch, loading, location } = this.props - const { data } = this.props.objectstorage + const { data, sorter } = this.props.objectstorage const { field, value } = queryString.parse(this.props.location.search) const settings = this.props.setting.data @@ -113,7 +136,7 @@ class ObjectStore extends React.Component { } const editModalProps = { - selected: this.state.selected, + selected: this.state.selectedRows[0], visible: this.state.editModalVisible, onCancel() { me.setState({ @@ -142,14 +165,14 @@ class ObjectStore extends React.Component { onChange(_, records) { me.setState({ ...me.state, - selectedRows: records, + selectedRows: [...records], }) }, }, editObjectStore: (record) => { - this.setState({ - ...this.state, - selected: record, + me.setState({ + ...me.state, + selectedRows: [record], editModalVisible: true, editModalKey: Math.random(), }) @@ -165,6 +188,33 @@ class ObjectStore extends React.Component { payload: record, }) }, + onSorterChange: (s) => { + dispatch({ + type: 'objectstorage/updateSorter', + payload: { field: s.field, order: s.order, columnKey: s.columnKey }, + }) + }, + sorter, + onRowClick: (record) => { + let selecteRowByClick = [record] + if (me.state.commandKeyDown) { + me.state.selectedRows.forEach((item) => { + if (selecteRowByClick.every((ele) => { + return ele.id !== item.id + })) { + selecteRowByClick.push(item) + } else { + selecteRowByClick = selecteRowByClick.filter((ele) => { + return ele.id !== item.id + }) + } + }) + } + me.setState({ + ...me.state, + selectedRows: [...selecteRowByClick], + }) + }, } const filterProps = { @@ -197,7 +247,7 @@ class ObjectStore extends React.Component { payload: record, callback: () => { me.setState({ - ...this.state, + ...me.state, selectedRows: [], }) },