Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: created component for rendering single CSV import dialogs
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import LoadingButton from '@mui/lab/LoadingButton/LoadingButton'; | ||
| import { Box, Dialog, DialogActions, DialogContent, Divider, Typography } from '@mui/material'; | ||
| import { AxiosProgressEvent } from 'axios'; | ||
| import { UploadFileStatus } from 'components/file-upload/FileUploadItem'; | ||
| import { FileUploadSingleItem } from 'components/file-upload/FileUploadSingleItem'; | ||
| import { DialogContext } from 'contexts/dialogContext'; | ||
| import { useContext, useState } from 'react'; | ||
| import { isCSVValidationError } from 'utils/csv-utils'; | ||
| import { getAxiosProgress } from 'utils/Utils'; | ||
| import { CSVDropzoneSection } from './CSVDropzoneSection'; | ||
|
|
||
| interface CSVSingleImportDialogProps { | ||
| open: boolean; | ||
| dialogTitle: string; | ||
| dialogSummary: string; | ||
| onCancel: () => void; | ||
| onImport: (file: File, onProgress: (progressEvent: AxiosProgressEvent) => void) => Promise<void>; | ||
| onDownloadTemplate: () => void; | ||
| } | ||
|
|
||
| /** | ||
| * Dialog for importing a single CSV file. | ||
| * | ||
| * @param {CSVSingleImportDialogProps} props | ||
| * @return {*} {JSX.Element} | ||
| */ | ||
| export const CSVSingleImportDialog = (props: CSVSingleImportDialogProps) => { | ||
| const dialogContext = useContext(DialogContext); | ||
|
|
||
| // Dialog and import state | ||
| const [file, setFile] = useState<File | null>(null); | ||
| const [uploadStatus, setUploadStatus] = useState<UploadFileStatus>(UploadFileStatus.STAGED); | ||
| const [progress, setProgress] = useState<number>(0); | ||
| const [error, setError] = useState<Error | null>(null); | ||
|
|
||
| const isUploading = uploadStatus === UploadFileStatus.UPLOADING || uploadStatus === UploadFileStatus.FINISHING_UPLOAD; | ||
| const disableImportButton = | ||
| isUploading || !file || uploadStatus === UploadFileStatus.FAILED || uploadStatus === UploadFileStatus.COMPLETE; | ||
|
|
||
| /** | ||
| * Cancel the dialog and reset the file import state | ||
| * | ||
| * @returns {void} | ||
| */ | ||
| const handleCancel = (): void => { | ||
| props.onCancel(); | ||
| handleResetFileImport(); | ||
| }; | ||
|
|
||
| /** | ||
| * Reset the file import state, independent of the dialog state | ||
| * | ||
| * @returns {void} | ||
| */ | ||
| const handleResetFileImport = (): void => { | ||
| setFile(null); | ||
| setUploadStatus(UploadFileStatus.STAGED); | ||
| setProgress(0); | ||
| setError(null); | ||
| }; | ||
|
|
||
| /** | ||
| * Import the CSV file and update the status accordingly | ||
| * | ||
| * @param {File | null} file The CSV file to import | ||
| * @returns {Promise<void>} | ||
| */ | ||
| const handleCSVFileImport = async (file: File | null): Promise<void> => { | ||
| if (!file) { | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| setUploadStatus(UploadFileStatus.UPLOADING); | ||
|
|
||
| await props.onImport(file, (progressEvent) => { | ||
| // Update the progress state from the Axios progress event | ||
| setProgress(getAxiosProgress(progressEvent)); | ||
|
|
||
| if (progressEvent.loaded === progressEvent.total) { | ||
| setUploadStatus(UploadFileStatus.FINISHING_UPLOAD); | ||
| } | ||
| }); | ||
|
|
||
| setUploadStatus(UploadFileStatus.COMPLETE); | ||
|
|
||
| // Show a success snackbar message | ||
| dialogContext.setSnackbar({ | ||
| open: true, | ||
| snackbarMessage: ( | ||
| <Typography variant="body2" component="div"> | ||
| CSV imported successfully. | ||
| </Typography> | ||
| ) | ||
| }); | ||
| } catch (err) { | ||
| if (err instanceof Error) { | ||
| setError(err); | ||
| } | ||
|
|
||
| setUploadStatus(UploadFileStatus.FAILED); | ||
| } | ||
| }; | ||
|
|
||
| if (!props.open) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Dialog open={props.open} maxWidth={false}> | ||
| <DialogContent sx={{ mt: 2 }}> | ||
| <Box> | ||
| <CSVDropzoneSection | ||
| title={props.dialogTitle} | ||
| summary={props.dialogSummary} | ||
| onDownloadTemplate={props.onDownloadTemplate} | ||
| errors={isCSVValidationError(error) ? error.errors : []}> | ||
| <FileUploadSingleItem | ||
| file={file} | ||
| status={uploadStatus} | ||
| error={error?.message} | ||
| onError={(message) => setError(new Error(message))} | ||
| progress={progress} | ||
| onFile={(file) => setFile(file)} | ||
| onCancel={handleResetFileImport} | ||
| /> | ||
| </CSVDropzoneSection> | ||
| </Box> | ||
| </DialogContent> | ||
| <Divider /> | ||
|
|
||
| <DialogActions> | ||
| <LoadingButton | ||
| onClick={() => { | ||
| handleCSVFileImport(file); | ||
| }} | ||
| color="primary" | ||
| variant="contained" | ||
| disabled={disableImportButton}> | ||
| Import | ||
| </LoadingButton> | ||
|
|
||
| <LoadingButton onClick={handleCancel} color="primary" variant="outlined"> | ||
| {uploadStatus === UploadFileStatus.COMPLETE ? 'Close' : 'Cancel'} | ||
| </LoadingButton> | ||
| </DialogActions> | ||
| </Dialog> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.