added pages for upload

advanced-computer-lab-2023 · Nov 13, 2023 · 7da797c · 7da797c
1 parent 35954ad
commit 7da797c
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 89 deletions.
diff --git a/client/src/layouts/dashboard/config-navigation.jsx b/client/src/layouts/dashboard/config-navigation.jsx
@@ -43,6 +43,10 @@ const navConfig = [
     title: 'Upload Documents',
     path: '/upload-document',
     icon: icon('ic_disabled')
+  }, {
+    title: 'Medical History',
+    path: '/medical-history',
+    icon: icon('ic_disabled')
   },
   {
     title: 'Not found',

diff --git a/client/src/pages/doctor-document-upload.jsx b/client/src/pages/doctor-document-upload.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { RegistrationUpload, MedicalHistoryUpload, RecordsList } from 'src/sections/upload';
+
+function DoctorDocumentUploadPage() {
+    return (
+        <>
+            <Helmet>
+                <title>Upload Documents</title>
+            </Helmet>
+
+            <div style={containerStyle}>
+                <h1 style={headingStyle}>Document Upload Page</h1>
+
+                <section style={sectionStyle}>
+                    <h2 style={subHeadingStyle}>Registration Documents</h2>
+                    <RegistrationUpload />
+                </section>
+
+            </div>
+        </>
+    );
+}
+
+
+const containerStyle = {
+    maxWidth: '800px',
+    margin: '0 auto',
+    padding: '20px',
+};
+
+const headingStyle = {
+    fontSize: '24px',
+    marginBottom: '20px',
+};
+
+const sectionStyle = {
+    marginBottom: '40px',
+};
+
+const subHeadingStyle = {
+    fontSize: '20px',
+    marginBottom: '10px',
+};
+
+export default DoctorDocumentUploadPage;
diff --git a/client/src/pages/medical-history.jsx b/client/src/pages/medical-history.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { RecordsList, MedicalHistoryUpload } from 'src/sections/upload';
+
+const MedicalHistoryPage = () => {
+    return (
+        <>
+            <Helmet>
+                <title>Medical History</title>
+            </Helmet>
+
+            <div style={containerStyle}>
+                <h1 style={headingStyle}>Medical History</h1>
+
+                <MedicalHistoryUpload />
+                <RecordsList />
+            </div>
+        </>
+    );
+};
+
+
+const containerStyle = {
+    maxWidth: '800px',
+    margin: '0 auto',
+    padding: '20px',
+    backgroundColor: '#fff',
+    boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
+    borderRadius: '8px',
+};
+
+const headingStyle = {
+    fontSize: '28px',
+    marginBottom: '20px',
+    color: '#333',
+};
+
+export default MedicalHistoryPage;
diff --git a/client/src/routes/sections.jsx b/client/src/routes/sections.jsx
@@ -13,7 +13,9 @@ export const LoginPage = lazy(() => import('src/pages/login'));
 export const RegisterPage = lazy(() => import('src/pages/register'));
 export const ProductsPage = lazy(() => import('src/pages/products'));
 export const Page404 = lazy(() => import('src/pages/page-not-found'));
+export const DoctorDocumentUploadPage = lazy(() => import('src/pages/doctor-document-upload'));
 
+export const MedicalHistoryPage = lazy(() => import('src/pages/medical-history'));
 // ----------------------------------------------------------------------
 
 export default function Router() {
@@ -32,7 +34,14 @@ export default function Router() {
         { path: 'user', element: <UserPage /> },
         { path: 'products', element: <ProductsPage /> },
         { path: 'blog', element: <BlogPage /> },
-        { path: 'doctors', element: <DoctorsPage /> }
+        { path: 'doctors', element: <DoctorsPage /> },
+        {
+          path: '/upload-document',
+          element: <DoctorDocumentUploadPage />
+        }, {
+          path: '/medical-history',
+          element: <MedicalHistoryPage />
+        }
       ]
     },
     {
@@ -46,9 +55,6 @@ export default function Router() {
     {
       path: '404',
       element: <Page404 />
-    }, {
-      path: '/upload-document',
-      element: <UploadView />
     },
     {
       path: '*',

diff --git a/client/src/sections/register/register-view.jsx b/client/src/sections/register/register-view.jsx
@@ -21,7 +21,7 @@ import { bgGradient } from 'src/theme/css';
 
 import Logo from 'src/components/logo';
 import { axiosInstance } from '../../utils/axiosInstance';
-import RegistrationUpload from 'src/sections/upload/registrationUpload';
+import { RegistrationUpload } from 'src/sections/upload';
 
 // ----------------------------------------------------------------------
 
@@ -58,7 +58,7 @@ export default function RegisterView() {
 
       const data = await res.json();
       if (res.ok) {
-        router.push('/');
+        router.push('/upload-document');
       } else {
         setError(data.message);
       }

diff --git a/client/src/sections/upload/Upload.jsx b/client/src/sections/upload/Upload.jsx
@@ -43,6 +43,7 @@ function Upload({ url, field, handleUploadSuccess, fileName }) {
         console.log(selectedFiles);
         setFiles(selectedFiles);
         setIsFileChanged(true);
+        setFeedback("");
     };
 
 

diff --git a/client/src/sections/upload/displayRecords.jsx b/client/src/sections/upload/displayRecords.jsx
@@ -3,22 +3,17 @@ import PDFViewer from './viewPDF';
 import ImageViewer from './viewImage.jsx';
 import axios from 'axios';
 import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { axiosInstance } from '../../utils/axiosInstance';
-import Snackbar from '@mui/material/Snackbar';
 
 const AdditionalContent = ({ ContentInfo, name }) => {
+    const url = `http://localhost:3000/upload/patient/medicalHistory/${name}`;
     let comp = <p>{ContentInfo.url}</p>;
-    // let urlParts = String(ContentInfo.url).replace(/\\/g, '/').split('/');
-    let url = `http://localhost:3000/upload/patient/medicalHistory/` + name;
-    url = String(url).replace(/\\/g, '/');
-    if (String(ContentInfo.ext) === 'pdf') {
-        comp = <PDFViewer pdfURL={url} />;
-    } else if (['jpg', 'jpeg', 'png'].includes(String(ContentInfo.ext).toLowerCase())) {
-        comp = <ImageViewer url={url} />;
+
+    if (['pdf', 'jpg', 'jpeg', 'png'].includes(String(ContentInfo.ext).toLowerCase())) {
+        comp = ContentInfo.ext === 'pdf' ? <PDFViewer pdfURL={url} /> : <ImageViewer url={url} />;
     }
 
     return (
@@ -41,7 +36,7 @@ const Row = ({ text, ContentInfo, onDelete }) => {
         alignItems: 'center',
         justifyContent: 'space-between',
         padding: '10px',
-        backgroundColor: isExpanded ? '#e0f7fa' : isHovered ? '#e0f7fa' : 'transparent',
+        backgroundColor: isExpanded || isHovered ? '#e0f7fa' : 'transparent',
         transition: 'background-color 0.3s',
         cursor: 'pointer',
         border: '1px solid #b2ebf2',
@@ -73,57 +68,56 @@ const Row = ({ text, ContentInfo, onDelete }) => {
 
 const RecordsList = () => {
     const [rows, setRows] = useState([]);
-    const [isOpen, setIsOpen] = React.useState(false);
+
     useEffect(() => {
         const fetchData = async () => {
-            const data = await generateRows();
-            setRows(data);
+            try {
+                const data = await generateRows();
+                setRows(data);
+            } catch (error) {
+                console.error('Error fetching data:', error);
+            }
         };
 
         fetchData();
     }, []);
 
     const handleDelete = async (text) => {
-        const res = await axiosInstance.delete('upload/patient/medicalHistory/' + text);
-        if (res.status != 200) { return; }
-        const temp = rows.filter((row) => row.text != text);
-        setRows(temp);
-        console.log(`Delete row with text: ${text}`);
+        try {
+            const res = await axiosInstance.delete(`upload/patient/medicalHistory/${text}`);
+            if (res.status === 200) {
+                const temp = rows.filter((row) => row.text !== text);
+                setRows(temp);
+                console.log(`Deleted row with text: ${text}`);
+            }
+        } catch (error) {
+            console.error('Error deleting row:', error);
+        }
     };
 
     async function generateRows() {
-        const rows = [];
         const res = await axiosInstance.get('upload/patient/medicalHistory/');
-
         const data = res.data.result;
-        console.log(data + "-------")
-
-        for (let i = 0; i < data.length; i++) {
-            console.log(data[i].medicalRecord)
-            let url, ext;
-            if (data[i].medicalRecord) {
-                url = data[i].medicalRecord.split('.');
-                ext = url.length > 0 ? url[url.length - 1] : undefined;
-            }
-            rows.push({
-                text: data[i].name,
+
+        return data.map((item) => {
+            const urlParts = item.medicalRecord?.split('.');
+            const ext = urlParts?.length > 0 ? urlParts[urlParts.length - 1].toLowerCase() : undefined;
+
+            return {
+                text: item.name,
                 additionalContent: {
-                    url: data[i].medicalRecord,
+                    url: item.medicalRecord,
                     ext: ext,
                 },
-            });
-        }
-
-        return rows;
+            };
+        });
     }
 
-
     return (
         <div style={{ border: '1px solid #ccc', padding: '10px' }}>
             {rows.map((row, index) => (
                 <Row key={index} text={row.text} ContentInfo={row.additionalContent} onDelete={handleDelete} />
             ))}
-
         </div>
     );
 };