Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-23 21:35:36 +08:00
Code Issues Projects Releases Wiki Activity

feat(connections): close filtered connections

Browse Source
This commit is contained in:
kunish 2023-09-10 17:29:38 +08:00
parent ff5672fe8d
commit 4f8c4b2d15
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/Connections.tsx
View File

@ -88,7 +88,9 @@ export default () => {
const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections) const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections)
const { activeConnections, closedConnections, paused, setPaused } = const { activeConnections, closedConnections, paused, setPaused } =
useConnections() useConnections()
const onCloseConnection = (id: string) => request.delete(`connections/${id}`) const onAllConnectionsClose = () => request.delete('connections')
const onSingleConnectionClose = (id: string) =>
request.delete(`connections/${id}`)
const [columnVisibility, setColumnVisibility] = makePersisted( const [columnVisibility, setColumnVisibility] = makePersisted(
createSignal<ColumnVisibility>(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY), createSignal<ColumnVisibility>(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY),
@ -112,6 +114,8 @@ export default () => {
header: () => t('details'), header: () => t('details'),
enableGrouping: false, enableGrouping: false,
enableSorting: false, enableSorting: false,
enableColumnFilter: false,
enableGlobalFilter: false,
accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Details, accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Details,
cell: ({ row }) => ( cell: ({ row }) => (
<div class="flex h-4 items-center"> <div class="flex h-4 items-center">
@ -136,12 +140,14 @@ export default () => {
header: () => t('close'), header: () => t('close'),
enableGrouping: false, enableGrouping: false,
enableSorting: false, enableSorting: false,
enableColumnFilter: false,
enableGlobalFilter: false,
accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Close, accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Close,
cell: ({ row }) => ( cell: ({ row }) => (
<div class="flex h-4 items-center"> <div class="flex h-4 items-center">
<Button <Button
class="btn-circle btn-xs" class="btn-circle btn-xs"
onClick={() => onCloseConnection(row.original.id)} onClick={() => onSingleConnectionClose(row.original.id)}
> >
<IconCircleX size="16" /> <IconCircleX size="16" />
</Button> </Button>
@ -276,6 +282,9 @@ export default () => {
get globalFilter() { get globalFilter() {
return search() return search()
}, },
get columnFilters() {
return []
},
}, },
get data() { get data() {
return activeTab() === ActiveTab.activeConnections return activeTab() === ActiveTab.activeConnections
@ -328,30 +337,38 @@ export default () => {
</For> </For>
</div> </div>
<div class="flex w-full items-center gap-2 md:flex-1"> <div class="join flex w-full items-center md:flex-1">
<input <input
type="search" type="search"
class="input input-primary input-sm flex-1 sm:input-md" class="input join-item input-primary flex-1 sm:input-md"
placeholder={t('search')} placeholder={t('search')}
onInput={(e) => setSearch(e.target.value)} onInput={(e) => setSearch(e.target.value)}
/> />
<Button <Button
class="btn-circle btn-sm sm:btn-md" class="join-item sm:btn-md"
onClick={() => setPaused((paused) => !paused)} onClick={() => setPaused((paused) => !paused)}
> >
{paused() ? <IconPlayerPlay /> : <IconPlayerPause />} {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
</Button> </Button>
<Button <Button
class="btn-circle btn-sm sm:btn-md" class="join-item sm:btn-md"
onClick={() => request.delete('connections')} onClick={() => {
if (table.getState().globalFilter) {
table
.getFilteredRowModel()
.rows.forEach(({ id }) => onSingleConnectionClose(id))
} else {
onAllConnectionsClose()
}
}}
> >
<IconCircleX /> <IconCircleX />
</Button> </Button>
<Button <Button
class="btn btn-circle btn-sm sm:btn-md" class="btn join-item sm:btn-md"
onClick={() => { onClick={() => {
const modal = document.querySelector( const modal = document.querySelector(
'#connections-table-ordering-modal', '#connections-table-ordering-modal',