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

✨ Add a loader to folders

Browse Source
This commit is contained in:
Maxime Lalo 2023-10-02 16:23:01 +02:00
parent 1dfed0d6d9
commit d8c5deeb75
2 changed files with 133 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss
View File

@ -99,3 +99,15 @@
} }
} }
} }
.loader-container {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
height: 100%;
.loader {
width: 40px;
height: 40px;
}
}

44
src/front/Components/Layouts/Folder/FolderInformation/index.tsx
View File

@ -80,6 +80,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid); .modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
return ( return (
<DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers"> <DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers">
{!this.props.isLoading && (
<div className={classes["root"]}> <div className={classes["root"]}>
{this.props.selectedFolder ? ( {this.props.selectedFolder ? (
<div className={classes["folder-informations"]}> <div className={classes["folder-informations"]}>
@ -94,9 +95,15 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
</Button> </Button>
</Link> </Link>
</div> </div>
<FolderBoxInformation folder={this.props.selectedFolder} type={EFolderBoxInformationType.INFORMATIONS} /> <FolderBoxInformation
folder={this.props.selectedFolder}
type={EFolderBoxInformationType.INFORMATIONS}
/>
<div className={classes["second-box"]}> <div className={classes["second-box"]}>
<FolderBoxInformation folder={this.props.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} /> <FolderBoxInformation
folder={this.props.selectedFolder}
type={EFolderBoxInformationType.DESCRIPTION}
/>
</div> </div>
<div className={classes["progress-bar"]}> <div className={classes["progress-bar"]}>
<QuantityProgressBar <QuantityProgressBar
@ -183,6 +190,14 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
</div> </div>
)} )}
</div> </div>
)}
{this.props.isLoading && (
<div className={classes["loader-container"]}>
<div className={classes["loader"]}>
<Loader />
</div>
</div>
)}
<Confirm <Confirm
isOpen={this.state.isPreventArchiveModalOpen} isOpen={this.state.isPreventArchiveModalOpen}
onAccept={this.closePreventArchiveModal} onAccept={this.closePreventArchiveModal}
@ -389,20 +404,9 @@ export default function FolderInformation(props: IProps) {
let { folderUid } = router.query; let { folderUid } = router.query;
folderUid = folderUid as string; folderUid = folderUid as string;
const verifyAnchorStatus = useCallback(async () => {
if (!folderUid) return;
setIsLoading(true);
try {
const anchorStatus = await OfficeFolderAnchors.getInstance().get(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 () => { const getFolder = useCallback(async () => {
if (!folderUid) return; if (!folderUid) return;
setIsLoading(true);
const query = { const query = {
q: { q: {
deed: { include: { deed_type: true } }, deed: { include: { deed_type: true } },
@ -435,13 +439,21 @@ export default function FolderInformation(props: IProps) {
const folder = await Folders.getInstance().getByUid(folderUid as string, query); const folder = await Folders.getInstance().getByUid(folderUid as string, query);
if (folder) { if (folder) {
setSelectedFolder(folder); setSelectedFolder(folder);
try {
const anchorStatus = await OfficeFolderAnchors.getInstance().get(folderUid as string);
setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING);
} catch (e) {
setIsAnchored(AnchorStatus.NOT_ANCHORED);
} }
}
setIsLoading(false);
}, [folderUid]); }, [folderUid]);
useEffect(() => { useEffect(() => {
verifyAnchorStatus();
getFolder(); getFolder();
}, [verifyAnchorStatus, getFolder]); }, [getFolder]);
useEffect(() => { useEffect(() => {
setIsLoading(true); setIsLoading(true);