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

🐛 Fixing design system

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-19 15:36:30 +02:00
parent 6fb40f9f01
commit 62ee625f25
8 changed files with 84 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/front/Assets/Icons/check.svg
View File

@ -1,3 +1,3 @@
<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.81353 0.144344C10.0429 0.354011 10.0635 0.715195 9.85967 0.95107L3.93375 7.80821C3.82832 7.9302 3.67721 8 3.51852 8C3.35983 8 3.20872 7.9302 3.10329 7.80821L0.140334 4.37964C-0.0635092 4.14376 -0.0428533 3.78258 0.18647 3.57291C0.415794 3.36324 0.766945 3.38449 0.970788 3.62037L3.51852 6.56846L9.02921 0.191798C9.23306 -0.0440776 9.58421 -0.0653237 9.81353 0.144344Z" fill="white"/>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2251 3.36088C13.4893 3.59571 13.5131 4.00024 13.2783 4.26442L6.4516 11.9444C6.33015 12.0811 6.15607 12.1592 5.97326 12.1592C5.79045 12.1592 5.61637 12.0811 5.49492 11.9444L2.08159 8.10442C1.84676 7.84024 1.87055 7.43571 2.13474 7.20088C2.39892 6.96606 2.80344 6.98985 3.03827 7.25403L5.97326 10.5559L12.3216 3.41403C12.5564 3.14985 12.9609 3.12606 13.2251 3.36088Z" fill="white"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 497 B

After

Width:  |  Height:  |  Size: 497 B

6
src/front/Components/DesignSystem/CheckBox/classes.module.scss
View File

@ -10,7 +10,7 @@
background-color: transparent;
width: 16px;
height: 16px;
border: 1px solid $green-flash;
border: 1px solid $turquoise-flash;
border-radius: 2px;
margin-right: 16px;
display: grid;
@ -19,11 +19,11 @@
input[type="checkbox"]::before {
content: url("../../../Assets/Icons/check.svg");
place-content: center;
place-content: flex-start;
display: grid;
width: 16px;
height: 16px;
background-color: $green-flash;
background-color: $turquoise-flash;
border-radius: 2px;
transform: scale(0);
}

7
src/front/Components/DesignSystem/CheckBox/index.tsx
View File

