✨ UpdateClient refacto
This commit is contained in:
Max S
parent
e9b67d48c1
commit
3f3d681543
@ -1,57 +1,37 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
margin: 24px auto;
|
||||
width: 566px;
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
width: 474px;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-s) {
|
||||
width: 100%;
|
||||
padding: var(--spacing-md, 16px);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
align-items: flex-start;
|
||||
width: fit-content;
|
||||
|
||||
.back-arrow {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
gap: var(--spacing-xl, 32px);
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
margin-top: 32px;
|
||||
|
||||
|
||||
>:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md, 16px);
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
gap: var(--spacing-md, 16px);
|
||||
|
||||
@media (max-width: $screen-xs) {
|
||||
button {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,135 +1,154 @@
|
||||
import backgroundImage from "@Assets/images/background_refonte.svg";
|
||||
import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
|
||||
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import Form from "@Front/Components/DesignSystem/Form";
|
||||
import Form, { IBaseField } from "@Front/Components/DesignSystem/Form";
|
||||
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
||||
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
|
||||
import Modal from "@Front/Components/DesignSystem/Modal";
|
||||
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import BackArrow from "@Front/Components/Elements/BackArrow";
|
||||
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
||||
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
|
||||
import Module from "@Front/Config/Module";
|
||||
import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
|
||||
import Link from "next/link";
|
||||
import { NextRouter, useRouter } from "next/router";
|
||||
import { ChangeEvent } from "react";
|
||||
|
||||
import BasePage from "../../Base";
|
||||
import classes from "./classes.module.scss";
|
||||
import { Address } from "le-coffre-resources/dist/Customer";
|
||||
import useOpenable from "@Front/Hooks/useOpenable";
|
||||
import { ValidationError } from "class-validator";
|
||||
import { Address } from "le-coffre-resources/dist/Customer";
|
||||
import { Contact, Customer } from "le-coffre-resources/dist/Notary";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
type IProps = {};
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IPropsClass = IProps & {
|
||||
selectedFolderUid: string;
|
||||
router: NextRouter;
|
||||
customerUid: string;
|
||||
};
|
||||
type IState = {
|
||||
selectedFolder: OfficeFolder | null;
|
||||
inputNameValue: string;
|
||||
inputFirstNameValue: string;
|
||||
inputEmailValue: string;
|
||||
inputPhoneNumberValue: string;
|
||||
isOpenLeavingModal: boolean;
|
||||
doesInputHaveValues: boolean;
|
||||
inputBirthdate: Date | null;
|
||||
inputAddress: string;
|
||||
folder: OfficeFolder | null;
|
||||
customer: Customer | null;
|
||||
validationError: ValidationError[];
|
||||
};
|
||||
class UpdateClientClass extends BasePage<IPropsClass, IState> {
|
||||
constructor(props: IPropsClass) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedFolder: null,
|
||||
inputNameValue: "",
|
||||
inputFirstNameValue: "",
|
||||
inputEmailValue: "",
|
||||
inputPhoneNumberValue: "",
|
||||
isOpenLeavingModal: false,
|
||||
doesInputHaveValues: false,
|
||||
inputBirthdate: null,
|
||||
inputAddress: "",
|
||||
folder: null,
|
||||
customer: null,
|
||||
validationError: [],
|
||||
};
|
||||
this.onSelectedFolder = this.onSelectedFolder.bind(this);
|
||||
this.onChangeNameInput = this.onChangeNameInput.bind(this);
|
||||
this.onChangeFirstNameInput = this.onChangeFirstNameInput.bind(this);
|
||||
this.onChangeEmailInput = this.onChangeEmailInput.bind(this);
|
||||
this.onChangePhoneNumberInput = this.onChangePhoneNumberInput.bind(this);
|
||||
this.openLeavingModal = this.openLeavingModal.bind(this);
|
||||
this.closeLeavingModal = this.closeLeavingModal.bind(this);
|
||||
this.leavePage = this.leavePage.bind(this);
|
||||
this.onChangeBirthDateInput = this.onChangeBirthDateInput.bind(this);
|
||||
this.onChangeAddressInput = this.onChangeAddressInput.bind(this);
|
||||
this.onFormSubmit = this.onFormSubmit.bind(this);
|
||||
}
|
||||
export default function UpdateClient() {
|
||||
const router = useRouter();
|
||||
const { folderUid, customerUid } = router.query;
|
||||
|
||||
private backwardPath = Module.getInstance()
|
||||
const [doesInputHasChanged, setDoesInputHasChanged] = useState<boolean>(false);
|
||||
const [customer, setCustomer] = useState<Customer | null>(null);
|
||||
const [validationError, setValidationError] = useState<ValidationError[]>([]);
|
||||
|
||||
const { isOpen, open, close } = useOpenable();
|
||||
|
||||
const backwardPath = Module.getInstance()
|
||||
.get()
|
||||
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
|
||||
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCustomer = async () => {
|
||||
try {
|
||||
const customerData = await Customers.getInstance().getByUid(customerUid as string, {
|
||||
contact: {
|
||||
include: {
|
||||
address: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
if (customerData) {
|
||||
setCustomer(customerData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch customer", error);
|
||||
}
|
||||
};
|
||||
fetchCustomer();
|
||||
}, [customerUid]);
|
||||
|
||||
const onFormSubmit = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
|
||||
if (!values["cell_phone_number"]) return;
|
||||
|
||||
let phoneNumber = values["cell_phone_number"].replace(/\s/g, "").replace(/\./g, "");
|
||||
if (phoneNumber.length === 10 && phoneNumber.startsWith("0")) {
|
||||
phoneNumber = "+33" + phoneNumber.substring(1);
|
||||
}
|
||||
const contact = Contact.hydrate<Contact>({
|
||||
first_name: values["first_name"],
|
||||
last_name: values["last_name"],
|
||||
email: values["email"],
|
||||
cell_phone_number: phoneNumber,
|
||||
birthdate: values["birthdate"] === "" ? null : new Date(values["birthdate"]!),
|
||||
civility: "-",
|
||||
address: values["address"] ? Address.hydrate<Address>({ address: values["address"], city: "-", zip_code: 0 }) : undefined,
|
||||
});
|
||||
|
||||
try {
|
||||
await contact.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
|
||||
await Customers.getInstance().put(customerUid as string, { contact });
|
||||
router.push(backwardPath);
|
||||
} catch (validationErrors) {
|
||||
if (Array.isArray(validationErrors)) {
|
||||
setValidationError(validationErrors as ValidationError[]);
|
||||
}
|
||||
}
|
||||
},
|
||||
[backwardPath, customerUid, router],
|
||||
);
|
||||
|
||||
const leavePage = useCallback(() => {
|
||||
router.push(backwardPath);
|
||||
}, [backwardPath, router]);
|
||||
|
||||
const onFieldChange = useCallback((name: string, field: IBaseField) => {
|
||||
if (field.props.value !== field.props.defaultValue) {
|
||||
setDoesInputHasChanged(true);
|
||||
} else {
|
||||
setDoesInputHasChanged(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<DefaultNotaryDashboard title={"Ajouter client(s)"}>
|
||||
<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage}>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["back-arrow"]}>
|
||||
<BackArrow url={this.backwardPath} />
|
||||
<BackArrow url={backwardPath} />
|
||||
</div>
|
||||
<Typography typo={ETypo.TITLE_H1}>Modifier les informations du client</Typography>
|
||||
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
|
||||
<div className={classes["content"]}>
|
||||
<Form className={classes["form"]} onSubmit={onFormSubmit} onFieldChange={onFieldChange}>
|
||||
<TextField
|
||||
name="first_name"
|
||||
placeholder="Prénom"
|
||||
onChange={this.onChangeNameInput}
|
||||
defaultValue={this.state.customer?.contact?.first_name}
|
||||
validationError={this.state.validationError.find((error) => error.property === "first_name")}
|
||||
label="Prénom"
|
||||
defaultValue={customer?.contact?.first_name}
|
||||
validationError={validationError.find((error) => error.property === "first_name")}
|
||||
/>
|
||||
<TextField
|
||||
name="last_name"
|
||||
placeholder="Nom"
|
||||
onChange={this.onChangeFirstNameInput}
|
||||
defaultValue={this.state.customer?.contact?.last_name}
|
||||
validationError={this.state.validationError.find((error) => error.property === "last_name")}
|
||||
label="Nom"
|
||||
defaultValue={customer?.contact?.last_name}
|
||||
validationError={validationError.find((error) => error.property === "last_name")}
|
||||
/>
|
||||
<TextField
|
||||
name="email"
|
||||
placeholder="E-mail"
|
||||
onChange={this.onChangeEmailInput}
|
||||
defaultValue={this.state.customer?.contact?.email}
|
||||
validationError={this.state.validationError.find((error) => error.property === "email")}
|
||||
label="E-mail"
|
||||
defaultValue={customer?.contact?.email}
|
||||
validationError={validationError.find((error) => error.property === "email")}
|
||||
/>
|
||||
<TextField
|
||||
name="cell_phone_number"
|
||||
placeholder="Numéro de téléphone"
|
||||
onChange={this.onChangePhoneNumberInput}
|
||||
defaultValue={this.state.customer?.contact?.cell_phone_number ?? ""}
|
||||
validationError={this.state.validationError.find((error) => error.property === "cell_phone_number")}
|
||||
label="Numéro de téléphone"
|
||||
defaultValue={customer?.contact?.cell_phone_number ?? ""}
|
||||
validationError={validationError.find((error) => error.property === "cell_phone_number")}
|
||||
/>
|
||||
<TextField
|
||||
name="birthdate"
|
||||
placeholder="Date de naissance"
|
||||
label="Date de naissance (facultatif)"
|
||||
required={false}
|
||||
onChange={this.onChangeBirthDateInput}
|
||||
defaultValue={this.state.customer?.contact?.birthdate?.toString() ?? ""}
|
||||
validationError={this.state.validationError.find((error) => error.property === "birthdate")}
|
||||
defaultValue={customer?.contact?.birthdate?.toString() ?? ""}
|
||||
validationError={validationError.find((error) => error.property === "birthdate")}
|
||||
/>
|
||||
<TextField
|
||||
name="address"
|
||||
placeholder="Adresse"
|
||||
label="Adresse (facultatif)"
|
||||
required={false}
|
||||
onChange={this.onChangeAddressInput}
|
||||
defaultValue={this.state.customer?.contact?.address?.address ?? ""}
|
||||
defaultValue={customer?.contact?.address?.address ?? ""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={classes["button-container"]}>
|
||||
{!this.doesInputsHaveValues() ? (
|
||||
<Link href={this.backwardPath} className={classes["cancel-button"]}>
|
||||
{!doesInputHasChanged ? (
|
||||
<Link href={backwardPath} className={classes["cancel-button"]}>
|
||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
||||
Annuler
|
||||
</Button>
|
||||
@ -138,145 +157,23 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
|
||||
<Button
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styletype={EButtonstyletype.OUTLINED}
|
||||
onClick={this.openLeavingModal}
|
||||
onClick={open}
|
||||
className={classes["cancel-button"]}>
|
||||
Annuler
|
||||
</Button>
|
||||
)}
|
||||
<Button type="submit">Enregistrer</Button>
|
||||
<Button type="submit">Enregistrer les modifications</Button>
|
||||
</div>
|
||||
</Form>
|
||||
<Confirm
|
||||
isOpen={this.state.isOpenLeavingModal}
|
||||
onClose={this.closeLeavingModal}
|
||||
closeBtn
|
||||
header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={"Quitter"}
|
||||
onAccept={this.leavePage}>
|
||||
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "}
|
||||
</Confirm>
|
||||
<Modal
|
||||
title={"Quitter sans enregistrer ?"}
|
||||
isOpen={isOpen}
|
||||
onClose={close}
|
||||
firstButton={{ children: "Annuler", onClick: close }}
|
||||
secondButton={{ children: "Oui, quitter sans enregistrer", onClick: leavePage }}>
|
||||
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
|
||||
</Modal>
|
||||
</div>
|
||||
</DefaultNotaryDashboard>
|
||||
</DefaultDoubleSidePage>
|
||||
);
|
||||
}
|
||||
|
||||
public override async componentDidMount() {
|
||||
const customer = await Customers.getInstance().getByUid(this.props.customerUid, {
|
||||
contact: {
|
||||
include: {
|
||||
address: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
if (customer) {
|
||||
this.setState({
|
||||
customer,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private async onFormSubmit(
|
||||
e: React.FormEvent<HTMLFormElement> | null,
|
||||
values: {
|
||||
[key: string]: string;
|
||||
},
|
||||
) {
|
||||
if (!values["cell_phone_number"]) return;
|
||||
// remove every space from the phone number
|
||||
values["cell_phone_number"] = values["cell_phone_number"].replace(/\s/g, "");
|
||||
values["cell_phone_number"] = values["cell_phone_number"].replace(/\./g, "");
|
||||
if (values["cell_phone_number"] && values["cell_phone_number"].length === 10) {
|
||||
// get the first digit of the phone number
|
||||
const firstDigit = values["cell_phone_number"].charAt(0);
|
||||
// if the first digit is a 0 replace it by +33
|
||||
if (firstDigit === "0") {
|
||||
values["cell_phone_number"] = "+33" + values["cell_phone_number"].substring(1);
|
||||
}
|
||||
}
|
||||
const contact = Contact.hydrate<Contact>({
|
||||
first_name: values["first_name"],
|
||||
last_name: values["last_name"],
|
||||
email: values["email"],
|
||||
cell_phone_number: values["cell_phone_number"],
|
||||
birthdate: values["birthdate"] === "" ? null : new Date(values["birthdate"]!),
|
||||
civility: "-",
|
||||
address: values["address"] ? Address.hydrate<Address>({ address: values["address"], city: "-", zip_code: 0 }) : undefined,
|
||||
});
|
||||
|
||||
try {
|
||||
await contact.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
|
||||
} catch (validationErrors) {
|
||||
this.setState({
|
||||
validationError: validationErrors as ValidationError[],
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await Customers.getInstance().put(this.props.customerUid, { contact });
|
||||
this.props.router.push(this.backwardPath);
|
||||
} catch (backError) {
|
||||
if (!Array.isArray(backError)) return;
|
||||
this.setState({
|
||||
validationError: backError as ValidationError[],
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
private leavePage() {
|
||||
this.props.router.push(this.backwardPath);
|
||||
}
|
||||
|
||||
private openLeavingModal(): void {
|
||||
this.setState({ isOpenLeavingModal: true });
|
||||
}
|
||||
|
||||
private closeLeavingModal(): void {
|
||||
this.setState({ isOpenLeavingModal: false });
|
||||
}
|
||||
|
||||
private onChangeBirthDateInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
|
||||
this.setState({ inputBirthdate: new Date(event.target.value) });
|
||||
}
|
||||
|
||||
private onChangeAddressInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
|
||||
this.setState({ inputAddress: event.target.value });
|
||||
}
|
||||
|
||||
private onChangeNameInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
|
||||
this.setState({ inputNameValue: event.target.value });
|
||||
}
|
||||
|
||||
private onChangeFirstNameInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
|
||||
this.setState({ inputFirstNameValue: event.target.value });
|
||||
}
|
||||
private onChangeEmailInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
|
||||
this.setState({ inputEmailValue: event.target.value });
|
||||
}
|
||||
private onChangePhoneNumberInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
|
||||
this.setState({ inputPhoneNumberValue: event.target.value });
|
||||
}
|
||||
|
||||
private onSelectedFolder(folder: OfficeFolder): void {
|
||||
this.setState({ selectedFolder: folder });
|
||||
}
|
||||
|
||||
private doesInputsHaveValues(): boolean {
|
||||
const doesInputsHaveValues: boolean =
|
||||
this.state.inputNameValue !== "" ||
|
||||
this.state.inputFirstNameValue !== "" ||
|
||||
this.state.inputEmailValue !== "" ||
|
||||
this.state.inputPhoneNumberValue !== "";
|
||||
return doesInputsHaveValues;
|
||||
}
|
||||
}
|
||||
|
||||
export default function UpdateClient(props: IProps) {
|
||||
const router = useRouter();
|
||||
let { folderUid, customerUid } = router.query;
|
||||
folderUid = folderUid as string;
|
||||
customerUid = customerUid as string;
|
||||
return <UpdateClientClass {...props} router={router} selectedFolderUid={folderUid} customerUid={customerUid} />;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user