feat(connections): add sorting and close connection support

This commit is contained in:
kunish 2023-08-28 02:32:59 +08:00
parent 5f7293693a
commit 45c9740d3b
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430

View File

@ -1,18 +1,27 @@
import { createEventSignal } from '@solid-primitives/event-listener' import { createEventSignal } from '@solid-primitives/event-listener'
import { createReconnectingWS } from '@solid-primitives/websocket' import { createReconnectingWS } from '@solid-primitives/websocket'
import {
IconSortAscending,
IconSortDescending,
IconX,
} from '@tabler/icons-solidjs'
import { import {
ColumnDef, ColumnDef,
SortingState,
createSolidTable, createSolidTable,
flexRender, flexRender,
getCoreRowModel, getCoreRowModel,
getSortedRowModel,
} from '@tanstack/solid-table' } from '@tanstack/solid-table'
import byteSize from 'byte-size' import byteSize from 'byte-size'
import { isIPv6 } from 'is-ip' import { isIPv6 } from 'is-ip'
import { For, createSignal } from 'solid-js' import { For, createSignal } from 'solid-js'
import { secret, wsEndpointURL } from '~/signals' import { twMerge } from 'tailwind-merge'
import { secret, useRequest, wsEndpointURL } from '~/signals'
import type { Connection } from '~/types' import type { Connection } from '~/types'
export const Connections = () => { export const Connections = () => {
const request = useRequest()
const [search, setSearch] = createSignal('') const [search, setSearch] = createSignal('')
const ws = createReconnectingWS( const ws = createReconnectingWS(
@ -35,7 +44,34 @@ export const Connections = () => {
).connections.slice(-100) ).connections.slice(-100)
} }
const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
const [sorting, setSorting] = createSignal<SortingState>([])
const columns: ColumnDef<Connection>[] = [ const columns: ColumnDef<Connection>[] = [
{
id: 'close',
header: () => (
<div class="flex h-full items-center">
<button
class="btn btn-circle btn-outline btn-xs"
onClick={() => request.delete('connections')}
>
<IconX />
</button>
</div>
),
cell: ({ row }) => (
<div class="flex h-full items-center">
<button
class="btn btn-circle btn-outline btn-xs"
onClick={() => onCloseConnection(row.id)}
>
<IconX />
</button>
</div>
),
},
{ {
accessorKey: 'ID', accessorKey: 'ID',
accessorFn: (row) => row.id, accessorFn: (row) => row.id,
@ -93,6 +129,11 @@ export const Connections = () => {
] ]
const table = createSolidTable({ const table = createSolidTable({
state: {
get sorting() {
return sorting()
},
},
get data() { get data() {
return search() return search()
? connections().filter((connection) => ? connections().filter((connection) =>
@ -105,6 +146,8 @@ export const Connections = () => {
: connections() : connections()
}, },
columns, columns,
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
}) })
@ -125,12 +168,26 @@ export const Connections = () => {
<For each={headerGroup.headers}> <For each={headerGroup.headers}>
{(header) => ( {(header) => (
<th> <th>
{header.isPlaceholder <div
? null class={twMerge(
: flexRender( 'flex items-center justify-between',
header.column.columnDef.header, header.column.getCanSort() &&
header.getContext(), 'cursor-pointer select-none',
)} )}
onClick={header.column.getToggleSortingHandler()}
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{{
asc: <IconSortAscending />,
desc: <IconSortDescending />,
}[header.column.getIsSorted() as string] ?? null}
</div>
</th> </th>
)} )}
</For> </For>