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

Merge branch 'wip/form-rework' into dev

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-17 17:57:41 +02:00
commit abcd9c582d
10 changed files with 172 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/front/Api/BaseApiService.ts
View File

@ -119,17 +119,18 @@ export default abstract class BaseApiService {
responseJson = await response.json();
} catch (err: unknown) {
responseJson = null;
return Promise.reject(err);
}
if (!response.ok) {
return Promise.reject(response);
return Promise.reject(responseJson);
}
return responseJson as T;
}
protected onError(error: unknown) {
console.error(error);
//console.error(error);
}
}

35
src/front/Components/DesignSystem/Form/BaseField.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { FormContext, IFormContext } from ".";
import { ValidationError } from "class-validator";
import Typography, { ITypo, ITypoColor } from "../Typography";
export type IProps = {
value?: string;
@ -34,6 +35,10 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
constructor(props: P) {
super(props);
this.onChange = this.onChange.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onBlur = this.onBlur.bind(this);
this.hasError = this.hasError.bind(this);
this.renderErrors = this.renderErrors.bind(this);
}
public override componentDidMount() {
@ -68,11 +73,39 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
};
}
protected onFocus(event: React.FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
this.context?.onFieldFocusChange(this.props.name, this, true);
}
protected onBlur(event: React.FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
this.context?.onFieldFocusChange(this.props.name, this, false);
}
protected onChange(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
this.context?.onFieldChange(this.props.name, this);
this.setState({ value: event.currentTarget.value });
this.setState({ value: event.currentTarget.value, validationError: null });
if (this.props.onChange) {
this.props.onChange(event);
}
}
protected hasError(): boolean {
return this.state.validationError !== null;
// if(!this.context) return false;
// if(!this.context.hasOneFocusedInput() && this.state.validationError !== null) return true;
// return this.state.validationError !== null && this.context.isInputFocused(this.props.name);
}
protected renderErrors(): JSX.Element[] | null {
if (!this.state.validationError || !this.state.validationError.constraints) return null;
let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
{value}
</Typography>,
);
});
return errors;
}
}

115
src/front/Components/DesignSystem/Form/SelectField/index.tsx
View File

@ -15,7 +15,7 @@ type IProps = {
hasBorderRightCollapsed?: boolean;
placeholder?: string;
className?: string;
name?: string;
name: string;
disabled: boolean;
errors?: ValidationError;
};
@ -60,53 +60,58 @@ export default class SelectField extends React.Component<IProps, IState> {
public override render(): JSX.Element {
const selectedOption = this.state.selectedOption ?? this.props.selectedOption;
return (
<div
className={classNames(classes["root"], this.props.className)}
ref={this.rootRef}
data-disabled={this.props.disabled.toString()}
data-errored={(this.state.errors !== null).toString()}>
{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
<label
className={classNames(classes["container-label"])}
data-open={this.state.isOpen}
onClick={this.toggle}
data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
<div className={classNames(classes["container-input"])}>
{selectedOption && (
<>
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
<Typography typo={ITypo.P_18}>
<span className={classes["text"]}>{selectedOption?.label}</span>
</Typography>
</>
)}
{!selectedOption && (
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
<Typography typo={ITypo.NAV_INPUT_16}>
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
</Typography>
</div>
)}
</div>
<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
</label>
<div className={classes["container"]}>
<div
className={classNames(classes["root"], this.props.className)}
ref={this.rootRef}
data-disabled={this.props.disabled.toString()}
data-errored={(this.state.errors !== null).toString()}>
{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
<label
className={classNames(classes["container-label"])}
data-open={this.state.isOpen}
onClick={this.toggle}
data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
<div className={classNames(classes["container-input"])}>
{selectedOption && (
<>
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
<Typography typo={ITypo.P_18}>
<span className={classes["text"]}>{selectedOption?.label}</span>
</Typography>
</>
)}
{!selectedOption && (
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
<Typography typo={ITypo.NAV_INPUT_16}>
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
</Typography>
</div>
)}
</div>
<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
</label>
<ul
className={classes["container-ul"]}
data-open={this.state.isOpen}
ref={this.contentRef}
style={{
height: this.state.listHeight + "px",
}}>
{this.props.options.map((option, index) => (
<li key={`${index}-${option.value}`} className={classes["container-li"]} onClick={(e) => this.onSelect(option, e)}>
<div className={classes["token-icon"]}>{option.icon}</div>
<Typography typo={ITypo.P_18}>{option.label}</Typography>
</li>
))}
</ul>
<ul
className={classes["container-ul"]}
data-open={this.state.isOpen}
ref={this.contentRef}
style={{
height: this.state.listHeight + "px",
}}>
{this.props.options.map((option, index) => (
<li
key={`${index}-${option.value}`}
className={classes["container-li"]}
onClick={(e) => this.onSelect(option, e)}>
<div className={classes["token-icon"]}>{option.icon}</div>
<Typography typo={ITypo.P_18}>{option.label}</Typography>
</li>
))}
</ul>
{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
</div>
{this.state.errors !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
</div>
);
@ -172,16 +177,12 @@ export default class SelectField extends React.Component<IProps, IState> {
this.toggle(e);
}
private renderErrors(): JSX.Element[] | null {
if (!this.state.errors || !this.state.errors.constraints) return null;
let errors: JSX.Element[] = [];
Object.entries(this.state.errors.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
{value}
</Typography>,
);
});
return errors;
private renderErrors(): JSX.Element | null {
if (!this.state.errors) return null;
return (
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
{this.props.placeholder} est requis
</Typography>
);
}
}

19
src/front/Components/DesignSystem/Form/TextField/index.tsx
View File

@ -18,34 +18,23 @@ export default class TextField extends BaseField<IProps> {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<div className={classes["root"]} data-is-errored={(this.state.validationError !== null).toString()}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input
onChange={this.onChange}
data-value={value}
data-has-validation-errors={(this.state.validationError === null).toString()}
className={classnames(classes["input"], this.props.className)}
value={value}
onFocus={this.onFocus}
onBlur={this.onBlur}
name={this.props.name}
/>
<div className={classes["fake-placeholder"]}>
{this.props.placeholder} {!this.props.required && " (Facultatif)"}
</div>
</div>
{this.state.validationError !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
</Typography>
);
}
private renderErrors(): JSX.Element[] | null {
if (!this.state.validationError || !this.state.validationError.constraints) return null;
let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
{value}
</Typography>,
);
});
return errors;
}
}

