Hugo Lextrait 067eabb9ac stg v0.4.7
2023-04-18 12:38:31 +02:00

126 lines
4.7 KiB
TypeScript

import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { ActionMeta, MultiValue } from "react-select";
import { IOption } from "@Front/Components/DesignSystem/Select";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Form from "@Front/Components/DesignSystem/Form";
import { useRouter } from "next/router";
import BackArrow from "@Front/Components/Elements/BackArrow";
type IProps = {
selectedFolderUid: string;
};
type IState = {
selectedFolder: IDashBoardFolder | null;
isExistingClientSelected: boolean;
isNewClientSelected: boolean;
hasNewClientSelected: boolean;
};
class AddClientToFolderClass extends BasePage<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
selectedFolder: null,
isExistingClientSelected: true,
isNewClientSelected: false,
hasNewClientSelected: 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);
}
public override render(): JSX.Element {
const selectOptions = [
{ value: "adazzdsqaad", label: "john Doe" },
{ value: "adazzqsdaad", label: "jane Doe" },
{ value: "adazzqsdaad", label: "Marcelino Doe" },
];
return (
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
<div className={classes["root"]}>
<div className={classes["back-arrow"]}>
<BackArrow url={"/dossier/".concat(this.props.selectedFolderUid)} />
</div>
<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
<Form>
<div className={classes["radiobox-container"]}>
<RadioBox
name="client"
onChange={this.onExistingClientSelected}
defaultChecked={this.state.isExistingClientSelected}
value={"existing client"}>
<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
</RadioBox>
<RadioBox
name="client"
onChange={this.onNewClientSelected}
defaultChecked={this.state.isNewClientSelected}
value={"new client"}>
<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
</RadioBox>
</div>
{this.state.isExistingClientSelected && (
<div className={classes["existing-client"]}>
<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
<div className={classes["button-container"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">
Associer au dossier
</Button>
</div>
</div>
)}
{this.state.isNewClientSelected && (
<div className={classes["new-client"]}>
<InputField name="input field" fakeplaceholder="Nom" />
<InputField name="input field" fakeplaceholder="Prénom" />
<InputField name="input field" fakeplaceholder="E-mail" isEmail />
<InputField name="input field" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} />
<div className={classes["button-container"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
<Button type="submit">Associer au dossier</Button>
</div>
</div>
)}
</Form>
</div>
</DefaultNotaryDashboard>
);
}
private onMutiSelectChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>): void {
if (newValue.length <= 0) {
this.setState({ hasNewClientSelected: false });
return;
}
this.setState({ hasNewClientSelected: true });
}
private onSelectedFolder(folder: IDashBoardFolder): void {
this.setState({ selectedFolder: folder });
}
private onExistingClientSelected(): void {
this.setState({ isExistingClientSelected: true, isNewClientSelected: false });
}
private onNewClientSelected(): void {
this.setState({ isExistingClientSelected: false, isNewClientSelected: true });
}
}
export default function AddClientToFolder() {
const router = useRouter();
let { uid } = router.query;
uid = uid as string;
return <AddClientToFolderClass selectedFolderUid={uid} />;
}