Deposit Other Document from customer dashboard
This commit is contained in:
VincentAlamelle
GitHub
commit
ad1e191334
Binary file not shown.
@ -0,0 +1,106 @@
|
||||
.container {
|
||||
.root {
|
||||
padding: 24px;
|
||||
background-color: var(--white);
|
||||
border: 1px dashed #e7e7e7;
|
||||
|
||||
height: fit-content;
|
||||
|
||||
&[data-drag-over="true"] {
|
||||
border: 1px dashed var(--grey);
|
||||
}
|
||||
|
||||
&.validated {
|
||||
border: 1px dashed var(--green-flash);
|
||||
}
|
||||
|
||||
.top-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
background-color: #939393;
|
||||
width: 1px;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 18px;
|
||||
|
||||
.validated {
|
||||
color: var(--green-flash);
|
||||
}
|
||||
|
||||
.refused-button {
|
||||
font-size: 14px;
|
||||
color: var(--re-hover);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documents-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
|
||||
.file-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-part {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.loader {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.cross {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 16px;
|
||||
|
||||
.add-button {
|
||||
.add-document {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--red-flash);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
303
src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
Normal file
303
src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
Normal file
@ -0,0 +1,303 @@
|
||||
import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg";
|
||||
import CrossIcon from "@Assets/Icons/cross.svg";
|
||||
import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
|
||||
import PlusIcon from "@Assets/Icons/plus.svg";
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import { Document } from "le-coffre-resources/dist/Customer";
|
||||
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
|
||||
import classNames from "classnames";
|
||||
|
||||
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";
|
||||
|
||||
type IProps = {
|
||||
onChange?: (files: File[]) => void;
|
||||
open: boolean;
|
||||
onClose?: () => void;
|
||||
document: Document;
|
||||
customer_uid: string;
|
||||
folder_uid: string | string[];
|
||||
};
|
||||
|
||||
type IFile = {
|
||||
index: number;
|
||||
file: File;
|
||||
fileName: string;
|
||||
};
|
||||
|
||||
type IState = {
|
||||
files: IFile[];
|
||||
isDragOver: boolean;
|
||||
currentFiles?: IFile[];
|
||||
refusedReason?: string;
|
||||
isShowRefusedReasonModalVisible: boolean;
|
||||
isAddDocumentModalVisible: boolean;
|
||||
};
|
||||
|
||||
export default class DepositOtherDocument extends React.Component<IProps, IState> {
|
||||
private inputRef = React.createRef<HTMLInputElement>();
|
||||
private index = 0;
|
||||
|
||||
public constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isAddDocumentModalVisible: this.props.open,
|
||||
files: [],
|
||||
isDragOver: false,
|
||||
refusedReason: "",
|
||||
isShowRefusedReasonModalVisible: false,
|
||||
};
|
||||
|
||||
this.addDocument = this.addDocument.bind(this);
|
||||
this.onFileChange = this.onFileChange.bind(this);
|
||||
this.removeFile = this.removeFile.bind(this);
|
||||
this.onDragOver = this.onDragOver.bind(this);
|
||||
this.onDragDrop = this.onDragDrop.bind(this);
|
||||
this.onDragLeave = this.onDragLeave.bind(this);
|
||||
this.onAccept = this.onAccept.bind(this);
|
||||
}
|
||||
|
||||
private async onAccept() {
|
||||
const filesArray = this.state.currentFiles;
|
||||
|
||||
if (!filesArray) return;
|
||||
|
||||
const documentCreated = await Documents.getInstance().post({
|
||||
folder: {
|
||||
uid: this.props.folder_uid,
|
||||
},
|
||||
depositor: {
|
||||
uid: this.props.customer_uid,
|
||||
},
|
||||
});
|
||||
|
||||
console.log(documentCreated);
|
||||
|
||||
filesArray.forEach(async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file.file, file.fileName);
|
||||
const query = JSON.stringify({ document: { uid: documentCreated.uid } });
|
||||
formData.append("q", query);
|
||||
|
||||
const newFile = await Files.getInstance().post(formData);
|
||||
console.log(newFile);
|
||||
});
|
||||
|
||||
this.props.onClose!();
|
||||
}
|
||||
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<Confirm
|
||||
isOpen={this.state.isAddDocumentModalVisible}
|
||||
onClose={this.props.onClose!}
|
||||
onAccept={this.onAccept}
|
||||
closeBtn
|
||||
header={"Ajouter un document"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={"Déposer le document"}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<div className={classes["container"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
Vous souhaitez envoyer un autre document à votre notaire ?
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
|
||||
document correspondant.
|
||||
</Typography>
|
||||
<div
|
||||
className={classNames(
|
||||
classes["root"],
|
||||
this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"],
|
||||
)}
|
||||
onDragOver={this.onDragOver}
|
||||
onDrop={this.onDragDrop}
|
||||
onDragLeave={this.onDragLeave}
|
||||
data-drag-over={this.state.isDragOver.toString()}>
|
||||
<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
|
||||
<div className={classes["top-container"]}>
|
||||
<div className={classes["left"]}>
|
||||
<Image src={DepositDocumentIcon} alt="Deposit document" />
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["right"]}>
|
||||
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
|
||||
<div
|
||||
className={
|
||||
this.props.document.document_status === EDocumentStatus.VALIDATED
|
||||
? classes["validated"]
|
||||
: ""
|
||||
}>
|
||||
{this.props.document.document_type?.name}
|
||||
</div>
|
||||
</Typography>
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
Sélectionnez des TEST 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) => {
|
||||
console.log(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>
|
||||
</div>
|
||||
</Confirm>
|
||||
);
|
||||
}
|
||||
|
||||
public override componentDidMount(): void {}
|
||||
|
||||
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({
|
||||
isDragOver: true,
|
||||
});
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
private onDragLeave(event: React.DragEvent<HTMLDivElement>) {
|
||||
this.setState({
|
||||
isDragOver: false,
|
||||
});
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
|
||||
event.preventDefault();
|
||||
this.setState({
|
||||
isDragOver: false,
|
||||
});
|
||||
const file = event.dataTransfer.files[0];
|
||||
if (file) this.addFile(file);
|
||||
}
|
||||
|
||||
private async addFile(file: File) {
|
||||
const iFile: IFile = {
|
||||
file: file,
|
||||
fileName: file.name,
|
||||
index: this.index++,
|
||||
};
|
||||
const tmpArray: IFile[] = this.state.currentFiles || [];
|
||||
tmpArray.push(iFile);
|
||||
this.setState({
|
||||
currentFiles: tmpArray,
|
||||
});
|
||||
|
||||
console.log(this.state.currentFiles);
|
||||
|
||||
// const formData = new FormData();
|
||||
// formData.append("file", file, file.name);
|
||||
// const query = JSON.stringify({ document: { uid: this.props.document.uid } });
|
||||
// formData.append("q", query);
|
||||
|
||||
// const newFile = await Files.getInstance().post(formData);
|
||||
// const newFile: FileCustomer = {
|
||||
// file_name: file.name,
|
||||
// }
|
||||
// const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
|
||||
|
||||
// this.setState({
|
||||
// currentFiles: files,
|
||||
// loading: false,
|
||||
// files: [
|
||||
// ...this.state.files,
|
||||
// {
|
||||
// index: this.index++,
|
||||
// file: file,
|
||||
// uid: newFile.uid!,
|
||||
// archived: null,
|
||||
// fileName: newFile?.file_name ?? "",
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
|
||||
// if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
|
||||
}
|
||||
|
||||
private async removeFile(e: any) {
|
||||
const image = e.target as HTMLElement;
|
||||
const indexToRemove = image.getAttribute("data-file");
|
||||
console.log(indexToRemove);
|
||||
|
||||
if (!indexToRemove) return;
|
||||
const file = this.state.currentFiles!.find((file) => file.index === parseInt(indexToRemove));
|
||||
if (!file) return;
|
||||
this.setState({
|
||||
currentFiles: this.state.currentFiles!.filter((file) => file.index !== parseInt(indexToRemove)),
|
||||
});
|
||||
|
||||
if (this.props.onChange) this.props.onChange(this.state.currentFiles!.map((file) => file.file));
|
||||
}
|
||||
|
||||
private async onFileChange() {
|
||||
if (!this.inputRef.current) return;
|
||||
|
||||
const files = this.inputRef.current.files;
|
||||
|
||||
if (!files) {
|
||||
return;
|
||||
}
|
||||
const file = files[0];
|
||||
|
||||
if (file) this.addFile(file);
|
||||
}
|
||||
|
||||
private addDocument() {
|
||||
if (!this.inputRef.current) return;
|
||||
this.inputRef.current.click();
|
||||
}
|
||||
|
||||
// private formatDate(date: Date) {
|
||||
// const dateToConvert = new Date(date);
|
||||
// return dateToConvert.toLocaleDateString("fr-FR");
|
||||
// }
|
||||
}
|
||||
@ -3,8 +3,6 @@ import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
|
||||
import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
|
||||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
|
||||
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
||||
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||
import Customer, { Document, DocumentType } from "le-coffre-resources/dist/Customer";
|
||||
@ -13,6 +11,7 @@ import React, { useCallback, useEffect, useState } from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import { useRouter } from "next/router";
|
||||
import JwtService from "@Front/Services/JwtService/JwtService";
|
||||
import DepositOtherDocument from "@Front/Components/DesignSystem/DepositOtherDocument";
|
||||
|
||||
type IProps = {};
|
||||
|
||||
@ -24,6 +23,8 @@ export default function ClientDashboard(props: IProps) {
|
||||
const [isAddDocumentModalVisible, setIsAddDocumentModalVisible] = useState<boolean>(false);
|
||||
|
||||
const onCloseModalAddDocument = useCallback(() => {
|
||||
console.log("Closing");
|
||||
|
||||
setIsAddDocumentModalVisible(false);
|
||||
}, []);
|
||||
|
||||
@ -89,6 +90,24 @@ export default function ClientDashboard(props: IProps) {
|
||||
);
|
||||
}, [customer]);
|
||||
|
||||
const renderBox = useCallback(() => {
|
||||
console.log(isAddDocumentModalVisible);
|
||||
|
||||
return (
|
||||
<DepositOtherDocument
|
||||
folder_uid={folderUid!}
|
||||
customer_uid={customer!.uid!}
|
||||
open={isAddDocumentModalVisible}
|
||||
onClose={onCloseModalAddDocument}
|
||||
document={Document.hydrate<Document>({
|
||||
document_type: DocumentType.hydrate<DocumentType>({
|
||||
name: "Document annexe",
|
||||
}),
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}, [isAddDocumentModalVisible]);
|
||||
|
||||
return (
|
||||
<DefaultTemplate title={"Mon compte"} isPadding={false} hasHeaderLinks={false}>
|
||||
<div className={classes["root"]}>
|
||||
@ -107,33 +126,8 @@ export default function ClientDashboard(props: IProps) {
|
||||
Ajouter d'autres documents
|
||||
</Button>
|
||||
</div>
|
||||
<Confirm
|
||||
isOpen={isAddDocumentModalVisible}
|
||||
onClose={onCloseModalAddDocument}
|
||||
onAccept={onOpenModalAddDocument}
|
||||
closeBtn
|
||||
header={"Ajouter un document"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={"Déposer le document"}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
Vous souhaitez envoyer un autre document à votre notaire ?
|
||||
</Typography>
|
||||
<TextField placeholder="Nom du document" />
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
|
||||
document correspondant.
|
||||
</Typography>
|
||||
<DepositDocument
|
||||
document={Document.hydrate<Document>({
|
||||
document_type: DocumentType.hydrate<DocumentType>({
|
||||
name: "Document annexe",
|
||||
}),
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</Confirm>
|
||||
</div>
|
||||
{isAddDocumentModalVisible && renderBox()}
|
||||
</DefaultTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user