Revize 80e18558

import dialogs more fleshed out

re #9741

frontend/src/features/TrackingTool/Import/ImportLocationDialog.tsx

@@ -4 +4 @@
     DialogTitle,
     FormControl,
     Grid,
+    IconButton,
     InputLabel,
     MenuItem,
+    Paper,
     Select,
+    Stack,
+    TextField,
 } from '@mui/material'
-import { FunctionComponent, useState } from 'react'
+import { Fragment, FunctionComponent, useState } from 'react'
 import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
 import ContextMenuDialogProps from './contextMenuDialogProps'
+import * as yup from 'yup'
+import { useFormik } from 'formik'
+import ThemeWrapper from '../../Theme/ThemeWrapper'
+import CloseIcon from '@mui/icons-material/Close'
 
 const importTypes = {
     localCatalog: 'Local Catalog',
     websiteCatalogs: 'Website Catalogs',
 }
 
+
+const externalCatalogs = {
+    'PLEIADES': 'Pleiades',
+    'GEONAMES': 'Geonames',
+    'CIGS': 'CIGS',
+    'ANE': 'ANE'
+}
+
+interface ImportData {
+    name: string // used always
+    externalCatalogType?: string // only used for website catalogs variant
+}
+
 const ImportLocationDialog: FunctionComponent<ContextMenuDialogProps> = ({
     latLng,
     closeContextMenu,
 }) => {
     const [open, setOpen] = useState(false)
     const [importType, setImportType] = useState('localCatalog')
-    const [submitFunction, setSubmitFunction] = useState<() => void>(() => {})
+
+    const formik = useFormik({
+        initialValues: {
+            name: '',
+        } as ImportData,
+        validationSchema: yup.object().shape({
+            name: yup.string().required('Name is required'),
+        }),
+        onSubmit: async (values: ImportData) => {
+            if (importType === 'localCatalog') {
+                values.externalCatalogType = undefined
+            }
+
+
+        },
+    })
+
+    const NameTextField = () => (
+        <TextField
+            sx={{ mt: 1 }}
+            fullWidth
+            label="Name"
+            name="name"
+            size="small"
+            value={formik.values.name}
+            onChange={formik.handleChange}
+            variant="outlined"
+            error={Boolean(formik.errors.name) && formik.touched.name}
+            helperText={formik.errors.name && formik.touched.name}
+        />
+    )
+
+    const onClose = () => {
+        formik.resetForm()
+        setImportType('localCatalog')
+        setOpen(false)
+        closeContextMenu()
+    }
 
     return (
         <ButtonOpenableDialog
             buttonText="Import Location"
             buttonColor="primary"
             buttonVariant="text"
-            onCloseCallback={closeContextMenu}
+            onCloseCallback={onClose}
             maxWidth="xs"
             open={open}
             setOpen={setOpen}
             size="small"
             onOpenCallback={() => {}}
         >
-            <DialogTitle>Import Locations</DialogTitle>
-            <DialogContent>
-                <Grid container sx={{mt: 0}} spacing={1}>
-                    <Grid item xs={6} md={9}>
-                        <FormControl fullWidth>
-                            <InputLabel id="importType">Import</InputLabel>
-                            <Select
-                                labelId="importType"
-                                id="importTypeSelect"
-                                value={importType}
-                                label="Import"
-                                size="small"
-                                onChange={(e) => setImportType(e.target.value)}
-                            >
-                                {Object.keys(importTypes).map((key) => (
-                                    <MenuItem key={key} value={key}>
-                                        {
-                                            //@ts-ignore
-                                            importTypes[key]
+            <ThemeWrapper>
+                <Paper>
+                    <DialogTitle>
+                    <Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            spacing={1}
+                        >
+                            <Fragment>
+                                Import Locations
+                            </Fragment>
+                            <IconButton onClick={onClose}>
+                                <CloseIcon />
+                            </IconButton>
+                        </Stack>
+                    </DialogTitle>
+                    <DialogContent>
+                        <Grid
+                            container
+                            sx={{ mt: 1 }}
+                            // spacing={1}
+                            justifyContent="space-around"
+                            alignItems="center"
+                        >
+                            <Grid item xs={6} md={9}>
+                                <FormControl fullWidth>
+                                    <InputLabel id="importType">
+                                        Import
+                                    </InputLabel>
+                                    <Select
+                                        labelId="importType"
+                                        id="importTypeSelect"
+                                        value={importType}
+                                        label="Import"
+                                        size="small"
+                                        onChange={(e) =>
+                                            setImportType(e.target.value)
                                         }
-                                    </MenuItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                    </Grid>
-                    <Grid item xs={6} md={3} alignContent="flex-end" justifyContent="flex-end">
-                        <Button variant="contained" color="primary" onClick={submitFunction}>Import</Button>
-                    </Grid>
-                </Grid>
-            </DialogContent>
+                                    >
+                                        {Object.keys(importTypes).map((key) => (
+                                            <MenuItem key={key} value={key}>
+                                                {
+                                                    //@ts-ignore
+                                                    importTypes[key]
+                                                }
+                                            </MenuItem>
+                                        ))}
+                                    </Select>
+                                </FormControl>
+                            </Grid>
+                            <Grid
+                                item
+                                container
+                                xs={6}
+                                md={3}
+                                justifyContent="flex-end"
+                            >
+                                <Button variant="contained" type="submit" color="primary">
+                                    Import
+                                </Button>
+                            </Grid>
+                            {importType === 'localCatalog' ? (
+                                <NameTextField />
+                            ) : (
+                                <Fragment>
+                                    <FormControl
+                                        fullWidth
+                                        variant="outlined"
+                                        sx={{ mt: 1 }}
+                                    >
+                                        <InputLabel id="externalCatalogType">
+                                            Catalog Type
+                                        </InputLabel>
+                                        <Select
+                                            labelId="externalCatalogType"
+                                            name="externalCatalogType"
+                                            value={
+                                                formik.values
+                                                    .externalCatalogType || "PLEIADES"
+                                            }
+                                            onChange={formik.handleChange}
+                                            label="Catalog Type"
+                                            size="small"
+                                        >
+                                            {Object.entries(externalCatalogs).map(
+                                                ([key, value], idx) => (
+                                                    <MenuItem
+                                                        key={key}
+                                                        value={key}
+                                                    >
+                                                        {value}
+                                                    </MenuItem>
+                                                )
+                                            )}
+                                        </Select>
+                                    </FormControl>
+                                    <NameTextField />
+                                </Fragment>
+                            )}
+                        </Grid>
+                    </DialogContent>
+                </Paper>
+            </ThemeWrapper>
         </ButtonOpenableDialog>
     )
 }