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

✨ Handling default files

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-02 09:57:59 +02:00
parent cece23448d
commit a979438a5f
2 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,12 +9,12 @@ import Button, { EButtonVariant } from "../Button";
import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer";
import { File as FileCustomer } from "le-coffre-resources/dist/Customer";
type IProps = {
title: string;
dateAsked: Date;
defaultDocuments?: Document[];
defaultFiles?: FileCustomer[];
onChange?: (files: File[]) => void;
};
@ -80,7 +80,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
{fileObj.name}
{this.shortName(fileObj.name)}
</Typography>
</div>
<Image
@ -107,6 +107,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
);
}
public override componentDidMount(): void {
console.log(this.props.defaultFiles);
if (this.props.defaultFiles) {
this.setState({
files: this.props.defaultFiles.map((file) => ({
index: this.index++,
file: new File([""], file.file_path, {}),
})),
});
}
}
private shortName(name: string): string {
const maxLength = 20;
if (name.length > maxLength) {
return name.substring(0, maxLength / 2) + "..." + name.substring(name.length - maxLength / 2, name.length);
}
return name;
}
private onDragOver(event: React.DragEvent<HTMLDivElement>) {
if (!this.state.isDragOver) {
this.setState({
@ -143,7 +163,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
],
});
if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
}
private removeFile(e: any) {
@ -154,7 +174,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)),
});
if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
}
private async onFileChange() {

12
src/front/Components/Layouts/ClientDashboard/index.tsx
View File

@ -6,7 +6,7 @@ import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import React from "react";
import { documentDeposited } from "../DesignSystem/dummyData";
import classes from "./classes.module.scss";
type IProps = {};
@ -31,7 +31,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
{this.renderHeader()}
<div className={classes["sub-container"]}>
<div className={classes["content"]}>
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
<DepositDocument
title={"Carte d'identité - recto-verso"}
dateAsked={new Date()}
defaultFiles={documentDeposited.files ?? []}
/>
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
@ -40,10 +44,10 @@ export default class ClientDashboard extends Base<IProps, IState> {
</div>
<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}>
Vous souhaitez envoyer d’autres documents à votre notaire ?
Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography>
<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}>
Ajouter d’autres documents
Ajouter d'autres documents
</Button>
</div>
<Confirm