From 9a144e882dc7b33fd6a6e055b122533941a0361f Mon Sep 17 00:00:00 2001 From: kunish Date: Sun, 10 Sep 2023 17:55:53 +0800 Subject: [PATCH] feat(connections): fuzzy filter --- package.json | 1 + pnpm-lock.yaml | 20 ++++++ .../ConnectionsTableDetailsModal.tsx | 30 +++++++++ src/components/index.ts | 1 + src/pages/Connections.tsx | 62 +++++++++---------- 5 files changed, 81 insertions(+), 33 deletions(-) create mode 100644 src/components/ConnectionsTableDetailsModal.tsx diff --git a/package.json b/package.json index e6741d0..bd253c2 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@solid-primitives/websocket": "^1.1.0", "@solidjs/router": "^0.8.3", "@tabler/icons-solidjs": "^2.34.0", + "@tanstack/match-sorter-utils": "^8.8.4", "@tanstack/solid-table": "^8.9.7", "@tanstack/solid-virtual": "3.0.0-beta.6", "@thisbeyond/solid-dnd": "^0.7.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1bcae3d..3d88cdc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ dependencies: '@tabler/icons-solidjs': specifier: ^2.34.0 version: 2.34.0(solid-js@1.7.11) + '@tanstack/match-sorter-utils': + specifier: ^8.8.4 + version: 8.8.4 '@tanstack/solid-table': specifier: ^8.9.7 version: 8.9.7(solid-js@1.7.11) @@ -2763,6 +2766,16 @@ packages: } dev: false + /@tanstack/match-sorter-utils@8.8.4: + resolution: + { + integrity: sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==, + } + engines: { node: '>=12' } + dependencies: + remove-accents: 0.4.2 + dev: false + /@tanstack/solid-table@8.9.7(solid-js@1.7.11): resolution: { @@ -6841,6 +6854,13 @@ packages: jsesc: 0.5.0 dev: false + /remove-accents@0.4.2: + resolution: + { + integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==, + } + dev: false + /require-directory@2.1.1: resolution: { diff --git a/src/components/ConnectionsTableDetailsModal.tsx b/src/components/ConnectionsTableDetailsModal.tsx new file mode 100644 index 0000000..836e3ff --- /dev/null +++ b/src/components/ConnectionsTableDetailsModal.tsx @@ -0,0 +1,30 @@ +import { Component, Show } from 'solid-js' +import { allConnections } from '~/signals' + +export const ConnectionsTableDetailsModal: Component<{ + selectedConnectionID?: string +}> = (props) => { + return ( + +
+ + 
+            
+              {JSON.stringify(
+                allConnections.find(
+                  ({ id }) => id === props.selectedConnectionID,
+                ),
+                null,
+                2,
+              )}
+            
+
+ +
+ +
+
+ ) +} diff --git a/src/components/index.ts b/src/components/index.ts index 43a97c1..f92b8d8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,6 @@ export * from './Button' export * from './Collapse' +export * from './ConnectionsTableDetailsModal' export * from './ConnectionsTableOrderingModal' export * from './ForTwoColumns' export * from './Header' diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx index f34ca04..c6b660b 100644 --- a/src/pages/Connections.tsx +++ b/src/pages/Connections.tsx @@ -13,8 +13,10 @@ import { IconZoomInFilled, IconZoomOutFilled, } from '@tabler/icons-solidjs' +import { rankItem } from '@tanstack/match-sorter-utils' import { ColumnDef, + FilterFn, GroupingState, SortingState, createSolidTable, @@ -27,9 +29,13 @@ import { } from '@tanstack/solid-table' import byteSize from 'byte-size' import dayjs from 'dayjs' -import { Component, For, Show, createMemo, createSignal } from 'solid-js' +import { For, createMemo, createSignal } from 'solid-js' import { twMerge } from 'tailwind-merge' -import { Button, ConnectionsTableOrderingModal } from '~/components' +import { + Button, + ConnectionsTableDetailsModal, + ConnectionsTableOrderingModal, +} from '~/components' import { CONNECTIONS_TABLE_ACCESSOR_KEY, CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER, @@ -37,7 +43,6 @@ import { } from '~/constants' import { formatTimeFromNow } from '~/helpers' import { - allConnections, tableSize, tableSizeClassName, useConnections, @@ -53,39 +58,23 @@ enum ActiveTab { closedConnections = 'closedConnections', } -const ConnectionDetailsModal: Component<{ - selectedConnectionID?: string -}> = (props) => { - return ( - -
- - 
-            
-              {JSON.stringify(
-                allConnections.find(
-                  ({ id }) => id === props.selectedConnectionID,
-                ),
-                null,
-                2,
-              )}
-            
-
- -
+const fuzzyFilter: FilterFn = (row, columnId, value, addMeta) => { + // Rank the item + const itemRank = rankItem(row.getValue(columnId), value) -
-
- ) + // Store the itemRank info + addMeta({ + itemRank, + }) + + // Return if the item should be filtered in/out + return itemRank.passed } export default () => { const [t] = useI18n() const request = useRequest() - const [search, setSearch] = createSignal('') const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections) const { activeConnections, closedConnections, paused, setPaused } = useConnections() @@ -93,6 +82,7 @@ export default () => { const onSingleConnectionClose = (id: string) => request.delete(`connections/${id}`) + const [globalFilter, setGlobalFilter] = createSignal('') const [columnVisibility, setColumnVisibility] = makePersisted( createSignal(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY), { @@ -267,6 +257,9 @@ export default () => { ) const table = createSolidTable({ + filterFns: { + fuzzy: fuzzyFilter, + }, state: { get columnOrder() { return columnOrder() @@ -281,7 +274,7 @@ export default () => { return columnVisibility() }, get globalFilter() { - return search() + return globalFilter() }, get columnFilters() { return [] @@ -295,7 +288,8 @@ export default () => { sortDescFirst: true, enableHiding: true, columns: columns(), - onGlobalFilterChange: setSearch, + onGlobalFilterChange: setGlobalFilter, + globalFilterFn: fuzzyFilter, onGroupingChange: setGrouping, onSortingChange: setSorting, getFilteredRowModel: getFilteredRowModel(), @@ -343,7 +337,7 @@ export default () => { type="search" class="input join-item input-primary flex-1 sm:input-md" placeholder={t('search')} - onInput={(e) => setSearch(e.target.value)} + onInput={(e) => setGlobalFilter(e.target.value)} />