4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/smart-chain-fr/leCoffre-front into dev

Browse Source
This commit is contained in:
Hugo Lextrait 2023-04-18 12:02:29 +02:00
commit c1f7cc1a97
3 changed files with 133 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
View File

@ -28,6 +28,7 @@
background: var(--grey-soft);
.image {
width: 100%;
height: 100%;
object-fit: contain;
}
}

12
src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
View File

@ -3,10 +3,18 @@
.root {
margin: 64px;
width: 530px;
@media (max-width: $screen-m) {
@media (max-width: $screen-l) {
width: 100%;
margin: 64px 16px 0 16px;
margin: 0;
margin-top: 64px;
padding: 0 32px 0 32px;
}
@media (max-width: $screen-m) {
padding: 0 16px 0 16px;
}
.title {
margin-top: 24px;
}

138
src/front/Components/Layouts/Folder/CreateFolder/index.tsx
View File

@ -1,19 +1,31 @@
import BasePage from "../../Base";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import RightImage from "@Front/Assets/images/create-folder/right-image.png";
import BackArrow from "@Front/Components/Elements/BackArrow";
import Form from "@Front/Components/DesignSystem/Form";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Select, { IOption } from "@Front/Components/DesignSystem/Select";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Button from "@Front/Components/DesignSystem/Button";
import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Select, { IOption } from "@Front/Components/DesignSystem/Select";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import React from "react";
import { ActionMeta, MultiValue } from "react-select";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
type IFormValues = {
folder_number: number;
entitled: string;
act_type: IOption | null;
personal_note: string;
collaborators: MultiValue<IOption>;
};
type IProps = {};
type IState = {
folder_access: string;
formValues: IFormValues;
};
export default class CreateFolder extends BasePage<IProps, IState> {
private collaboratorsOptions: IOption[] = [
@ -30,17 +42,30 @@ export default class CreateFolder extends BasePage<IProps, IState> {
{ label: "Succession", value: "succession" },
{ label: "Vente immobilière", value: "vente_immobiliere" },
];
public constructor(props: IProps) {
super(props);
this.state = {
folder_access: "",
formValues: {
folder_number: NaN,
entitled: "",
act_type: null,
personal_note: "",
collaborators: [],
},
};
this.radioOnChange = this.radioOnChange.bind(this);
this.onFolderNumberChange = this.onFolderNumberChange.bind(this);
this.onEntitleChange = this.onEntitleChange.bind(this);
this.onActTypeChange = this.onActTypeChange.bind(this);
this.onPersonalNoteChange = this.onPersonalNoteChange.bind(this);
this.onCollaboratorsChange = this.onCollaboratorsChange.bind(this);
this.isFormSubmittable = this.isFormSubmittable.bind(this);
}
// TODO: Message if the user has not created any folder yet
public override render(): JSX.Element {
return (
<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
@ -52,12 +77,22 @@ export default class CreateFolder extends BasePage<IProps, IState> {
<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
Informations dossier
</Typography>
<Form>
<Form onSubmit={this.onFormSubmit}>
<div className={classes["form-container"]}>
<InputField name="folder_number" fakeplaceholder="Numéro de dossier" type="number" />
<InputField name="entitled" fakeplaceholder="Intitulé" />
<Select options={this.actsOptions} onChange={() => {}} placeholder={"Type d’acte"} />
<InputField name="personal_note" fakeplaceholder="Note personnelle" textarea />
<InputField
name="folder_number"
fakeplaceholder="Numéro de dossier"
type="number"
onChange={this.onFolderNumberChange}
/>
<InputField name="entitled" fakeplaceholder="Intitulé" onChange={this.onEntitleChange} />
<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
<InputField
name="personal_note"
fakeplaceholder="Note personnelle"
textarea
onChange={this.onPersonalNoteChange}
/>
</div>
<div className={classes["access-container"]}>
<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH}>
@ -76,11 +111,12 @@ export default class CreateFolder extends BasePage<IProps, IState> {
<MultiSelect
options={this.collaboratorsOptions}
placeholder="Sélectionner les collaborateurs pouvant accéder au dossier"
onChange={this.onCollaboratorsChange}
/>
</div>
)}
<div className={classes["buttons-container"]}>
<Button fullwidth disabled={true}>
<Button fullwidth disabled={!this.isFormSubmittable()} type="submit">
Créer un dossier
</Button>
</div>
@ -93,6 +129,76 @@ export default class CreateFolder extends BasePage<IProps, IState> {
public override async componentDidMount() {}
private onFolderNumberChange(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({
formValues: {
...this.state.formValues,
folder_number: parseInt(e.target.value),
},
});
}
private onEntitleChange(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({
formValues: {
...this.state.formValues,
entitled: e.target.value,
},
});
}
private onActTypeChange(selectedOption: IOption) {
this.setState({
formValues: {
...this.state.formValues,
act_type: selectedOption,
},
});
}
private onPersonalNoteChange(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({
formValues: {
...this.state.formValues,
personal_note: e.target.value,
},
});
}
private onCollaboratorsChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
this.setState({
formValues: {
...this.state.formValues,
collaborators: newValue,
},
});
}
private onFormSubmit(
e: React.FormEvent<HTMLFormElement> | null,
values: {
[key: string]: string;
},
onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
) {}
private isFormSubmittable(): boolean {
if (
this.state.formValues.entitled === "" ||
this.state.formValues.personal_note === "" ||
Number.isNaN(this.state.formValues.folder_number) ||
this.state.formValues.act_type === null
) {
return false;
}
if (this.state.folder_access === "select_collaborators" && this.state.formValues.collaborators.length === 0) {
return false;
}
return true;
}
private radioOnChange(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({
folder_access: e.target.value,