beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added cancel uploads button

Browse source
This commit is contained in:
Rushikesh Tote 2022-04-13 10:00:54 +05:30
parent 9213af3641
commit 3480d7da3f
2 changed files with 165 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

297
src/components/pages/gallery/UploadProgress.tsx
View file

@ -10,6 +10,7 @@ import constants from 'utils/strings/constants';
import { ButtonVariant, getVariantColor } from './LinkButton'; import { ButtonVariant, getVariantColor } from './LinkButton';
import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload'; import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
import FileList from 'components/FileList'; import FileList from 'components/FileList';
import MessageDialog from 'components/MessageDialog';
interface Props { interface Props {
fileCounter; fileCounter;
uploadStage; uploadStage;
@ -168,6 +169,8 @@ const InProgressSection = (props: InProgressProps) => {
}; };
export default function UploadProgress(props: Props) { export default function UploadProgress(props: Props) {
const [showCancelDialog, setShowCancelDialog] = useState(false);
const fileProgressStatuses = [] as FileProgresses[]; const fileProgressStatuses = [] as FileProgresses[];
const fileUploadResultMap = new Map<FileUploadResults, number[]>(); const fileUploadResultMap = new Map<FileUploadResults, number[]>();
let filesNotUploaded = false; let filesNotUploaded = false;
@ -198,146 +201,168 @@ export default function UploadProgress(props: Props) {
} }
return ( return (
<Modal <>
show={props.show} <Modal
onHide={ show={props.show}
props.uploadStage !== UPLOAD_STAGES.FINISH onHide={
? () => null props.uploadStage !== UPLOAD_STAGES.FINISH
: props.closeModal ? () => {
} setShowCancelDialog(true);
aria-labelledby="contained-modal-title-vcenter" }
centered : props.closeModal
backdrop={fileProgressStatuses?.length !== 0 ? 'static' : true}> }
<Modal.Header aria-labelledby="contained-modal-title-vcenter"
style={{ centered
display: 'flex', backdrop={fileProgressStatuses?.length !== 0 ? 'static' : true}>
justifyContent: 'center', <Modal.Header
textAlign: 'center', style={{
borderBottom: 'none', display: 'flex',
paddingTop: '30px', justifyContent: 'center',
paddingBottom: '0px', textAlign: 'center',
}} borderBottom: 'none',
closeButton={props.uploadStage === UPLOAD_STAGES.FINISH}> paddingTop: '30px',
<h4 style={{ width: '100%' }}> paddingBottom: '0px',
{props.uploadStage === UPLOAD_STAGES.UPLOADING }}
? constants.UPLOAD[props.uploadStage](props.fileCounter) closeButton={true}>
: constants.UPLOAD[props.uploadStage]} <h4 style={{ width: '100%' }}>
</h4> {props.uploadStage === UPLOAD_STAGES.UPLOADING
</Modal.Header> ? constants.UPLOAD[props.uploadStage](
<Modal.Body> props.fileCounter
{(props.uploadStage === )
UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES || : constants.UPLOAD[props.uploadStage]}
props.uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA || </h4>
props.uploadStage === UPLOAD_STAGES.UPLOADING) && ( </Modal.Header>
<ProgressBar <Modal.Body>
now={props.now} {(props.uploadStage ===
animated UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES ||
variant="upload-progress-bar" props.uploadStage ===
/> UPLOAD_STAGES.EXTRACTING_METADATA ||
)} props.uploadStage === UPLOAD_STAGES.UPLOADING) && (
{props.uploadStage === UPLOAD_STAGES.UPLOADING && ( <ProgressBar
<InProgressSection now={props.now}
animated
variant="upload-progress-bar"
/>
)}
{props.uploadStage === UPLOAD_STAGES.UPLOADING && (
<InProgressSection
filenames={props.filenames}
fileProgressStatuses={fileProgressStatuses}
sectionTitle={constants.INPROGRESS_UPLOADS}
sectionInfo={sectionInfo}
/>
)}
<ResultSection
filenames={props.filenames} filenames={props.filenames}
fileProgressStatuses={fileProgressStatuses} fileUploadResultMap={fileUploadResultMap}
sectionTitle={constants.INPROGRESS_UPLOADS} fileUploadResult={FileUploadResults.UPLOADED}
sectionInfo={sectionInfo} sectionTitle={constants.SUCCESSFUL_UPLOADS}
/> />
)}
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={FileUploadResults.UPLOADED}
sectionTitle={constants.SUCCESSFUL_UPLOADS}
/>
{props.uploadStage === UPLOAD_STAGES.FINISH &&
filesNotUploaded && (
<NotUploadSectionHeader>
{constants.FILE_NOT_UPLOADED_LIST}
</NotUploadSectionHeader>
)}
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={FileUploadResults.BLOCKED}
sectionTitle={constants.BLOCKED_UPLOADS}
sectionInfo={constants.ETAGS_BLOCKED(
DESKTOP_APP_DOWNLOAD_URL
)}
/>
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={FileUploadResults.FAILED}
sectionTitle={constants.FAILED_UPLOADS}
/>
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={FileUploadResults.ALREADY_UPLOADED}
sectionTitle={constants.SKIPPED_FILES}
sectionInfo={constants.SKIPPED_INFO}
/>
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={
FileUploadResults.LARGER_THAN_AVAILABLE_STORAGE
}
sectionTitle={
constants.LARGER_THAN_AVAILABLE_STORAGE_UPLOADS
}
sectionInfo={constants.LARGER_THAN_AVAILABLE_STORAGE_INFO}
/>
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={FileUploadResults.UNSUPPORTED}
sectionTitle={constants.UNSUPPORTED_FILES}
sectionInfo={constants.UNSUPPORTED_INFO}
/>
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={FileUploadResults.TOO_LARGE}
sectionTitle={constants.TOO_LARGE_UPLOADS}
sectionInfo={constants.TOO_LARGE_INFO}
/>
</Modal.Body>
{props.uploadStage === UPLOAD_STAGES.FINISH ? (
<Modal.Footer style={{ border: 'none' }}>
{props.uploadStage === UPLOAD_STAGES.FINISH && {props.uploadStage === UPLOAD_STAGES.FINISH &&
(fileUploadResultMap?.get(FileUploadResults.FAILED) filesNotUploaded && (
?.length > 0 || <NotUploadSectionHeader>
fileUploadResultMap?.get(FileUploadResults.BLOCKED) {constants.FILE_NOT_UPLOADED_LIST}
?.length > 0 ? ( </NotUploadSectionHeader>
<Button )}
variant="outline-success"
style={{ width: '100%' }} <ResultSection
onClick={props.retryFailed}> filenames={props.filenames}
{constants.RETRY_FAILED} fileUploadResultMap={fileUploadResultMap}
</Button> fileUploadResult={FileUploadResults.BLOCKED}
) : ( sectionTitle={constants.BLOCKED_UPLOADS}
<Button sectionInfo={constants.ETAGS_BLOCKED(
variant="outline-secondary" DESKTOP_APP_DOWNLOAD_URL
style={{ width: '100%' }} )}
onClick={props.closeModal}> />
{constants.CLOSE} <ResultSection
</Button> filenames={props.filenames}
))} fileUploadResultMap={fileUploadResultMap}
</Modal.Footer> fileUploadResult={FileUploadResults.FAILED}
) : ( sectionTitle={constants.FAILED_UPLOADS}
<Modal.Footer style={{ border: 'none' }}> />
<Button <ResultSection
variant="outline-danger" filenames={props.filenames}
style={{ width: '100%' }} fileUploadResultMap={fileUploadResultMap}
onClick={props.cancelUploads}> fileUploadResult={FileUploadResults.ALREADY_UPLOADED}
{constants.CANCEL_UPLOADS} sectionTitle={constants.SKIPPED_FILES}
</Button> sectionInfo={constants.SKIPPED_INFO}
</Modal.Footer> />
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={
FileUploadResults.LARGER_THAN_AVAILABLE_STORAGE
}
sectionTitle={
constants.LARGER_THAN_AVAILABLE_STORAGE_UPLOADS
}
sectionInfo={
constants.LARGER_THAN_AVAILABLE_STORAGE_INFO
}
/>
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={FileUploadResults.UNSUPPORTED}
sectionTitle={constants.UNSUPPORTED_FILES}
sectionInfo={constants.UNSUPPORTED_INFO}
/>
<ResultSection
filenames={props.filenames}
fileUploadResultMap={fileUploadResultMap}
fileUploadResult={FileUploadResults.TOO_LARGE}
sectionTitle={constants.TOO_LARGE_UPLOADS}
sectionInfo={constants.TOO_LARGE_INFO}
/>
</Modal.Body>
{props.uploadStage === UPLOAD_STAGES.FINISH && (
<Modal.Footer style={{ border: 'none' }}>
{props.uploadStage === UPLOAD_STAGES.FINISH &&
(fileUploadResultMap?.get(FileUploadResults.FAILED)
?.length > 0 ||
fileUploadResultMap?.get(FileUploadResults.BLOCKED)
?.length > 0 ? (
<Button
variant="outline-success"
style={{ width: '100%' }}
onClick={props.retryFailed}>
{constants.RETRY_FAILED}
</Button>
) : (
<Button
variant="outline-secondary"
style={{ width: '100%' }}
onClick={props.closeModal}>
{constants.CLOSE}
</Button>
))}
</Modal.Footer>
)}
</Modal>
{showCancelDialog && (
<MessageDialog
show={showCancelDialog}
onHide={() => {
setShowCancelDialog(false);
}}
attributes={{
title: constants.STOP_UPLOADS_HEADER,
content: constants.STOP_ALL_UPLOADS_MESSAGE,
proceed: {
text: constants.YES_STOP_UPLOADS,
variant: 'danger',
action: props.cancelUploads,
},
close: {
text: constants.NO,
variant: 'secondary',
action: () => {},
},
}}
/>
)} )}
</Modal> </>
); );
} }

4
src/utils/strings/englishConstants.tsx
View file

@ -708,6 +708,10 @@ const englishConstants = {
you believe are duplicates{' '} you believe are duplicates{' '}
</> </>
), ),
STOP_ALL_UPLOADS_MESSAGE:
'are you sure that you want to stop all the uploads in progress?',
STOP_UPLOADS_HEADER: 'stop uploads?',
YES_STOP_UPLOADS: 'yes, stop uploads',
}; };
export default englishConstants; export default englishConstants;