mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat(rule): filter rules and rule providers by search input
This commit is contained in:
parent
1efb009d17
commit
db16200b1c
@ -1,6 +1,6 @@
|
|||||||
import { IconReload } from '@tabler/icons-solidjs'
|
import { IconReload } from '@tabler/icons-solidjs'
|
||||||
import { createVirtualizer } from '@tanstack/solid-virtual'
|
import { createVirtualizer } from '@tanstack/solid-virtual'
|
||||||
import { For, Show, createSignal, onMount } from 'solid-js'
|
import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { Button } from '~/components'
|
import { Button } from '~/components'
|
||||||
import { useStringBooleanMap } from '~/helpers'
|
import { useStringBooleanMap } from '~/helpers'
|
||||||
@ -57,13 +57,38 @@ export default () => {
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
let parentRef: HTMLDivElement | undefined
|
const [globalFilter, setGlobalFilter] = createSignal('')
|
||||||
|
|
||||||
|
const filteredRules = createMemo(() =>
|
||||||
|
rules().filter((rule) => {
|
||||||
|
if (!globalFilter()) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return rule.payload.toLowerCase().includes(globalFilter().toLowerCase())
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
const filteredRuleProviders = createMemo(() =>
|
||||||
|
ruleProviders().filter((ruleProvider) => {
|
||||||
|
if (!globalFilter()) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return ruleProvider.name
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(globalFilter().toLowerCase())
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
let scrollElementRef: HTMLDivElement | undefined
|
||||||
|
|
||||||
const ruleVirtualizer = createVirtualizer({
|
const ruleVirtualizer = createVirtualizer({
|
||||||
get count() {
|
get count() {
|
||||||
return rules().length
|
return filteredRules().length
|
||||||
},
|
},
|
||||||
getScrollElement: () => parentRef!,
|
getItemKey: (index) => filteredRules()[index].payload,
|
||||||
|
getScrollElement: () => scrollElementRef!,
|
||||||
estimateSize: () => 74,
|
estimateSize: () => 74,
|
||||||
overscan: 5,
|
overscan: 5,
|
||||||
})
|
})
|
||||||
@ -72,9 +97,10 @@ export default () => {
|
|||||||
|
|
||||||
const ruleProviderVirtualizer = createVirtualizer({
|
const ruleProviderVirtualizer = createVirtualizer({
|
||||||
get count() {
|
get count() {
|
||||||
return ruleProviders().length
|
return filteredRuleProviders().length
|
||||||
},
|
},
|
||||||
getScrollElement: () => parentRef!,
|
getItemKey: (index) => filteredRuleProviders()[index].name,
|
||||||
|
getScrollElement: () => scrollElementRef!,
|
||||||
estimateSize: () => 74,
|
estimateSize: () => 74,
|
||||||
overscan: 5,
|
overscan: 5,
|
||||||
})
|
})
|
||||||
@ -117,14 +143,26 @@ export default () => {
|
|||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ref={(ref) => (parentRef = ref)} class="flex-1 overflow-y-auto">
|
<input
|
||||||
|
class="input input-bordered input-primary"
|
||||||
|
placeholder={t('search')}
|
||||||
|
value={globalFilter()}
|
||||||
|
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={(ref) => (scrollElementRef = ref)}
|
||||||
|
class="flex-1 overflow-y-auto"
|
||||||
|
>
|
||||||
<Show when={activeTab() === ActiveTab.rules}>
|
<Show when={activeTab() === ActiveTab.rules}>
|
||||||
<div
|
<div
|
||||||
class="relative"
|
class="relative"
|
||||||
style={{ height: `${ruleVirtualizer.getTotalSize()}px` }}
|
style={{ height: `${ruleVirtualizer.getTotalSize()}px` }}
|
||||||
>
|
>
|
||||||
{ruleVirtualizerItems.map((virtualizerItem) => {
|
{ruleVirtualizerItems.map((virtualizerItem) => {
|
||||||
const rule = rules()[virtualizerItem.index]
|
const rule = filteredRules().find(
|
||||||
|
(rule) => rule.payload === virtualizerItem.key,
|
||||||
|
)!
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -157,9 +195,14 @@ export default () => {
|
|||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={activeTab() === ActiveTab.ruleProviders}>
|
<Show when={activeTab() === ActiveTab.ruleProviders}>
|
||||||
<div class="relative">
|
<div
|
||||||
|
class="relative"
|
||||||
|
style={{ height: `${ruleProviderVirtualizer.getTotalSize()}px` }}
|
||||||
|
>
|
||||||
{ruleProviderVirtualizerItems.map((virtualizerItem) => {
|
{ruleProviderVirtualizerItems.map((virtualizerItem) => {
|
||||||
const ruleProvider = ruleProviders()[virtualizerItem.index]
|
const ruleProvider = ruleProviders().find(
|
||||||
|
(ruleProvider) => ruleProvider.name === virtualizerItem.key,
|
||||||
|
)!
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
Loading…
Reference in New Issue
Block a user