From 76227fd1b390d4fae6b14e4c04a5bae898e385e9 Mon Sep 17 00:00:00 2001 From: Lucas Leite Date: Tue, 8 Feb 2022 11:23:57 -0300 Subject: Update translation for Search Devices --- modern/src/MainPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'modern/src/MainPage.js') diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 7fd43154..2f1bc79c 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -144,7 +144,7 @@ const MainPage = () => { autoComplete="deviceName" autoFocus onChange={(event) => setDeviceName(event.target.value)} - placeholder="Search Devices" + placeholder={t('sharedSearchDevices')} variant="filled" /> history.push('/device')}> -- cgit v1.2.3 From 784a2e8194c08349293a7bae9a3b96473301dd01 Mon Sep 17 00:00:00 2001 From: Lucas Leite Date: Tue, 8 Feb 2022 15:35:04 -0300 Subject: Update devices list search --- modern/src/DevicesList.js | 10 +++++++--- modern/src/MainPage.js | 5 +++++ modern/src/common/selectors.js | 2 ++ modern/src/store/devices.js | 9 +++++++++ 4 files changed, 23 insertions(+), 3 deletions(-) (limited to 'modern/src/MainPage.js') diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index e06fd580..f5482252 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -18,7 +18,7 @@ import { devicesActions } from './store'; import EditCollectionView from './EditCollectionView'; import { useEffectAsync } from './reactHelper'; import { formatPosition } from './common/formatter'; -import { getDevices, getPosition } from './common/selectors'; +import { getDevices, getFilteredDevices, getPosition } from './common/selectors'; import { useTranslation } from './LocalizationProvider'; const useStyles = makeStyles((theme) => ({ @@ -133,6 +133,10 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { const items = useSelector(getDevices); + const filteredItems = useSelector(getFilteredDevices); + + const getItems = () => filteredItems.length == 0 ? items : filteredItems; + if (listInnerEl.current) { listInnerEl.current.className = classes.listInner; } @@ -151,8 +155,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { ({ root: { @@ -93,6 +95,7 @@ const MainPage = () => { const classes = useStyles(); const history = useHistory(); const theme = useTheme(); + const dispatch = useDispatch(); const t = useTranslation(); const isTablet = useMediaQuery(theme.breakpoints.down('md')); @@ -105,6 +108,8 @@ const MainPage = () => { setCollapsed(!collapsed); }; + useEffect(() => dispatch(devicesActions.filterByName(deviceName.trim())), [deviceName]); + useEffect(() => setCollapsed(isTablet), [isTablet]); return ( diff --git a/modern/src/common/selectors.js b/modern/src/common/selectors.js index 0c4c02e1..45a79504 100644 --- a/modern/src/common/selectors.js +++ b/modern/src/common/selectors.js @@ -4,4 +4,6 @@ export const getUserId = (state) => state.session.user?.id; export const getDevices = (state) => Object.values(state.devices.items); +export const getFilteredDevices = (state) => Object.values(state.devices.filteredItems); + export const getPosition = (id) => (state) => state.positions.items[id]; diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js index cca23cb9..ab4ca9ee 100644 --- a/modern/src/store/devices.js +++ b/modern/src/store/devices.js @@ -5,6 +5,7 @@ const { reducer, actions } = createSlice({ initialState: { items: {}, selectedId: null, + filteredItems: {}, }, reducers: { refresh(state, action) { @@ -20,6 +21,14 @@ const { reducer, actions } = createSlice({ remove(state, action) { delete state.items[action.payload]; }, + filterByName(state, action) { + return { + ...state, + filteredItems: action.payload ? + Object.values(state.items).filter((item) => item.name?.toLowerCase().includes(action.payload?.toLowerCase())) + : state.items, + } + } }, }); -- cgit v1.2.3 From f35692eef0763fe853f3d88a18d6aefbbf5d0d2b Mon Sep 17 00:00:00 2001 From: Lucas Leite Date: Tue, 8 Feb 2022 17:48:21 -0300 Subject: Changed devices list search --- modern/src/DevicesList.js | 25 +++++++++++++++---------- modern/src/EditCollectionView.js | 4 ++-- modern/src/MainPage.js | 7 +------ modern/src/common/selectors.js | 2 -- modern/src/store/devices.js | 8 -------- 5 files changed, 18 insertions(+), 28 deletions(-) (limited to 'modern/src/MainPage.js') 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 }) => { { ); }; -const DevicesList = () => ( - +const DevicesList = ({ 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 ( <> - + {adminEnabled && !disableAdd && ( diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 4a266328..b20c1264 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react'; -import { useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { makeStyles, Paper, Toolbar, TextField, IconButton, Button, @@ -23,7 +22,6 @@ import BottomMenu from './components/BottomMenu'; import { useTranslation } from './LocalizationProvider'; import PoiMap from './map/PoiMap'; import MapPadding from './map/MapPadding'; -import { devicesActions } from './store'; const useStyles = makeStyles((theme) => ({ root: { @@ -95,7 +93,6 @@ const MainPage = () => { const classes = useStyles(); const history = useHistory(); const theme = useTheme(); - const dispatch = useDispatch(); const t = useTranslation(); const isTablet = useMediaQuery(theme.breakpoints.down('md')); @@ -108,8 +105,6 @@ const MainPage = () => { setCollapsed(!collapsed); }; - useEffect(() => dispatch(devicesActions.filterByName(deviceName.trim())), [deviceName]); - useEffect(() => setCollapsed(isTablet), [isTablet]); return ( @@ -163,7 +158,7 @@ const MainPage = () => {
- +
diff --git a/modern/src/common/selectors.js b/modern/src/common/selectors.js index 45a79504..0c4c02e1 100644 --- a/modern/src/common/selectors.js +++ b/modern/src/common/selectors.js @@ -4,6 +4,4 @@ export const getUserId = (state) => state.session.user?.id; export const getDevices = (state) => Object.values(state.devices.items); -export const getFilteredDevices = (state) => Object.values(state.devices.filteredItems); - export const getPosition = (id) => (state) => state.positions.items[id]; diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js index cfe8f162..52a002dc 100644 --- a/modern/src/store/devices.js +++ b/modern/src/store/devices.js @@ -21,14 +21,6 @@ const { reducer, actions } = createSlice({ remove(state, action) { delete state.items[action.payload]; }, - filterByName(state, action) { - return { - ...state, - filteredItems: action.payload - ? Object.values(state.items).filter((item) => item.name?.toLowerCase().includes(action.payload?.toLowerCase())) - : state.items, - }; - }, }, }); -- cgit v1.2.3 From 110012324b5a58a48af1894b66b0068a444263db Mon Sep 17 00:00:00 2001 From: Lucas Leite Date: Tue, 8 Feb 2022 19:06:09 -0300 Subject: Changed device list search --- modern/src/DevicesList.js | 2 +- modern/src/MainPage.js | 12 ++++++------ modern/src/store/devices.js | 1 - 3 files changed, 7 insertions(+), 8 deletions(-) (limited to 'modern/src/MainPage.js') diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index fdbdfcdf..10ac4fc7 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -137,7 +137,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick, filter }) => { useEffect(() => { setFilteredItems( filter.trim().length > 0 - ? items.filter((item) => `${item.name} ${item.uniqueId} ${item.groupId}`.toLowerCase().includes(filter?.toLowerCase())) + ? items.filter((item) => `${item.name} ${item.uniqueId}`.toLowerCase().includes(filter?.toLowerCase())) : items, ); }, [filter, items]); diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index b20c1264..0176c7f0 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 = () => { )} setDeviceName(event.target.value)} + onChange={(event) => setSearchKeyword(event.target.value)} placeholder="Search Devices" variant="filled" /> @@ -158,7 +158,7 @@ const MainPage = () => {
- +
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js index 52a002dc..cca23cb9 100644 --- a/modern/src/store/devices.js +++ b/modern/src/store/devices.js @@ -5,7 +5,6 @@ const { reducer, actions } = createSlice({ initialState: { items: {}, selectedId: null, - filteredItems: {}, }, reducers: { refresh(state, action) { -- cgit v1.2.3