Merge branch 'dev' into feature/ora-lecoffr-420-file-component
This commit is contained in:
commit
e3114f29c1
@ -73,7 +73,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
|
|||||||
{this.state.isOpen && (
|
{this.state.isOpen && (
|
||||||
<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
|
<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
|
||||||
<QuantityProgressBar
|
<QuantityProgressBar
|
||||||
title="Complétion du dossier"
|
title="Complétion du dossier client"
|
||||||
total={100}
|
total={100}
|
||||||
currentNumber={this.calculateDocumentsPercentageProgress()}
|
currentNumber={this.calculateDocumentsPercentageProgress()}
|
||||||
/>
|
/>
|
||||||
|
@ -13,19 +13,25 @@
|
|||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sides {
|
.sides {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
||||||
@media (max-width: $screen-m) {
|
@media (max-width: $screen-m) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.image-container {
|
&.image-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
@media (max-width: $screen-m) {
|
@media (max-width: $screen-m) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
background: var(--grey-soft);
|
background: var(--grey-soft);
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -38,6 +44,10 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
@media (max-width: $screen-m) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.background-image {
|
.background-image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -46,4 +56,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -89,7 +89,7 @@ export default class CreateFolder extends BasePage<IProps, IState> {
|
|||||||
<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
|
<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
|
||||||
<InputField
|
<InputField
|
||||||
name="personal_note"
|
name="personal_note"
|
||||||
fakeplaceholder="Note personnelle"
|
fakeplaceholder="Note du dossier"
|
||||||
textarea
|
textarea
|
||||||
onChange={this.onPersonalNoteChange}
|
onChange={this.onPersonalNoteChange}
|
||||||
/>
|
/>
|
||||||
|
@ -56,7 +56,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
|
|||||||
<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
|
<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
|
||||||
</div>
|
</div>
|
||||||
<div className={classes["progress-bar"]}>
|
<div className={classes["progress-bar"]}>
|
||||||
<QuantityProgressBar title="Complétion du dossier client" total={100} currentNumber={0} />
|
<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
|
||||||
</div>
|
</div>
|
||||||
{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
|
{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,7 +36,7 @@ class UpdateFolderDescriptionClass extends BasePage<IProps, IState> {
|
|||||||
|
|
||||||
<Form className={classes["form"]}>
|
<Form className={classes["form"]}>
|
||||||
<div className={classes["content"]}>
|
<div className={classes["content"]}>
|
||||||
<InputField name="input field" fakeplaceholder="Intitulé du dossier" textarea />
|
<InputField name="input field" fakeplaceholder="Note du dossier" textarea />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={classes["button-container"]}>
|
<div className={classes["button-container"]}>
|
||||||
|
27
src/front/Components/Layouts/MyAccount/classes.module.scss
Normal file
27
src/front/Components/Layouts/MyAccount/classes.module.scss
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
@import "@Themes/constants.scss";
|
||||||
|
|
||||||
|
.root {
|
||||||
|
.title {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parts-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 64px;
|
||||||
|
margin-top: 32px;
|
||||||
|
|
||||||
|
@media (max-width: $screen-m) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.part {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
61
src/front/Components/Layouts/MyAccount/index.tsx
Normal file
61
src/front/Components/Layouts/MyAccount/index.tsx
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form";
|
||||||
|
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
|
||||||
|
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||||
|
import Base from "@Front/Components/Layouts/Base";
|
||||||
|
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
|
||||||
|
type IProps = {};
|
||||||
|
type IState = {};
|
||||||
|
|
||||||
|
export default class MyAccount extends Base<IProps, IState> {
|
||||||
|
public override render(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<DefaultTemplate title={"Mon compte"}>
|
||||||
|
<div className={classes["root"]}>
|
||||||
|
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
|
||||||
|
Mon compte
|
||||||
|
</Typography>
|
||||||
|
<div className={classes["parts-container"]}>
|
||||||
|
<div className={classes["part"]}>
|
||||||
|
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
|
||||||
|
Mes informations
|
||||||
|
</Typography>
|
||||||
|
<Form onSubmit={this.onFormSubmit}>
|
||||||
|
<div className={classes["form-container"]}>
|
||||||
|
<InputField name="name" fakeplaceholder="Nom" type="text" />
|
||||||
|
<InputField name="surname" fakeplaceholder="Prénom" type="text" />
|
||||||
|
<InputField name="email" fakeplaceholder="E-mail" type="email" />
|
||||||
|
<InputField name="phone" fakeplaceholder="Numéro de téléphone" type="tel" />
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
<div className={classes["part"]}>
|
||||||
|
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
|
||||||
|
Mon office
|
||||||
|
</Typography>
|
||||||
|
<Form onSubmit={this.onFormSubmit}>
|
||||||
|
<div className={classes["form-container"]}>
|
||||||
|
<InputField name="office_denomination" fakeplaceholder="Dénomination de l'office" type="text" />
|
||||||
|
<InputField name="crpcen" fakeplaceholder="CRPCEN" type="number" />
|
||||||
|
<InputField name="cp_address" fakeplaceholder="Adresse CP" type="text" />
|
||||||
|
<InputField name="city" fakeplaceholder="Ville" type="text" />
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DefaultTemplate>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onFormSubmit(
|
||||||
|
e: React.FormEvent<HTMLFormElement> | null,
|
||||||
|
values: {
|
||||||
|
[key: string]: string;
|
||||||
|
},
|
||||||
|
onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
|
||||||
|
) {}
|
||||||
|
}
|
@ -18,6 +18,20 @@ body {
|
|||||||
|
|
||||||
input {
|
input {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
/* Firefox */
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
|
||||||
|
/* Chrome */
|
||||||
|
&::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Opéra*/
|
||||||
|
&::-o-inner-spin-button {
|
||||||
|
-o-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::placeholder {
|
::placeholder {
|
||||||
@ -49,4 +63,4 @@ a:hover {
|
|||||||
.react-select__menu-notice {
|
.react-select__menu-notice {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: Inter;
|
font-family: Inter;
|
||||||
}
|
}
|
5
src/pages/my-account/index.tsx
Normal file
5
src/pages/my-account/index.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import MyAccount from "@Front/Components/Layouts/MyAccount";
|
||||||
|
|
||||||
|
export default function Route() {
|
||||||
|
return <MyAccount />;
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user