aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings/components/AddAttributeDialog.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-08 13:22:20 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-08 13:22:20 -0700
commit2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae (patch)
treec49f2621fb725d20a6f952e69551e17ec243b8d4 /modern/src/settings/components/AddAttributeDialog.js
parent5173647c7bff3404902d4f227717c3265c72cf6c (diff)
downloadtrackermap-web-2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae.tar.gz
trackermap-web-2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae.tar.bz2
trackermap-web-2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae.zip
Move components folder
Diffstat (limited to 'modern/src/settings/components/AddAttributeDialog.js')
-rw-r--r--modern/src/settings/components/AddAttributeDialog.js89
1 files changed, 89 insertions, 0 deletions
diff --git a/modern/src/settings/components/AddAttributeDialog.js b/modern/src/settings/components/AddAttributeDialog.js
new file mode 100644
index 00000000..e7965360
--- /dev/null
+++ b/modern/src/settings/components/AddAttributeDialog.js
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import {
+ Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField,
+} from '@material-ui/core';
+
+import { Autocomplete, createFilterOptions } from '@material-ui/lab';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+
+const AddAttributeDialog = ({ open, onResult, definitions }) => {
+ 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>
+ <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={(option) => option.name}
+ freeSolo
+ renderInput={(params) => (
+ <TextField {...params} label={t('sharedAttribute')} variant="filled" margin="normal" />
+ )}
+ />
+ <FormControl
+ variant="filled"
+ margin="normal"
+ fullWidth
+ disabled={key in definitions}
+ >
+ <InputLabel>{t('sharedType')}</InputLabel>
+ <Select
+ 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;