Skip to content

Commit

Permalink
new error management
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndreaCimini90
AndreaCimini90 committed Apr 11, 2024
1 parent 1650e48 commit a5fc573
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 125 deletions.
244 changes: 127 additions & 117 deletions packages/pn-commons/src/components/FileUpload.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ import CloseIcon from '@mui/icons-material/Close';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import {
Alert,
Box,
Button,
FormHelperText,
Grid,
IconButton,
Input,
Expand Down Expand Up @@ -205,10 +205,10 @@ const FileUpload = ({
}
return {
border: '1px dashed',
borderColor: 'primary.main',
backgroundColor: 'primaryAction.selected',
borderColor: fileData.error ? 'error.main' : 'primary.main',
backgroundColor: fileData.error ? '#fe66661a' : 'primaryAction.selected',
};
}, [fileData.status]);
}, [fileData.status, fileData.error]);

const chooseFileHandler = () => {
(uploadInputRef.current as any).click();
Expand Down Expand Up @@ -300,128 +300,138 @@ const FileUpload = ({
);

return (
<Box
sx={{ ...containerStyle, padding: '24px', borderRadius: '10px', ...sx }}
onDragOver={handleDragOver}
onDrop={handleDrop}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
component="div"
>
{fileData.status === UploadStatus.TO_UPLOAD && (
<OrientedBox vertical={isMobile}>
<CloudUploadIcon color="primary" sx={{ margin: '0 10px' }} />
<Typography display="inline" variant="body2" textAlign="center">
{uploadText}&nbsp;{getLocalizedOrDefaultLabel('common', 'upload-file.or', 'oppure')}
&nbsp;
</Typography>
<Button
variant="contained"
onClick={chooseFileHandler}
data-testid="loadFromPc"
sx={{ margin: isMobile ? '10px 0' : '0 10px' }}
>
{getLocalizedOrDefaultLabel('common', 'upload-file.select-file', 'carica il file')}
</Button>
<Input
id="file-input"
type="file"
sx={{ display: 'none' }}
inputRef={uploadInputRef}
inputProps={{ accept }}
onChange={uploadFileHandler}
data-testid="fileInput"
/>
</OrientedBox>
)}
{(fileData.status === UploadStatus.IN_PROGRESS ||
fileData.status === UploadStatus.SENDING) && (
<OrientedBox vertical={vertical}>
<Typography display="inline" variant="body2">
{fileData.status === UploadStatus.IN_PROGRESS
? getLocalizedOrDefaultLabel(
'common',
'upload-file.loading',
'Caricamento in corso...'
)
: getLocalizedOrDefaultLabel('common', 'upload-file.sending', 'Invio in corso...')}
</Typography>
<Typography sx={{ margin: '0 20px', width: 'calc(100% - 200px)' }}>
<LinearProgress />
</Typography>
</OrientedBox>
)}
{fileData.status === UploadStatus.UPLOADED && (
<Fragment>
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
sx={{ width: '100%' }}
>
<>
<Box
sx={{ ...containerStyle, padding: '24px', borderRadius: '10px', ...sx }}
onDragOver={handleDragOver}
onDrop={handleDrop}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
component="div"
>
{fileData.status === UploadStatus.TO_UPLOAD && (
<OrientedBox vertical={isMobile}>
<CloudUploadIcon
color={fileData.error ? 'error' : 'primary'}
sx={{ margin: '0 10px' }}
/>
<Typography
display="inline"
variant="body2"
textAlign="center"
color={fileData.error ? 'error' : ''}
>
{uploadText}&nbsp;{getLocalizedOrDefaultLabel('common', 'upload-file.or', 'oppure')}
&nbsp;
</Typography>
<Button
variant="contained"
onClick={chooseFileHandler}
data-testid="loadFromPc"
sx={{ margin: isMobile ? '10px 0' : '0 10px' }}
>
{getLocalizedOrDefaultLabel('common', 'upload-file.select-file', 'carica il file')}
</Button>
<Input
id="file-input"
type="file"
sx={{ display: 'none' }}
inputRef={uploadInputRef}
inputProps={{ accept }}
onChange={uploadFileHandler}
data-testid="fileInput"
/>
</OrientedBox>
)}
{(fileData.status === UploadStatus.IN_PROGRESS ||
fileData.status === UploadStatus.SENDING) && (
<OrientedBox vertical={vertical}>
<Typography display="inline" variant="body2">
{fileData.status === UploadStatus.IN_PROGRESS
? getLocalizedOrDefaultLabel(
'common',
'upload-file.loading',
'Caricamento in corso...'
)
: getLocalizedOrDefaultLabel('common', 'upload-file.sending', 'Invio in corso...')}
</Typography>
<Typography sx={{ margin: '0 20px', width: 'calc(100% - 200px)' }}>
<LinearProgress />
</Typography>
</OrientedBox>
)}
{fileData.status === UploadStatus.UPLOADED && (
<Fragment>
<Box
display={isMobile ? 'block' : 'flex'}
display="flex"
justifyContent="space-between"
alignItems="center"
justifyContent="start"
width={isMobile ? 0.85 : 'auto'}
sx={{ width: '100%' }}
>
<Box display="flex" width={isMobile ? 0.7 : 'auto'} justifyContent="start">
<AttachFileIcon color="primary" />
<FilenameBox filename={fileData.file.name} />
<Box
display={isMobile ? 'block' : 'flex'}
alignItems="center"
justifyContent="start"
width={isMobile ? 0.85 : 'auto'}
>
<Box display="flex" width={isMobile ? 0.7 : 'auto'} justifyContent="start">
<AttachFileIcon color="primary" />
<FilenameBox filename={fileData.file.name} />
</Box>
<Typography fontWeight={600} sx={{ marginLeft: { lg: '30px' } }}>
{parseFileSize(fileData.file.size)}
</Typography>
</Box>
<Typography fontWeight={600} sx={{ marginLeft: { lg: '30px' } }}>
{parseFileSize(fileData.file.size)}
</Typography>
<IconButton
data-testid="removeDocument"
onClick={removeFileHandler}
aria-label={getLocalizedOrDefaultLabel(
'common',
'attachments.remove-attachment',
'Elimina allegato'
)}
>
<CloseIcon />
</IconButton>
</Box>
<IconButton
data-testid="removeDocument"
onClick={removeFileHandler}
aria-label={getLocalizedOrDefaultLabel(
'common',
'attachments.remove-attachment',
'Elimina allegato'
)}
>
<CloseIcon />
</IconButton>
</Box>
{fileData.sha256 && (
<Box sx={{ marginTop: '20px' }}>
<Grid container wrap="nowrap" alignItems={'center'}>
<Grid item xs="auto">
<Typography id="file-upload-hash-code" display="inline" fontWeight={700}>
{getLocalizedOrDefaultLabel('common', 'upload-file.hash-code', 'Codice hash')}
</Typography>
</Grid>
<Grid item zeroMinWidth>
<Typography
sx={{
marginLeft: '10px',
marginTop: '3px',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
display: 'block',
}}
variant="caption"
>
{fileData.sha256}
</Typography>
</Grid>
<Grid item xs="auto">
<HashToolTip />
{fileData.sha256 && (
<Box sx={{ marginTop: '20px' }}>
<Grid container wrap="nowrap" alignItems={'center'}>
<Grid item xs="auto">
<Typography id="file-upload-hash-code" display="inline" fontWeight={700}>
{getLocalizedOrDefaultLabel('common', 'upload-file.hash-code', 'Codice hash')}
</Typography>
</Grid>
<Grid item zeroMinWidth>
<Typography
sx={{
marginLeft: '10px',
marginTop: '3px',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
display: 'block',
}}
variant="caption"
>
{fileData.sha256}
</Typography>
</Grid>
<Grid item xs="auto">
<HashToolTip />
</Grid>
</Grid>
</Grid>
</Box>
)}
</Fragment>
)}
</Box>
)}
</Fragment>
)}
</Box>
{fileData.error && (
<Alert id="file-upload-error" severity="error" sx={{ marginTop: '10px' }}>
<FormHelperText id="file-upload-error" error sx={{ mt: 0.5, mx: '14px' }}>
{fileData.error}
</Alert>
</FormHelperText>
)}
</Box>
</>
);
};

Expand Down
16 changes: 8 additions & 8 deletions packages/pn-personagiuridica-webapp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
<title>SEND</title>
<meta name="description" content="Servizio notifiche digitali per le aziende" />
<meta name="theme-color" content="#00a1b0" />
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous" />
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
<script
src="/onetrust/notice-script/otnotice-1.0.min.js"
type="text/javascript"
charSet="UTF-8"
charset="UTF-8"
id="otprivacy-notice-script"
></script>
<script src="/js/config.js" type="text/javascript"></script>
Expand All @@ -31,4 +31,4 @@
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
</html>

0 comments on commit a5fc573

Please sign in to comment.