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
|
import React, { useState } from 'react';
import {
Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField, Autocomplete,
} from '@mui/material';
import { createFilterOptions } from '@mui/material/useAutocomplete';
import { makeStyles } from '@mui/styles';
import { useTranslation } from '../../common/components/LocalizationProvider';
const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(1),
paddingTop: theme.spacing(3),
},
}));
const AddAttributeDialog = ({ open, onResult, definitions }) => {
const classes = useStyles();
const t = useTranslation();
const filter = createFilterOptions({
stringify: (option) => option.name,
});
const options = Object.entries(definitions).map(([key, value]) => ({
key,
name: value.name,
type: value.type,
}));
const [key, setKey] = useState();
const [type, setType] = useState('string');
return (
<Dialog open={open} fullWidth maxWidth="xs">
<DialogContent className={classes.details}>
<Autocomplete
onChange={(_, option) => {
setKey(option && typeof option === 'object' ? option.key : option);
if (option && option.type) {
setType(option.type);
}
}}
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 && typeof option === 'object' ? option.name : option)}
renderOption={(props, option) => (
<li {...props}>
{option.name}
</li>
)}
renderInput={(params) => (
<TextField {...params} label={t('sharedAttribute')} />
)}
freeSolo
/>
<FormControl
fullWidth
disabled={key in definitions}
>
<InputLabel>{t('sharedType')}</InputLabel>
<Select
label={t('sharedType')}
value={type}
onChange={(e) => setType(e.target.value)}
>
<MenuItem value="string">{t('sharedTypeString')}</MenuItem>
<MenuItem value="number">{t('sharedTypeNumber')}</MenuItem>
<MenuItem value="boolean">{t('sharedTypeBoolean')}</MenuItem>
</Select>
</FormControl>
</DialogContent>
<DialogActions>
<Button
color="primary"
disabled={!key}
onClick={() => onResult({ key, type })}
>
{t('sharedAdd')}
</Button>
<Button
autoFocus
onClick={() => onResult(null)}
>
{t('sharedCancel')}
</Button>
</DialogActions>
</Dialog>
);
};
export default AddAttributeDialog;
|
