1
|
import {
|
2
|
Button,
|
3
|
DialogContent,
|
4
|
DialogTitle,
|
5
|
FormControl,
|
6
|
Grid,
|
7
|
IconButton,
|
8
|
InputLabel,
|
9
|
MenuItem,
|
10
|
Paper,
|
11
|
Select,
|
12
|
Stack,
|
13
|
TextField,
|
14
|
} from '@mui/material'
|
15
|
import { Fragment, FunctionComponent, useState } from 'react'
|
16
|
import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
|
17
|
import ContextMenuDialogProps from './contextMenuDialogProps'
|
18
|
import * as yup from 'yup'
|
19
|
import { useFormik } from 'formik'
|
20
|
import ThemeWrapper from '../../Theme/ThemeWrapper'
|
21
|
import CloseIcon from '@mui/icons-material/Close'
|
22
|
|
23
|
const importTypes = {
|
24
|
localCatalog: 'Local Catalog',
|
25
|
websiteCatalogs: 'Website Catalogs',
|
26
|
}
|
27
|
|
28
|
|
29
|
const externalCatalogs = {
|
30
|
'PLEIADES': 'Pleiades',
|
31
|
'GEONAMES': 'Geonames',
|
32
|
'CIGS': 'CIGS',
|
33
|
'ANE': 'ANE'
|
34
|
}
|
35
|
|
36
|
interface ImportData {
|
37
|
name: string // used always
|
38
|
externalCatalogType?: string // only used for website catalogs variant
|
39
|
}
|
40
|
|
41
|
const ImportLocationDialog: FunctionComponent<ContextMenuDialogProps> = ({
|
42
|
latLng,
|
43
|
closeContextMenu,
|
44
|
}) => {
|
45
|
const [open, setOpen] = useState(false)
|
46
|
const [importType, setImportType] = useState('localCatalog')
|
47
|
|
48
|
const formik = useFormik({
|
49
|
initialValues: {
|
50
|
name: '',
|
51
|
} as ImportData,
|
52
|
validationSchema: yup.object().shape({
|
53
|
name: yup.string().required('Name is required'),
|
54
|
}),
|
55
|
onSubmit: async (values: ImportData) => {
|
56
|
if (importType === 'localCatalog') {
|
57
|
values.externalCatalogType = undefined
|
58
|
}
|
59
|
|
60
|
|
61
|
},
|
62
|
})
|
63
|
|
64
|
const NameTextField = () => (
|
65
|
<TextField
|
66
|
sx={{ mt: 1 }}
|
67
|
fullWidth
|
68
|
label="Name"
|
69
|
name="name"
|
70
|
size="small"
|
71
|
value={formik.values.name}
|
72
|
onChange={formik.handleChange}
|
73
|
variant="outlined"
|
74
|
error={Boolean(formik.errors.name) && formik.touched.name}
|
75
|
helperText={formik.errors.name && formik.touched.name}
|
76
|
/>
|
77
|
)
|
78
|
|
79
|
const onClose = () => {
|
80
|
formik.resetForm()
|
81
|
setImportType('localCatalog')
|
82
|
setOpen(false)
|
83
|
closeContextMenu()
|
84
|
}
|
85
|
|
86
|
return (
|
87
|
<ButtonOpenableDialog
|
88
|
buttonText="Import Location"
|
89
|
buttonColor="primary"
|
90
|
buttonVariant="text"
|
91
|
onCloseCallback={onClose}
|
92
|
maxWidth="xs"
|
93
|
open={open}
|
94
|
setOpen={setOpen}
|
95
|
size="small"
|
96
|
onOpenCallback={() => {}}
|
97
|
>
|
98
|
<ThemeWrapper>
|
99
|
<Paper>
|
100
|
<DialogTitle>
|
101
|
<Stack
|
102
|
direction="row"
|
103
|
justifyContent="space-between"
|
104
|
alignItems="center"
|
105
|
spacing={1}
|
106
|
>
|
107
|
<Fragment>
|
108
|
Import Locations
|
109
|
</Fragment>
|
110
|
<IconButton onClick={onClose}>
|
111
|
<CloseIcon />
|
112
|
</IconButton>
|
113
|
</Stack>
|
114
|
</DialogTitle>
|
115
|
<DialogContent>
|
116
|
<Grid
|
117
|
container
|
118
|
sx={{ mt: 1 }}
|
119
|
// spacing={1}
|
120
|
justifyContent="space-around"
|
121
|
alignItems="center"
|
122
|
>
|
123
|
<Grid item xs={6} md={9}>
|
124
|
<FormControl fullWidth>
|
125
|
<InputLabel id="importType">
|
126
|
Import
|
127
|
</InputLabel>
|
128
|
<Select
|
129
|
labelId="importType"
|
130
|
id="importTypeSelect"
|
131
|
value={importType}
|
132
|
label="Import"
|
133
|
size="small"
|
134
|
onChange={(e) =>
|
135
|
setImportType(e.target.value)
|
136
|
}
|
137
|
>
|
138
|
{Object.keys(importTypes).map((key) => (
|
139
|
<MenuItem key={key} value={key}>
|
140
|
{
|
141
|
//@ts-ignore
|
142
|
importTypes[key]
|
143
|
}
|
144
|
</MenuItem>
|
145
|
))}
|
146
|
</Select>
|
147
|
</FormControl>
|
148
|
</Grid>
|
149
|
<Grid
|
150
|
item
|
151
|
container
|
152
|
xs={6}
|
153
|
md={3}
|
154
|
justifyContent="flex-end"
|
155
|
>
|
156
|
<Button variant="contained" type="submit" color="primary">
|
157
|
Import
|
158
|
</Button>
|
159
|
</Grid>
|
160
|
{importType === 'localCatalog' ? (
|
161
|
<NameTextField />
|
162
|
) : (
|
163
|
<Fragment>
|
164
|
<FormControl
|
165
|
fullWidth
|
166
|
variant="outlined"
|
167
|
sx={{ mt: 1 }}
|
168
|
>
|
169
|
<InputLabel id="externalCatalogType">
|
170
|
Catalog Type
|
171
|
</InputLabel>
|
172
|
<Select
|
173
|
labelId="externalCatalogType"
|
174
|
name="externalCatalogType"
|
175
|
value={
|
176
|
formik.values
|
177
|
.externalCatalogType || "PLEIADES"
|
178
|
}
|
179
|
onChange={formik.handleChange}
|
180
|
label="Catalog Type"
|
181
|
size="small"
|
182
|
>
|
183
|
{Object.entries(externalCatalogs).map(
|
184
|
([key, value], idx) => (
|
185
|
<MenuItem
|
186
|
key={key}
|
187
|
value={key}
|
188
|
>
|
189
|
{value}
|
190
|
</MenuItem>
|
191
|
)
|
192
|
)}
|
193
|
</Select>
|
194
|
</FormControl>
|
195
|
<NameTextField />
|
196
|
</Fragment>
|
197
|
)}
|
198
|
</Grid>
|
199
|
</DialogContent>
|
200
|
</Paper>
|
201
|
</ThemeWrapper>
|
202
|
</ButtonOpenableDialog>
|
203
|
)
|
204
|
}
|
205
|
|
206
|
export default ImportLocationDialog
|