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

🎨 error message and document

Browse Source
This commit is contained in:
Hugo Lextrait 2023-05-11 18:53:39 +02:00
parent 70099340e2
commit 19ccc5a603
4 changed files with 102 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/front/Components/DesignSystem/DepositDocument/classes.module.scss
View File

@ -93,3 +93,8 @@
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.error-message {
color: var(--red-flash);
margin-top: 8px;
}

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

@ -66,94 +66,100 @@ export default class DepositDocument extends React.Component<IProps, IState> {
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<div <>
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 className={this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""}> <Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
{this.props.document.document_type?.name} <div
</div> className={
{this.props.document.document_type?.public_description !== "" && this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
this.props.document.document_status !== EDocumentStatus.VALIDATED && ( }>
<Tooltip text={this.props.document.document_type?.public_description} /> {this.props.document.document_type?.name}
)}
{this.props.document.document_status === EDocumentStatus.VALIDATED && (
<Image src={GreenCheckIcon} alt="Document check" />
)}
</Typography>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
)}
{this.props.document.document_history?.map((history) => (
<div key={history.uid}>{this.renderDocumentHistory(history)}</div>
))}
</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}>
{this.shortName(fileObj.name)}
</Typography>
</div>
<Image
src={CrossIcon}
alt="Cross icon"
className={classes["cross"]}
onClick={this.removeFile}
data-file={file.index}
/>
</div> </div>
); {this.props.document.document_type?.public_description !== "" &&
})} this.props.document.document_status !== EDocumentStatus.VALIDATED && (
</div> <Tooltip text={this.props.document.document_type?.public_description} />
)} )}
{this.props.document.document_status !== EDocumentStatus.VALIDATED && ( {this.props.document.document_status === EDocumentStatus.VALIDATED && (
<div className={classes["bottom-container"]}> <Image src={GreenCheckIcon} alt="Document check" />
<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> </Typography>
</Button> {this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
)}
{this.props.document.document_history?.map((history) => (
<div key={history.uid}>{this.renderDocumentHistory(history)}</div>
))}
</div>
</div> </div>
)} {this.props.document.document_status !== EDocumentStatus.VALIDATED && this.state.files.length > 0 && (
<Confirm <div className={classes["documents-container"]}>
isOpen={this.state.isShowRefusedReasonModalVisible} {this.state.files.map((file) => {
onClose={this.onCloseModalShowRefusedReason} const fileObj = file.file;
showCancelButton={false} if (file.archived) return;
onAccept={this.onCloseModalShowRefusedReason} return (
closeBtn <div className={classes["file-container"]} key={fileObj.name + file.index}>
header={"Motif du refus"} <div className={classes["left-part"]}>
confirmText={"J'ai compris"}> <Image src={DocumentCheckIcon} alt="Document check" />
<div className={classes["modal-content"]}> <Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_16} className={classes["text"]}> {this.shortName(fileObj.name)}
Votre document a été refusé pour la raison suivante : </Typography>
</Typography> </div>
<InputField textarea fakeplaceholder={"Description"} defaultValue={this.state.refusedReason} readOnly /> <Image
</div> src={CrossIcon}
</Confirm> alt="Cross icon"
</div> className={classes["cross"]}
onClick={this.removeFile}
data-file={file.index}
/>
</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}>
<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>
)}
<Confirm
isOpen={this.state.isShowRefusedReasonModalVisible}
onClose={this.onCloseModalShowRefusedReason}
showCancelButton={false}
onAccept={this.onCloseModalShowRefusedReason}
closeBtn
header={"Motif du refus"}
confirmText={"J'ai compris"}>
<div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}>
Votre document a été refusé pour la raison suivante :
</Typography>
<InputField textarea fakeplaceholder={"Description"} defaultValue={this.state.refusedReason} readOnly />
</div>
</Confirm>
</div>
{<div></div>}
</>
); );
} }

9
src/front/Components/DesignSystem/UserFolder/index.tsx
View File

@ -49,7 +49,10 @@ export default class UserFolder extends React.Component<IProps, IState> {
this.deleteAskedDocument = this.deleteAskedDocument.bind(this); this.deleteAskedDocument = this.deleteAskedDocument.bind(this);
} }
public override render(): JSX.Element { public override render(): JSX.Element {
const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED"); const documentsAsked: Document[] | null = [
...(this.getDocumentsByStatus("ASKED") ?? []),
...(this.getDocumentsByStatus("REFUSED") ?? []),
];
const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments(); const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
const redirectPath = Module.getInstance() const redirectPath = Module.getInstance()
.get() .get()
@ -111,9 +114,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
Demander un autre document{" "} Demander un autre document{" "}
</Button> </Button>
</Link> </Link>
<Button disabled={documentsAsked ? false : true}> <Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande</Button>
Envoyer un mail de demande
</Button>
</div> </div>
)} )}
</div> </div>

2
src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
View File

@ -148,7 +148,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
</Typography> </Typography>
<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} /> <Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
<div className={classes["dont-show-again"]}> <div className={classes["dont-show-again"]}>
<CheckBox option={{ label: "Ne plus afficher ce message", value: false }} toolTip={"Test"} /> <CheckBox option={{ label: "Ne plus afficher ce message", value: false }} />
</div> </div>
</div> </div>
)} )}