4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🐛 Loading for first file uploaded

Browse Source
This commit is contained in:
Maxime Lalo 2023-12-14 16:22:55 +01:00
parent d27bebecb3
commit e493d7e3a3
1 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/front/Components/DesignSystem/DepositDocument/index.tsx
View File

@ -86,6 +86,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
this.addDocument = this.addDocument.bind(this); this.addDocument = this.addDocument.bind(this);
this.onFileChange = this.onFileChange.bind(this); this.onFileChange = this.onFileChange.bind(this);
this.addFile = this.addFile.bind(this);
this.removeFile = this.removeFile.bind(this); this.removeFile = this.removeFile.bind(this);
this.onDragOver = this.onDragOver.bind(this); this.onDragOver = this.onDragOver.bind(this);
this.onDragDrop = this.onDragDrop.bind(this); this.onDragDrop = this.onDragDrop.bind(this);
@ -147,44 +148,42 @@ export default class DepositDocument extends React.Component<IProps, IState> {
))} ))}
</div> </div>
</div> </div>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && this.state.files.length > 0 && ( <div className={classes["documents-container"]}>
<div className={classes["documents-container"]}> {this.state.files.map((file) => {
{this.state.files.map((file) => { const fileObj = file.file;
const fileObj = file.file; if (file.archived) return;
if (file.archived) return; return (
return ( <div className={classes["file-container"]} key={fileObj.name + file.index}>
<div className={classes["file-container"]} key={fileObj.name + file.index}>
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
{this.shortName(file.fileName || fileObj.name)}
</Typography>
</div>
<Image
src={CrossIcon}
alt="Cross icon"
className={classes["cross"]}
onClick={this.removeFile}
data-file={file.index}
/>
</div>
);
})}
{this.state.loading && (
<div className={classes["file-container"]}>
<div className={classes["left-part"]}> <div className={classes["left-part"]}>
<div className={classes["loader"]}> <Image src={DocumentCheckIcon} alt="Document check" />
<Loader /> <Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
</div> {this.shortName(file.fileName || fileObj.name)}
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
Chargement...
</Typography> </Typography>
</div> </div>
<div /> <Image
src={CrossIcon}
alt="Cross icon"
className={classes["cross"]}
onClick={this.removeFile}
data-file={file.index}
/>
</div> </div>
)} );
</div> })}
)} {this.state.loading && (
<div className={classes["file-container"]}>
<div className={classes["left-part"]}>
<div className={classes["loader"]}>
<Loader />
</div>
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
Chargement...
</Typography>
</div>
<div />
</div>
)}
</div>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && ( {this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<div className={classes["bottom-container"]}> <div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}> <Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
@ -343,7 +342,6 @@ export default class DepositDocument extends React.Component<IProps, IState> {
alert("Ce fichier est trop volumineux"); alert("Ce fichier est trop volumineux");
return false; return false;
} }
this.setState({ this.setState({
loading: true, loading: true,
}); });
@ -410,8 +408,13 @@ export default class DepositDocument extends React.Component<IProps, IState> {
const file = files[0]; const file = files[0];
try { try {
if (file) this.addFile(file); if (file) {
await this.setState({ loading: true }, () => {
this.addFile(file);
});
}
} catch (e) { } catch (e) {
this.setState({ loading: false });
console.log(e); console.log(e);
} }
} }