@ -1,9 +1,12 @@
import React from "react";
import { IOption } from "../Select";
import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
type IProps = {
option: IOption;
name: string;
toolTip?: string;
};
@ -17,8 +20,8 @@ export default class CheckBox extends React.Component<IProps> {
return (
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
<label className={classes["root"]}>
<input type="checkbox" name={this.props.name} />
{this.props.name}
<input type="checkbox" name={this.props.name} value={this.props.option.value as string} />
{this.props.option.label}
{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
</label>
</Typography>

7
src/front/Components/DesignSystem/Modal/Confirm/index.tsx
View File

@ -1,8 +1,9 @@
import Button, { EButtonVariant } from "../../Button";
import Modal, { IProps as IPropsModal } from "..";
import classes from "./classes.module.scss";
import React from "react";
import Modal, { IProps as IPropsModal } from "..";
import Button, { EButtonVariant } from "../../Button";
import classes from "./classes.module.scss";
type IProps = IPropsModal & {
onAccept?: () => void;
cancelText: string | JSX.Element;

1
src/front/Components/DesignSystem/Modal/classes.module.scss
View File

@ -35,6 +35,7 @@
&[data-will-close="true"] {
animation: smooth-disappear var(--animation-delay) $custom-easing;
opacity: 0;
}
.background {

29
src/front/Components/DesignSystem/Modal/index.tsx
View File

@ -24,6 +24,7 @@ export type IProps = {
type IState = {
willClose: boolean;
isOpen: boolean;
};
export default class Modal extends React.Component<IProps, IState> {
@ -37,12 +38,12 @@ export default class Modal extends React.Component<IProps, IState> {
this.state = {
willClose: false,
isOpen: this.props.isOpen,
};
}
public override render(): JSX.Element | null {
if (!this.props.isOpen) return null;
const onClick = (this.props.hasContainerClosable && this.close) || (() => {});
if (!this.state.isOpen) return null;
return (
<div
ref={this.rootRefElement}
@ -52,7 +53,7 @@ export default class Modal extends React.Component<IProps, IState> {
<div className={classes["background"]} onClick={this.close} />
<div
className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
onClick={onClick}>
onClick={this.close}>
{this.props.closeBtn && (
<div className={classes["cross"]}>
<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
@ -71,18 +72,24 @@ export default class Modal extends React.Component<IProps, IState> {
);
}
public override componentDidUpdate(): void {
public override componentDidUpdate(prevProps: IProps): void {
if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) {
this.setState({ willClose: true });
window.setTimeout(() => {
this.setState({
isOpen: false,
willClose: false,
});
}, this.props.animationDelay);
}
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
this.setState({ isOpen: true });
}
this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
}
protected close() {
if (this.state.willClose) return;
this.setState({ willClose: true });
window.setTimeout(() => {
this.setState({
willClose: false,
});
}, this.props.animationDelay);
this.props.onClose();
}
}

34
src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss
View File

@ -1,48 +1,24 @@
@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;
.checkbox-container {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
.collaborators-container {
margin-top: 32px;
}
.buttons-container {
margin-top: 32px;
}

179
src/front/Components/Layouts/Folder/AskDocuments/index.tsx
View File

@ -1,71 +1,58 @@
import Button from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
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;
actType: IOption | null;
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" },
];
export default class AskDocuments extends BasePage<IProps, IState> {
private actsOptions: IOption[] = [
{ label: "Divorce", value: "divorce" },
{ label: "Succession", value: "succession" },
{ label: "Vente immobilière", value: "vente_immobiliere" },
];
private documentsType: IOption[] = [
{ label: "Carte d'identité", value: "carte_identite" },
{ label: "Diagnostic État Risques et Pollution", value: "diagnostic_erep" },
{ label: "Justificatif de domicile", value: "justificatif_domicile" },
{ label: "Diagnostic gaz", value: "diagnostic_gaz" },
{ label: "Compromis de vente", value: "compromis_de_vente" },
{ label: "Diagnostic DPE", value: "diagnostic_dpe" },
{ label: "Diagnostic électrique", value: "diagnostic_electrique" },
{ label: "Diagnostic plombs", value: "diagnostic_plombs" },
{ label: "Diagnostic amiante", value: "diagnostic_amiante" },
{ label: "Diagnostic termites", value: "diagnostic_termites" },
{ label: "Diagnostic État des nuisances sonores aériennes", value: "diagnostic_ednsa" },
];
public constructor(props: IProps) {
super(props);
this.state = {
folder_access: "",
formValues: {
folder_number: NaN,
entitled: "",
act_type: null,
personal_note: "",
collaborators: [],
actType: {
label: "Divorce",
value: "divorce",
},
isCreateDocumentModalVisible: false,
isCreateDocumentModalVisible: true,
};
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);
this.onFormSubmit = this.onFormSubmit.bind(this);
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
}
public override render(): JSX.Element {
@ -78,53 +65,29 @@ export default class AskDocuments extends BasePage<IProps, IState> {
</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 ?? []}
/>
{!this.state.actType && (
<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
)}
{this.state.actType && (
<div className={classes["checkbox-container"]}>
{this.documentsType.map((documentType) => (
<CheckBox
name="document_type"
toolTip="Checkbox with tooltip"
option={documentType}
key={documentType.value as string}
/>
))}
</div>
)}
<div className={classes["buttons-container"]}>
<Button fullwidth disabled={!this.isFormSubmittable()} type="submit">
Créer un dossier
</Button>
</div>
</div>
</Form>
<Button type="submit" onClick={this.openModal}>
Open modal
</Button>
<Confirm
isOpen={this.state.isCreateDocumentModalVisible}
onClose={() => {}}
onClose={this.closeModal}
onAccept={() => {}}
closeBtn
header={"Créer un type de document"}
@ -137,48 +100,21 @@ export default class AskDocuments extends BasePage<IProps, IState> {
);
}
private onFolderNumberChange(e: React.ChangeEvent<HTMLInputElement>) {
private openModal() {
this.setState({
formValues: {
...this.state.formValues,
folder_number: parseInt(e.target.value),
},
isCreateDocumentModalVisible: true,
});
}
private onEntitleChange(e: React.ChangeEvent<HTMLInputElement>) {
private closeModal() {
this.setState({
formValues: {
...this.state.formValues,
entitled: e.target.value,
},
isCreateDocumentModalVisible: false,
});
}
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,
},
actType: selectedOption,
});
}
@ -189,27 +125,4 @@ export default class AskDocuments extends BasePage<IProps, IState> {
},
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,
});
}
}