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

Merge Dev in Staging

Browse Source
This commit is contained in:
Arnaud D. Natali 2023-10-26 14:55:43 +02:00 committed by GitHub
commit 7b682abe02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames"; import classNames from "classnames";
import Confirm from "../Modal/Confirm"; import Confirm from "../Modal/Confirm";
import Alert from "../Modal/Alert";
import GreenCheckIcon from "@Assets/Icons/green-check.svg"; import GreenCheckIcon from "@Assets/Icons/green-check.svg";
import Loader from "../Loader"; import Loader from "../Loader";
import TextAreaField from "../Form/TextareaField"; import TextAreaField from "../Form/TextareaField";
@ -38,6 +39,7 @@ type IState = {
currentFiles?: FileCustomer[]; currentFiles?: FileCustomer[];
refusedReason?: string; refusedReason?: string;
isShowRefusedReasonModalVisible: boolean; isShowRefusedReasonModalVisible: boolean;
showFailedUploaded: string | null;
loading: boolean; loading: boolean;
}; };
@ -78,6 +80,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
currentFiles: this.props.defaultFiles, currentFiles: this.props.defaultFiles,
refusedReason: "", refusedReason: "",
isShowRefusedReasonModalVisible: false, isShowRefusedReasonModalVisible: false,
showFailedUploaded: null,
loading: false, loading: false,
}; };
@ -90,6 +93,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
this.onCloseModalShowRefusedReason = this.onCloseModalShowRefusedReason.bind(this); this.onCloseModalShowRefusedReason = this.onCloseModalShowRefusedReason.bind(this);
this.onOpenModalShowRefusedReason = this.onOpenModalShowRefusedReason.bind(this); this.onOpenModalShowRefusedReason = this.onOpenModalShowRefusedReason.bind(this);
this.showRefusedReason = this.showRefusedReason.bind(this); this.showRefusedReason = this.showRefusedReason.bind(this);
this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
} }
public override render(): JSX.Element { 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. Ce document n'est pas conforme. Veuillez le déposer à nouveau.
</Typography> </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> </div>
); );
} }
@ -339,7 +354,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
const query = JSON.stringify({ document: { uid: this.props.document.uid } }); const query = JSON.stringify({ document: { uid: this.props.document.uid } });
formData.append("q", query); 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 files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
const newFileList = [ const newFileList = [
@ -396,6 +418,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
} }
} }
private onCloseAlertUpload() {
this.setState({ showFailedUploaded: null });
}
private addDocument() { private addDocument() {
if (!this.inputRef.current) return; if (!this.inputRef.current) return;
this.inputRef.current.value = ""; this.inputRef.current.value = "";

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

@ -16,6 +16,7 @@ import Button, { EButtonVariant } from "../Button";
import Confirm from "../Modal/Confirm"; import Confirm from "../Modal/Confirm";
import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents"; import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files"; import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
import Alert from "../Modal/Alert";
type IProps = { type IProps = {
onChange?: (files: File[]) => void; onChange?: (files: File[]) => void;
@ -38,6 +39,7 @@ type IState = {
currentFiles?: IFile[]; currentFiles?: IFile[];
refusedReason?: string; refusedReason?: string;
isShowRefusedReasonModalVisible: boolean; isShowRefusedReasonModalVisible: boolean;
showFailedUploaded: string | null;
isAddDocumentModalVisible: boolean; isAddDocumentModalVisible: boolean;
isLoading: boolean; isLoading: boolean;
}; };
@ -55,6 +57,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
isDragOver: false, isDragOver: false,
refusedReason: "", refusedReason: "",
isShowRefusedReasonModalVisible: false, isShowRefusedReasonModalVisible: false,
showFailedUploaded: null,
isLoading: false, isLoading: false,
}; };
@ -65,101 +68,119 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
this.onDragDrop = this.onDragDrop.bind(this); this.onDragDrop = this.onDragDrop.bind(this);
this.onDragLeave = this.onDragLeave.bind(this); this.onDragLeave = this.onDragLeave.bind(this);
this.onAccept = this.onAccept.bind(this); this.onAccept = this.onAccept.bind(this);
this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
} }
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<Confirm <div>
isOpen={this.state.isAddDocumentModalVisible} <Confirm
onClose={this.props.onClose!} isOpen={this.state.isAddDocumentModalVisible}
onAccept={this.onAccept} onClose={this.props.onClose!}
closeBtn onAccept={this.onAccept}
header={"Ajouter un document"} closeBtn
cancelText={"Annuler"} header={"Ajouter un document"}
confirmText={this.state.isLoading ? "Chargement..." : "Déposer le document"} cancelText={"Annuler"}
canConfirm={!this.state.isLoading}> confirmText={this.state.isLoading ? "Chargement..." : "Déposer le document"}
<div className={classes["modal-content"]}> canConfirm={!this.state.isLoading}>
<div className={classes["container"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <div className={classes["container"]}>
Vous souhaitez envoyer un autre document à votre notaire ? <Typography typo={ITypo.P_16} className={classes["text"]}>
</Typography> Vous souhaitez envoyer un autre document à votre notaire ?
<Typography typo={ITypo.P_16} className={classes["text"]}> </Typography>
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le <Typography typo={ITypo.P_16} className={classes["text"]}>
document correspondant. Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
</Typography> document correspondant.
<div </Typography>
className={classNames( <div
classes["root"], className={classNames(
this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"], classes["root"],
)} this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"],
onDragOver={this.onDragOver} )}
onDrop={this.onDragDrop} onDragOver={this.onDragOver}
onDragLeave={this.onDragLeave} onDrop={this.onDragDrop}
data-drag-over={this.state.isDragOver.toString()}> onDragLeave={this.onDragLeave}
<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} /> data-drag-over={this.state.isDragOver.toString()}>
<div className={classes["top-container"]}> <input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
<div className={classes["left"]}> <div className={classes["top-container"]}>
<Image src={DepositDocumentIcon} alt="Deposit document" /> <div className={classes["left"]}>
</div> <Image src={DepositDocumentIcon} alt="Deposit document" />
<div className={classes["separator"]} /> </div>
<div className={classes["right"]}> <div className={classes["separator"]} />
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}> <div className={classes["right"]}>
<div <Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
className={ <div
this.props.document.document_status === EDocumentStatus.VALIDATED className={
? classes["validated"] this.props.document.document_status === EDocumentStatus.VALIDATED
: "" ? classes["validated"]
}> : ""
{this.props.document.document_type?.name} }>
</div> {this.props.document.document_type?.name}
</Typography>
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
</div>
</div>
{this.state.currentFiles && this.state.currentFiles.length > 0 && (
<div className={classes["documents-container"]}>
{this.state.currentFiles.map((file) => {
const fileObj = file.file;
return (
<div className={classes["file-container"]} key={fileObj.name}>
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
{this.shortName(fileObj.name)}
</Typography>
</div>
<Image
src={CrossIcon}
alt="Cross icon"
className={classes["cross"]}
onClick={this.removeFile}
data-file={file.index}
/>
</div> </div>
); </Typography>
})} <Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
</div>
</div>
{this.state.currentFiles && this.state.currentFiles.length > 0 && (
<div className={classes["documents-container"]}>
{this.state.currentFiles.map((file) => {
const fileObj = file.file;
return (
<div className={classes["file-container"]} key={fileObj.name}>
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
{this.shortName(fileObj.name)}
</Typography>
</div>
<Image
src={CrossIcon}
alt="Cross icon"
className={classes["cross"]}
onClick={this.removeFile}
data-file={file.index}
/>
</div>
);
})}
</div>
)}
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
</Button>
</div> </div>
)}
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
</Button>
</div> </div>
</div> </div>
</div> </div>
</div> </Confirm>
</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 {} public override componentDidMount(): void {}
private onCloseAlertUpload() {
this.setState({ showFailedUploaded: null });
}
private async onAccept() { private async onAccept() {
this.setState({ this.setState({
isLoading: true, isLoading: true,
@ -182,7 +203,12 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
formData.append("file", filesArray[i]!.file, filesArray[i]!.fileName); formData.append("file", filesArray[i]!.file, filesArray[i]!.fileName);
const query = JSON.stringify({ document: { uid: documentCreated.uid } }); const query = JSON.stringify({ document: { uid: documentCreated.uid } });
formData.append("q", query); formData.append("q", query);
await Files.getInstance().post(formData); 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({ this.setState({

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

@ -1,10 +1,22 @@
@import "Themes/constants.scss"; @import "@Themes/constants.scss";
.sub-container {
padding: 40px;
}
.button-container { .button-container {
display: flex; 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;
}
} }