aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/settings/ComputedAttributePage.js61
1 files changed, 37 insertions, 24 deletions
diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js
index 67651fce..95681f2a 100644
--- a/modern/src/settings/ComputedAttributePage.js
+++ b/modern/src/settings/ComputedAttributePage.js
@@ -9,6 +9,8 @@ import {
MenuItem,
Select,
TextField,
+ createFilterOptions,
+ Autocomplete,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -33,7 +35,6 @@ const ComputedAttributePage = () => {
const positionAttributes = usePositionAttributes(t);
const [item, setItem] = useState();
- const [key, setKey] = useState();
const options = Object.entries(positionAttributes).map(([key, value]) => ({
key,
@@ -41,16 +42,9 @@ const ComputedAttributePage = () => {
type: value.type,
}));
- const handleChange = (event) => {
- const newValue = event.target.value;
- setKey(newValue);
- const positionAttribute = positionAttributes[newValue];
- if (positionAttribute && positionAttribute.type) {
- setItem({ ...item, attribute: newValue, type: positionAttribute.type });
- } else {
- setItem({ ...item, attribute: newValue });
- }
- };
+ const filter = createFilterOptions({
+ stringify: (option) => option.name,
+ });
const validate = () => item && item.description && item.expression;
@@ -76,18 +70,37 @@ const ComputedAttributePage = () => {
onChange={(event) => setItem({ ...item, description: event.target.value })}
label={t('sharedDescription')}
/>
- <FormControl>
- <InputLabel>{t('sharedAttribute')}</InputLabel>
- <Select
- label={t('sharedAttribute')}
- value={item.attribute || ''}
- onChange={handleChange}
- >
- {options.map((option) => (
- <MenuItem key={option.key} value={option.key}>{option.name}</MenuItem>
- ))}
- </Select>
- </FormControl>
+ <Autocomplete
+ onChange={(_, option) => {
+ const attribute = option ? option.key || option : null;
+ if (option && option.type) {
+ setItem({ ...item, attribute, type: option.type });
+ } else {
+ setItem({ ...item, attribute });
+ }
+ }}
+ filterOptions={(options, params) => {
+ const filtered = filter(options, params);
+ if (params.inputValue) {
+ filtered.push({
+ key: params.inputValue,
+ name: params.inputValue,
+ });
+ }
+ return filtered;
+ }}
+ options={options}
+ getOptionLabel={(option) => option.name || option}
+ renderOption={(props, option) => (
+ <li {...props}>
+ {option.name}
+ </li>
+ )}
+ renderInput={(params) => (
+ <TextField {...params} label={t('sharedAttribute')} />
+ )}
+ freeSolo
+ />
<TextField
value={item.expression || ''}
onChange={(event) => setItem({ ...item, expression: event.target.value })}
@@ -95,7 +108,7 @@ const ComputedAttributePage = () => {
multiline
rows={4}
/>
- <FormControl disabled={key in positionAttributes}>
+ <FormControl disabled={item.attribute in positionAttributes}>
<InputLabel>{t('sharedType')}</InputLabel>
<Select
label={t('sharedType')}