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

add alert modal for wrong file types

Browse Source
This commit is contained in:
OxSaitama 2023-10-26 13:23:48 +02:00
parent 0c1fc12ed9
commit b011d2e41e
3 changed files with 154 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@ import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames";
import Confirm from "../Modal/Confirm";
import Alert from "../Modal/Alert";
import GreenCheckIcon from "@Assets/Icons/green-check.svg";
import Loader from "../Loader";
import TextAreaField from "../Form/TextareaField";
@ -38,6 +39,7 @@ type IState = {
currentFiles?: FileCustomer[];
refusedReason?: string;
isShowRefusedReasonModalVisible: boolean;
showFailedUploaded: string | null;
loading: boolean;
};
@ -78,6 +80,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
currentFiles: this.props.defaultFiles,
refusedReason: "",
isShowRefusedReasonModalVisible: false,
showFailedUploaded: null,
loading: false,
};
@ -90,6 +93,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
this.onCloseModalShowRefusedReason = this.onCloseModalShowRefusedReason.bind(this);
this.onOpenModalShowRefusedReason = this.onOpenModalShowRefusedReason.bind(this);
this.showRefusedReason = this.showRefusedReason.bind(this);
this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
}
public override render(): JSX.Element {
@ -210,6 +214,17 @@ export default class DepositDocument extends React.Component<IProps, IState> {
Ce document n'est pas conforme. Veuillez le déposer à nouveau.
</Typography>
)}
{this.state.showFailedUploaded && (
<Alert onClose={this.onCloseAlertUpload}
header={"Fichier non autorisé"}
isOpen={!!this.state.showFailedUploaded}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
{this.state.showFailedUploaded}
</Typography>
</div>
</Alert>
)}
</div>
);
}
@ -339,7 +354,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
const query = JSON.stringify({ document: { uid: this.props.document.uid } });
formData.append("q", query);
const newFile = await Files.getInstance().post(formData);
let newFile: FileCustomer;
try {
newFile = await Files.getInstance().post(formData);
} catch (e) {
this.setState({ showFailedUploaded: "Le fichier ne correspond pas aux critères demandés", loading: false, });
return false;
}
const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
const newFileList = [
@ -396,6 +418,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
}
}
private onCloseAlertUpload() {
this.setState({ showFailedUploaded: null });
}
private addDocument() {
if (!this.inputRef.current) return;
this.inputRef.current.value = "";

28
src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
View File

@ -16,6 +16,7 @@ import Button, { EButtonVariant } from "../Button";
import Confirm from "../Modal/Confirm";
import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
import Alert from "../Modal/Alert";
type IProps = {
onChange?: (files: File[]) => void;
@ -38,6 +39,7 @@ type IState = {
currentFiles?: IFile[];
refusedReason?: string;
isShowRefusedReasonModalVisible: boolean;
showFailedUploaded: string | null;
isAddDocumentModalVisible: boolean;
isLoading: boolean;
};
@ -55,6 +57,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
isDragOver: false,
refusedReason: "",
isShowRefusedReasonModalVisible: false,
showFailedUploaded: null,
isLoading: false,
};
@ -65,10 +68,12 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
this.onDragDrop = this.onDragDrop.bind(this);
this.onDragLeave = this.onDragLeave.bind(this);
this.onAccept = this.onAccept.bind(this);
this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
}
public override render(): JSX.Element {
return (
<div>
<Confirm
isOpen={this.state.isAddDocumentModalVisible}
onClose={this.props.onClose!}
@ -121,7 +126,6 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
{this.state.currentFiles && this.state.currentFiles.length > 0 && (
<div className={classes["documents-container"]}>
{this.state.currentFiles.map((file) => {
const fileObj = file.file;
return (
@ -155,11 +159,28 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
</div>
</div>
</Confirm>
{this.state.showFailedUploaded && (
<Alert
onClose={this.onCloseAlertUpload}
header={"Fichier non autorisé"}
isOpen={!!this.state.showFailedUploaded}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
{this.state.showFailedUploaded}
</Typography>
</div>
</Alert>
)}
</div>
);
}
public override componentDidMount(): void {}
private onCloseAlertUpload() {
this.setState({ showFailedUploaded: null });
}
private async onAccept() {
this.setState({
isLoading: true,
@ -182,7 +203,12 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
formData.append("file", filesArray[i]!.file, filesArray[i]!.fileName);
const query = JSON.stringify({ document: { uid: documentCreated.uid } });
formData.append("q", query);
try {
await Files.getInstance().post(formData);
} catch (e) {
this.setState({ showFailedUploaded: "Le fichier ne correspond pas aux critères demandés", isLoading: false });
return;
}
}
this.setState({

24
src/front/Components/DesignSystem/Modal/Alert/classes.module.scss
View File

@ -1,10 +1,22 @@
@import "Themes/constants.scss";
.sub-container {
padding: 40px;
}
@import "@Themes/constants.scss";
.button-container {
display: flex;
justify-content: flex-start;
justify-content: center;
gap: 16px;
margin-top: 8px;
button {
flex: 1;
}
.sub-container {
flex: 1;
display: flex;
}
@media (max-width: $screen-s) {
flex-direction: column-reverse;
gap: 8px;
}
}