-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
SIMSBIOHUB-587 UI: Multi CSV Upload Page (#1357)
- UI components for multi CSV import (Captures / Measurements / Markings)
- Loading branch information
Showing
17 changed files
with
873 additions
and
97 deletions.
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
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
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
110 changes: 110 additions & 0 deletions
110
app/src/components/file-upload/FileUploadItemContent.tsx
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,110 @@ | ||
| import { mdiFileOutline } from '@mdi/js'; | ||
| import Icon from '@mdi/react'; | ||
| import Box from '@mui/material/Box'; | ||
| import { grey } from '@mui/material/colors'; | ||
| import ListItem from '@mui/material/ListItem'; | ||
| import ListItemIcon from '@mui/material/ListItemIcon'; | ||
| import ListItemText from '@mui/material/ListItemText'; | ||
| import FileUploadItemErrorDetails from 'components/file-upload/FileUploadItemErrorDetails'; | ||
| import { IFileUploadItemProps, UploadFileStatus } from './FileUploadItem'; | ||
| import FileUploadItemActionButton from './FileUploadItemActionButton'; | ||
| import FileUploadItemProgressBar from './FileUploadItemProgressBar'; | ||
| import FileUploadItemSubtext from './FileUploadItemSubtext'; | ||
|
|
||
| type FileUploadItemContentProps = Omit<IFileUploadItemProps, 'uploadHandler' | 'onSuccess' | 'fileHandler'> & { | ||
| /** | ||
| * The file upload status. | ||
| * | ||
| * @type {UploadFileStatus} | ||
| * @memberof FileUploadItemContentProps | ||
| */ | ||
| status: UploadFileStatus; | ||
| /** | ||
| * The progress of the file upload. | ||
| * | ||
| * @type {number} | ||
| * @memberof FileUploadItemContentProps | ||
| */ | ||
| progress: number; | ||
| /** | ||
| * Additional error details. | ||
| * | ||
| * @type {Array<{ _id: string; message: string }>} | ||
| * @memberof FileUploadItemContentProps | ||
| */ | ||
| errorDetails?: Array<{ _id: string; message: string }>; | ||
| }; | ||
|
|
||
| /** | ||
| * File upload item content. The UI layout of a file upload item. | ||
| * | ||
| * @param {FileUploadItemContentProps} props | ||
| * @returns {*} | ||
| */ | ||
| export const FileUploadItemContent = (props: FileUploadItemContentProps) => { | ||
| /** | ||
| * Sensible defaults for the subtext, action button, and progress bar components. | ||
| * | ||
| **/ | ||
| const Subtext = props.SubtextComponent ?? FileUploadItemSubtext; | ||
| const ActionButton = props.ActionButtonComponent ?? FileUploadItemActionButton; | ||
| const ProgressBar = props.ProgressBarComponent ?? FileUploadItemProgressBar; | ||
|
|
||
| return ( | ||
| <ListItem | ||
| key={props.file.name} | ||
| secondaryAction={<ActionButton status={props.status} onCancel={props.onCancel} />} | ||
| sx={{ | ||
| flexWrap: 'wrap', | ||
| borderStyle: 'solid', | ||
| borderWidth: '1px', | ||
| borderRadius: '6px', | ||
| background: grey[100], | ||
| borderColor: grey[300], | ||
| '& + li': { | ||
| mt: 1 | ||
| }, | ||
| '& .MuiListItemSecondaryAction-root': { | ||
| top: '36px' | ||
| }, | ||
| '&:last-child': { | ||
| borderBottomStyle: 'solid', | ||
| borderBottomWidth: '1px', | ||
| borderBottomColor: grey[300] | ||
| } | ||
| }}> | ||
| <ListItemIcon> | ||
| <Icon | ||
| path={mdiFileOutline} | ||
| size={1.25} | ||
| style={props.error ? { color: 'error.main' } : { color: 'text.secondary' }} | ||
| /> | ||
| </ListItemIcon> | ||
| <ListItemText | ||
| primary={props.file.name} | ||
| secondary={<Subtext file={props.file} status={props.status} progress={props.progress} error={props.error} />} | ||
| sx={{ | ||
| '& .MuiListItemText-primary': { | ||
| fontWeight: 700 | ||
| } | ||
| }} | ||
| /> | ||
|
|
||
| <Box | ||
| sx={{ | ||
| ml: 5, | ||
| width: '100%', | ||
| '& .MuiLinearProgress-root': { | ||
| mb: 1 | ||
| } | ||
| }}> | ||
| <ProgressBar status={props.status} progress={props.progress} /> | ||
| </Box> | ||
| {props.enableErrorDetails && ( | ||
| <Box sx={{ mt: 1, ml: 5, width: '100%' }}> | ||
| <FileUploadItemErrorDetails error={props.error} errorDetails={props.errorDetails} /> | ||
| </Box> | ||
| )} | ||
| </ListItem> | ||
| ); | ||
| }; |
Oops, something went wrong.