Skip to content

Commit

Permalink
update upload feature + view medical history
Browse files Browse the repository at this point in the history
  • Loading branch information
abdulrhman500 committed Nov 13, 2023
1 parent 8db386a commit 35954ad
Show file tree
Hide file tree
Showing 14 changed files with 290 additions and 39 deletions.
4 changes: 4 additions & 0 deletions client/src/layouts/dashboard/config-navigation.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ const navConfig = [
title: 'Doctors',
path: '/doctors',
icon: icon('ic_user')
}, {
title: 'Upload Documents',
path: '/upload-document',
icon: icon('ic_disabled')
},
{
title: 'Not found',
Expand Down
5 changes: 4 additions & 1 deletion client/src/routes/sections.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Outlet, Navigate, useRoutes } from 'react-router-dom';

import DashboardLayout from 'src/layouts/dashboard';

import UploadFile from 'src/sections/upload/Upload';
import { RegistrationUpload, UploadView } from 'src/sections/upload';

export const IndexPage = lazy(() => import('src/pages/app'));
export const BlogPage = lazy(() => import('src/pages/blog'));
Expand Down Expand Up @@ -46,6 +46,9 @@ export default function Router() {
{
path: '404',
element: <Page404 />
}, {
path: '/upload-document',
element: <UploadView />
},
{
path: '*',
Expand Down
3 changes: 2 additions & 1 deletion client/src/sections/upload/Upload.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
import { axiosInstance } from '../../utils/axiosInstance';
import Label from 'src/components/label';

function Upload({ url, field, handleUploadSuccess }) {
function Upload({ url, field, handleUploadSuccess, fileName }) {
const [files, setFiles] = useState([]);
const [feedback, setFeedback] = useState("");
const [isFileChanged, setIsFileChanged] = useState(false);
Expand Down Expand Up @@ -68,6 +68,7 @@ function Upload({ url, field, handleUploadSuccess }) {
}

try {
formData.append("fileName", fileName);
const res = await axiosInstance.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
Expand Down
56 changes: 40 additions & 16 deletions client/src/sections/upload/displayRecords.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,22 @@ 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';
const AdditionalContent = ({ ContentInfo }) => {
import Snackbar from '@mui/material/Snackbar';

const AdditionalContent = ({ ContentInfo, name }) => {
let comp = <p>{ContentInfo.url}</p>;
let urlParts = String(ContentInfo.url).replace(/\\/g, '/').split('/');
let url = `http://localhost:3000/upload/patient/medicalHistory/` + urlParts[urlParts.length - 1];
// 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 imageURL={url} />;
comp = <ImageViewer url={url} />;
}

return (
Expand All @@ -22,7 +27,8 @@ const AdditionalContent = ({ ContentInfo }) => {
</div>
);
};
const Row = ({ text, ContentInfo }) => {

const Row = ({ text, ContentInfo, onDelete }) => {
const [isExpanded, setIsExpanded] = useState(false);
const [isHovered, setIsHovered] = useState(false);

Expand All @@ -34,11 +40,13 @@ const Row = ({ text, ContentInfo }) => {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '5px',
backgroundColor: isExpanded ? '#b2ebf2' : isHovered ? '#b2ebf2' : 'transparent',
padding: '10px',
backgroundColor: isExpanded ? '#e0f7fa' : isHovered ? '#e0f7fa' : 'transparent',
transition: 'background-color 0.3s',
cursor: 'pointer',
border: '1px solid transparent',
border: '1px solid #b2ebf2',
borderRadius: '5px',
marginBottom: '5px',
};

return (
Expand All @@ -49,17 +57,23 @@ const Row = ({ text, ContentInfo }) => {
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<div>{text}</div>
<IconButton>
<div style={{ flex: 1 }}>{text}</div>
<IconButton onClick={() => onDelete(text)}>
{isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</IconButton>
<IconButton onClick={() => onDelete(text)}>
<DeleteIcon />
</IconButton>
</div>
{isExpanded && <AdditionalContent ContentInfo={ContentInfo} />}
{isExpanded && <AdditionalContent ContentInfo={ContentInfo} name={text} />}

</div>
);
}; const RecordsList = () => {
const [rows, setRows] = useState([]);
};

const RecordsList = () => {
const [rows, setRows] = useState([]);
const [isOpen, setIsOpen] = React.useState(false);
useEffect(() => {
const fetchData = async () => {
const data = await generateRows();
Expand All @@ -69,6 +83,14 @@ const Row = ({ text, ContentInfo }) => {
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}`);
};

async function generateRows() {
const rows = [];
const res = await axiosInstance.get('upload/patient/medicalHistory/');
Expand All @@ -95,13 +117,15 @@ const Row = ({ text, ContentInfo }) => {
return rows;
}


return (
<div>
<div style={{ border: '1px solid #ccc', padding: '10px' }}>
{rows.map((row, index) => (
<Row key={index} text={row.text} ContentInfo={row.additionalContent} />
<Row key={index} text={row.text} ContentInfo={row.additionalContent} onDelete={handleDelete} />
))}

</div>
);
};

export default RecordsList;
export { RecordsList };
6 changes: 6 additions & 0 deletions client/src/sections/upload/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export * from './Upload';
export * from './registrationUpload';
export * from './medicalHistoryUpload';
export * from './viewImage';
export * from './viewPDF';
export * from './displayRecords';
123 changes: 123 additions & 0 deletions client/src/sections/upload/medicalHistoryUpload.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import React, { Suspense, useState } from 'react';
import Button from '@mui/material/Button';
import Upload from "./Upload";
import Label from "src/components/label";
import TextField from '@mui/material/TextField';

const modalStyle = {
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
};

const modalContentStyle = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: 'white',
padding: '20px',
width: '400px',
borderRadius: '8px',
boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.2)',
};

const closeButtonStyle = {
position: 'absolute',
top: '10px',
right: '10px',
fontSize: '20px',
cursor: 'pointer',
};


const MedicalHistoryUploadComponent = ({ onClose }) => {
const [isUploaded, setIsUploaded] = useState([0, 0, 0]);
const [fileName, setFileName] = useState('');
const url = '/upload/patient/medicalHistory';

const handleUploadSuccess = (field) => {
let idx = 0;
if (field === 'medicalLicenses') idx = 1;
else if (field === 'medicalDegree') idx = 2;
isUploaded[idx] = 1;
setIsUploaded([...isUploaded]);
};

const handleFileNameChange = (event) => {
setFileName(event.target.value);
};

const style = { fontSize: '16px' };

return (
<div style={{ width: '100%' }}>
<Label style={style}>Medical History</Label>
<TextField
label="File Name"
variant="outlined"
value={fileName}
onChange={handleFileNameChange}
style={{ marginBottom: '10px' }}
/>
<Upload
url={url}
labelName="Medical History"
field="medicalHistory"
fileName={fileName} // Pass the file name to the Upload component
handleUploadSuccess={handleUploadSuccess}
/>
<Button style={{ fontSize: '16px', padding: '10px', cursor: 'pointer' }} onClick={onClose}>
Close
</Button>
</div>
);
};

const Modal = ({ isOpen, onClose, children }) => {
if (!isOpen) {
return null;
}

return (
<div style={modalStyle}>
<div style={modalContentStyle}>
{children}
</div>
</div>
);
};

const MedicalHistoryUpload = () => {
const [isModalOpen, setModalOpen] = useState(false);

const openModal = () => {
setTimeout(() => {
setModalOpen(true);
}, 50);
};

const closeModal = () => {
setTimeout(() => {
setModalOpen(false);
}, 50);
};

return (
<Suspense fallback={<div>Loading...</div>} >
<div>
<Button style={{ fontSize: '16px', padding: '10px', cursor: 'pointer' }} variant="contained" onClick={openModal}>
Upload to Medical History
</Button>
<Modal isOpen={isModalOpen} onClose={closeModal}>
<MedicalHistoryUploadComponent onClose={closeModal} />
</Modal>
</div>
</Suspense>
);
};

export { MedicalHistoryUpload };
19 changes: 18 additions & 1 deletion client/src/sections/upload/registrationUpload.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useState } from "react";
import Upload from "./Upload";
import Label from "src/components/label";
import { Helmet } from 'react-helmet-async';
import { MedicalHistoryUpload, RecordsList } from 'src/sections/upload';
function RegistrationUpload() {
const [isUploaded, setIsUploaded] = useState([0, 0, 0]);
const url = "/upload/doctor/registration";
Expand Down Expand Up @@ -29,4 +31,19 @@ function RegistrationUpload() {
</div>
);
}
export default RegistrationUpload;
export function UploadView() {
return (
<>
<Helmet>
<title> Upload </title>
</Helmet>

<RegistrationUpload />
<MedicalHistoryUpload />
<RecordsList />

</>
);
}
export { RegistrationUpload };

41 changes: 38 additions & 3 deletions client/src/sections/upload/viewImage.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,45 @@

function ImageViewer({ imageURL }) {
function ImageViewer({ url }) {
return (
<div>
<img crossorigin="anonymous" src={imageURL} alt="Health record " />
<img crossOrigin="use-credentials" src={url} alt="Health record " />
</div>
);
};

export default ImageViewer;
export default ImageViewer;



// import React, { useState, useEffect } from 'react';
// import axios from 'axios';

// const ImageViewer = ({ url }) => {
// const [imageURL, setImageURL] = useState('');
// useEffect(() => {
// console.log(imageURL);
// }, [imageURL]);
// useEffect(() => {
// const loadImage = async () => {
// try {
// const response = await axios.get(url, {
// withCredentials: true,
// });
// // console.log(response, "------------*-");
// setImageURL(URL.createObjectURL(new Blob([response.data]), { type: 'image/jpeg' }));
// console.log(imageURL);
// if (!imageURL) {
// return <div>Loading...</div>;
// }
// } catch (error) {
// console.error('Error loading image:', error);
// }
// };

// loadImage();
// }, []);

// return <img src={imageURL} alt="Your Image" />;
// };

// export default ImageViewer;
12 changes: 10 additions & 2 deletions client/src/sections/upload/viewPDF.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Worker, Viewer } from '@react-pdf-viewer/core';
import { Worker, Viewer, ProgressBar } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

function PDFViewer({ pdfURL }) {
Expand All @@ -8,7 +8,15 @@ function PDFViewer({ pdfURL }) {
<Worker workerUrl={`${import.meta.env.BASE_URL}pdf.worker.min.js`}>
<Viewer
fileUrl={pdfURL}
// onPageChange={({ pageNumber }) => setPageNumber(pageNumber)}
withCredentials={true}
// renderLoader={(percentages) => (
// <div style={{ width: '240px' }}>
// <ProgressBar progress={Math.round(percentages)} />
// </div>
// )}
theme={{
theme: 'auto',
}}
/>
</Worker>
</div>
Expand Down
Loading

0 comments on commit 35954ad

Please sign in to comment.