add client dashboard (#38)

This commit is contained in:
Arnaud D. Natali 2023-05-10 15:24:31 +02:00 committed by GitHub
commit 721b12da0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 314 additions and 170 deletions

View File

@ -15,6 +15,7 @@
white-space: nowrap;
user-select: none;
cursor: pointer;
font-family: var(--font-primary);
svg {
width: 18px;

View File

@ -1,12 +1,17 @@
.root {
padding: 24px;
background-color: white;
background-color: var(--white);
border: 1px dashed #e7e7e7;
height: fit-content;
&[data-drag-over="true"] {
border: 1px dashed grey;
}
height: fit-content;
&[data-drag-over="true"] {
border: 1px dashed var(--grey);
}
&.validated {
border: 1px dashed var(--green-flash);
}
.top-container {
display: flex;
@ -25,6 +30,12 @@
.right {
margin-left: 18px;
.refused-button {
font-size: 14px;
color: var(--re-hover);
margin-left: 8px;
}
.title {
display: flex;
align-items: center;
@ -40,9 +51,9 @@
margin-top: 16px;
.file-container {
display: flex;
align-items: center;
justify-content: space-between;
display: flex;
align-items: center;
justify-content: space-between;
.left-part {
display: flex;
@ -50,7 +61,7 @@
gap: 8px;
}
.cross{
.cross {
cursor: pointer;
}
}
@ -58,6 +69,7 @@
.bottom-container {
margin-top: 16px;
.add-button {
.add-document {
display: flex;
@ -66,4 +78,14 @@
}
}
}
.text {
margin-bottom: 12px;
}
}
.modal-content{
display: flex;
flex-direction: column;
gap: 16px;
}

View File

@ -9,8 +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, File as FileCustomer } from "le-coffre-resources/dist/Customer";
import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resources/dist/Customer";
import Files from "@Front/Api/LeCoffreApi/SuperAdmin/Files/Files";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames";
import Confirm from "../Modal/Confirm";
import InputField from "../Form/Elements/InputField";
type IProps = {
title: string;
@ -23,12 +27,15 @@ type IProps = {
type IFile = {
index: number;
file: File;
uid: string;
};
type IState = {
files: IFile[];
isDragOver: boolean;
currentFiles?: FileCustomer[];
refusedReason?: string;
isShowRefusedReasonModalVisible: boolean;
};
export default class DepositDocument extends React.Component<IProps, IState> {
@ -42,6 +49,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
files: [],
isDragOver: false,
currentFiles: this.props.defaultFiles,
refusedReason: "",
isShowRefusedReasonModalVisible: false,
};
this.addDocument = this.addDocument.bind(this);
@ -50,12 +59,19 @@ export default class DepositDocument extends React.Component<IProps, IState> {
this.onDragOver = this.onDragOver.bind(this);
this.onDragDrop = this.onDragDrop.bind(this);
this.onDragLeave = this.onDragLeave.bind(this);
this.onCloseModalShowRefusedReason = this.onCloseModalShowRefusedReason.bind(this);
this.onOpenModalShowRefusedReason = this.onOpenModalShowRefusedReason.bind(this);
this.showRefusedReason = this.showRefusedReason.bind(this);
}
public override render(): JSX.Element {
console.log("Reason in state : ", this.state.refusedReason);
return (
<div
className={classes["root"]}
className={classNames(
classes["root"],
this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"],
)}
onDragOver={this.onDragOver}
onDrop={this.onDragDrop}
onDragLeave={this.onDragLeave}
@ -68,14 +84,22 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
{this.props.title} <Tooltip text={"Blabla"} />
</Typography>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
Demandé par le notaire le {this.formatDate(this.props.dateAsked)}
{this.props.title}{" "}
{this.props.document.document_type?.public_description !== "" && (
<Tooltip text={this.props.document.document_type?.public_description} />
)}
</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.state.files.length > 0 && (
{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;
@ -99,14 +123,31 @@ export default class DepositDocument extends React.Component<IProps, IState> {
})}
</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" />
{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 é refusé pour la raison suivante :
</Typography>
</Button>
</div>
<InputField textarea fakeplaceholder={"Description"} defaultValue={this.state.refusedReason} readOnly />
</div>
</Confirm>
;
</div>
);
}
@ -117,11 +158,63 @@ export default class DepositDocument extends React.Component<IProps, IState> {
files: this.props.defaultFiles.map((file) => ({
index: this.index++,
file: new File([""], file.file_path ?? "", {}),
uid: file.uid!,
})),
});
}
}
private onCloseModalShowRefusedReason() {
this.setState({
isShowRefusedReasonModalVisible: false,
});
}
private onOpenModalShowRefusedReason() {
this.setState({
isShowRefusedReasonModalVisible: true,
});
}
private renderDocumentHistory(history: DocumentHistory): JSX.Element | null {
switch (history.document_status) {
case EDocumentStatus.ASKED:
return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
Demandé par votre notaire le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.VALIDATED:
return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
Validé par votre notaire le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.DEPOSITED:
return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
Déposé le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.REFUSED:
return (
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RE_HOVER}>
Document non conforme
{history.refused_reason && history.refused_reason.length > 0 && (
<Button
variant={EButtonVariant.LINE}
className={classes["refused-button"]}
onClick={() => this.showRefusedReason(history.refused_reason ?? "")}>
Voir le motif de refus
</Button>
)}
</Typography>
);
}
return null;
}
private shortName(name: string): string {
const maxLength = 20;
if (name.length > maxLength) {
@ -139,6 +232,13 @@ export default class DepositDocument extends React.Component<IProps, IState> {
event.preventDefault();
}
private showRefusedReason(refusedReason: string) {
this.setState({
refusedReason,
});
this.onOpenModalShowRefusedReason();
}
private onDragLeave(event: React.DragEvent<HTMLDivElement>) {
this.setState({
isDragOver: false,
@ -156,18 +256,6 @@ export default class DepositDocument extends React.Component<IProps, IState> {
}
private async addFile(file: File) {
this.setState({
files: [
...this.state.files,
{
index: this.index++,
file: file,
},
],
});
if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
const formData = new FormData();
formData.append("file", file, file.name);
const query = JSON.stringify({ document: { uid: this.props.document.uid } });
@ -175,25 +263,34 @@ export default class DepositDocument extends React.Component<IProps, IState> {
const newFile = await Files.getInstance().post(formData);
const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
this.setState({
currentFiles: files,
files: [
...this.state.files,
{
index: this.index++,
file: file,
uid: newFile.uid!,
},
],
});
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");
if (!indexToRemove) return;
// const file = this.state.files.find((file) => file.index === parseInt(indexToRemove));
const file = this.state.files.find((file) => file.index === parseInt(indexToRemove));
if (!file) return;
this.setState({
files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)),
});
if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
// TODO Finir la suppression de fichier
// const deletedFileUid = this.props.document.files?.find((file) => file.file_path === newFile.file_path)?.uid;
// console.log({ deletedFileUid });
// await Files.getInstance().delete(file?.uid);
await Files.getInstance().delete(file.uid);
}
private async onFileChange() {
@ -211,6 +308,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
}
private formatDate(date: Date) {
return date.toLocaleDateString("fr-FR");
const dateToConvert = new Date(date);
return dateToConvert.toLocaleDateString("fr-FR");
}
}

View File

@ -12,6 +12,10 @@
font-weight: 400;
font-size: 18px;
line-height: 22px;
&:read-only{
cursor: not-allowed;
}
}
.input {
@ -74,7 +78,6 @@
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
-moz-appearance: textfield;
}
/* For IE 10+ */

View File

@ -14,8 +14,8 @@ export type IProps = IBaseFieldProps & {
export default class InputField extends BaseField<IProps> {
static override defaultProps: Partial<IBaseFieldProps> = {
...BaseField.defaultProps,
required: true
}
required: true,
};
public override render(): ReactNode {
let pattern;
@ -52,8 +52,12 @@ export default class InputField extends BaseField<IProps> {
this.props.className ? [classes["textarea"], classes[this.props.className]].join(" ") : classes["textarea"]
}
value={value}
/>
<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}</div>
readOnly={this.props.readOnly}>
{value.toString()}
</textarea>
<div className={classes["fake-placeholder"]}>
{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}
</div>
</div>
</Typography>
);
@ -74,7 +78,9 @@ export default class InputField extends BaseField<IProps> {
}
value={value}
/>
<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}</div>
<div className={classes["fake-placeholder"]}>
{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}
</div>
</div>
</Typography>
);
@ -84,7 +90,7 @@ export default class InputField extends BaseField<IProps> {
public override componentDidMount() {
this.setState({
value: this.props.defaultValue ?? "",
})
});
}
// We filter the props we'll pass to the primitive input as they're useless for it

View File

@ -9,13 +9,14 @@
input[type="radio"] {
appearance: none;
background-color: transparent;
width: 16px;
height: 16px;
width: 15px;
height: 15px;
border: 1px solid $turquoise-flash;
border-radius: 100px;
margin-right: 16px;
display: grid;
place-content: center;
display: flex;
align-items: center;
justify-content: center;
margin-top: auto;
margin-bottom: auto;
}

View File

@ -19,13 +19,18 @@ type IState = {
const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: "var(--turquoise-flash)",
color: "white",
//boxShadow: theme.shadows[1],
fontSize: 11,
backgroundColor: "var(--white)",
color: "var(--black)",
boxShadow: "0px 4px 24px 0px #00000026",
fontSize: 14,
fontWeight: 400,
lineHeight: "22px",
fontFamily: "var(--font-primary)",
padding: "16px",
borderRadius: "0px",
},
[`& .${tooltipClasses.arrow}`]: {
color: "var(--turquoise-flash)",
color: "var(--white)",
},
}),
);

