aboutsummaryrefslogtreecommitdiff
path: root/modern/src/DevicesList.js
diff options
context:
space:
mode:
authorLucas Leite <lbl.lucasleite@gmail.com>2022-02-08 17:48:21 -0300
committerLucas Leite <lbl.lucasleite@gmail.com>2022-02-08 17:48:21 -0300
commitf35692eef0763fe853f3d88a18d6aefbbf5d0d2b (patch)
treeb7660d4ec3ef19f07edbd192eacac72ca8b3c923 /modern/src/DevicesList.js
parent2c004026680cc9b5c1e35d7f7dd4752e56dd7dab (diff)
downloadtrackermap-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.js25
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;