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

add form errors

Browse Source
This commit is contained in:
OxSaitama 2023-10-12 19:44:53 +02:00
parent e4b1379c12
commit 930b51c140
8 changed files with 151 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -24,7 +24,7 @@
"eslint-config-next": "13.2.4",
"form-data": "^4.0.0",
"jwt-decode": "^3.1.2",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.90",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.92",
"next": "13.2.4",
"prettier": "^2.8.7",
"react": "18.2.0",

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

@ -200,7 +200,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
if (!this.state.errors) return null;
return (
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
{this.props.placeholder} est requis
{this.props.placeholder} ne peut pas être vide
</Typography>
);
}

79
src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
View File

@ -13,62 +13,77 @@ import { useRouter } from "next/router";
import { useCallback, useState } from "react";
import classes from "./classes.module.scss";
import { validateOrReject, ValidationError } from "class-validator";
type IProps = {};
export default function DeedTypesCreate(props: IProps) {
const [hasChanged, setHasChanged] = useState<boolean>(false);
const [isConfirmModalVisible, setIsConfirmModalVisible] = useState<boolean>(false);
const [validationError, setValidationError] = useState<ValidationError[]>([]);
const router = useRouter();
const onSubmitHandler = useCallback(
async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
try {
const jwt = JwtService.getInstance().decodeJwt();
const deedType = await DeedTypes.getInstance().post(
const deedType = DeedType.hydrate<DeedType>({
name: values["name"],
description: values["description"],
office: Office.hydrate<Office>({
uid: jwt?.office_Id,
}),
});
try {
await validateOrReject(deedType, { groups: ["createDeedType"], forbidUnknownValues: true });
} catch (validationErrors: Array<ValidationError> | any) {
console.log(validationErrors);
setValidationError(validationErrors as ValidationError[]);
return;
}
const deedTypeCreated = await DeedTypes.getInstance().post(
DeedType.hydrate<DeedType>({
name: values["name"],
description: values["description"],
office: Office.hydrate<Office>({
uid: jwt?.office_Id
})
uid: jwt?.office_Id,
}),
}),
);
router.push(
Module.getInstance()
.get()
.modules.pages.DeedTypes.pages.DeedTypesInformations.props.path.replace("[uid]", deedType.uid!),
.modules.pages.DeedTypes.pages.DeedTypesInformations.props.path.replace("[uid]", deedTypeCreated.uid!),
);
} catch (e) {
console.error(e);
} catch (validationErrors: Array<ValidationError> | any) {
console.log(validationErrors);
setValidationError(validationErrors as ValidationError[]);
return;
}
},
[router],
[router, validationError],
);
const closeConfirmModal = useCallback(() => {
setIsConfirmModalVisible(false);
}, []);
const onFieldChange = useCallback((name: string, field: any) => {
setHasChanged(true);
}, []);
const onFieldChange = useCallback((name: string, field: any) => {
setHasChanged(true);
}, []);
const redirect = useCallback(() => {
router.push(
Module.getInstance()
.get()
.modules.pages.DeedTypes.props.path
);
}, [router]);
const redirect = useCallback(() => {
router.push(Module.getInstance().get().modules.pages.DeedTypes.props.path);
}, [router]);
const onCancel = useCallback(() => {
if (hasChanged) {
setIsConfirmModalVisible(true);
} else {
redirect();
}
}, [hasChanged, redirect]);
const onCancel = useCallback(() => {
if (hasChanged) {
setIsConfirmModalVisible(true);
} else {
redirect();
}
}, [hasChanged, redirect]);
return (
<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
@ -77,10 +92,20 @@ export default function DeedTypesCreate(props: IProps) {
<Typography typo={ITypo.H1Bis}>Créer un type d'acte</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField name="name" placeholder="Nom de l'acte" />
<TextAreaField name="description" placeholder="Description" />
<TextField
name="name"
placeholder="Nom de l'acte"
validationError={validationError.find((error) => error.property === "name")}
/>
<TextAreaField
name="description"
placeholder="Description"
validationError={validationError.find((error) => error.property === "description")}
/>
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={onCancel}>Annuler</Button>
<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
Annuler
</Button>
<Button type="submit">Créer le type d'acte</Button>
</div>
</Form>

29
src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
View File

@ -10,9 +10,11 @@ import Module from "@Front/Config/Module";
import { DeedType } from "le-coffre-resources/dist/Admin";
import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";
import { ValidationError } from "class-validator";
import classes from "./classes.module.scss";
export default function DeedTypesEdit() {
const router = useRouter();
let { deedTypeUid } = router.query;
@ -20,6 +22,7 @@ export default function DeedTypesEdit() {
const [deedTypeSelected, setDeedTypeSelected] = useState<DeedType | null>(null);
const [hasChanged, setHasChanged] = useState<boolean>(false);
const [isConfirmModalVisible, setIsConfirmModalVisible] = useState<boolean>(false);
const [validationError, setValidationError] = useState<ValidationError[]>([]);
useEffect(() => {
setHasChanged(false);
@ -41,7 +44,19 @@ export default function DeedTypesEdit() {
}, []);
const onSubmitHandler = useCallback(
async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string | undefined }) => {
const deedType = DeedType.hydrate<DeedType>({
uid: deedTypeUid as string,
name: values["name"],
description: values["description"],
});
try {
await deedType.validateOrReject?.({ groups: ["updateDeedType"], forbidUnknownValues: true });
} catch (validationErrors: Array<ValidationError> | any) {
if(!Array.isArray(validationErrors)) return;
setValidationError(validationErrors as ValidationError[]);
return;
}
try {
await DeedTypes.getInstance().put(
deedTypeUid as string,
@ -56,11 +71,13 @@ export default function DeedTypesEdit() {
.get()
.modules.pages.DeedTypes.pages.DeedTypesInformations.props.path.replace("[uid]", deedTypeUid as string),
);
} catch (e) {
console.error(e);
} catch (validationErrors) {
if(!Array.isArray(validationErrors)) return;
setValidationError(validationErrors as ValidationError[]);
return;
}
},
[deedTypeUid, router],
[deedTypeUid, router, validationError],
);
const onFieldChange = useCallback((name: string, field: any) => {
@ -90,8 +107,8 @@ export default function DeedTypesEdit() {
<Typography typo={ITypo.H1Bis}>Modifier les informations de l'acte</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField name="name" placeholder="Nom de l'acte" defaultValue={deedTypeSelected?.name} />
<TextAreaField name="description" placeholder="Description" defaultValue={deedTypeSelected?.description} />
<TextField name="name" placeholder="Nom de l'acte" defaultValue={deedTypeSelected?.name} validationError={validationError.find((error) => error.property === 'name')}/>
<TextAreaField name="description" placeholder="Description" defaultValue={deedTypeSelected?.description} validationError={validationError.find((error) => error.property === 'description')} />
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
Annuler

25
src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
View File

@ -6,7 +6,7 @@ import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
import Module from "@Front/Config/Module";
import { validateOrReject } from "class-validator";
import { validateOrReject, ValidationError } from "class-validator";
import { DocumentType } from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";
@ -18,6 +18,7 @@ export default function DocumentTypesEdit() {
let { documentTypeUid } = router.query;
const [documentTypeSelected, setDocumentTypeSelected] = useState<DocumentType | null>(null);
const [validationError, setValidationError] = useState<ValidationError[]>([])
useEffect(() => {
async function getDocumentType() {
@ -38,7 +39,15 @@ export default function DocumentTypesEdit() {
...values,
uid: documentTypeUid as string,
});
await validateOrReject(documentToUpdate, { groups: ["updateDocumentType"] });
try {
await validateOrReject(documentToUpdate, { groups: ["updateDocumentType"] });
} catch (validationErrors: Array<ValidationError> | any) {
console.log(validationErrors);
if(!Array.isArray(validationErrors)) return;
setValidationError(validationErrors as ValidationError[]);
return;
}
const documentTypeUpdated = await DocumentTypes.getInstance().put(documentTypeUid as string, documentToUpdate);
router.push(
Module.getInstance()
@ -48,11 +57,13 @@ export default function DocumentTypesEdit() {
documentTypeUpdated.uid ?? "",
),
);
} catch (e) {
console.log(e);
} catch (validationErrors: Array<ValidationError> | any) {
if(!Array.isArray(validationErrors)) return;
setValidationError(validationErrors as ValidationError[]);
return;
}
},
[documentTypeUid, router],
[documentTypeUid, router, validationError],
);
return (
@ -62,16 +73,18 @@ export default function DocumentTypesEdit() {
<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
<TextField name="name" placeholder="Nom du document" defaultValue={documentTypeSelected?.name} />
<TextField name="name" placeholder="Nom du document" defaultValue={documentTypeSelected?.name} validationError={validationError.find((error) => error.property === "name")} />
<TextAreaField
name="private_description"
placeholder="Description visible par les collaborateurs de l'office"
defaultValue={documentTypeSelected?.private_description ?? ""}
validationError={validationError.find((error) => error.property === "private_description")}
/>
<TextAreaField
name="public_description"
placeholder="Description visible par les clients de l'office"
defaultValue={documentTypeSelected?.public_description}
validationError={validationError.find((error) => error.property === "public_description")}
/>
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>

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

@ -12,7 +12,7 @@ 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 { ValidationError } from "class-validator/types/validation/ValidationError";
import { Deed, DeedType, Office, OfficeFolder } from "le-coffre-resources/dist/Notary";
import User from "le-coffre-resources/dist/Notary";
import { NextRouter, useRouter } from "next/router";
@ -261,6 +261,7 @@ 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[],
});
@ -271,7 +272,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
const newOfficeFolder = await Folders.getInstance().post(officeFolderForm);
if (!newOfficeFolder) return;
this.props.router.push(`/folders/${newOfficeFolder.uid}`);
} catch (backError: any) {
} catch (backError) {
if (!Array.isArray(backError)) return;
this.setState({
validationError: backError as ValidationError[],

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

@ -14,6 +14,7 @@ import { NextRouter, useRouter } from "next/router";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import DateField from "@Front/Components/DesignSystem/Form/DateField";
import { ValidationError } from "class-validator/types/validation/ValidationError";
type IProps = {};
@ -24,12 +25,14 @@ type IPropsClass = IProps & {
type IState = {
selectedFolder: OfficeFolder | null;
validationError: ValidationError[];
};
class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
constructor(props: IPropsClass) {
super(props);
this.state = {
selectedFolder: null,
validationError: [],
};
this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.getFolder = this.getFolder.bind(this);
@ -56,11 +59,17 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}>
<TextField name="name" placeholder="Intitulé du dossier" defaultValue={this.state.selectedFolder?.name} />
<TextField
name="name"
placeholder="Intitulé du dossier"
defaultValue={this.state.selectedFolder?.name}
validationError={this.state.validationError.find((error) => error.property === "name")}
/>
<TextField
name="folder_number"
placeholder="Numéro de dossier"
defaultValue={this.state.selectedFolder?.folder_number}
validationError={this.state.validationError.find((error) => error.property === "folder_number")}
/>
<Select name="deed" options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
<DateField name="opening_date" placeholder="Ouverture du dossier" defaultValue={defaultValue} disabled />
@ -91,21 +100,30 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
[key: string]: string;
},
) {
try {
const newValues = OfficeFolder.hydrate<OfficeFolder>({
...values,
deed: Deed.hydrate<Deed>({
uid: values["deed"],
}),
});
const newValues = OfficeFolder.hydrate<OfficeFolder>({
...values,
deed: Deed.hydrate<Deed>({
uid: values["deed"],
}),
});
try {
await newValues.validateOrReject?.({ groups: ["updateFolder"], forbidUnknownValues: false });
} catch (validationErrors) {
this.setState({ validationError: validationErrors as ValidationError[] });
return;
}
try {
await Folders.getInstance().put(this.props.folderUid, newValues);
const url = Module.getInstance()
.get()
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid);
this.props.router.push(url);
} catch (e) {
console.error(e);
} catch (backError) {
if (!Array.isArray(backError)) return;
this.setState({ validationError: backError as ValidationError[] });
return;
}
}

29
src/front/Components/Layouts/Roles/RolesCreate/index.tsx
View File

@ -14,17 +14,33 @@ import classes from "./classes.module.scss";
import JwtService from "@Front/Services/JwtService/JwtService";
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
import { ValidationError } from "class-validator";
type IProps = {};
export default function RolesCreate(props: IProps) {
const [hasChanged, setHasChanged] = useState<boolean>(false);
const [isConfirmModalVisible, setIsConfirmModalVisible] = useState<boolean>(false);
const [validationError, setValidationError] = useState<ValidationError[]>([]);
const router = useRouter();
const onSubmitHandler = useCallback(
async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
const jwt = JwtService.getInstance().decodeJwt();
const officeRole = OfficeRole.hydrate<OfficeRole>({
name: values["name"],
office: Office.hydrate<Office>({
uid: jwt?.office_Id,
}),
});
try {
await officeRole.validateOrReject?.({ groups: ["createOfficeRole"], forbidUnknownValues: true });
} catch (validationErrors: Array<ValidationError> | any) {
console.log(validationErrors);
if (!Array.isArray(validationErrors)) return;
setValidationError(validationErrors as ValidationError[]);
return;
}
try {
const jwt = JwtService.getInstance().decodeJwt();
const role = await OfficeRoles.getInstance().post(
OfficeRole.hydrate<OfficeRole>({
name: values["name"],
@ -35,11 +51,14 @@ export default function RolesCreate(props: IProps) {
);
router.push(Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path.replace("[uid]", role.uid!));
} catch (e) {
console.error(e);
} catch (validationErrors: Array<ValidationError> | any) {
console.log(validationErrors);
if (!Array.isArray(validationErrors)) return;
setValidationError(validationErrors as ValidationError[]);
return;
}
},
[router],
[router, validationError],
);
const closeConfirmModal = useCallback(() => {
@ -77,7 +96,7 @@ export default function RolesCreate(props: IProps) {
<Typography typo={ITypo.H1Bis}>Créer un rôle</Typography>
</div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField name="name" placeholder="Nom du rôle" />
<TextField name="name" placeholder="Nom du rôle" validationError={validationError.find((error) => error.property === "name")}/>
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
Annuler