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

🐛 Validation error handling

Browse Source
This commit is contained in:
Maxime Lalo 2023-10-10 15:10:12 +02:00
parent 46d747d89f
commit 0c47a0d7a1
1 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/front/Components/Layouts/Folder/UpdateClient/index.tsx
View File

@ -14,6 +14,8 @@ import { ChangeEvent } from "react";
import BasePage from "../../Base"; import BasePage from "../../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { Address } from "le-coffre-resources/dist/Customer";
import { ValidationError } from "class-validator";
type IProps = {}; type IProps = {};
@ -34,6 +36,7 @@ type IState = {
inputAddress: string; inputAddress: string;
folder: OfficeFolder | null; folder: OfficeFolder | null;
customer: Customer | null; customer: Customer | null;
validationError: ValidationError[];
}; };
class UpdateClientClass extends BasePage<IPropsClass, IState> { class UpdateClientClass extends BasePage<IPropsClass, IState> {
constructor(props: IPropsClass) { constructor(props: IPropsClass) {
@ -50,6 +53,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
inputAddress: "", inputAddress: "",
folder: null, folder: null,
customer: null, customer: null,
validationError: [],
}; };
this.onSelectedFolder = this.onSelectedFolder.bind(this); this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.onChangeNameInput = this.onChangeNameInput.bind(this); this.onChangeNameInput = this.onChangeNameInput.bind(this);
@ -83,24 +87,28 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
placeholder="Nom" placeholder="Nom"
onChange={this.onChangeNameInput} onChange={this.onChangeNameInput}
defaultValue={this.state.customer?.contact?.first_name} defaultValue={this.state.customer?.contact?.first_name}
validationError={this.state.validationError.find((error) => error.property === "first_name")}
/> />
<TextField <TextField
name="last_name" name="last_name"
placeholder="Prénom" placeholder="Prénom"
onChange={this.onChangeFirstNameInput} onChange={this.onChangeFirstNameInput}
defaultValue={this.state.customer?.contact?.last_name} defaultValue={this.state.customer?.contact?.last_name}
validationError={this.state.validationError.find((error) => error.property === "last_name")}
/> />
<TextField <TextField
name="email" name="email"
placeholder="E-mail" placeholder="E-mail"
onChange={this.onChangeEmailInput} onChange={this.onChangeEmailInput}
defaultValue={this.state.customer?.contact?.email} defaultValue={this.state.customer?.contact?.email}
validationError={this.state.validationError.find((error) => error.property === "email")}
/> />
<TextField <TextField
name="cell_phone_number" name="cell_phone_number"
placeholder="Numéro de téléphone" placeholder="Numéro de téléphone"
onChange={this.onChangePhoneNumberInput} onChange={this.onChangePhoneNumberInput}
defaultValue={this.state.customer?.contact?.cell_phone_number ?? ""} defaultValue={this.state.customer?.contact?.cell_phone_number ?? ""}
validationError={this.state.validationError.find((error) => error.property === "cell_phone_number")}
/> />
<TextField <TextField
name="birthdate" name="birthdate"
@ -108,6 +116,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
required={false} required={false}
onChange={this.onChangeBirthDateInput} onChange={this.onChangeBirthDateInput}
defaultValue={this.state.customer?.contact?.birthdate?.toString() ?? ""} defaultValue={this.state.customer?.contact?.birthdate?.toString() ?? ""}
validationError={this.state.validationError.find((error) => error.property === "birthdate")}
/> />
<TextField <TextField
name="address" name="address"
@ -167,25 +176,33 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
[key: string]: string; [key: string]: string;
}, },
) { ) {
const contact = { const contact = Contact.hydrate<Contact>({
first_name: values["first_name"], first_name: values["first_name"],
last_name: values["last_name"], last_name: values["last_name"],
email: values["email"], email: values["email"],
cell_phone_number: values["cell_phone_number"], cell_phone_number: values["cell_phone_number"],
birthdate: values["birthdate"] === "" ? null : values["birthdate"], birthdate: values["birthdate"] === "" ? null : new Date(values["birthdate"]!),
address: address: values["address"] ? Address.hydrate<Address>({ address: values["address"] }) : undefined,
values["address"] === "" });
? null
: { try {
address: values["address"], await contact.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
}, } catch (validationErrors) {
} as Contact; console.log(validationErrors);
this.setState({
validationError: validationErrors as ValidationError[],
});
return;
}
try { try {
await Customers.getInstance().put(this.props.customerUid, { contact }); await Customers.getInstance().put(this.props.customerUid, { contact });
this.props.router.push(this.backwardPath); this.props.router.push(this.backwardPath);
} catch (e) { } catch (backError) {
console.error(e); if (!Array.isArray(backError)) return;
this.setState({
validationError: backError as ValidationError[],
});
} }
} }