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

feat: added category search and clear search button

Browse Source
This commit is contained in:
atilgner
2023-07-06 16:41:54 -07:00
parent ab7fdfbca9
commit ab535e011f
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'