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

✨ Notary dashboard in conformity

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-29 12:05:02 +02:00
parent c73b78bd26
commit c707910f8d
5 changed files with 72 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
View File

@ -1,7 +0,0 @@
@import "@Themes/constants.scss";
.root {
display: flex;
flex-direction: column;
justify-content: space-between;
}

87
src/front/Components/DesignSystem/FolderListContainer/index.tsx
View File

@ -1,87 +0,0 @@
import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import { useRouter } from "next/router";
import React, { useCallback, useEffect } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "../SearchBlockList/BlockList/Block";
import SearchBlockList from "../SearchBlockList";
type IProps = {
folders: OfficeFolder[];
isArchived: boolean;
};
export default function FolderListContainer(props: IProps) {
const router = useRouter();
const { folderUid } = router.query;
const { folders, isArchived } = props;
const redirectPath: string = isArchived
? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
const getBlocks = useCallback(
(folders: OfficeFolder[]): IBlock[] => {
const pendingFolders = folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length >= 1;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
const otherFolders = folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length === 0;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
return [...pendingFolders, ...otherFolders].map((folder) => {
return {
id: folder.uid!,
primaryText: folder.name,
secondaryText: folder.folder_number,
isActive: folderUid === folder.uid,
showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
};
});
},
[folderUid],
);
const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
const onSelectedFolder = (block: IBlock) => {
const folder = folders.find((folder) => folder.uid === block.id);
if (!folder) return;
const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
router.push(path);
};
useEffect(() => {
setBlocks(getBlocks(folders));
}, [folders, getBlocks]);
return (
<div className={classes["root"]}>
<SearchBlockList
blocks={blocks}
onSelectedBlock={onSelectedFolder}
bottomButton={{
link: Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path,
text: "Créer un dossier",
}}
/>
</div>
);
}

1
src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx
View File

@ -9,7 +9,6 @@ import SearchBlockList, { ISearchBlockListProps } from "@Front/Components/Design
export type IPropsDashboardWithList = { export type IPropsDashboardWithList = {
title?: string; title?: string;
children?: ReactNode; children?: ReactNode;
isArchived?: boolean;
hasBackArrow?: boolean; hasBackArrow?: boolean;
backArrowUrl?: string; backArrowUrl?: string;
mobileBackText?: string; mobileBackText?: string;

23
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
View File

@ -1,23 +0,0 @@
@import "@Themes/constants.scss";
.root {
position: relative;
.content {
display: flex;
justify-content: flex-start;
height: calc(100vh - var(--header-height));
@media (max-width: $screen-m) {
flex-direction: column;
}
.right-side {
min-width: calc(100% - 336px);
overflow-y: auto;
padding: var(--spacing-lg, 24px);
@media (max-width: $screen-m) {
width: 100%;
}
}
}
}

95
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
View File

@ -1,13 +1,13 @@
import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow";
import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus"; import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import React, { ReactNode, useEffect } from "react"; import React, { ReactNode, useCallback, useEffect } from "react";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import classes from "./classes.module.scss"; import Module from "@Front/Config/Module";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import { useRouter } from "next/router";
import DefaultDashboardWithList from "../DefaultDashboardWithList";
type IProps = { type IProps = {
title: string; title: string;
@ -19,9 +19,64 @@ type IProps = {
}; };
export default function DefaultNotaryDashboard(props: IProps) { export default function DefaultNotaryDashboard(props: IProps) {
const { hasBackArrow, backArrowUrl, children, isArchived } = props; const { isArchived } = props;
const router = useRouter();
const [folders, setFolders] = React.useState<OfficeFolder[]>([]); const [folders, setFolders] = React.useState<OfficeFolder[]>([]);
const { folderUid } = router.query;
const redirectPath: string = isArchived
? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
const getBlocks = useCallback(
(folders: OfficeFolder[]): IBlock[] => {
const pendingFolders = folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length >= 1;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
const otherFolders = folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length === 0;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
return [...pendingFolders, ...otherFolders].map((folder) => {
return {
id: folder.uid!,
primaryText: folder.name,
secondaryText: folder.folder_number,
isActive: folderUid === folder.uid,
showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
};
});
},
[folderUid],
);
const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
const onSelectedBlock = (block: IBlock) => {
const folder = folders.find((folder) => folder.uid === block.id);
if (!folder) return;
const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
router.push(path);
};
useEffect(() => {
setBlocks(getBlocks(folders));
}, [folders, getBlocks]);
useEffect(() => { useEffect(() => {
let targetedStatus: EFolderStatus = EFolderStatus["LIVE" as keyof typeof EFolderStatus]; let targetedStatus: EFolderStatus = EFolderStatus["LIVE" as keyof typeof EFolderStatus];
@ -63,20 +118,14 @@ export default function DefaultNotaryDashboard(props: IProps) {
}, [isArchived]); }, [isArchived]);
return ( return (
<div className={classes["root"]}> <DefaultDashboardWithList
<Header isUserConnected={true} /> {...props}
<div className={classes["content"]}> onSelectedBlock={onSelectedBlock}
<FolderListContainer folders={folders} isArchived={isArchived ?? false} /> blocks={blocks}
<div className={classes["right-side"]}> bottomButton={{
{hasBackArrow && ( link: Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path,
<div className={classes["back-arrow-desktop"]}> text: "Créer un dossier",
<BackArrow url={backArrowUrl ?? ""} /> }}
</div> />
)}
{children}
</div>
</div>
<Version />
</div>
); );
} }