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

fix magin btw radioboxes and button on add/client

Browse Source
This commit is contained in:
Hugo Lextrait 2023-04-19 12:48:33 +02:00
parent ca3bfafbad
commit f8694d5569
7 changed files with 180 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss
View File

@ -5,21 +5,51 @@
flex-direction: column;
min-height: 100%;
align-items: flex-start;
width: fit-content;
.back-arrow {
margin-bottom: 24px;
}
.form {
width: 100%;
.radiobox-container {
margin: 32px 0;
> :not(:last-child) {
margin-bottom: 16px;
}
}
.button-container {
width: 100%;
display: flex;
text-align: center;
margin-top: 24px;
:first-child {
.cancel-button {
display: flex;
margin-right: 32px;
}
@media (max-width: $screen-m) {
display: flex;
flex-direction: column-reverse;
.cancel-button {
margin-left: 0;
margin-top: 12px;
>* {
flex: 1;
}
}
>* {
width: 100%;
}
}
}
.new-client {
@ -28,3 +58,4 @@
}
}
}
}

7
src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
View File

@ -12,6 +12,7 @@ import { ActionMeta, MultiValue } from "react-select";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import Link from "next/link";
type IProps = {
selectedFolderUid: string;
@ -50,7 +51,7 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
<BackArrow url={backwardPath} />
</div>
<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
<Form>
<Form className={classes["form"]}>
<div className={classes["radiobox-container"]}>
<RadioBox
name="client"
@ -72,7 +73,9 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
<div className={classes["existing-client"]}>
<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
<div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link>
<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">
Associer au dossier
</Button>
@ -87,7 +90,9 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
<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"]}>
<Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link>
<Button type="submit">Associer au dossier</Button>
</div>
</div>

56
src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss Normal file
View File

@ -0,0 +1,56 @@
@import "@Themes/constants.scss";
.root {
display: flex;
flex-direction: column;
min-height: 100%;
align-items: flex-start;
width: fit-content;
.back-arrow {
margin-bottom: 24px;
}
.form {
width: 100%;
.content {
margin-top: 32px;
>:not(:last-child) {
margin-bottom: 24px;
}
}
.button-container {
width: 100%;
display: flex;
text-align: center;
margin-top: 24px;
.cancel-button {
display: flex;
margin-right: 32px;
}
@media (max-width: $screen-m) {
display: flex;
flex-direction: column-reverse;
.cancel-button {
margin-left: 0;
margin-top: 12px;
>* {
flex: 1;
}
}
>* {
width: 100%;
}
}
}
}
}

68
src/front/Components/Layouts/Folder/UpdateClient/index.tsx Normal file
View File

@ -0,0 +1,68 @@
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
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 Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { useRouter } from "next/router";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import Link from "next/link";
type IProps = {
selectedFolderUid: string;
};
type IState = {
selectedFolder: IDashBoardFolder | null;
};
class UpdateClientClass extends BasePage<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
selectedFolder: null,
};
this.onSelectedFolder = this.onSelectedFolder.bind(this);
}
public override render(): JSX.Element {
const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
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 informations du client</Typography>
<Form className={classes["form"]}>
<div className={classes["content"]}>
<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" isPositiveNumber />
</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 onSelectedFolder(folder: IDashBoardFolder): void {
this.setState({ selectedFolder: folder });
}
}
export default function UpdateClient() {
const router = useRouter();
let { uid } = router.query;
uid = uid as string;
return <UpdateClientClass selectedFolderUid={uid} />;
}

2
src/front/Components/Layouts/Folder/UpdateFolderDescription/classes.module.scss
View File

@ -31,7 +31,7 @@
.cancel-button {
display: flex;
margin-right: 12px;
margin-right: 32px;
}
@media (max-width: $screen-m) {

4
src/pages/folder/[uid]/update/client.tsx
View File

@ -1,5 +1,5 @@
import UpdateFolderMetadata from "@Front/Components/Layouts/Folder/UpdateFolderMetadata";
import UpdateClient from "@Front/Components/Layouts/Folder/UpdateClient";
export default function Route() {
return <UpdateFolderMetadata />;
return <UpdateClient />;
}