farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-28 19:00:59 +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' import { StyledFab } from 'ui-component/button/StyledFab'
// icons // icons
import { IconPlus, IconSearch, IconMinus } from '@tabler/icons' import { IconPlus, IconSearch, IconMinus, IconX } from '@tabler/icons'
// const // const
import { baseURL } from 'store/constant' 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) => { const filterSearch = (value) => {
setSearchValue(value) setSearchValue(value)
setTimeout(() => { setTimeout(() => {
if (value) { if (value) {
const returnData = nodesData.filter((nd) => nd.name.toLowerCase().includes(value.toLowerCase())) const returnData = getSearchedNodes(value)
groupByCategory(returnData, true) groupByCategory(returnData, true)
scrollTop() scrollTop()
} else if (value === '') { } else if (value === '') {
@@ -167,7 +176,7 @@ const AddNodes = ({ nodesData, node }) => {
<Typography variant='h4'>Add Nodes</Typography> <Typography variant='h4'>Add Nodes</Typography>
</Stack> </Stack>
<OutlinedInput <OutlinedInput
sx={{ width: '100%', pr: 1, pl: 2, my: 2 }} sx={{ width: '100%', pr: 2, pl: 2, my: 2 }}
id='input-search-node' id='input-search-node'
value={searchValue} value={searchValue}
onChange={(e) => filterSearch(e.target.value)} 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]} /> <IconSearch stroke={1.5} size='1rem' color={theme.palette.grey[500]} />
</InputAdornment> </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' aria-describedby='search-helper-text'
inputProps={{ inputProps={{
'aria-label': 'weight' 'aria-label': 'weight'