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

32
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,12 +60,14 @@ 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>
{this.state.isLoaded && (
<>
<div className={classes["radiobox-container"]}> <div className={classes["radiobox-container"]}>
{this.state.availableCustomers.length !== 0 && ( {this.state.availableCustomers.length !== 0 && (
<RadioBox <RadioBox
@ -109,7 +111,12 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
<InputField name="last_name" fakeplaceholder="Nom" /> <InputField name="last_name" fakeplaceholder="Nom" />
<InputField name="first_name" fakeplaceholder="Prénom" /> <InputField name="first_name" fakeplaceholder="Prénom" />
<InputField name="email" fakeplaceholder="E-mail" isEmail /> <InputField name="email" fakeplaceholder="E-mail" isEmail />
<InputField name="cell_phone_number" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} /> <InputField
name="cell_phone_number"
fakeplaceholder="Numéro de téléphone"
numbersOnly
maxLength={10}
/>
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}> <Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.GHOST}>Annuler</Button>
@ -119,6 +126,8 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
</div> </div>
)} )}
</Form> </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 });
} }