107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||
import Form from "@Front/Components/DesignSystem/Form";
|
||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||
import BackArrow from "@Front/Components/Elements/BackArrow";
|
||
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
||
|
||
import BasePage from "../../Base";
|
||
import classes from "./classes.module.scss";
|
||
import Link from "next/link";
|
||
import { useRouter } from "next/router";
|
||
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
||
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
|
||
import Module from "@Front/Config/Module";
|
||
|
||
type IPropsClass = {
|
||
selectedFolderUid: string;
|
||
};
|
||
type IState = {
|
||
selectedFolder: IDashBoardFolder | null;
|
||
selectedOption?: ERadioBoxValue;
|
||
};
|
||
|
||
enum ERadioBoxValue {
|
||
ALL = "all",
|
||
SELECTION = "selection",
|
||
}
|
||
|
||
class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
|
||
constructor(props: IPropsClass) {
|
||
super(props);
|
||
this.state = {
|
||
selectedFolder: null,
|
||
};
|
||
this.onSelectedFolder = this.onSelectedFolder.bind(this);
|
||
this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
|
||
this.onSelectedOptionSpecific = this.onSelectedOptionSpecific.bind(this);
|
||
}
|
||
public override render(): JSX.Element {
|
||
const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
|
||
const backwardPath = foldersInformationPath.replace("[folderUid]", this.props.selectedFolderUid);
|
||
const selectOptions = [
|
||
{ value: "adazzdsqaad", label: "John Doe" },
|
||
{ value: "azdzafzad", label: "Jahn Doe" },
|
||
{ value: "azdazkdazoaz", label: "Marcelino Doe" },
|
||
];
|
||
return (
|
||
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
|
||
<div className={classes["root"]}>
|
||
<div className={classes["back-arrow"]}>
|
||
<BackArrow url={backwardPath} />
|
||
</div>
|
||
<Typography typo={ITypo.H1Bis}>Modifier les collaborateurs</Typography>
|
||
|
||
<Form className={classes["form"]}>
|
||
<div className={classes["content"]}>
|
||
<RadioBox name="office" value={ERadioBoxValue.ALL} defaultChecked onChange={this.onSelectedOptionAllOffice}>
|
||
Tout l’office
|
||
</RadioBox>
|
||
<RadioBox name="office" value={ERadioBoxValue.SELECTION} onChange={this.onSelectedOptionSpecific}>
|
||
Sélectionner des collaborateurs
|
||
</RadioBox>
|
||
</div>
|
||
|
||
{this.state.selectedOption === ERadioBoxValue.SELECTION && (
|
||
<div className={classes["sub-content"]}>
|
||
<MultiSelect options={selectOptions} placeholder="Collaborateurs" />
|
||
</div>
|
||
)}
|
||
|
||
<div className={classes["button-container"]}>
|
||
<Link href={backwardPath} className={classes["cancel-button"]}>
|
||
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
|
||
</Link>
|
||
<Button type="submit">Enregistrer</Button>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</DefaultNotaryDashboard>
|
||
);
|
||
}
|
||
|
||
private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {
|
||
if (event.target.value !== ERadioBoxValue.ALL) return;
|
||
this.setState({
|
||
selectedOption: ERadioBoxValue.ALL,
|
||
});
|
||
}
|
||
|
||
private onSelectedOptionSpecific(event: React.ChangeEvent<HTMLInputElement>) {
|
||
if (event.target.value !== ERadioBoxValue.SELECTION) return;
|
||
this.setState({
|
||
selectedOption: ERadioBoxValue.SELECTION,
|
||
});
|
||
}
|
||
|
||
private onSelectedFolder(folder: IDashBoardFolder): void {
|
||
this.setState({ selectedFolder: folder });
|
||
}
|
||
}
|
||
|
||
export default function UpdateFolderCollaborators() {
|
||
const router = useRouter();
|
||
let { folderUid } = router.query;
|
||
folderUid = folderUid as string;
|
||
return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} />;
|
||
}
|