From 930b51c14015fe57c1fe08af4e793b2081164628 Mon Sep 17 00:00:00 2001 From: OxSaitama Date: Thu, 12 Oct 2023 19:44:53 +0200 Subject: [PATCH] add form errors --- package.json | 2 +- .../DesignSystem/Form/SelectField/index.tsx | 2 +- .../DeedTypes/DeedTypesCreate/index.tsx | 79 ++++++++++++------- .../Layouts/DeedTypes/DeedTypesEdit/index.tsx | 29 +++++-- .../DocumentTypes/DocumentTypesEdit/index.tsx | 25 ++++-- .../Layouts/Folder/CreateFolder/index.tsx | 5 +- .../Folder/UpdateFolderMetadata/index.tsx | 38 ++++++--- .../Layouts/Roles/RolesCreate/index.tsx | 29 +++++-- 8 files changed, 151 insertions(+), 58 deletions(-) diff --git a/package.json b/package.json index 9d3fba5b..b63744b0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/front/Components/DesignSystem/Form/SelectField/index.tsx b/src/front/Components/DesignSystem/Form/SelectField/index.tsx index 20377a29..dc0e4479 100644 --- a/src/front/Components/DesignSystem/Form/SelectField/index.tsx +++ b/src/front/Components/DesignSystem/Form/SelectField/index.tsx @@ -200,7 +200,7 @@ class SelectFieldClass extends React.Component { if (!this.state.errors) return null; return ( - {this.props.placeholder} est requis + {this.props.placeholder} ne peut pas être vide ); } diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx index a7220d15..c12e2529 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx @@ -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(false); const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false); + const [validationError, setValidationError] = useState([]); const router = useRouter(); const onSubmitHandler = useCallback( async (e: React.FormEvent | null, values: { [key: string]: string }) => { try { const jwt = JwtService.getInstance().decodeJwt(); - const deedType = await DeedTypes.getInstance().post( + const deedType = DeedType.hydrate({ + name: values["name"], + description: values["description"], + office: Office.hydrate({ + uid: jwt?.office_Id, + }), + }); + try { + await validateOrReject(deedType, { groups: ["createDeedType"], forbidUnknownValues: true }); + } catch (validationErrors: Array | any) { + console.log(validationErrors); + setValidationError(validationErrors as ValidationError[]); + return; + } + + const deedTypeCreated = await DeedTypes.getInstance().post( DeedType.hydrate({ name: values["name"], description: values["description"], office: Office.hydrate({ - 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 | 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 ( @@ -77,10 +92,20 @@ export default function DeedTypesCreate(props: IProps) { Créer un type d'acte
- - + error.property === "name")} + /> + error.property === "description")} + />
- +
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx index 3b5c8f24..ab21dabd 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx @@ -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(null); const [hasChanged, setHasChanged] = useState(false); const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false); + const [validationError, setValidationError] = useState([]); useEffect(() => { setHasChanged(false); @@ -41,7 +44,19 @@ export default function DeedTypesEdit() { }, []); const onSubmitHandler = useCallback( - async (e: React.FormEvent | null, values: { [key: string]: string }) => { + async (e: React.FormEvent | null, values: { [key: string]: string | undefined }) => { + const deedType = DeedType.hydrate({ + uid: deedTypeUid as string, + name: values["name"], + description: values["description"], + }); + try { + await deedType.validateOrReject?.({ groups: ["updateDeedType"], forbidUnknownValues: true }); + } catch (validationErrors: Array | 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() { Modifier les informations de l'acte
- - + error.property === 'name')}/> + error.property === 'description')} />
- + error.property === "name")} /> error.property === "private_description")} /> error.property === "public_description")} />
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx index be8558a2..3637f6c4 100644 --- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx +++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx @@ -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 { 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 { 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[], diff --git a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx index 6e3f30d5..336d55e2 100644 --- a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx @@ -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 { 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 {
- + error.property === "name")} + /> error.property === "folder_number")} />