diff options
| -rw-r--r-- | modern/src/DevicesList.js | 21 | ||||
| -rw-r--r-- | modern/src/EditCollectionView.js | 4 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 12 |
3 files changed, 23 insertions, 14 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index e06fd580..10ac4fc7 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'; @@ -126,12 +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); + + useEffect(() => { + setFilteredItems( + filter.trim().length > 0 + ? items.filter((item) => `${item.name} ${item.uniqueId}`.toLowerCase().includes(filter?.toLowerCase())) + : items, + ); + }, [filter, items]); if (listInnerEl.current) { listInnerEl.current.className = classes.listInner; @@ -151,8 +160,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { <FixedSizeList width={width} height={height} - itemCount={items.length} - itemData={{ items, onMenuClick }} + itemCount={filteredItems.length} + itemData={{ items: filteredItems, onMenuClick }} itemSize={72} overscanCount={10} innerRef={listInnerEl} @@ -165,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; diff --git a/modern/src/EditCollectionView.js b/modern/src/EditCollectionView.js index 24e85b7c..2d011302 100644 --- a/modern/src/EditCollectionView.js +++ b/modern/src/EditCollectionView.js @@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({ })); const EditCollectionView = ({ - content, editPath, endpoint, disableAdd, + content, editPath, endpoint, disableAdd, filter, }) => { const classes = useStyles(); const history = useHistory(); @@ -64,7 +64,7 @@ const EditCollectionView = ({ return ( <> - <Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} /> + <Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} filter={filter} /> {adminEnabled && !disableAdd && ( <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}> diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 2f1bc79c..e504ff29 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -98,7 +98,7 @@ const MainPage = () => { const isTablet = useMediaQuery(theme.breakpoints.down('md')); const isPhone = useMediaQuery(theme.breakpoints.down('xs')); - const [deviceName, setDeviceName] = useState(''); + const [searchKeyword, setSearchKeyword] = useState(''); const [collapsed, setCollapsed] = useState(false); const handleClose = () => { @@ -139,11 +139,11 @@ const MainPage = () => { )} <TextField fullWidth - name="deviceName" - value={deviceName} - autoComplete="deviceName" + name="searchKeyword" + value={searchKeyword} + autoComplete="searchKeyword" autoFocus - onChange={(event) => setDeviceName(event.target.value)} + onChange={(event) => setSearchKeyword(event.target.value)} placeholder={t('sharedSearchDevices')} variant="filled" /> @@ -158,7 +158,7 @@ const MainPage = () => { </Toolbar> </Paper> <div className={classes.deviceList}> - <DevicesList /> + <DevicesList filter={searchKeyword} /> </div> </Paper> <BottomMenu /> |