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.onFileChange = this.onFileChange.bind(this);
this.addFile = this.addFile.bind(this);
this.removeFile = this.removeFile.bind(this);
this.onDragOver = this.onDragOver.bind(this);
this.onDragDrop = this.onDragDrop.bind(this);
@ -147,44 +148,42 @@ export default class DepositDocument extends React.Component<IProps, IState> {
))}
</div>
</div>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && this.state.files.length > 0 && (
<div className={classes["documents-container"]}>
{this.state.files.map((file) => {
const fileObj = file.file;
if (file.archived) return;
return (
<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["documents-container"]}>
{this.state.files.map((file) => {
const fileObj = file.file;
if (file.archived) return;
return (
<div className={classes["file-container"]} key={fileObj.name + file.index}>
<div className={classes["left-part"]}>
<div className={classes["loader"]}>
<Loader />
</div>
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
Chargement...
<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>
<div />
<Image
src={CrossIcon}
alt="Cross icon"
className={classes["cross"]}
onClick={this.removeFile}
data-file={file.index}
/>
</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 && (
<div className={classes["bottom-container"]}>
<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");
return false;
}
this.setState({
loading: true,
});
@ -410,8 +408,13 @@ export default class DepositDocument extends React.Component<IProps, IState> {
const file = files[0];
try {
if (file) this.addFile(file);
if (file) {
await this.setState({ loading: true }, () => {
this.addFile(file);
});
}
} catch (e) {
this.setState({ loading: false });
console.log(e);
}
}