diff options
author | Lucas Leite <lbl.lucasleite@gmail.com> | 2022-02-08 17:48:21 -0300 |
---|---|---|
committer | Lucas Leite <lbl.lucasleite@gmail.com> | 2022-02-08 17:48:21 -0300 |
commit | f35692eef0763fe853f3d88a18d6aefbbf5d0d2b (patch) | |
tree | b7660d4ec3ef19f07edbd192eacac72ca8b3c923 /modern/src/DevicesList.js | |
parent | 2c004026680cc9b5c1e35d7f7dd4752e56dd7dab (diff) | |
download | trackermap-web-f35692eef0763fe853f3d88a18d6aefbbf5d0d2b.tar.gz trackermap-web-f35692eef0763fe853f3d88a18d6aefbbf5d0d2b.tar.bz2 trackermap-web-f35692eef0763fe853f3d88a18d6aefbbf5d0d2b.zip |
Changed devices list search
Diffstat (limited to 'modern/src/DevicesList.js')
-rw-r--r-- | modern/src/DevicesList.js | 25 |
1 files changed, 15 insertions, 10 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index f98e5c72..fdbdfcdf 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; @@ -18,7 +18,7 @@ import { devicesActions } from './store'; import EditCollectionView from './EditCollectionView'; import { useEffectAsync } from './reactHelper'; import { formatPosition } from './common/formatter'; -import { getDevices, getFilteredDevices, getPosition } from './common/selectors'; +import { getDevices, getPosition } from './common/selectors'; import { useTranslation } from './LocalizationProvider'; const useStyles = makeStyles((theme) => ({ @@ -126,16 +126,21 @@ const DeviceRow = ({ data, index, style }) => { ); }; -const DeviceView = ({ updateTimestamp, onMenuClick }) => { +const DeviceView = ({ updateTimestamp, onMenuClick, filter }) => { const classes = useStyles(); const dispatch = useDispatch(); const listInnerEl = useRef(null); const items = useSelector(getDevices); + const [filteredItems, setFilteredItems] = useState(null); - const filteredItems = useSelector(getFilteredDevices); - - const getItems = () => (filteredItems.length === 0 ? items : filteredItems); + useEffect(() => { + setFilteredItems( + filter.trim().length > 0 + ? items.filter((item) => `${item.name} ${item.uniqueId} ${item.groupId}`.toLowerCase().includes(filter?.toLowerCase())) + : items, + ); + }, [filter, items]); if (listInnerEl.current) { listInnerEl.current.className = classes.listInner; @@ -155,8 +160,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { <FixedSizeList width={width} height={height} - itemCount={getItems().length} - itemData={{ items: getItems(), onMenuClick }} + itemCount={filteredItems.length} + itemData={{ items: filteredItems, onMenuClick }} itemSize={72} overscanCount={10} innerRef={listInnerEl} @@ -169,8 +174,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { ); }; -const DevicesList = () => ( - <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd /> +const DevicesList = ({ filter }) => ( + <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd filter={filter} /> ); export default DevicesList; |