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

added exportFinished logic

Browse source
This commit is contained in:
Abhinav-grd 2021-07-07 13:14:52 +05:30
parent b083cdde2a
commit e8dd5117b4
1 changed files with 43 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/ExportFinished.tsx
View file

@ -1,58 +1,86 @@
import React from 'react';
import { Button } from 'react-bootstrap';
import exportService from 'services/exportService';
import { formatDateTime } from 'utils/file';
import constants from 'utils/strings/constants';
import { Label, Row, Value } from './Container';
import { ComfySpan } from './ExportInProgress';
import { ExportStats } from './ExportModal';
import FolderIcon from './icons/FolderIcon';
import InProgressIcon from './icons/InProgressIcon';
import MessageDialog from './MessageDialog';
export default function ExportInit(props) {
interface Props {
show: boolean
onHide: () => void
exportFolder: string
exportSize: string
lastExportTime: number
exportStats: ExportStats
updateExportFolder: (newFolder: string) => void;
exportFiles: () => void
}
export default function ExportFinished(props: Props) {
const selectNewDirectory = async () => {
const newFolder = await exportService.selectExportDirectory();
newFolder && props.updateExportFolder(newFolder);
};
return (
<MessageDialog
show={props.show}
onHide={props.onHide}
size="lg"
attributes={{
title: constants.EXPORT_DATA,
}}
>
<div style={{ borderBottom: '1px solid #444', marginBottom: '20px', padding: '0 5%' }}>
<Row>
<Label>{constants.DESTINATION} </Label>
<Value>
Folder Name
<div onClick={null} style={{ marginLeft: '5px', cursor: 'pointer' }}><FolderIcon /></div>
<Label width="40%">{constants.DESTINATION}</Label>
<Value width="60%">
{!props.exportFolder ?
(<Button variant={'outline-success'} onClick={selectNewDirectory}>{constants.SELECT_FOLDER}</Button>) :
(<>
<span style={{ overflow: 'hidden', direction: 'rtl', height: '1.5rem', width: '90%', whiteSpace: 'nowrap' }}>
{props.exportFolder}
</span>
<div onClick={selectNewDirectory} style={{ width: '10%', marginLeft: '5px', cursor: 'pointer' }}>
<FolderIcon />
</div>
</>)
}
</Value>
</Row>
<Row>
<Label>{constants.TOTAL_EXPORT_SIZE} </Label><Value>24GB</Value>
<Label width="40%">{constants.TOTAL_EXPORT_SIZE} </Label><Value width="60%">{props.exportSize} GB</Value>
</Row>
</div>
<div style={{ borderBottom: '1px solid #444', marginBottom: '20px', padding: '0 5%' }}>
<Row>
<Label width="40%">{constants.LAST_EXPORT_TIME}</Label>
<Value width="60%">{formatDateTime(Date.now())}</Value>
<Value width="60%">{formatDateTime(props.lastExportTime)}</Value>
</Row>
<Row>
<Label width="60%">{constants.SUCCESSFULLY_EXPORTED_FILES}</Label>
<Value width="35%"><ComfySpan>80 / 100</ComfySpan></Value>
<Value width="35%"><ComfySpan>{props.exportStats.total - props.exportStats.failed} / {props.exportStats.total}</ComfySpan></Value>
</Row>
<Row>
<Label width="60%">{constants.FAILED_EXPORTED_FILES}</Label>
<Value width="35%">
<ComfySpan>20 / 100</ComfySpan>
<ComfySpan>{props.exportStats.failed} / {props.exportStats.total}</ComfySpan>
</Value>
{props.exportStats.failed !== 0 &&
<Value width="5%">
<InProgressIcon disabled />
</Value>
}
</Row>
</div>
<div style={{ width: '100%', display: 'flex', justifyContent: 'space-around' }}>
<Button block variant={'outline-secondary'}>{constants.CLOSE}</Button>
<Button block variant={'outline-secondary'} onClick={props.onHide}>{constants.CLOSE}</Button>
<div style={{ width: '30px' }} />
<Button block variant={'outline-success'}>{constants.EXPORT}</Button>
<Button block variant={'outline-success'} onClick={props.exportFiles}>{constants.EXPORT}</Button>
</div>
</MessageDialog >
);