feat: clinic approval flow
This commit is contained in:
@@ -29,7 +29,7 @@ import { FILE_TYPE, NOTIFICATION } from '../constants';
|
||||
import uploadIcon from '../assets/images/icon/upload.svg';
|
||||
import PdfIcon from '../assets/images/icon/pdf.png';
|
||||
import DocIcon from '../assets/images/icon/doc.png';
|
||||
import { fileUpload } from '../services/file.upload.services';
|
||||
import { fileUpload, getPresignedUrl, uploadToS3 } from '../services/file.upload.services';
|
||||
import { IMAGE_LOCATION_BASE_URL } from '../common/envVariables';
|
||||
|
||||
const CustomFileUpload = forwardRef(function CustomFileUpload(
|
||||
@@ -77,14 +77,9 @@ const CustomFileUpload = forwardRef(function CustomFileUpload(
|
||||
|
||||
useEffect(() => {
|
||||
const makeFullUrlIfNeeded = (url) => {
|
||||
// Return early if url is undefined or empty
|
||||
if (!url) {
|
||||
setOldUploadedFileUrl('');
|
||||
setFileExtension('');
|
||||
setImageName('');
|
||||
return;
|
||||
if(!url){
|
||||
return
|
||||
}
|
||||
|
||||
const isHttp = url.startsWith('http://') || url.startsWith('https://');
|
||||
if (!isHttp) {
|
||||
setOldUploadedFileUrl(`${IMAGE_LOCATION_BASE_URL}${url}`);
|
||||
@@ -114,16 +109,50 @@ const CustomFileUpload = forwardRef(function CustomFileUpload(
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('file', value);
|
||||
formData.append('fileName', value?.name);
|
||||
const filePayload = {
|
||||
folder: "assests",
|
||||
file_name: value.name,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await fileUpload(formData);
|
||||
onUploadDone(documentName, data?.data?.data?.Key);
|
||||
const response = await getPresignedUrl(filePayload);
|
||||
|
||||
// Debug the response structure
|
||||
console.log('API Response:', response);
|
||||
|
||||
// Check if we have a valid response with the expected structure
|
||||
if (response?.data?.data?.Key) {
|
||||
// Use the Key from the response
|
||||
onUploadDone(documentName, response.data.data.Key);
|
||||
await uploadToS3(value, response.data.data.api_url);
|
||||
} else {
|
||||
// If the expected structure is not found, try to find the key in a different location
|
||||
// or use a fallback value
|
||||
console.log('Response structure is different than expected');
|
||||
|
||||
// Try different possible paths to find the key
|
||||
const key = response?.data?.Key ||
|
||||
response?.data?.data?.key ||
|
||||
response?.Key ||
|
||||
value.name; // Fallback to the file name if key not found
|
||||
|
||||
console.log('Using key:', key);
|
||||
onUploadDone(documentName, key);
|
||||
|
||||
// Try to find the API URL similarly
|
||||
const apiUrl = response?.data?.data?.api_url ||
|
||||
response?.data?.api_url ||
|
||||
response?.api_url;
|
||||
|
||||
if (apiUrl) {
|
||||
await uploadToS3(value, apiUrl);
|
||||
} else {
|
||||
console.error('Could not find API URL in response');
|
||||
}
|
||||
}
|
||||
return;
|
||||
} catch (error) {
|
||||
// console.error(error);
|
||||
console.error('Error in handleFileUpload:', error);
|
||||
pushNotification('Error while uploading file', NOTIFICATION.ERROR);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
import { Box, Button, Grid } from '@mui/material';
|
||||
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
|
||||
import React from 'react';
|
||||
import { useStyles } from './styles/ImagePreviewComponentStyles';
|
||||
import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
|
||||
import RemoveOutlinedIcon from '@mui/icons-material/RemoveOutlined';
|
||||
import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
|
||||
import { FILE_EXTENTIONS_ICONS } from '../constants';
|
||||
|
||||
const ImagePreviewControls = ({ zoomIn, zoomOut, resetTransform }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<Grid className={classes.controlButtons}>
|
||||
<Button
|
||||
className={`${classes.zoomOutButton} ${classes.controlButton}`}
|
||||
onClick={() => zoomOut()} // No need to wrap this in a function
|
||||
>
|
||||
<RemoveOutlinedIcon className={classes.iconSize} />
|
||||
</Button>
|
||||
<Button
|
||||
className={`${classes.zoomResetButton} ${classes.controlButton}`}
|
||||
onClick={() => resetTransform()}
|
||||
>
|
||||
<ZoomOutOutlinedIcon className={classes.iconSize} />
|
||||
</Button>
|
||||
<Button
|
||||
className={`${classes.zoomInButton} ${classes.controlButton}`}
|
||||
onClick={() => zoomIn()}
|
||||
>
|
||||
<AddOutlinedIcon className={classes.iconSize} />
|
||||
</Button>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
const ImagePreviewComponent = ({
|
||||
fileUrl,
|
||||
fileExtension,
|
||||
handleDownload,
|
||||
ref,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<>
|
||||
{fileExtension === 'pdf' ? (
|
||||
<>
|
||||
<Box className={classes.pdfAndDocPreviewBox}>
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={FILE_EXTENTIONS_ICONS[fileExtension]}
|
||||
ref={ref}
|
||||
height="145px"
|
||||
width="auto"
|
||||
/>
|
||||
<Button
|
||||
className={classes.pdfAndDocPreviewDownloadButton}
|
||||
variant="contained"
|
||||
onClick={handleDownload}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
) : fileExtension === 'doc' ||
|
||||
fileExtension === 'docx' ||
|
||||
fileExtension ===
|
||||
'vnd.openxmlformats-officedocument.wordprocessingml.document' ||
|
||||
fileExtension === 'msword' ? (
|
||||
<>
|
||||
<Box className={classes.pdfAndDocPreviewBox}>
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={FILE_EXTENTIONS_ICONS[fileExtension]}
|
||||
ref={ref}
|
||||
height="145px"
|
||||
width="auto"
|
||||
/>
|
||||
<Button
|
||||
className={classes.pdfAndDocPreviewDownloadButton}
|
||||
variant="contained"
|
||||
onClick={handleDownload}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<TransformWrapper>
|
||||
{(utils) => (
|
||||
<React.Fragment>
|
||||
<Box className={classes.transFormImageBox}>
|
||||
<TransformComponent
|
||||
wrapperClass={classes.customTransFormWrapper}
|
||||
>
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={fileUrl}
|
||||
ref={ref}
|
||||
height="250px"
|
||||
width="auto"
|
||||
/>
|
||||
</TransformComponent>
|
||||
</Box>
|
||||
<ImagePreviewControls {...utils} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
</TransformWrapper>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImagePreviewComponent;
|
||||
@@ -0,0 +1,55 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
pdfAndDocPreviewBox: {
|
||||
minHeight: '450px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
pdfAndDocPreviewDownloadButton: {
|
||||
marginTop: theme.spacing(2),
|
||||
fontFamily: theme?.fontFamily?.regular,
|
||||
},
|
||||
transFormImageBox: {
|
||||
minHeight: '65vh',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
customTransFormWrapper: {
|
||||
overflow: 'visible',
|
||||
},
|
||||
iconSize: {
|
||||
fontSize: pxToRem(28),
|
||||
},
|
||||
controlButtons: {
|
||||
marginTop: theme.spacing(1),
|
||||
},
|
||||
controlButton: {
|
||||
color: theme.palette.common.white,
|
||||
cursor: 'pointer',
|
||||
border: 'none',
|
||||
borderRadius: theme.spacing(0),
|
||||
padding: theme.spacing(1.2),
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(0,0,0,0.9)',
|
||||
color: theme.palette.common.white,
|
||||
},
|
||||
},
|
||||
zoomOutButton: {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
borderTopLeftRadius: theme.spacing(0.8),
|
||||
borderBottomLeftRadius: theme.spacing(0.8),
|
||||
},
|
||||
zoomResetButton: {
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
},
|
||||
zoomInButton: {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
borderTopRightRadius: theme.spacing(0.8),
|
||||
borderBottomRightRadius: theme.spacing(0.8),
|
||||
},
|
||||
}));
|
||||
Reference in New Issue
Block a user