diff options
| -rw-r--r-- | modern/src/settings/PreferencesPage.js | 40 |
1 files changed, 26 insertions, 14 deletions
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js index a29c056d..54c529f6 100644 --- a/modern/src/settings/PreferencesPage.js +++ b/modern/src/settings/PreferencesPage.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { - Accordion, AccordionSummary, AccordionDetails, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, FormGroup, InputAdornment, IconButton, OutlinedInput, + Accordion, AccordionSummary, AccordionDetails, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, FormGroup, InputAdornment, IconButton, OutlinedInput, Autocomplete, TextField, createFilterOptions, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; @@ -62,6 +62,8 @@ const PreferencesPage = () => { const [mapCluster, setMapCluster] = usePersistedState('mapCluster', true); const [mapOnSelect, setMapOnSelect] = usePersistedState('mapOnSelect', false); + const filter = createFilterOptions(); + const generateToken = useCatch(async () => { const response = await fetch('/api/session/token', { method: 'POST', @@ -180,19 +182,29 @@ const PreferencesPage = () => { ))} </Select> </FormControl> - <FormControl> - <InputLabel>{t('sharedAttributes')}</InputLabel> - <Select - label={t('sharedAttributes')} - value={positionItems} - onChange={(e) => setPositionItems(e.target.value)} - multiple - > - {Object.keys(positionAttributes).map((key) => ( - <MenuItem key={key} value={key}>{positionAttributes[key].name}</MenuItem> - ))} - </Select> - </FormControl> + <Autocomplete + multiple + freeSolo + options={Object.keys(positionAttributes)} + getOptionLabel={(option) => (positionAttributes.hasOwnProperty(option) ? positionAttributes[option].name : option)} + value={positionItems} + onChange={(_, option) => { + setPositionItems(option); + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + if (params.inputValue && !filtered.includes(params.inputValue)) { + filtered.push(params.inputValue); + } + return filtered; + }} + renderInput={(params) => ( + <TextField + {...params} + placeholder={t('sharedAttributes')} + /> + )} + /> <FormGroup> <FormControlLabel control={<Checkbox checked={mapGeofences} onChange={(e) => setMapGeofences(e.target.checked)} />} |