diff options
Diffstat (limited to 'modern/src')
-rw-r--r-- | modern/src/settings/CalendarsPage.js | 5 | ||||
-rw-r--r-- | modern/src/settings/CommandsPage.js | 5 | ||||
-rw-r--r-- | modern/src/settings/ComputedAttributesPage.js | 5 | ||||
-rw-r--r-- | modern/src/settings/DriversPage.js | 5 | ||||
-rw-r--r-- | modern/src/settings/GroupsPage.js | 5 | ||||
-rw-r--r-- | modern/src/settings/MaintenancesPage.js | 5 | ||||
-rw-r--r-- | modern/src/settings/NotificationsPage.js | 5 | ||||
-rw-r--r-- | modern/src/settings/UsersPage.js | 5 | ||||
-rw-r--r-- | modern/src/settings/components/SearchHeader.js | 38 |
9 files changed, 70 insertions, 8 deletions
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js index 2602f702..c418cff2 100644 --- a/modern/src/settings/CalendarsPage.js +++ b/modern/src/settings/CalendarsPage.js @@ -10,6 +10,7 @@ import SettingsMenu from './components/SettingsMenu'; import CollectionFab from './components/CollectionFab'; import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; const useStyles = makeStyles((theme) => ({ columnAction: { @@ -24,6 +25,7 @@ const CalendarsPage = () => { const [timestamp, setTimestamp] = useState(Date.now()); const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); const [loading, setLoading] = useState(false); useEffectAsync(async () => { @@ -42,6 +44,7 @@ const CalendarsPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedCalendars']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> <Table> <TableHead> <TableRow> @@ -50,7 +53,7 @@ const CalendarsPage = () => { </TableRow> </TableHead> <TableBody> - {!loading ? items.map((item) => ( + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( <TableRow key={item.id}> <TableCell>{item.name}</TableCell> <TableCell className={classes.columnAction} padding="none"> diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js index b6c88587..80ee7df1 100644 --- a/modern/src/settings/CommandsPage.js +++ b/modern/src/settings/CommandsPage.js @@ -12,6 +12,7 @@ import SettingsMenu from './components/SettingsMenu'; import CollectionFab from './components/CollectionFab'; import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; const useStyles = makeStyles((theme) => ({ columnAction: { @@ -26,6 +27,7 @@ const CommandsPage = () => { const [timestamp, setTimestamp] = useState(Date.now()); const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); const [loading, setLoading] = useState(false); useEffectAsync(async () => { @@ -44,6 +46,7 @@ const CommandsPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedSavedCommands']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> <Table> <TableHead> <TableRow> @@ -54,7 +57,7 @@ const CommandsPage = () => { </TableRow> </TableHead> <TableBody> - {!loading ? items.map((item) => ( + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( <TableRow key={item.id}> <TableCell>{item.description}</TableCell> <TableCell>{t(prefixString('command', item.type))}</TableCell> diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js index 59b3adbd..fd5245a7 100644 --- a/modern/src/settings/ComputedAttributesPage.js +++ b/modern/src/settings/ComputedAttributesPage.js @@ -11,6 +11,7 @@ import SettingsMenu from './components/SettingsMenu'; import CollectionFab from './components/CollectionFab'; import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; const useStyles = makeStyles((theme) => ({ columnAction: { @@ -25,6 +26,7 @@ const ComputedAttributesPage = () => { const [timestamp, setTimestamp] = useState(Date.now()); const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); const [loading, setLoading] = useState(false); const administrator = useAdministrator(); @@ -44,6 +46,7 @@ const ComputedAttributesPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedComputedAttributes']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> <Table> <TableHead> <TableRow> @@ -55,7 +58,7 @@ const ComputedAttributesPage = () => { </TableRow> </TableHead> <TableBody> - {!loading ? items.map((item) => ( + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( <TableRow key={item.id}> <TableCell>{item.description}</TableCell> <TableCell>{item.attribute}</TableCell> diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js index 6ea97b31..cbca6bb7 100644 --- a/modern/src/settings/DriversPage.js +++ b/modern/src/settings/DriversPage.js @@ -10,6 +10,7 @@ import SettingsMenu from './components/SettingsMenu'; import CollectionFab from './components/CollectionFab'; import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; const useStyles = makeStyles((theme) => ({ columnAction: { @@ -24,6 +25,7 @@ const DriversPage = () => { const [timestamp, setTimestamp] = useState(Date.now()); const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); const [loading, setLoading] = useState(false); useEffectAsync(async () => { @@ -42,6 +44,7 @@ const DriversPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedDrivers']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> <Table> <TableHead> <TableRow> @@ -51,7 +54,7 @@ const DriversPage = () => { </TableRow> </TableHead> <TableBody> - {!loading ? items.map((item) => ( + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( <TableRow key={item.id}> <TableCell>{item.name}</TableCell> <TableCell>{item.uniqueId}</TableCell> diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js index 21785174..64ae1a1d 100644 --- a/modern/src/settings/GroupsPage.js +++ b/modern/src/settings/GroupsPage.js @@ -10,6 +10,7 @@ import SettingsMenu from './components/SettingsMenu'; import CollectionFab from './components/CollectionFab'; import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; const useStyles = makeStyles((theme) => ({ columnAction: { @@ -24,6 +25,7 @@ const GroupsPage = () => { const [timestamp, setTimestamp] = useState(Date.now()); const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); const [loading, setLoading] = useState(false); useEffectAsync(async () => { @@ -42,6 +44,7 @@ const GroupsPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'settingsGroups']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> <Table> <TableHead> <TableRow> @@ -50,7 +53,7 @@ const GroupsPage = () => { </TableRow> </TableHead> <TableBody> - {!loading ? items.map((item) => ( + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( <TableRow key={item.id}> <TableCell>{item.name}</TableCell> <TableCell className={classes.columnAction} padding="none"> diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js index c82629e4..6dc29e56 100644 --- a/modern/src/settings/MaintenancesPage.js +++ b/modern/src/settings/MaintenancesPage.js @@ -13,6 +13,7 @@ import SettingsMenu from './components/SettingsMenu'; import CollectionFab from './components/CollectionFab'; import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; const useStyles = makeStyles((theme) => ({ columnAction: { @@ -29,6 +30,7 @@ const MaintenacesPage = () => { const [timestamp, setTimestamp] = useState(Date.now()); const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); const [loading, setLoading] = useState(false); const speedUnit = useAttributePreference('speedUnit'); const distanceUnit = useAttributePreference('distanceUnit'); @@ -65,6 +67,7 @@ const MaintenacesPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedMaintenance']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> <Table> <TableHead> <TableRow> @@ -76,7 +79,7 @@ const MaintenacesPage = () => { </TableRow> </TableHead> <TableBody> - {!loading ? items.map((item) => ( + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( <TableRow key={item.id}> <TableCell>{item.name}</TableCell> <TableCell>{item.type}</TableCell> diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js index 3c9a9192..9229e8f1 100644 --- a/modern/src/settings/NotificationsPage.js +++ b/modern/src/settings/NotificationsPage.js @@ -12,6 +12,7 @@ import SettingsMenu from './components/SettingsMenu'; import CollectionFab from './components/CollectionFab'; import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; const useStyles = makeStyles((theme) => ({ columnAction: { @@ -26,6 +27,7 @@ const NotificationsPage = () => { const [timestamp, setTimestamp] = useState(Date.now()); const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); const [loading, setLoading] = useState(false); useEffectAsync(async () => { @@ -55,6 +57,7 @@ const NotificationsPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedNotifications']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> <Table> <TableHead> <TableRow> @@ -66,7 +69,7 @@ const NotificationsPage = () => { </TableRow> </TableHead> <TableBody> - {!loading ? items.map((item) => ( + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( <TableRow key={item.id}> <TableCell>{t(prefixString('event', item.type))}</TableCell> <TableCell>{formatBoolean(item.always, t)}</TableCell> diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js index ad6d3d56..bdebb1bb 100644 --- a/modern/src/settings/UsersPage.js +++ b/modern/src/settings/UsersPage.js @@ -13,6 +13,7 @@ import CollectionFab from './components/CollectionFab'; import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; import { useAdministrator } from '../common/util/permissions'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; const useStyles = makeStyles((theme) => ({ columnAction: { @@ -29,6 +30,7 @@ const UsersPage = () => { const [timestamp, setTimestamp] = useState(Date.now()); const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); const [loading, setLoading] = useState(false); const handleLogin = useCatch(async (userId) => { @@ -62,6 +64,7 @@ const UsersPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'settingsUsers']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> <Table> <TableHead> <TableRow> @@ -74,7 +77,7 @@ const UsersPage = () => { </TableRow> </TableHead> <TableBody> - {!loading ? items.map((item) => ( + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( <TableRow key={item.id}> <TableCell>{item.name}</TableCell> <TableCell>{item.email}</TableCell> diff --git a/modern/src/settings/components/SearchHeader.js b/modern/src/settings/components/SearchHeader.js new file mode 100644 index 00000000..25757ed2 --- /dev/null +++ b/modern/src/settings/components/SearchHeader.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { TextField, useTheme, useMediaQuery } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { useTranslation } from '../../common/components/LocalizationProvider'; + +export const filterByKeyword = (keyword) => (item) => !keyword || JSON.stringify(item).toLowerCase().includes(keyword.toLowerCase()); + +const useStyles = makeStyles((theme) => ({ + header: { + position: 'sticky', + left: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'stretch', + padding: theme.spacing(3, 2, 2), + }, +})); + +const SearchHeader = ({ keyword, setKeyword }) => { + const theme = useTheme(); + const classes = useStyles(); + const t = useTranslation(); + + const phone = useMediaQuery(theme.breakpoints.down('sm')); + + return phone ? ( + <div className={classes.header}> + <TextField + variant="outlined" + placeholder={t('sharedSearch')} + value={keyword} + onChange={(e) => setKeyword(e.target.value)} + /> + </div> + ) : ''; +}; + +export default SearchHeader; |