From 76e92eca78449e216db5647215541ed6c2a52564 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 29 Jul 2024 14:04:25 +0200 Subject: [PATCH] :sparkles: Ask documents working --- .../Folder/AskDocuments/classes.module.scss | 2 + .../Layouts/Folder/AskDocuments/index.tsx | 318 ++++++++---------- 2 files changed, 139 insertions(+), 181 deletions(-) diff --git a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss index e52073a2..95f5d5f1 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss +++ b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss @@ -1,6 +1,8 @@ @import "@Themes/constants.scss"; .root { + margin: 24px auto; + width: 600px; .title { margin-top: 24px; } diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index fc6f4ce3..750d9a09 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -1,118 +1,105 @@ import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; -import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import Form from "@Front/Components/DesignSystem/Form"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; -import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import Module from "@Front/Config/Module"; import { PlusIcon } from "@heroicons/react/24/outline"; import { OfficeFolder } from "le-coffre-resources/dist/Notary"; -import { NextRouter, useRouter } from "next/router"; -import React from "react"; - -import BasePage from "../../Base"; +import { useRouter } from "next/router"; +import React, { useCallback, useEffect, useState } from "react"; +import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import classes from "./classes.module.scss"; import ParameterDocuments from "./ParameterDocuments"; import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; - +import backgroundImage from "@Assets/images/background_refonte.svg"; type IProps = {}; -type IPropsClass = IProps & { - router: NextRouter; - folderUid: string; - customerUid: string; -}; -type IState = { - isCreateDocumentModalVisible: boolean; - documentTypes: IOptionOld[]; - folder: OfficeFolder | null; -}; -class AskDocumentsClass extends BasePage { - public constructor(props: IPropsClass) { - super(props); +export default function AskDocuments(props: IProps) { + const router = useRouter(); + let { folderUid, customerUid } = router.query; + folderUid = folderUid as string; + customerUid = customerUid as string; + const [isCreateDocumentModalVisible, setIsCreateDocumentModalVisible] = useState(false); + const [documentTypes, setDocumentTypes] = useState([]); + const [folder, setFolder] = useState(null); - this.state = { - isCreateDocumentModalVisible: false, - documentTypes: [], - folder: null, - }; + const closeModal = () => setIsCreateDocumentModalVisible(false); + const openModal = () => setIsCreateDocumentModalVisible(true); - this.onFormSubmit = this.onFormSubmit.bind(this); - this.closeModal = this.closeModal.bind(this); - this.openModal = this.openModal.bind(this); - } + const onFormSubmit = useCallback( + async ( + e: React.FormEvent | null, + values: { + [key: string]: any; + }, + ) => { + try { + const documentAsked: [] = values["document_types"] as []; + for (let i = 0; i < documentAsked.length; i++) { + await Documents.getInstance().post({ + folder: { + uid: folderUid, + }, + depositor: { + uid: customerUid, + }, + document_type: { + uid: documentAsked[i], + }, + }); + } - public override render(): JSX.Element { - const backUrl = Module.getInstance() - .get() - .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid); + router.push( + Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid), + ); + } catch (e) { + console.error(e); + } + }, + [customerUid, folderUid, router], + ); - return ( - -
- - - Demander des documents - -
-
-
- {this.state.documentTypes.map((documentType) => { - if (documentType.description && documentType.description.length > 1) { - return ( - - ); - } - return ; - })} -
-
- -
-
- - - - -
-
-
-
- {this.state.folder && ( - - )} - - ); - } + const getAvailableDocuments = useCallback( + async (folder: OfficeFolder): Promise => { + // Getting already asked documents UIDs in an array + const userDocumentTypesUids = folder + .documents!.filter((document) => document.depositor!.uid! === customerUid!) + .map((document) => { + return document.document_type!.uid!; + }); - public override async componentDidMount(): Promise { - this.loadData(); - } + // If those UIDs are already asked, filter them to not show them in the list and only + // show the documents that are not asked yet + const documentTypes = folder.deed!.document_types!.filter((documentType) => { + if (userDocumentTypesUids.includes(documentType!.uid!)) return false; + return true; + }); - private cancel() {} + // If there is none document type available, return an empty array + if (!documentTypes) return []; - private async loadData() { + // Else, return an array document types formatted as IOPtions + const documentTypesOptions: IOptionOld[] = documentTypes.map((documentType) => { + return { + label: documentType!.name!, + value: documentType!.uid!, + description: documentType!.private_description!, + }; + }); + + documentTypesOptions.sort((a, b) => (a.label > b.label ? 1 : -1)); + + return documentTypesOptions; + }, + [customerUid], + ); + + const loadData = useCallback(async () => { try { - const folder = await Folders.getInstance().getByUid(this.props.folderUid, { + const folder = await Folders.getInstance().getByUid(folderUid, { q: { deed: { include: { @@ -129,97 +116,66 @@ class AskDocumentsClass extends BasePage { }, }); if (!folder) return; - this.setState({ - folder, - documentTypes: await this.getAvailableDocuments(folder), - }); + setFolder(folder); + setDocumentTypes(await getAvailableDocuments(folder)); } catch (e) { console.error(e); } - } + }, [folderUid, getAvailableDocuments]); - private async getAvailableDocuments(folder: OfficeFolder): Promise { - // Getting already asked documents UIDs in an array - const userDocumentTypesUids = folder - .documents!.filter((document) => document.depositor!.uid! === this.props.customerUid!) - .map((document) => { - return document.document_type!.uid!; - }); + useEffect(() => { + loadData(); + }, [loadData]); - // If those UIDs are already asked, filter them to not show them in the list and only - // show the documents that are not asked yet - const documentTypes = folder.deed!.document_types!.filter((documentType) => { - if (userDocumentTypesUids.includes(documentType!.uid!)) return false; - return true; - }); - - // If there is none document type available, return an empty array - if (!documentTypes) return []; - - // Else, return an array document types formatted as IOPtions - const documentTypesOptions: IOptionOld[] = documentTypes.map((documentType) => { - return { - label: documentType!.name!, - value: documentType!.uid!, - description: documentType!.private_description!, - }; - }); - - documentTypesOptions.sort((a, b) => (a.label > b.label ? 1 : -1)); - - return documentTypesOptions; - } - - private openModal() { - this.setState({ - isCreateDocumentModalVisible: true, - }); - } - - private closeModal() { - this.loadData(); - this.setState({ - isCreateDocumentModalVisible: false, - }); - } - - private async onFormSubmit( - e: React.FormEvent | null, - values: { - [key: string]: any; - }, - ) { - try { - const documentAsked: [] = values["document_types"] as []; - for (let i = 0; i < documentAsked.length; i++) { - await Documents.getInstance().post({ - folder: { - uid: this.props.folderUid, - }, - depositor: { - uid: this.props.customerUid, - }, - document_type: { - uid: documentAsked[i], - }, - }); - } - - this.props.router.push( - Module.getInstance() - .get() - .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid), - ); - } catch (e) { - console.error(e); - } - } -} - -export default function AskDocuments(props: IProps) { - const router = useRouter(); - let { folderUid, customerUid } = router.query; - folderUid = folderUid as string; - customerUid = customerUid as string; - return ; + const backUrl = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid); + return ( + +
+ + + Demander des documents + +
+
+
+ {documentTypes.map((documentType) => { + if (documentType.description && documentType.description.length > 1) { + return ( + + ); + } + return ; + })} +
+
+ +
+
+ + + + +
+
+
+
+ {folder && ( + + )} + + ); }