✨ Initializing page
This commit is contained in:
Maxime Lalo
parent
f8694d5569
commit
6fb40f9f01
@ -1,12 +1,12 @@
|
||||
import CrossIcon from "@Assets/Icons/cross.svg";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import Footer from "./Elements/Footer";
|
||||
import Header from "./Elements/Header";
|
||||
|
||||
import Loader from "./Elements/Loader";
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import CrossIcon from "@Assets/Icons/cross.svg";
|
||||
import Image from "next/image";
|
||||
|
||||
export type IProps = {
|
||||
closeBtn?: boolean;
|
||||
@ -82,7 +82,7 @@ export default class Modal extends React.Component<IProps, IState> {
|
||||
this.setState({
|
||||
willClose: false,
|
||||
});
|
||||
this.props.onClose();
|
||||
|
||||
}, this.props.animationDelay);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,6 +15,7 @@ type IProps = {
|
||||
scrollTop: number | null;
|
||||
image: StaticImageData;
|
||||
type: "background" | "image";
|
||||
showHeader: boolean;
|
||||
};
|
||||
|
||||
type IState = {};
|
||||
@ -23,12 +24,13 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
|
||||
public static defaultProps = {
|
||||
scrollTop: 0,
|
||||
type: "background",
|
||||
showHeader: false,
|
||||
};
|
||||
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<Header isUserConnected={false} />
|
||||
<Header isUserConnected={this.props.showHeader} />
|
||||
<div className={classes["content"]}>
|
||||
<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
|
||||
{this.props.type === "image" && (
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
margin: 64px;
|
||||
width: 530px;
|
||||
|
||||
@media (max-width: $screen-l) {
|
||||
width: 100%;
|
||||
margin: 64px 0;
|
||||
padding: 0 64px;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
padding: 0 16px 0 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.access-container {
|
||||
margin-top: 16px;
|
||||
|
||||
.radio-container {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.collaborators-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.buttons-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
215
src/front/Components/Layouts/Folder/AskDocuments/index.tsx
Normal file
215
src/front/Components/Layouts/Folder/AskDocuments/index.tsx
Normal file
@ -0,0 +1,215 @@
|
||||
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 Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||||
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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||
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;
|
||||
isCreateDocumentModalVisible: boolean;
|
||||
};
|
||||
export default class AskDocuments extends BasePage<IProps, IState> {
|
||||
private collaboratorsOptions: IOption[] = [
|
||||
{ label: "John Doe", value: "john_doe" },
|
||||
{ label: "Éric Dupont", value: "eric_dupont" },
|
||||
{ label: "Julien Doe", value: "julien_doe" },
|
||||
{ label: "Nathalie Costa", value: "nathalie_costa" },
|
||||
{ label: "Max Durant", value: "max_durant" },
|
||||
{ label: "Jane Doe", value: "jane_doe" },
|
||||
];
|
||||
|
||||
private actsOptions: IOption[] = [
|
||||
{ label: "Divorce", value: "divorce" },
|
||||
{ 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: [],
|
||||
},
|
||||
isCreateDocumentModalVisible: false,
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<DefaultTemplate title={"Dossier"}>
|
||||
<div className={classes["root"]}>
|
||||
<BackArrow />
|
||||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
|
||||
Demander des documents
|
||||
</Typography>
|
||||
<Form onSubmit={this.onFormSubmit}>
|
||||
<div className={classes["form-container"]}>
|
||||
<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}>
|
||||
Accès au dossier
|
||||
</Typography>
|
||||
<div className={classes["radio-container"]}>
|
||||
<RadioBox name="file_access" defaultChecked onChange={this.radioOnChange} value="whole_office">
|
||||
Sélectionner tout l'office
|
||||
</RadioBox>
|
||||
<RadioBox name="file_access" onChange={this.radioOnChange} value="select_collaborators">
|
||||
Sélectionner certains collaborateurs
|
||||
</RadioBox>
|
||||
</div>
|
||||
{this.state.folder_access === "select_collaborators" && (
|
||||
<div className={classes["collaborators-container"]}>
|
||||
<MultiSelect
|
||||
options={this.collaboratorsOptions}
|
||||
placeholder="Sélectionner les collaborateurs"
|
||||
onChange={this.onCollaboratorsChange}
|
||||
defaultValue={this.state.formValues.collaborators ?? []}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={classes["buttons-container"]}>
|
||||
<Button fullwidth disabled={!this.isFormSubmittable()} type="submit">
|
||||
Créer un dossier
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
<Confirm
|
||||
isOpen={this.state.isCreateDocumentModalVisible}
|
||||
onClose={() => {}}
|
||||
onAccept={() => {}}
|
||||
closeBtn
|
||||
header={"Créer un type de document"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={"Ajouter"}>
|
||||
Blabla
|
||||
</Confirm>
|
||||
</div>
|
||||
</DefaultTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -68,7 +68,7 @@ export default class CreateFolder extends BasePage<IProps, IState> {
|
||||
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
|
||||
<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image" showHeader={true}>
|
||||
<div className={classes["root"]}>
|
||||
<BackArrow />
|
||||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
|
||||
|
||||
5
src/pages/folder/[uid]/ask-documents/index.tsx
Normal file
5
src/pages/folder/[uid]/ask-documents/index.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import AskDocuments from "@Front/Components/Layouts/Folder/AskDocuments";
|
||||
|
||||
export default function Route() {
|
||||
return <AskDocuments />;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user