diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx index 2c2b7918..3052c261 100644 --- a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx @@ -3,9 +3,11 @@ import classes from "./classes.module.scss"; import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import UserFolder from "@Front/Components/DesignSystem/UserFolder"; +import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation"; type IProps = { folder: OfficeFolder; + anchorStatus: AnchorStatus; }; type IState = { openedCustomer: string; @@ -49,6 +51,7 @@ export default class ClientSection extends React.Component { key={customer.uid} isOpened={this.state.openedCustomer === customer.uid} onChange={this.changeUserFolder} + anchorStatus={this.props.anchorStatus} isArchived /> ); diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/classes.module.scss b/src/front/Components/Layouts/FolderArchived/FolderInformation/classes.module.scss index a1052297..d3eba151 100644 --- a/src/front/Components/Layouts/FolderArchived/FolderInformation/classes.module.scss +++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/classes.module.scss @@ -86,4 +86,16 @@ .modal-title { margin-bottom: 24px; } +} + +.loader-container { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + height: 100%; + .loader { + width: 40px; + height: 40px; + } } \ No newline at end of file diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx index 1eb5600c..59fbcab7 100644 --- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx @@ -13,12 +13,18 @@ import BasePage from "../../Base"; import classes from "./classes.module.scss"; import ClientSection from "./ClientSection"; import Link from "next/link"; +import { AnchorStatus } from "../../Folder/FolderInformation"; +import { useCallback, useEffect, useState } from "react"; +import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors"; +import Loader from "@Front/Components/DesignSystem/Loader"; type IProps = {}; type IPropsClass = IProps & { router: NextRouter; selectedFolderUid: string; + isLoading: boolean; + isAnchored: AnchorStatus; }; type IState = { @@ -46,6 +52,7 @@ class FolderInformationClass extends BasePage { .modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid); return ( + {!this.props.isLoading && (
{this.state.selectedFolder ? (
@@ -61,12 +68,14 @@ class FolderInformationClass extends BasePage {
{
{
- {this.doesFolderHaveCustomer() && } + {this.doesFolderHaveCustomer() && }
- {!this.doesFolderHaveCustomer() && } + {!this.doesFolderHaveCustomer() && }
)}
+ )} + {this.props.isLoading && ( +
+
+ +
+
+ )}
); } @@ -154,7 +172,69 @@ class FolderInformationClass extends BasePage { export default function FolderInformation(props: IProps) { const router = useRouter(); + const [isAnchored, setIsAnchored] = useState(AnchorStatus.NOT_ANCHORED); + const [isLoading, setIsLoading] = useState(true); + const [selectedFolder, setSelectedFolder] = useState(null); + let { folderUid } = router.query; folderUid = folderUid as string; - return ; + + const getAnchoringStatus = useCallback(async () => { + if(!folderUid) return; + setIsLoading(true); + try { + const anchorStatus = await OfficeFolderAnchors.getInstance().getByUid(folderUid as string); + setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING); + } catch (e) { + setIsAnchored(AnchorStatus.NOT_ANCHORED); + } + setIsLoading(false); + }, [folderUid]); + + const getFolder = useCallback(async () => { + if (!folderUid) return; + setIsLoading(true); + const query = { + q: { + deed: { include: { deed_type: true } }, + office: true, + customers: { + include: { + contact: true, + documents: { + include: { + folder: true, + document_type: true, + files: true, + }, + }, + }, + }, + documents: { + include: { + depositor: { + include: { + contact: true, + }, + }, + }, + }, + folder_anchor: true, + }, + }; + const folder = await Folders.getInstance().getByUid(folderUid as string, query); + if (folder) { + setSelectedFolder(folder); + getAnchoringStatus(); + } + + setIsLoading(false); + }, [folderUid, getAnchoringStatus]); + + useEffect(() => { + setIsLoading(true); + getFolder(); + }, [getFolder]); + + return ; }