19
src/front/Components/DesignSystem/Form/TextareaField/index.tsx
View File

@ -18,7 +18,7 @@ export default class TextAreaField extends BaseField<IProps> {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<div className={classes["root"]} data-is-errored={(this.state.validationError !== null).toString()}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<textarea
name={this.props.name}
rows={4}
@ -27,11 +27,13 @@ export default class TextAreaField extends BaseField<IProps> {
className={classnames(classes["textarea"], this.props.className)}
value={value}
readOnly={this.props.readonly}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
<div className={classes["fake-placeholder"]}>
{this.props.placeholder} {!this.props.required && " (Facultatif)"}
</div>
{this.state.validationError !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
</div>
</Typography>
);
@ -42,17 +44,4 @@ export default class TextAreaField extends BaseField<IProps> {
value: this.props.defaultValue ?? "",
});
}
private renderErrors(): JSX.Element[] | null {
if (!this.state.validationError || !this.state.validationError.constraints) return null;
let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
{value}
</Typography>,
);
});
return errors;
}
}

65
src/front/Components/DesignSystem/Form/index.tsx
View File

@ -8,25 +8,39 @@ export type IFormContext = {
setField: (name: string, field: IBaseField) => void;
unSetField: (name: string) => void;
onFieldChange: (name: string, field: IBaseField) => void;
onFieldFocusChange: (name: string, field: IBaseField, focused: boolean) => void;
isInputFocused: (name: string) => boolean;
hasOneFocusedInput: () => boolean;
};
type IFields = {
[key: string]: IBaseField;
};
type IState = {};
type IState = {
inputFocused: {
name: string;
field: IBaseField;
focused: boolean;
};
};
export type IProps = {
onFieldFocusChange?: (name: string, field: IBaseField, focused: boolean) => void;
onFieldChange?: (name: string, field: IBaseField) => void;
onSubmit?: (
e: React.FormEvent<HTMLFormElement> | null,
values: { [key: string]: string },
) => void;
onSubmit?: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
className?: string;
children?: ReactNode;
};
export const FormContext = React.createContext<IFormContext>({ setField: () => {}, unSetField: () => {}, onFieldChange: () => {} });
export const FormContext = React.createContext<IFormContext>({
setField: () => {},
unSetField: () => {},
onFieldChange: () => {},
onFieldFocusChange: () => {},
isInputFocused: () => false,
hasOneFocusedInput: () => false,
});
export default class Form extends React.Component<IProps, IState> {
protected fields: IFields = {};
@ -35,12 +49,22 @@ export default class Form extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {};
this.state = {
inputFocused: {
name: "",
field: {} as IBaseField,
focused: false,
},
};
this.setField = this.setField.bind(this);
this.unSetField = this.unSetField.bind(this);
this.onFieldChange = this.onFieldChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.formRef = React.createRef();
this.onFieldFocusChange = this.onFieldFocusChange.bind(this);
this.isInputFocused = this.isInputFocused.bind(this);
this.hasOneFocusedInput = this.hasOneFocusedInput.bind(this);
}
public override render() {
@ -50,6 +74,9 @@ export default class Form extends React.Component<IProps, IState> {
setField: this.setField,
unSetField: this.unSetField,
onFieldChange: this.onFieldChange,
onFieldFocusChange: this.onFieldFocusChange,
isInputFocused: this.isInputFocused,
hasOneFocusedInput: this.hasOneFocusedInput,
}}>
<form className={this.props.className} ref={this.formRef} onSubmit={this.onSubmit}>
{this.props.children}
@ -108,7 +135,29 @@ export default class Form extends React.Component<IProps, IState> {
delete this.fields[name];
}
protected async onFieldChange(name: string, field: IBaseField) {
protected hasOneFocusedInput() {
return this.state.inputFocused.focused;
}
protected isInputFocused(name: string) {
return this.state.inputFocused.name === name && this.state.inputFocused.focused;
}
protected onFieldFocusChange(name: string, field: IBaseField, focused: boolean) {
this.setState({
inputFocused: {
name,
field,
focused,
},
});
if (this.props.onFieldFocusChange) {
this.props.onFieldFocusChange(name, field, focused);
}
}
protected onFieldChange(name: string, field: IBaseField) {
if (this.props.onFieldChange) {
this.props.onFieldChange(name, field);
}

1
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -200,6 +200,7 @@ export default class DesignSystem extends BasePage<IProps, IState> {
<div className={classes["sub-section"]}>
<div className={classes["folder-conatainer"]}>
<SelectField
name="select"
options={selectOptions}
onChange={this.onSelectedOption}
placeholder={"Type d'acte"}

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

@ -4,13 +4,16 @@ import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
import Button from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import { ValidationError } from "class-validator";
import { Deed, DeedType, Office, OfficeFolder, OfficeFolderHasStakeholder } from "le-coffre-resources/dist/Notary";
import User from "le-coffre-resources/dist/Notary";
import { NextRouter, useRouter } from "next/router";
import React from "react";
@ -18,10 +21,6 @@ import { ActionMeta, MultiValue } from "react-select";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import { ValidationError } from "class-validator";
import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
type IFormValues = {
folder_number: string;
@ -103,6 +102,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
/>
<SelectField
options={this.state.deedTypesOptions}
name="deed"
placeholder={"Type d'acte"}
onChange={this.onActTypeChange}
errors={this.state.validationError.find((error) => error.property === "deed")}
@ -112,6 +112,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
placeholder="Note du dossier"
onChange={this.onPersonalNoteChange}
validationError={this.state.validationError.find((error) => error.property === "description")}
required={false}
/>
</div>
<div className={classes["access-container"]}>
@ -273,7 +274,6 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
try {
await officeFolderForm.validateOrReject?.({ groups: ["createFolder"], forbidUnknownValues: false });
} catch (validationErrors) {
console.log(validationErrors);
this.setState({
validationError: validationErrors as ValidationError[],
});
@ -285,22 +285,9 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
if (!newOfficeFolder) return;
this.props.router.push(`/folders/${newOfficeFolder.uid}`);
} catch (backError: any) {
if(backError.target && backError.property){
this.setState({
validationError: backError as ValidationError[],
});
}else{
console.error(backError);
this.setState({
validationError: [{
constraints: {
unique: "Le numéro de dossier est déjà utilisé"
},
property: "folder_number",
} as ValidationError],
});
}
this.setState({
validationError: backError as ValidationError[],
});
}
}

2
src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
View File

@ -58,7 +58,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
placeholder="Numéro de dossier"
defaultValue={this.state.selectedFolder?.folder_number}
/>
<Select options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
<Select name="deed" options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
<TextField placeholder="Ouverture du dossier" defaultValue={openingDate.toLocaleDateString("fr-FR")} disabled />
</div>

1
src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
View File

@ -50,6 +50,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
<TextField name="input field" placeholder="Intitulé du dossier" />
<TextField name="input field" placeholder="Numéro de dossier" />
<Select
name="deed"
options={selectOptions}
onChange={this.onSelectedOption}
placeholder={"Type d'acte"}