-
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.
Update CSV Error Import Dialog Styling (#1456)
- update csv import error dialog - replace failure snackbar & add frontend pagination to csv import errors
- Loading branch information
1 parent
ef532a3
commit fedb4e9
Showing
12 changed files
with
171 additions
and
192 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'; | ||
| import Icon from '@mdi/react'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import AlertBar from 'components/alert/AlertBar'; | ||
| import { useMemo, useState } from 'react'; | ||
| import { CSVError } from 'utils/csv-utils'; | ||
| import { v4 } from 'uuid'; | ||
|
|
||
| const MAX_ERRORS_SHOWN = 10; | ||
|
|
||
| interface CSVErrorsCardStackProps { | ||
| errors: CSVError[]; | ||
| } | ||
|
|
||
| /** | ||
| * Returns a stack of CSV errors with information about solutions and pagination | ||
| * | ||
| * @param {CSVErrorsCardStackProps} props | ||
| * @returns {*} | ||
| */ | ||
| export const CSVErrorsCardStack = (props: CSVErrorsCardStackProps) => { | ||
| const [currentPage, setCurrentPage] = useState(0); | ||
|
|
||
| const pageCount = Math.ceil(props.errors.length / MAX_ERRORS_SHOWN); | ||
|
|
||
| const rows: (CSVError & { id: string })[] = useMemo(() => { | ||
| return props.errors.slice(currentPage * MAX_ERRORS_SHOWN, (currentPage + 1) * MAX_ERRORS_SHOWN).map((error) => { | ||
| return { | ||
| id: v4(), | ||
| ...error | ||
| }; | ||
| }); | ||
| }, [props.errors, currentPage]); | ||
|
|
||
| const handleNextPage = () => { | ||
| if ((currentPage + 1) * MAX_ERRORS_SHOWN < props.errors.length) { | ||
| setCurrentPage(currentPage + 1); | ||
| } | ||
| }; | ||
|
|
||
| const handlePreviousPage = () => { | ||
| if (currentPage > 0) { | ||
| setCurrentPage(currentPage - 1); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Stack gap={1}> | ||
| {rows.map((error) => { | ||
| return ( | ||
| <AlertBar | ||
| key={error.id} | ||
| severity="error" | ||
| variant="standard" | ||
| title={error.error} | ||
| text={ | ||
| <Stack gap={1}> | ||
| <Typography variant="body2">{error.solution}</Typography> | ||
| <Stack gap={3} flexDirection="row"> | ||
| <Stack> | ||
| <Typography variant="body2" fontWeight={700}> | ||
| Row | ||
| </Typography> | ||
| <Typography variant="body2">{error.row ?? 'N/A'}</Typography> | ||
| </Stack> | ||
| <Stack> | ||
| <Typography variant="body2" fontWeight={700}> | ||
| Column | ||
| </Typography> | ||
| <Typography variant="body2">{error.header ?? 'N/A'}</Typography> | ||
| </Stack> | ||
| <Stack> | ||
| <Typography variant="body2" fontWeight={700}> | ||
| Value | ||
| </Typography> | ||
| <Typography variant="body2">{error.cell ?? 'N/A'}</Typography> | ||
| </Stack> | ||
| {(error.cell || error.header) && error.values && ( | ||
| <Stack> | ||
| <Typography variant="body2" fontWeight={700}> | ||
| Allowed Values | ||
| </Typography> | ||
| <Typography variant="body2">{error.values.join(', ')}</Typography> | ||
| </Stack> | ||
| )} | ||
| </Stack> | ||
| </Stack> | ||
| } | ||
| /> | ||
| ); | ||
| })} | ||
| {props.errors.length > MAX_ERRORS_SHOWN && ( | ||
| <Stack direction="row" justifyContent="space-between" alignItems="center" mt={1}> | ||
| <IconButton onClick={handlePreviousPage} disabled={!currentPage}> | ||
| <Icon path={mdiChevronLeft} size={1} /> | ||
| </IconButton> | ||
| <Typography variant="body2"> | ||
| Page {currentPage + 1} of {pageCount} | ||
| </Typography> | ||
| <IconButton onClick={handleNextPage} disabled={currentPage + 1 === pageCount}> | ||
| <Icon path={mdiChevronRight} size={1} /> | ||
| </IconButton> | ||
| </Stack> | ||
| )} | ||
| </Stack> | ||
| ); | ||
| }; |
27 changes: 10 additions & 17 deletions
27
...omponents/csv/CSVErrorsTableContainer.tsx → ...nents/csv/CSVErrorsCardStackContainer.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 |
|---|---|---|
| @@ -1,47 +1,40 @@ | ||
| import { Divider, Paper, Toolbar, Typography } from '@mui/material'; | ||
| import { Toolbar, Typography } from '@mui/material'; | ||
| import { Box, Stack } from '@mui/system'; | ||
| import { ReactElement } from 'react'; | ||
| import { CSVError } from 'utils/csv-utils'; | ||
| import { CSVErrorsTable } from './CSVErrorsTable'; | ||
| import { CSVErrorsCardStack } from './CSVErrorsCardStack'; | ||
|
|
||
| interface CSVErrorsTableContainerProps { | ||
| interface CSVErrorsCardStackContainerProps { | ||
| errors: CSVError[]; | ||
| title?: ReactElement; | ||
| } | ||
|
|
||
| /** | ||
| * Renders a CSV errors table with toolbar. | ||
| * | ||
| * @param {CSVErrorsTableContainerProps} props | ||
| * @param {CSVErrorsCardStackContainerProps} props | ||
| * @returns {*} {JSX.Element} | ||
| */ | ||
| export const CSVErrorsTableContainer = (props: CSVErrorsTableContainerProps) => { | ||
| export const CSVErrorsCardStackContainer = (props: CSVErrorsCardStackContainerProps) => { | ||
| return ( | ||
| <Paper component={Stack} flexDirection="column" flex="1 1 auto" height="100%"> | ||
| <Toolbar | ||
| disableGutters | ||
| sx={{ | ||
| pl: 2, | ||
| pr: 3 | ||
| }}> | ||
| <Stack flexDirection="column" flex="1 1 auto" height="100%"> | ||
| <Toolbar disableGutters> | ||
| {props.title ?? ( | ||
| <Typography | ||
| sx={{ | ||
| flexGrow: '1', | ||
| fontSize: '1.125rem', | ||
| fontWeight: 700 | ||
| }}> | ||
| CSV Errors Detected ‌ | ||
| Errors ‌ | ||
| <Typography sx={{ fontWeight: '400' }} component="span" variant="inherit" color="textSecondary"> | ||
| ({props.errors.length}) | ||
| </Typography> | ||
| </Typography> | ||
| )} | ||
| </Toolbar> | ||
| <Divider /> | ||
| <Box width="100%" height="100%"> | ||
| <CSVErrorsTable errors={props.errors} /> | ||
| <CSVErrorsCardStack errors={props.errors} /> | ||
| </Box> | ||
| </Paper> | ||
| </Stack> | ||
| ); | ||
| }; |
Oops, something went wrong.