feat(rule): fuzzy filter

This commit is contained in:
kunish 2023-09-26 23:40:46 +08:00
parent a68b95045c
commit f53a1a4cb3
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 23 additions and 16 deletions

View File

@ -56,6 +56,7 @@
"ky": "^1.0.1",
"lint-staged": "^14.0.1",
"lodash": "^4.17.21",
"match-sorter": "^6.3.1",
"prettier": "^3.0.3",
"prettier-plugin-organize-imports": "^3.2.3",
"prettier-plugin-tailwindcss": "^0.5.4",

View File

@ -131,6 +131,9 @@ dependencies:
lodash:
specifier: ^4.17.21
version: 4.17.21
match-sorter:
specifier: ^6.3.1
version: 6.3.1
prettier:
specifier: ^3.0.3
version: 3.0.3
@ -4579,6 +4582,13 @@ packages:
engines: {node: '>=8'}
dev: false
/match-sorter@6.3.1:
resolution: {integrity: sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==}
dependencies:
'@babel/runtime': 7.22.15
remove-accents: 0.4.2
dev: false
/meow@8.1.2:
resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
engines: {node: '>=10'}

View File

@ -1,11 +1,13 @@
import { IconReload } from '@tabler/icons-solidjs'
import { createVirtualizer } from '@tanstack/solid-virtual'
import { matchSorter } from 'match-sorter'
import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { Button } from '~/components'
import { useStringBooleanMap } from '~/helpers'
import { useI18n } from '~/i18n'
import { formatTimeFromNow, useRules } from '~/signals'
import { Rule, RuleProvider } from '~/types'
enum ActiveTab {
ruleProviders = 'ruleProviders',
@ -60,25 +62,19 @@ export default () => {
const [globalFilter, setGlobalFilter] = createSignal('')
const filteredRules = createMemo(() =>
rules().filter((rule) => {
if (!globalFilter()) {
return true
}
return rule.payload.toLowerCase().includes(globalFilter().toLowerCase())
}),
globalFilter()
? matchSorter(rules(), globalFilter(), {
keys: ['type', 'payload', 'type'] as (keyof Rule)[],
})
: rules(),
)
const filteredRuleProviders = createMemo(() =>
ruleProviders().filter((ruleProvider) => {
if (!globalFilter()) {
return true
}
return ruleProvider.name
.toLowerCase()
.includes(globalFilter().toLowerCase())
}),
globalFilter()
? matchSorter(ruleProviders(), globalFilter(), {
keys: ['name', 'vehicleType', 'behavior'] as (keyof RuleProvider)[],
})
: ruleProviders(),
)
let scrollElementRef: HTMLDivElement | undefined