farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-22 11:01:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #496 from AidanTilgner/feature/nodes-search-qol-updates

Browse Source 
Feature/Nodes Search Quality of Life Updates
This commit is contained in:
Henry Heng
2023-07-07 12:14:25 +01:00
committed by GitHub
parent ab7fdfbca9 ab535e011f
commit 4dd43fb2c4
1 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/views/canvas/AddNodes.js
+34 -3
View File
@@ -34,7 +34,7 @@ import Transitions from 'ui-component/extended/Transitions'
import { StyledFab } from 'ui-component/button/StyledFab'
// icons
import { IconPlus, IconSearch, IconMinus } from '@tabler/icons'
import { IconPlus, IconSearch, IconMinus, IconX } from '@tabler/icons'
// const
import { baseURL } from 'store/constant'
@@ -61,11 +61,20 @@ const AddNodes = ({ nodesData, node }) => {
}
}
const getSearchedNodes = (value) => {
const passed = nodesData.filter((nd) => {
const passesQuery = nd.name.toLowerCase().includes(value.toLowerCase())
const passesCategory = nd.category.toLowerCase().includes(value.toLowerCase())
return passesQuery || passesCategory
})
return passed
}
const filterSearch = (value) => {
setSearchValue(value)
setTimeout(() => {
if (value) {
const returnData = nodesData.filter((nd) => nd.name.toLowerCase().includes(value.toLowerCase()))
const returnData = getSearchedNodes(value)
groupByCategory(returnData, true)
scrollTop()
} else if (value === '') {
@@ -167,7 +176,7 @@ const AddNodes = ({ nodesData, node }) => {
<Typography variant='h4'>Add Nodes</Typography>
</Stack>
<OutlinedInput
sx={{ width: '100%', pr: 1, pl: 2, my: 2 }}
sx={{ width: '100%', pr: 2, pl: 2, my: 2 }}
id='input-search-node'
value={searchValue}
onChange={(e) => filterSearch(e.target.value)}
@@ -177,6 +186,28 @@ const AddNodes = ({ nodesData, node }) => {
<IconSearch stroke={1.5} size='1rem' color={theme.palette.grey[500]} />
</InputAdornment>
}
endAdornment={
<InputAdornment
position='end'
sx={{
cursor: 'pointer',
color: theme.palette.grey[500],
'&:hover': {
color: theme.palette.grey[900]
}
}}
title='Clear Search'
>
<IconX
stroke={1.5}
size='1rem'
onClick={() => filterSearch('')}
style={{
cursor: 'pointer'
}}
/>
</InputAdornment>
}
aria-describedby='search-helper-text'
inputProps={{
'aria-label': 'weight'