Skip to content

Commit c7e6e35

Browse files
committed
fix: Add multiple selection & delete in Hosts Table
1 parent cfb8c96 commit c7e6e35

File tree

1 file changed

+52
-3
lines changed

1 file changed

+52
-3
lines changed

src/js/components/HostTable.tsx

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from 'react'
1+
import React, { useEffect, useState } from 'react'
22
import { getHostKey, getHostName } from 'libs'
33
import Loading from 'components/Loading'
44
import queryString from 'query-string'
@@ -30,6 +30,13 @@ export default observer((props) => {
3030
AppStore.init({})
3131
}, [])
3232
const history = useHistory()
33+
const [selectedRowKeys, setSelectedRowKeys] = useState([])
34+
const rowSelection = {
35+
selectedRowKeys,
36+
onChange: setSelectedRowKeys,
37+
selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT]
38+
}
39+
3340
const { AppStore } = useStore()
3441
const { hosts, loading } = AppStore
3542
if (loading) {
@@ -38,6 +45,7 @@ export default observer((props) => {
3845

3946
const data = hosts.map((host) => {
4047
return {
48+
key: getHostKey(host),
4149
host,
4250
isRegex: Boolean(host.isRegex)
4351
}
@@ -64,7 +72,7 @@ export default observer((props) => {
6472
{
6573
title: 'Action',
6674
key: 'action',
67-
render: ({ host, isRegex }) => {
75+
render: ({ host }) => {
6876
const name = getHostName(host)
6977
return (
7078
<Popconfirm
@@ -82,16 +90,57 @@ export default observer((props) => {
8290
}
8391
}
8492
]
93+
const hasSelected = selectedRowKeys.length > 0
8594
return (
8695
<div style={{ overflow: 'scroll', height: '100vh' }}>
8796
<Affix offsetTop={0.01}>
8897
<PageHeader
8998
ghost={false}
9099
onBack={() => history.goBack()}
91100
title='All Hosts & Patterns'
101+
extra={
102+
<>
103+
<span style={{ marginLeft: 8 }}>
104+
{hasSelected
105+
? `Selected ${selectedRowKeys.length} host${
106+
selectedRowKeys.length > 1 ? 's' : ''
107+
}`
108+
: ''}
109+
</span>
110+
<Popconfirm
111+
disabled={!hasSelected}
112+
title={`Are you sure delete all selected host${
113+
selectedRowKeys.length > 1 ? 's' : ''
114+
}`}
115+
onConfirm={() => {
116+
const toDelete = new Set(selectedRowKeys)
117+
data
118+
.filter((x) => toDelete.has(x.key))
119+
.map((x) => x.host)
120+
.forEach((host) => AppStore.removeHost({ host }))
121+
message.success(
122+
`Successfully remove all selected host${
123+
selectedRowKeys.length > 1 ? 's' : ''
124+
}`
125+
)
126+
}}
127+
okText='Yes'
128+
cancelText='No'
129+
>
130+
<Button type='danger' disabled={!hasSelected}>
131+
Delete
132+
</Button>
133+
</Popconfirm>
134+
</>
135+
}
92136
/>
93137
</Affix>
94-
<Table columns={columns} dataSource={data} pagination={false} />
138+
<Table
139+
columns={columns}
140+
rowSelection={rowSelection}
141+
dataSource={data}
142+
pagination={false}
143+
/>
95144
</div>
96145
)
97146
})

0 commit comments

Comments
 (0)