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

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