1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import React, { useState } from 'react';
import {
Accordion,
AccordionSummary,
AccordionDetails,
Typography,
FormControl,
InputLabel,
MenuItem,
Select,
TextField,
createFilterOptions,
Autocomplete,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
import { useTranslation } from '../common/components/LocalizationProvider';
import usePositionAttributes from '../common/attributes/usePositionAttributes';
import SettingsMenu from './components/SettingsMenu';
const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
const ComputedAttributePage = () => {
const classes = useStyles();
const t = useTranslation();
const positionAttributes = usePositionAttributes(t);
const [item, setItem] = useState();
const options = Object.entries(positionAttributes).map(([key, value]) => ({
key,
name: value.name,
type: value.type,
}));
const filter = createFilterOptions({
stringify: (option) => option.name,
});
const validate = () => item && item.description && item.expression;
return (
<EditItemView
endpoint="attributes/computed"
item={item}
setItem={setItem}
validate={validate}
menu={<SettingsMenu />}
breadcrumbs={['settingsTitle', 'sharedComputedAttribute']}
>
{item && (
<Accordion defaultExpanded>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography variant="subtitle1">
{t('sharedRequired')}
</Typography>
</AccordionSummary>
<AccordionDetails className={classes.details}>
<TextField
value={item.description || ''}
onChange={(event) => setItem({ ...item, description: event.target.value })}
label={t('sharedDescription')}
/>
<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 })}
label={t('sharedExpression')}
multiline
rows={4}
/>
<FormControl disabled={item.attribute in positionAttributes}>
<InputLabel>{t('sharedType')}</InputLabel>
<Select
label={t('sharedType')}
value={item.type || ''}
onChange={(event) => setItem({ ...item, type: event.target.value })}
>
<MenuItem value="string">{t('sharedTypeString')}</MenuItem>
<MenuItem value="number">{t('sharedTypeNumber')}</MenuItem>
<MenuItem value="boolean">{t('sharedTypeBoolean')}</MenuItem>
</Select>
</FormControl>
</AccordionDetails>
</Accordion>
)}
</EditItemView>
);
};
export default ComputedAttributePage;
|