View File

@ -3,6 +3,7 @@ import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer";
import Typography, { ITypo } from "../../Typography";
import DocumentNotary from "../../Document/DocumentNotary";
import classNames from "classnames";
type IProps = {
title: string;
@ -17,13 +18,15 @@ type IProps = {
| null;
openDeletionModal: (uid: Document["uid"]) => void;
folderUid: string;
className?: string;
};
type IState = {};
export default class DocumentList extends React.Component<IProps, IState> {
public override render(): JSX.Element {
const classNameToAdd = this.props.className ? classNames(classes["root"], this.props.className) : classes["root"];
return (
<div className={classes["root"]}>
<div className={classNameToAdd}>
<div className={classes["title"]}>
<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
</div>
@ -32,7 +35,12 @@ export default class DocumentList extends React.Component<IProps, IState> {
{this.props.documents &&
this.props.documents.map((document) => {
return (
<DocumentNotary folderUid={this.props.folderUid} document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal} />
<DocumentNotary
folderUid={this.props.folderUid}
document={document}
key={document.uid}
openDeletionModal={this.props.openDeletionModal}
/>
);
})}
</div>

View File

@ -57,29 +57,24 @@
gap: 64px;
margin-top: 32px;
@media(max-width: $screen-s){
grid-template-columns: 1fr;
@media (max-width: $screen-s) {
gap: 32px;
}
}
.button-container {
display: inline-grid;
justify-items: start;
gap: 32px;
margin-top: 16px;
.button-desktop{
@media(max-width: $screen-s){
display: none;
}
display: flex;
flex-direction: column;
}
.button-mobile{
display: none;
.documents-asked{
order: -1;
}
.button-container {
display: inline-grid;
justify-items: start;
gap: 32px;
margin-top: 16px;
@media(max-width: $screen-s){
display: block;
order: -1;
}
}
}

View File

@ -1,9 +1,11 @@
import ChevronIcon from "@Assets/Icons/chevron.svg";
import PlusIcon from "@Assets/Icons/plus.svg";
import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import classNames from "classnames";
import Customer, { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import Image from "next/image";
import Link from "next/link";
import React from "react";
@ -14,8 +16,6 @@ import QuantityProgressBar from "../QuantityProgressBar";
import classes from "./classes.module.scss";
import DocumentList from "./DocumentList";
import UserFolderHeader from "./UserFolderHeader";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
type IProps = {
customer: Customer;
@ -53,7 +53,8 @@ export default class UserFolder extends React.Component<IProps, IState> {
const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
const redirectPath = Module.getInstance()
.get()
.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "").replace("[customerUid]", this.props.customer.uid ?? "");
.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "")
.replace("[customerUid]", this.props.customer.uid ?? "");
return (
<div className={classes["root"]} data-opened={this.props.isOpened.toString()}>
<Confirm
@ -68,11 +69,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
</Confirm>
<div className={classes["header"]} onClick={this.changeUserFolder}>
<UserFolderHeader
customer={this.props.customer}
folder={this.props.folder}
isArchived={this.props.isArchived}
/>
<UserFolderHeader customer={this.props.customer} folder={this.props.folder} isArchived={this.props.isArchived} />
<Image
src={ChevronIcon}
alt="chevron open close"
@ -94,6 +91,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
title="Documents demandés"
openDeletionModal={this.openDeletionModal}
folderUid={this.props.folder.uid!}
className={classes["documents-asked"]}
/>
<DocumentList
documents={otherDocuments}
@ -106,18 +104,19 @@ export default class UserFolder extends React.Component<IProps, IState> {
openDeletionModal={this.openDeletionModal}
folderUid={this.props.folder.uid!}
/>
</div>
{!this.props.isArchived && (
<div className={classes["button-container"]}>
<Link href={redirectPath}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
Demander un autre document{" "}
{!this.props.isArchived && (
<div className={classes["button-container"]}>
<Link href={redirectPath}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
Demander un autre document{" "}
</Button>
</Link>
<Button disabled={documentsAsked ? false : true}>
Envoyer un mail de demande
</Button>
</Link>
{<Button disabled={documentsAsked ? false : true} className={classes["button-desktop"]}>Envoyer un mail de demande de documents</Button>}
{<Button disabled={documentsAsked ? false : true} className={classes["button-mobile"]}>Envoyer un mail de demande</Button>}
</div>
)}
</div>
)}
</div>
</div>
)}
</div>
@ -128,11 +127,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
}
private async deleteAskedDocument(){
try{
private async deleteAskedDocument() {
try {
await Documents.getInstance().delete(this.state.selectedDocumentToDelete);
window.location.reload();
}catch(e){
} catch (e) {
console.error(e);
}
}
@ -172,13 +171,12 @@ export default class UserFolder extends React.Component<IProps, IState> {
// return this.props.customer.documents.filter((document) => !documentToExclude.includes(document));
// }
private changeUserFolder(){
private changeUserFolder() {
this.props.onChange(this.props.customer.uid!);
}
private openDeletionModal(uid?: string): void {
if(!uid) return;
if (!uid) return;
this.setState({
isOpenDeletionModal: true,

View File

@ -1,3 +1,4 @@
import "reflect-metadata";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
@ -112,6 +113,8 @@ export default class ClientDashboard extends Base<IProps, IState> {
where: { depositor: mockUsers?.uid },
include: {
files: true,
document_history: true,
document_type: true,
},
};
const documents: Document[] = await Documents.getInstance().get(query);

View File

@ -10,7 +10,7 @@ import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import { IOption } from "@Front/Components/DesignSystem/Select";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
import { Customer } from "le-coffre-resources/dist/Notary";
@ -20,17 +20,18 @@ import { NextRouter, useRouter } from "next/router";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
enum ESelectedOption {
EXISTING_CUSTOMER = "existing_customer",
NEW_CUSTOMER = "new_customer",
}
type IProps = {};
type IState = {
selectedFolder: IDashBoardFolder | null;
selectedOption: ESelectedOption;
availableCustomers: Customer[];
selectedCustomers: readonly IOption[];
existingCustomers: IOption[];
isLoaded: boolean;
};
type IPropsClass = IProps & {
@ -41,13 +42,12 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
constructor(props: IPropsClass) {
super(props);
this.state = {
selectedFolder: null,
selectedOption: ESelectedOption.EXISTING_CUSTOMER,
availableCustomers: [],
selectedCustomers: [],
existingCustomers: [],
isLoaded: false,
};
this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
this.onNewClientSelected = this.onNewClientSelected.bind(this);
this.onMutiSelectChange = this.onMutiSelectChange.bind(this);
@ -60,65 +60,74 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
.get()
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
return (
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
<DefaultNotaryDashboard title={"Ajouter client(s)"}>
<div className={classes["root"]}>
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
<div className={classes["radiobox-container"]}>
{this.state.availableCustomers.length !== 0 && (
<RadioBox
name="client"
onChange={this.onExistingClientSelected}
checked={this.state.selectedOption === "existing_customer"}
value={"existing client"}>
<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
</RadioBox>
)}
{this.state.isLoaded && (
<>
<div className={classes["radiobox-container"]}>
{this.state.availableCustomers.length !== 0 && (
<RadioBox
name="client"
onChange={this.onExistingClientSelected}
checked={this.state.selectedOption === "existing_customer"}
value={"existing client"}>
<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
</RadioBox>
)}
<RadioBox
name="client"
onChange={this.onNewClientSelected}
checked={this.state.selectedOption === "new_customer"}
value={"new client"}>
<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
</RadioBox>
</div>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
{this.state.selectedOption === "existing_customer" && (
<div className={classes["existing-client"]}>
<MultiSelect
options={selectOptions}
placeholder="Clients"
onChange={this.onMutiSelectChange}
defaultValue={this.state.selectedCustomers}
/>
<div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link>
<Button type="submit">Associer au dossier</Button>
</div>
<RadioBox
name="client"
onChange={this.onNewClientSelected}
checked={this.state.selectedOption === "new_customer"}
value={"new client"}>
<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
</RadioBox>
</div>
)}
{this.state.selectedOption === "new_customer" && (
<div className={classes["new-client"]}>
<InputField name="last_name" fakeplaceholder="Nom" />
<InputField name="first_name" fakeplaceholder="Prénom" />
<InputField name="email" fakeplaceholder="E-mail" isEmail />
<InputField name="cell_phone_number" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} />
<div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link>
<Button type="submit">Associer au dossier</Button>
</div>
</div>
)}
</Form>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
{this.state.selectedOption === "existing_customer" && (
<div className={classes["existing-client"]}>
<MultiSelect
options={selectOptions}
placeholder="Clients"
onChange={this.onMutiSelectChange}
defaultValue={this.state.selectedCustomers}
/>
<div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link>
<Button type="submit">Associer au dossier</Button>
</div>
</div>
)}
{this.state.selectedOption === "new_customer" && (
<div className={classes["new-client"]}>
<InputField name="last_name" fakeplaceholder="Nom" />
<InputField name="first_name" fakeplaceholder="Prénom" />
<InputField name="email" fakeplaceholder="E-mail" isEmail />
<InputField
name="cell_phone_number"
fakeplaceholder="Numéro de téléphone"
numbersOnly
maxLength={10}
/>
<div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link>
<Button type="submit">Associer au dossier</Button>
</div>
</div>
)}
</Form>
</>
)}
</div>
</DefaultNotaryDashboard>
);
@ -135,13 +144,12 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
if (index !== -1) availableCustomers.splice(index, 1);
});
let selectedOption = ESelectedOption.EXISTING_CUSTOMER;
if (availableCustomers.length === 0) {
this.setState({
selectedOption: ESelectedOption.NEW_CUSTOMER,
});
selectedOption = ESelectedOption.NEW_CUSTOMER;
}
this.setState({ availableCustomers, existingCustomers });
this.setState({ availableCustomers, existingCustomers, isLoaded: true, selectedOption });
}
private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOption[] | undefined> {
@ -189,10 +197,6 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
this.setState({ selectedCustomers });
}
private onSelectedFolder(folder: IDashBoardFolder): void {
this.setState({ selectedFolder: folder });
}
private onExistingClientSelected(): void {
this.setState({ selectedOption: ESelectedOption.EXISTING_CUSTOMER });
}