126 lines
4.7 KiB
TypeScript
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} />;
|
|
}
|