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

🐛 Fixing add client blinking

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-10 14:25:35 +02:00
parent b85a0b9b02
commit 2fb2019710
1 changed files with 68 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
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 });
}