Revize 6d8ac067

Page for external sources created
re #9812

frontend/src/App.tsx

@@ -18 +18 @@
 import { Fragment } from 'react'
 import Administration from "./features/Administration/Administration"
 import Register from "./features/Auth/Register"
+import ExternalSources from "./features/ExternalSources/ExternalSources"
 
 const App = () => {
     return (
@@ -39 +40 @@
                             <Route path="/logout" element={<Logout />} />
                             <Route path="/map" element={<TrackingTool />} />
                             <Route path="/administration" element={<Administration />}/>
+                            <Route path="/externalSources" element={<ExternalSources />}/>
                             <Route path="*" element={<NotFound />} />
                         </Routes>
                     </Box>

frontend/src/features/Catalog/CatalogTable.tsx

@@ -80 +80 @@
     // Name of columns in the header
     const columns = [
         'Name',
-        'Alternative Names',
+        'All Names',
         'Written form',
         'Type',
         'State or Territory',

frontend/src/features/ExternalSources/ExternalSources.tsx

@@ +1 @@
+import {Button, Container, Paper, Typography} from '@mui/material'
+import {Fragment, useEffect, useState} from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../redux/store'
+import axiosInstance from "../../api/api"
+import 'react-quill/dist/quill.snow.css'
+import NotAuthorized from "../NotAuthorized/NotAuthorized"
+import SingleFileSelectionForm from "../Reusables/SingleFileSelectionForm"
+import * as yup from "yup"
+import {useFormik} from "formik"
+
+
+interface UploadValues {
+    file?: File
+}
+
+const initialValues: UploadValues = {}
+
+
+const ExternalSources = () => {
+
+    const [filename, setFilename] = useState<string | undefined>(undefined)
+    const [fileProcessing, setFileProcessing] = useState(false)
+
+    const validationSchema = yup.object().shape({
+        file: yup.mixed().required('File is required'),
+    })
+
+    const formik = useFormik({
+        initialValues,
+        validationSchema,
+        onSubmit: async (values) => {
+            setFileProcessing(true)
+            const reader = new FileReader()
+            reader.readAsText(values.file as File)
+            reader.onload = async () => {
+                const {data, status} = await axiosInstance.post(
+                   '/external-catalog-item',
+                   { file: reader.result as string }
+                )
+                if (status !== 200) {
+                    console.log("Error in updating catalog")
+                }
+            }
+        },
+    })
+
+    // Callback when user selects the file
+    const onFileSelected = (event: any) => {
+        const file = event.currentTarget.files[0]
+        if (file) {
+            setFilename(file.name)
+            formik.setFieldValue('file', file)
+        }
+    }
+
+    const onClose = () => {
+        if (fileProcessing) {
+            return
+        }
+        setFilename(undefined)
+        formik.resetForm()
+    }
+
+    const onClearSelectedFile = () => {
+        setFilename(undefined)
+        formik.setFieldValue('file', undefined)
+    }
+
+
+    const isAdmin = useSelector(
+        (state: RootState) => state.user.roles.includes("ROLE_ADMIN")
+    )
+    const handleClick = () => {
+
+    }
+
+    return (
+        <Fragment>
+            <Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
+                External Sources
+            </Typography>
+            {isAdmin ? (
+            <Paper style={{ minHeight: '80vh' }} variant="outlined">
+                <Container sx={{ mt: 4 }}>
+                    <Typography sx={{ mb: 2 }}>
+                        Select file with sources from ... source and then click submit to update all external sources.
+                    </Typography>
+                    <SingleFileSelectionForm
+                        onFileSelected={onFileSelected}
+                        onClearSelectedFile={onClearSelectedFile}
+                        filename={filename}
+                        formik={formik}
+                    />
+                </Container>
+            </Paper>
+            ) : <NotAuthorized />}
+        </Fragment>
+    )
+}
+
+export default ExternalSources

frontend/src/features/Navigation/navigationMenuItems.ts

@@ -80 +80 @@
         icon: DataSaverOffIcon,
         position: 4,
     },
+    {
+        name: 'External Catalog Sources',
+        path: '/externalSources',
+        accessibleTo: loggedInAccess,
+        icon: SupervisorAccountIcon,
+        position: 6,
+    },
     {
         name: 'Administration',
         path: '/administration',