fix progress
This commit is contained in:
parent
a666e1054e
commit
1e0c70c84c
@ -38,6 +38,13 @@ const header: readonly IHead[] = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const tradDocumentStatus: Record<EDocumentStatus, string> = {
|
||||||
|
[EDocumentStatus.ASKED]: "Demandé",
|
||||||
|
[EDocumentStatus.DEPOSITED]: "À valider",
|
||||||
|
[EDocumentStatus.VALIDATED]: "Validé",
|
||||||
|
[EDocumentStatus.REFUSED]: "Refusé",
|
||||||
|
};
|
||||||
|
|
||||||
export default function DocumentTables(props: IProps) {
|
export default function DocumentTables(props: IProps) {
|
||||||
const { documents: documentsProps } = props;
|
const { documents: documentsProps } = props;
|
||||||
const [documents, setDocuments] = useState<Document[]>(documentsProps);
|
const [documents, setDocuments] = useState<Document[]>(documentsProps);
|
||||||
@ -99,7 +106,11 @@ export default function DocumentTables(props: IProps) {
|
|||||||
key: document.uid,
|
key: document.uid,
|
||||||
document_type: document.document_type?.name ?? "_",
|
document_type: document.document_type?.name ?? "_",
|
||||||
document_status: (
|
document_status: (
|
||||||
<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
|
<Tag
|
||||||
|
color={ETagColor.INFO}
|
||||||
|
variant={ETagVariant.SEMI_BOLD}
|
||||||
|
label={tradDocumentStatus[document.document_status].toUpperCase()}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
|
created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
|
||||||
actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />,
|
actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />,
|
||||||
@ -118,7 +129,11 @@ export default function DocumentTables(props: IProps) {
|
|||||||
key: document.uid,
|
key: document.uid,
|
||||||
document_type: document.document_type?.name ?? "_",
|
document_type: document.document_type?.name ?? "_",
|
||||||
document_status: (
|
document_status: (
|
||||||
<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
|
<Tag
|
||||||
|
color={ETagColor.WARNING}
|
||||||
|
variant={ETagVariant.SEMI_BOLD}
|
||||||
|
label={tradDocumentStatus[document.document_status].toUpperCase()}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
created_at: document.created_at,
|
created_at: document.created_at,
|
||||||
actions: <IconButton onClick={() => onPreview(document)} icon={<EyeIcon />} />,
|
actions: <IconButton onClick={() => onPreview(document)} icon={<EyeIcon />} />,
|
||||||
@ -137,7 +152,11 @@ export default function DocumentTables(props: IProps) {
|
|||||||
key: document.uid,
|
key: document.uid,
|
||||||
document_type: document.document_type?.name ?? "_",
|
document_type: document.document_type?.name ?? "_",
|
||||||
document_status: (
|
document_status: (
|
||||||
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
|
<Tag
|
||||||
|
color={ETagColor.SUCCESS}
|
||||||
|
variant={ETagVariant.SEMI_BOLD}
|
||||||
|
label={tradDocumentStatus[document.document_status].toUpperCase()}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
created_at: document.created_at,
|
created_at: document.created_at,
|
||||||
actions: (
|
actions: (
|
||||||
@ -161,7 +180,11 @@ export default function DocumentTables(props: IProps) {
|
|||||||
key: document.uid,
|
key: document.uid,
|
||||||
document_type: document.document_type?.name ?? "_",
|
document_type: document.document_type?.name ?? "_",
|
||||||
document_status: (
|
document_status: (
|
||||||
<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
|
<Tag
|
||||||
|
color={ETagColor.ERROR}
|
||||||
|
variant={ETagVariant.SEMI_BOLD}
|
||||||
|
label={tradDocumentStatus[document.document_status].toUpperCase()}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
created_at: document.created_at,
|
created_at: document.created_at,
|
||||||
actions: "",
|
actions: "",
|
||||||
|
@ -1,25 +0,0 @@
|
|||||||
@import "@Themes/constants.scss";
|
|
||||||
|
|
||||||
.root {
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: 32px;
|
|
||||||
|
|
||||||
.no-client {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 72px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.client {
|
|
||||||
display: grid;
|
|
||||||
gap: 32px;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,98 +0,0 @@
|
|||||||
import PlusIcon from "@Assets/Icons/plus.svg";
|
|
||||||
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
||||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
||||||
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
|
|
||||||
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
|
||||||
import Module from "@Front/Config/Module";
|
|
||||||
import Link from "next/link";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
import classes from "./classes.module.scss";
|
|
||||||
import { AnchorStatus } from "..";
|
|
||||||
|
|
||||||
type IProps = {
|
|
||||||
folder: OfficeFolder;
|
|
||||||
anchorStatus: AnchorStatus;
|
|
||||||
getFolderCallback: () => Promise<void>;
|
|
||||||
openedCustomer?: string;
|
|
||||||
};
|
|
||||||
type IState = {
|
|
||||||
openedCustomer: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class ClientSection extends React.Component<IProps, IState> {
|
|
||||||
public constructor(props: IProps) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
openedCustomer: this.props.openedCustomer ?? "",
|
|
||||||
};
|
|
||||||
this.changeUserFolder = this.changeUserFolder.bind(this);
|
|
||||||
this.renderCustomerFolders = this.renderCustomerFolders.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
public override render(): JSX.Element {
|
|
||||||
const navigatePath = Module.getInstance()
|
|
||||||
.get()
|
|
||||||
.modules.pages.Folder.pages.AddClient.props.path.replace("[folderUid]", this.props.folder.uid ?? "");
|
|
||||||
return (
|
|
||||||
<div className={classes["root"]}>
|
|
||||||
{this.doesFolderHaveCustomer() ? (
|
|
||||||
<>
|
|
||||||
<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
|
|
||||||
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
|
||||||
<Link href={navigatePath}>
|
|
||||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
|
|
||||||
Ajouter un client
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className={classes["no-client"]}>
|
|
||||||
<div className={classes["title"]}>
|
|
||||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
|
||||||
Aucun client n'est associé au dossier.
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
|
||||||
<Link href={navigatePath}>
|
|
||||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
|
|
||||||
Ajouter un client
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private renderCustomerFolders() {
|
|
||||||
const output = this.props.folder.customers?.map((customer) => {
|
|
||||||
if (!customer) return null;
|
|
||||||
return (
|
|
||||||
<UserFolder
|
|
||||||
folder={this.props.folder}
|
|
||||||
customer={customer}
|
|
||||||
key={customer.uid}
|
|
||||||
isOpened={this.state.openedCustomer === customer.uid}
|
|
||||||
onChange={this.changeUserFolder}
|
|
||||||
anchorStatus={this.props.anchorStatus}
|
|
||||||
getFolderCallback={this.props.getFolderCallback}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
return output ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
private changeUserFolder(uid: string) {
|
|
||||||
this.setState({
|
|
||||||
openedCustomer: uid === this.state.openedCustomer ? "" : uid,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private doesFolderHaveCustomer(): boolean {
|
|
||||||
if (!this.props.folder?.customers) return false;
|
|
||||||
return this.props.folder?.customers!.length > 0;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,113 +0,0 @@
|
|||||||
@import "@Themes/constants.scss";
|
|
||||||
|
|
||||||
.root {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
.no-folder-selected {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.choose-a-folder {
|
|
||||||
margin-top: 96px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-informations {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
.folder-header {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@media (max-width: $screen-m) {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.second-box {
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.delete-folder {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $screen-m) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.delete-folder {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-top: 12px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.validate-document-container {
|
|
||||||
.document-validating-container {
|
|
||||||
.validate-gif {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loader-container {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
.loader {
|
|
||||||
width: 21px;
|
|
||||||
height: 21px;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,541 +0,0 @@
|
|||||||
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
|
||||||
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
|
|
||||||
import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
|
|
||||||
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
||||||
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
|
|
||||||
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
|
|
||||||
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
|
|
||||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
||||||
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
|
||||||
import Module from "@Front/Config/Module";
|
|
||||||
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
|
||||||
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { NextRouter, useRouter } from "next/router";
|
|
||||||
import { ChangeEvent, useCallback, useEffect, useState } from "react";
|
|
||||||
import Image from "next/image";
|
|
||||||
import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
|
|
||||||
|
|
||||||
import BasePage from "../../../Base";
|
|
||||||
import classes from "./classes.module.scss";
|
|
||||||
import ClientSection from "./ClientSection";
|
|
||||||
import Loader from "@Front/Components/DesignSystem/Loader";
|
|
||||||
import Newsletter from "@Front/Components/DesignSystem/Newsletter";
|
|
||||||
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
|
|
||||||
|
|
||||||
export enum AnchorStatus {
|
|
||||||
"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN",
|
|
||||||
"ANCHORING" = "ANCHORING",
|
|
||||||
"NOT_ANCHORED" = "NOT_ANCHORED",
|
|
||||||
}
|
|
||||||
|
|
||||||
type IProps = {};
|
|
||||||
|
|
||||||
type IPropsClass = IProps & {
|
|
||||||
router: NextRouter;
|
|
||||||
selectedFolderUid: string;
|
|
||||||
isAnchored: AnchorStatus;
|
|
||||||
isLoading: boolean;
|
|
||||||
selectedFolder: OfficeFolder | null;
|
|
||||||
getAnchoringStatus: () => Promise<void>;
|
|
||||||
getFolderCallback: () => Promise<void>;
|
|
||||||
openedCustomer?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type IState = {
|
|
||||||
isArchivedModalOpen: boolean;
|
|
||||||
inputArchivedDescripton: string;
|
|
||||||
isValidateModalVisible: boolean;
|
|
||||||
hasValidateAnchoring: boolean;
|
|
||||||
isVerifDeleteModalVisible: boolean;
|
|
||||||
isPreventArchiveModalOpen: boolean;
|
|
||||||
loadingAnchoring: boolean;
|
|
||||||
};
|
|
||||||
class FolderInformationClass extends BasePage<IPropsClass, IState> {
|
|
||||||
public constructor(props: IPropsClass) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
isArchivedModalOpen: false,
|
|
||||||
inputArchivedDescripton: "",
|
|
||||||
isValidateModalVisible: false,
|
|
||||||
hasValidateAnchoring: false,
|
|
||||||
isVerifDeleteModalVisible: false,
|
|
||||||
isPreventArchiveModalOpen: false,
|
|
||||||
loadingAnchoring: false,
|
|
||||||
};
|
|
||||||
this.openArchivedModal = this.openArchivedModal.bind(this);
|
|
||||||
this.closeArchivedModal = this.closeArchivedModal.bind(this);
|
|
||||||
this.onArchivedModalAccepted = this.onArchivedModalAccepted.bind(this);
|
|
||||||
this.onPreventArchiveModalAccepted = this.onPreventArchiveModalAccepted.bind(this);
|
|
||||||
this.getCompletionNumber = this.getCompletionNumber.bind(this);
|
|
||||||
this.onArchivedDescriptionInputChange = this.onArchivedDescriptionInputChange.bind(this);
|
|
||||||
this.deleteFolder = this.deleteFolder.bind(this);
|
|
||||||
this.closeModal = this.closeModal.bind(this);
|
|
||||||
this.validateAnchoring = this.validateAnchoring.bind(this);
|
|
||||||
this.openValidateModal = this.openValidateModal.bind(this);
|
|
||||||
this.openVerifDeleteFolder = this.openVerifDeleteFolder.bind(this);
|
|
||||||
this.closeVerifDeleteFolder = this.closeVerifDeleteFolder.bind(this);
|
|
||||||
this.closePreventArchiveModal = this.closePreventArchiveModal.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Message if the user has not created any folder yet
|
|
||||||
// TODO: get the selected folder from the api in componentDidMount
|
|
||||||
public override render(): JSX.Element {
|
|
||||||
const redirectPathEditCollaborators = Module.getInstance()
|
|
||||||
.get()
|
|
||||||
.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
|
|
||||||
return (
|
|
||||||
<DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers">
|
|
||||||
{!this.props.isLoading && (
|
|
||||||
<div className={classes["root"]}>
|
|
||||||
{this.props.selectedFolder ? (
|
|
||||||
<div className={classes["folder-informations"]}>
|
|
||||||
<div className={classes["folder-header"]}>
|
|
||||||
<div className={classes["header"]}>
|
|
||||||
<div className={classes["title"]}>
|
|
||||||
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
|
|
||||||
</div>
|
|
||||||
<Link href={redirectPathEditCollaborators}>
|
|
||||||
<Button
|
|
||||||
variant={EButtonVariant.PRIMARY}
|
|
||||||
styletype={EButtonstyletype.TEXT}
|
|
||||||
rightIcon={ChevronIcon}>
|
|
||||||
Modifier les collaborateurs
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<FolderBoxInformation
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
folder={this.props.selectedFolder}
|
|
||||||
type={EFolderBoxInformationType.INFORMATIONS}
|
|
||||||
/>
|
|
||||||
<div className={classes["second-box"]}>
|
|
||||||
<FolderBoxInformation
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
folder={this.props.selectedFolder}
|
|
||||||
type={EFolderBoxInformationType.DESCRIPTION}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes["progress-bar"]}>
|
|
||||||
<QuantityProgressBar
|
|
||||||
title="Complétion du dossier"
|
|
||||||
total={100}
|
|
||||||
currentNumber={this.getCompletionNumber()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{this.doesFolderHaveCustomer() && (
|
|
||||||
<ClientSection
|
|
||||||
folder={this.props.selectedFolder}
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
getFolderCallback={this.props.getFolderCallback}
|
|
||||||
openedCustomer={this.props.openedCustomer}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!this.doesFolderHaveCustomer() && (
|
|
||||||
<ClientSection
|
|
||||||
folder={this.props.selectedFolder}
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
getFolderCallback={this.props.getFolderCallback}
|
|
||||||
openedCustomer={this.props.openedCustomer}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className={classes["button-container"]}>
|
|
||||||
<Button
|
|
||||||
variant={EButtonVariant.PRIMARY}
|
|
||||||
styletype={EButtonstyletype.OUTLINED}
|
|
||||||
onClick={this.openArchivedModal}>
|
|
||||||
Archiver le dossier
|
|
||||||
</Button>
|
|
||||||
{this.everyDocumentValidated() && !this.props.isLoading && (
|
|
||||||
<>
|
|
||||||
{this.props.isAnchored === AnchorStatus.NOT_ANCHORED && (
|
|
||||||
<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
|
|
||||||
Valider et ancrer
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{this.props.isAnchored === AnchorStatus.ANCHORING && (
|
|
||||||
<Button variant={EButtonVariant.PRIMARY} disabled>
|
|
||||||
Demande d'ancrage envoyée...
|
|
||||||
<div className={classes["loader-container"]}>
|
|
||||||
<div className={classes["loader"]}>
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
|
|
||||||
<Button
|
|
||||||
variant={EButtonVariant.PRIMARY}
|
|
||||||
onClick={() => this.downloadAnchoringProof(this.props.selectedFolder?.uid)}
|
|
||||||
disabled={this.state.loadingAnchoring}>
|
|
||||||
Télécharger la preuve d'ancrage
|
|
||||||
{this.state.loadingAnchoring && (
|
|
||||||
<div className={classes["loader-container"]}>
|
|
||||||
<div className={classes["loader"]}>
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{this.canDeleteFolder() && (
|
|
||||||
<span className={classes["delete-folder"]} onClick={this.openVerifDeleteFolder}>
|
|
||||||
<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Confirm
|
|
||||||
isOpen={this.state.isArchivedModalOpen}
|
|
||||||
onAccept={this.onArchivedModalAccepted}
|
|
||||||
onClose={this.closeArchivedModal}
|
|
||||||
closeBtn
|
|
||||||
header={"Archiver le dossier ?"}
|
|
||||||
cancelText={"Annuler"}
|
|
||||||
confirmText={"Archiver"}>
|
|
||||||
<div className={classes["modal-title"]}>
|
|
||||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
|
|
||||||
</div>
|
|
||||||
<TextAreaField
|
|
||||||
name="archived_description"
|
|
||||||
placeholder="Description"
|
|
||||||
onChange={this.onArchivedDescriptionInputChange}
|
|
||||||
/>
|
|
||||||
</Confirm>
|
|
||||||
<Confirm
|
|
||||||
isOpen={this.state.isPreventArchiveModalOpen}
|
|
||||||
onAccept={this.onPreventArchiveModalAccepted}
|
|
||||||
onClose={this.closePreventArchiveModal}
|
|
||||||
closeBtn
|
|
||||||
header={"Archiver le dossier"}
|
|
||||||
cancelText={"Annuler"}
|
|
||||||
confirmText={"Archiver"}>
|
|
||||||
<div className={classes["modal-title"]}>
|
|
||||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
|
||||||
Vous êtes en train d’archiver le dossier sans avoir l’ancré, êtes-vous sûr de vouloir le faire ?
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
<TextAreaField
|
|
||||||
name="archived_description"
|
|
||||||
placeholder="Description"
|
|
||||||
onChange={this.onArchivedDescriptionInputChange}
|
|
||||||
/>
|
|
||||||
</Confirm>
|
|
||||||
<Confirm
|
|
||||||
isOpen={this.state.isVerifDeleteModalVisible}
|
|
||||||
onAccept={this.deleteFolder}
|
|
||||||
onClose={this.closeVerifDeleteFolder}
|
|
||||||
closeBtn
|
|
||||||
header={"Êtes-vous sûr de vouloir supprimer ce dossier ?"}
|
|
||||||
cancelText={"Annuler"}
|
|
||||||
confirmText={"Confirmer"}>
|
|
||||||
<div className={classes["modal-title"]}>
|
|
||||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>Cette action sera irréversible.</Typography>
|
|
||||||
</div>
|
|
||||||
</Confirm>
|
|
||||||
<Newsletter isOpen={false} />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className={classes["no-folder-selected"]}>
|
|
||||||
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
|
|
||||||
<div className={classes["choose-a-folder"]}>
|
|
||||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
|
||||||
Sélectionnez un dossier
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{this.props.isLoading && (
|
|
||||||
<div className={classes["loader-container"]}>
|
|
||||||
<div className={classes["loader"]}>
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<Confirm
|
|
||||||
isOpen={this.state.isValidateModalVisible}
|
|
||||||
onClose={this.closeModal}
|
|
||||||
onAccept={this.validateAnchoring}
|
|
||||||
closeBtn={true}
|
|
||||||
hasContainerClosable={true}
|
|
||||||
header={
|
|
||||||
this.state.hasValidateAnchoring
|
|
||||||
? "Dossier en cours de certification"
|
|
||||||
: "Êtes-vous sûr de vouloir ancrer et certifier ce dossier ?"
|
|
||||||
}
|
|
||||||
cancelText={"Annuler"}
|
|
||||||
confirmText={"Confirmer"}
|
|
||||||
showButtons={!this.state.hasValidateAnchoring}>
|
|
||||||
<div className={classes["validate-document-container"]}>
|
|
||||||
{!this.state.hasValidateAnchoring && (
|
|
||||||
<Typography
|
|
||||||
typo={ETypo.TEXT_MD_REGULAR}
|
|
||||||
color={ETypoColor.COLOR_GENERIC_BLACK}
|
|
||||||
className={classes["validate-text"]}>
|
|
||||||
Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des
|
|
||||||
documents du dossier ainsi que le fichier de preuve d'ancrage pour les mettre dans la GED de votre logiciel
|
|
||||||
de rédaction d'actes.
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
{this.state.hasValidateAnchoring && (
|
|
||||||
<div className={classes["document-validating-container"]}>
|
|
||||||
<Typography
|
|
||||||
typo={ETypo.TEXT_MD_REGULAR}
|
|
||||||
color={ETypoColor.COLOR_GENERIC_BLACK}
|
|
||||||
className={classes["validate-text"]}>
|
|
||||||
Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de
|
|
||||||
preuve d'ancrage et le glisser dans la GED de votre logiciel de rédaction d'acte.
|
|
||||||
</Typography>
|
|
||||||
<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Confirm>
|
|
||||||
</DefaultNotaryDashboard>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private closePreventArchiveModal() {
|
|
||||||
this.setState({
|
|
||||||
isPreventArchiveModalOpen: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public openVerifDeleteFolder() {
|
|
||||||
this.setState({
|
|
||||||
isVerifDeleteModalVisible: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public closeVerifDeleteFolder() {
|
|
||||||
this.setState({
|
|
||||||
isVerifDeleteModalVisible: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private closeModal() {
|
|
||||||
this.setState({
|
|
||||||
isValidateModalVisible: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private openValidateModal() {
|
|
||||||
this.setState({
|
|
||||||
isValidateModalVisible: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private async validateAnchoring() {
|
|
||||||
this.setState({
|
|
||||||
hasValidateAnchoring: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
const timeoutDelay = 9800;
|
|
||||||
await this.anchorFolder();
|
|
||||||
setTimeout(() => {
|
|
||||||
this.setState({
|
|
||||||
isValidateModalVisible: false,
|
|
||||||
});
|
|
||||||
}, timeoutDelay);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.setState({
|
|
||||||
hasValidateAnchoring: false,
|
|
||||||
});
|
|
||||||
}, timeoutDelay + 1000);
|
|
||||||
} catch (e) {
|
|
||||||
this.setState({
|
|
||||||
isValidateModalVisible: false,
|
|
||||||
hasValidateAnchoring: false,
|
|
||||||
});
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async anchorFolder() {
|
|
||||||
if (!this.props.selectedFolder?.uid) return;
|
|
||||||
await OfficeFolderAnchors.getInstance().post(this.props.selectedFolder.uid);
|
|
||||||
this.props.getAnchoringStatus();
|
|
||||||
}
|
|
||||||
|
|
||||||
private async downloadAnchoringProof(uid?: string) {
|
|
||||||
if (!uid) return;
|
|
||||||
this.setState({ loadingAnchoring: true });
|
|
||||||
try {
|
|
||||||
const file: Blob = await OfficeFolderAnchors.getInstance().download(uid);
|
|
||||||
const url = window.URL.createObjectURL(file);
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.style.display = "none";
|
|
||||||
a.href = url;
|
|
||||||
// the filename you want
|
|
||||||
a.download = `anchoring_proof_${this.props.selectedFolder?.folder_number}_${this.props.selectedFolder?.name}.zip`;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
this.setState({ loadingAnchoring: false });
|
|
||||||
} catch (e) {
|
|
||||||
this.setState({ loadingAnchoring: false });
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private everyDocumentValidated(): boolean {
|
|
||||||
if (!this.props.selectedFolder?.documents) return false;
|
|
||||||
return (
|
|
||||||
this.props.selectedFolder?.documents?.length >= 1 &&
|
|
||||||
this.props.selectedFolder?.documents.every((document) => document.document_status === EDocumentStatus.VALIDATED)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async deleteFolder() {
|
|
||||||
if (!this.props.selectedFolder?.uid) return;
|
|
||||||
await Folders.getInstance().delete(this.props.selectedFolder.uid);
|
|
||||||
this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
|
|
||||||
}
|
|
||||||
|
|
||||||
private getCompletionNumber() {
|
|
||||||
const documents = this.props.selectedFolder?.documents;
|
|
||||||
if (!documents) return 0;
|
|
||||||
const totalDocuments = documents.length;
|
|
||||||
const refusedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.REFUSED).length ?? 0;
|
|
||||||
const askedDocuments =
|
|
||||||
documents.filter(
|
|
||||||
(document) => document.document_status === EDocumentStatus.ASKED || document.document_status === EDocumentStatus.DEPOSITED,
|
|
||||||
).length ?? 0;
|
|
||||||
const depositedDocuments = totalDocuments - askedDocuments - refusedDocuments;
|
|
||||||
const percentage = (depositedDocuments / totalDocuments) * 100;
|
|
||||||
return isNaN(percentage) ? 0 : percentage;
|
|
||||||
}
|
|
||||||
|
|
||||||
private doesFolderHaveCustomer(): boolean {
|
|
||||||
if (!this.props.selectedFolder?.customers) return false;
|
|
||||||
return this.props.selectedFolder?.customers!.length > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
private canDeleteFolder(): boolean {
|
|
||||||
return (this.props.selectedFolder?.customers?.length ?? 0) === 0 && (this.props.selectedFolder?.documents?.length ?? 0) === 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
private openArchivedModal(): void {
|
|
||||||
if (this.everyDocumentValidated() && this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN) {
|
|
||||||
this.setState({ isArchivedModalOpen: true });
|
|
||||||
} else {
|
|
||||||
this.setState({ isPreventArchiveModalOpen: true });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private closeArchivedModal(): void {
|
|
||||||
this.setState({ isArchivedModalOpen: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
private onArchivedDescriptionInputChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
|
|
||||||
this.setState({ inputArchivedDescripton: e.target.value });
|
|
||||||
}
|
|
||||||
|
|
||||||
private async onArchivedModalAccepted() {
|
|
||||||
if (!this.props.selectedFolder) return;
|
|
||||||
await Folders.getInstance().archive(this.props.selectedFolder.uid ?? "", this.state.inputArchivedDescripton);
|
|
||||||
this.closeArchivedModal();
|
|
||||||
this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async onPreventArchiveModalAccepted() {
|
|
||||||
if (!this.props.selectedFolder) return;
|
|
||||||
await Folders.getInstance().archive(this.props.selectedFolder.uid ?? "", this.state.inputArchivedDescripton);
|
|
||||||
this.closePreventArchiveModal();
|
|
||||||
this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function FolderInformation(props: IProps) {
|
|
||||||
const router = useRouter();
|
|
||||||
const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
|
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
|
||||||
const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
|
|
||||||
|
|
||||||
let { folderUid } = router.query;
|
|
||||||
const customerUid = router.query["customerUid"] as string | undefined;
|
|
||||||
folderUid = folderUid as string;
|
|
||||||
|
|
||||||
const getAnchoringStatus = useCallback(async () => {
|
|
||||||
if (!folderUid) return;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}, [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,
|
|
||||||
notes: {
|
|
||||||
include: {
|
|
||||||
customer: 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 (
|
|
||||||
<FolderInformationClass
|
|
||||||
{...props}
|
|
||||||
selectedFolderUid={folderUid}
|
|
||||||
router={router}
|
|
||||||
isAnchored={isAnchored}
|
|
||||||
isLoading={isLoading}
|
|
||||||
selectedFolder={selectedFolder}
|
|
||||||
getAnchoringStatus={getAnchoringStatus}
|
|
||||||
getFolderCallback={getFolder}
|
|
||||||
openedCustomer={customerUid}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
@ -15,10 +15,11 @@ type IProps = {
|
|||||||
progress: number;
|
progress: number;
|
||||||
onArchive: () => void;
|
onArchive: () => void;
|
||||||
anchorStatus: AnchorStatus;
|
anchorStatus: AnchorStatus;
|
||||||
|
isArchived: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function InformationSection(props: IProps) {
|
export default function InformationSection(props: IProps) {
|
||||||
const { folder, progress, onArchive, anchorStatus } = props;
|
const { folder, progress, onArchive, anchorStatus, isArchived } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={classes["root"]}>
|
<section className={classes["root"]}>
|
||||||
@ -66,12 +67,13 @@ export default function InformationSection(props: IProps) {
|
|||||||
</Link>
|
</Link>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
{!isArchived && (
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={onArchive}
|
onClick={onArchive}
|
||||||
icon={<ArchiveBoxIcon title="Archiver le dossier" />}
|
icon={<ArchiveBoxIcon title="Archiver le dossier" />}
|
||||||
variant={EIconButtonVariant.ERROR}
|
variant={EIconButtonVariant.ERROR}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -5,10 +5,11 @@ import { ArrowDownOnSquareIcon, CheckIcon } from "@heroicons/react/24/outline";
|
|||||||
type IProps = {
|
type IProps = {
|
||||||
onDownloadAnchoringProof: () => void;
|
onDownloadAnchoringProof: () => void;
|
||||||
onArchive: () => void;
|
onArchive: () => void;
|
||||||
|
isArchived: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function AnchoringAlertSuccess(props: IProps) {
|
export default function AnchoringAlertSuccess(props: IProps) {
|
||||||
const { onDownloadAnchoringProof, onArchive } = props;
|
const { onDownloadAnchoringProof, onArchive, isArchived } = props;
|
||||||
return (
|
return (
|
||||||
<Alert
|
<Alert
|
||||||
title="Félicitations ! Dossier ancré avec succès"
|
title="Félicitations ! Dossier ancré avec succès"
|
||||||
@ -19,10 +20,14 @@ export default function AnchoringAlertSuccess(props: IProps) {
|
|||||||
rightIcon: <ArrowDownOnSquareIcon />,
|
rightIcon: <ArrowDownOnSquareIcon />,
|
||||||
onClick: onDownloadAnchoringProof,
|
onClick: onDownloadAnchoringProof,
|
||||||
}}
|
}}
|
||||||
secondButton={{
|
secondButton={
|
||||||
children: "Archiver le dossier",
|
isArchived
|
||||||
onClick: onArchive,
|
? undefined
|
||||||
}}
|
: {
|
||||||
|
children: "Archiver le dossier",
|
||||||
|
onClick: onArchive,
|
||||||
|
}
|
||||||
|
}
|
||||||
variant={EAlertVariant.SUCCESS}
|
variant={EAlertVariant.SUCCESS}
|
||||||
icon={<CheckIcon />}
|
icon={<CheckIcon />}
|
||||||
/>
|
/>
|
@ -30,7 +30,7 @@ export default function AnchoringModal(props: IProps) {
|
|||||||
<Modal
|
<Modal
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
title={"Êtes-vous sûr de vouloir certifier et ancrer ce dossier ?"}
|
title={!isAnchoring ? "Êtes-vous sûr de vouloir certifier et ancrer ce dossier ?" : "Ancrage en cours..."}
|
||||||
firstButton={!isAnchoring ? { children: "Non, Annuler", onClick: onClose } : undefined}
|
firstButton={!isAnchoring ? { children: "Non, Annuler", onClick: onClose } : undefined}
|
||||||
secondButton={!isAnchoring ? { children: "Oui, certifier et ancrer", onClick: anchor } : undefined}>
|
secondButton={!isAnchoring ? { children: "Oui, certifier et ancrer", onClick: anchor } : undefined}>
|
||||||
{!isAnchoring ? (
|
{!isAnchoring ? (
|
@ -11,13 +11,13 @@ import classes from "./classes.module.scss";
|
|||||||
import ClientView from "./ClientView";
|
import ClientView from "./ClientView";
|
||||||
import InformationSection from "./InformationSection";
|
import InformationSection from "./InformationSection";
|
||||||
import NoClientView from "./NoClientView";
|
import NoClientView from "./NoClientView";
|
||||||
import AnchoringAlertInfo from "./AnchoringAlertInfo";
|
import AnchoringAlertInfo from "./elements/AnchoringAlertInfo";
|
||||||
import AnchoringModal from "./AnchoringModal";
|
import AnchoringModal from "./elements/AnchoringModal";
|
||||||
import useOpenable from "@Front/Hooks/useOpenable";
|
import useOpenable from "@Front/Hooks/useOpenable";
|
||||||
import AnchoringAlertSuccess from "./AnchoringAlertSuccess";
|
import AnchoringAlertSuccess from "./elements/AnchoringAlertSuccess";
|
||||||
import DownloadAnchoringProofModal from "./DownloadAnchoringProofModal";
|
import DownloadAnchoringProofModal from "./elements/DownloadAnchoringProofModal";
|
||||||
import RequireAnchoringModal from "./RequireAnchoringModal";
|
import RequireAnchoringModal from "./elements/RequireAnchoringModal";
|
||||||
import ArchiveModal from "./ArchiveModal";
|
import ArchiveModal from "./elements/ArchiveModal";
|
||||||
|
|
||||||
export enum AnchorStatus {
|
export enum AnchorStatus {
|
||||||
"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN",
|
"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN",
|
||||||
@ -25,9 +25,10 @@ export enum AnchorStatus {
|
|||||||
"NOT_ANCHORED" = "NOT_ANCHORED",
|
"NOT_ANCHORED" = "NOT_ANCHORED",
|
||||||
}
|
}
|
||||||
|
|
||||||
type IProps = {};
|
type IProps = { isArchived?: boolean };
|
||||||
|
|
||||||
export default function FolderInformation(props: IProps) {
|
export default function FolderInformation(props: IProps) {
|
||||||
|
const { isArchived = false } = props;
|
||||||
const [anchorStatus, setAnchorStatus] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
|
const [anchorStatus, setAnchorStatus] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||||
const [folder, setFolder] = useState<OfficeFolder | null>(null);
|
const [folder, setFolder] = useState<OfficeFolder | null>(null);
|
||||||
@ -40,10 +41,13 @@ export default function FolderInformation(props: IProps) {
|
|||||||
const folderUid = params["folderUid"] as string;
|
const folderUid = params["folderUid"] as string;
|
||||||
|
|
||||||
const progress = useMemo(() => {
|
const progress = useMemo(() => {
|
||||||
const documents = folder?.documents;
|
let total = 0;
|
||||||
if (!documents) return 0;
|
let validatedDocuments = 0;
|
||||||
const total = documents.length;
|
folder?.customers?.forEach((customer) => {
|
||||||
const validatedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.VALIDATED).length ?? 0;
|
const documents = customer.documents;
|
||||||
|
total += documents?.length ?? 0;
|
||||||
|
validatedDocuments += documents?.filter((document) => document.document_status === EDocumentStatus.VALIDATED).length ?? 0;
|
||||||
|
});
|
||||||
if (total === 0) return 0;
|
if (total === 0) return 0;
|
||||||
const percentage = (validatedDocuments / total) * 100;
|
const percentage = (validatedDocuments / total) * 100;
|
||||||
return isNaN(percentage) ? 0 : percentage;
|
return isNaN(percentage) ? 0 : percentage;
|
||||||
@ -121,15 +125,25 @@ export default function FolderInformation(props: IProps) {
|
|||||||
}, [anchorStatus, archiveModal, requireAnchoringModal]);
|
}, [anchorStatus, archiveModal, requireAnchoringModal]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers">
|
<DefaultNotaryDashboard title={"Dossier"} isArchived={isArchived} mobileBackText="Retour aux dossiers">
|
||||||
{!isLoading && (
|
{!isLoading && (
|
||||||
<div className={classes["root"]}>
|
<div className={classes["root"]}>
|
||||||
<InformationSection folder={folder} progress={progress} onArchive={onArchive} anchorStatus={anchorStatus} />
|
<InformationSection
|
||||||
|
folder={folder}
|
||||||
|
progress={progress}
|
||||||
|
onArchive={onArchive}
|
||||||
|
anchorStatus={anchorStatus}
|
||||||
|
isArchived={isArchived}
|
||||||
|
/>
|
||||||
{progress === 100 && anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
{progress === 100 && anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
||||||
<AnchoringAlertInfo onAnchor={anchoringModal.open} />
|
<AnchoringAlertInfo onAnchor={anchoringModal.open} />
|
||||||
)}
|
)}
|
||||||
{anchorStatus === AnchorStatus.VERIFIED_ON_CHAIN && (
|
{anchorStatus === AnchorStatus.VERIFIED_ON_CHAIN && (
|
||||||
<AnchoringAlertSuccess onDownloadAnchoringProof={downloadAnchoringProofModal.open} onArchive={archiveModal.open} />
|
<AnchoringAlertSuccess
|
||||||
|
onDownloadAnchoringProof={downloadAnchoringProofModal.open}
|
||||||
|
onArchive={archiveModal.open}
|
||||||
|
isArchived={isArchived}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{folder && !doesFolderHaveClient && <NoClientView folder={folder} anchorStatus={anchorStatus} />}
|
{folder && !doesFolderHaveClient && <NoClientView folder={folder} anchorStatus={anchorStatus} />}
|
||||||
{folder && doesFolderHaveClient && <ClientView folder={folder} anchorStatus={anchorStatus} />}
|
{folder && doesFolderHaveClient && <ClientView folder={folder} anchorStatus={anchorStatus} />}
|
||||||
|
@ -1,25 +0,0 @@
|
|||||||
@import "@Themes/constants.scss";
|
|
||||||
|
|
||||||
.root {
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: 32px;
|
|
||||||
|
|
||||||
.no-client {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 72px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.client {
|
|
||||||
display: grid;
|
|
||||||
gap: 32px;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,74 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import classes from "./classes.module.scss";
|
|
||||||
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
|
||||||
import Typography, { ETypo, ETypoColor } 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;
|
|
||||||
getFolderCallback: () => Promise<void>;
|
|
||||||
};
|
|
||||||
type IState = {
|
|
||||||
openedCustomer: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class ClientSection extends React.Component<IProps, IState> {
|
|
||||||
public constructor(props: IProps) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
openedCustomer: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
this.changeUserFolder = this.changeUserFolder.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
public override render(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<div className={classes["root"]}>
|
|
||||||
{this.doesFolderHaveCustomer() ? (
|
|
||||||
<>
|
|
||||||
<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className={classes["no-client"]}>
|
|
||||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
|
||||||
Aucun client dans ce dossier
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private renderCustomerFolders() {
|
|
||||||
const output = this.props.folder.customers?.map((customer) => {
|
|
||||||
if (!customer) return null;
|
|
||||||
return (
|
|
||||||
<UserFolder
|
|
||||||
folder={this.props.folder}
|
|
||||||
customer={customer}
|
|
||||||
key={customer.uid}
|
|
||||||
isOpened={this.state.openedCustomer === customer.uid}
|
|
||||||
onChange={this.changeUserFolder}
|
|
||||||
anchorStatus={this.props.anchorStatus}
|
|
||||||
isArchived
|
|
||||||
getFolderCallback={this.props.getFolderCallback}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
return output ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
private changeUserFolder(uid: string) {
|
|
||||||
this.setState({
|
|
||||||
openedCustomer: uid === this.state.openedCustomer ? "" : uid,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private doesFolderHaveCustomer(): boolean {
|
|
||||||
if (!this.props.folder?.customers) return false;
|
|
||||||
return this.props.folder?.customers!.length > 0;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,309 +1,5 @@
|
|||||||
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
import FolderInformation from "../../Folder/FolderInformation";
|
||||||
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
|
|
||||||
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
||||||
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
|
|
||||||
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
|
|
||||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
||||||
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
|
||||||
import Module from "@Front/Config/Module";
|
|
||||||
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
|
||||||
import { NextRouter, useRouter } from "next/router";
|
|
||||||
|
|
||||||
import BasePage from "../../Base";
|
export default function FolderInformationArchived() {
|
||||||
import classes from "./classes.module.scss";
|
return <FolderInformation isArchived />;
|
||||||
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;
|
|
||||||
selectedFolder: OfficeFolder | null;
|
|
||||||
isAnchored: AnchorStatus;
|
|
||||||
getFolderCallback: () => Promise<void>;
|
|
||||||
};
|
|
||||||
|
|
||||||
type IState = {
|
|
||||||
selectedFolder: OfficeFolder | null;
|
|
||||||
isArchivedModalOpen: boolean;
|
|
||||||
loadingAnchoring: boolean;
|
|
||||||
};
|
|
||||||
class FolderInformationClass extends BasePage<IPropsClass, IState> {
|
|
||||||
public constructor(props: IPropsClass) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
selectedFolder: null,
|
|
||||||
isArchivedModalOpen: false,
|
|
||||||
loadingAnchoring: false,
|
|
||||||
};
|
|
||||||
this.onSelectedFolder = this.onSelectedFolder.bind(this);
|
|
||||||
this.openArchivedModal = this.openArchivedModal.bind(this);
|
|
||||||
this.closeArchivedModal = this.closeArchivedModal.bind(this);
|
|
||||||
this.restoreFolder = this.restoreFolder.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Message if the user has not created any folder yet
|
|
||||||
// TODO: get the selected folder from the api in componentDidMount
|
|
||||||
public override render(): JSX.Element {
|
|
||||||
const redirectPathEditCollaborators = Module.getInstance()
|
|
||||||
.get()
|
|
||||||
.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
|
|
||||||
return (
|
|
||||||
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={true}>
|
|
||||||
{!this.props.isLoading && (
|
|
||||||
<div className={classes["root"]}>
|
|
||||||
{this.state.selectedFolder ? (
|
|
||||||
<div className={classes["folder-informations"]}>
|
|
||||||
<div className={classes["folder-header"]}>
|
|
||||||
<div className={classes["header"]}>
|
|
||||||
<div className={classes["title"]}>
|
|
||||||
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
|
|
||||||
</div>
|
|
||||||
<Link href={redirectPathEditCollaborators}>
|
|
||||||
<Button
|
|
||||||
variant={EButtonVariant.PRIMARY}
|
|
||||||
styletype={EButtonstyletype.TEXT}
|
|
||||||
rightIcon={<ChevronIcon />}>
|
|
||||||
Modifier les collaborateurs
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<FolderBoxInformation
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
folder={this.state.selectedFolder}
|
|
||||||
isArchived
|
|
||||||
type={EFolderBoxInformationType.INFORMATIONS}
|
|
||||||
/>
|
|
||||||
<div className={classes["second-box"]}>
|
|
||||||
<FolderBoxInformation
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
folder={this.state.selectedFolder}
|
|
||||||
isArchived
|
|
||||||
type={EFolderBoxInformationType.DESCRIPTION}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes["second-box"]}>
|
|
||||||
<FolderBoxInformation
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
folder={this.state.selectedFolder}
|
|
||||||
isArchived
|
|
||||||
type={EFolderBoxInformationType.ARCHIVED_DESCRIPTION}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={classes["progress-bar"]}>
|
|
||||||
<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
|
|
||||||
</div>
|
|
||||||
{this.doesFolderHaveCustomer() && (
|
|
||||||
<ClientSection
|
|
||||||
folder={this.state.selectedFolder}
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
getFolderCallback={this.props.getFolderCallback}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!this.doesFolderHaveCustomer() && (
|
|
||||||
<ClientSection
|
|
||||||
folder={this.state.selectedFolder}
|
|
||||||
anchorStatus={this.props.isAnchored}
|
|
||||||
getFolderCallback={this.props.getFolderCallback}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className={classes["button-container"]}>
|
|
||||||
<Button
|
|
||||||
variant={EButtonVariant.PRIMARY}
|
|
||||||
styletype={EButtonstyletype.OUTLINED}
|
|
||||||
onClick={this.restoreFolder}>
|
|
||||||
Restaurer le dossier
|
|
||||||
</Button>
|
|
||||||
{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
|
|
||||||
<Button
|
|
||||||
variant={EButtonVariant.PRIMARY}
|
|
||||||
onClick={() => this.downloadAnchoringProof(this.props.selectedFolder?.uid)}
|
|
||||||
disabled={this.state.loadingAnchoring}>
|
|
||||||
Télécharger la preuve d'ancrage
|
|
||||||
{this.state.loadingAnchoring && (
|
|
||||||
<div className={classes["loader-container"]}>
|
|
||||||
<div className={classes["loader"]}>
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className={classes["no-folder-selected"]}>
|
|
||||||
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
|
|
||||||
<div className={classes["choose-a-folder"]}>
|
|
||||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
|
||||||
Aucun dossier sélectionné
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{this.props.isLoading && (
|
|
||||||
<div className={classes["loader-container"]}>
|
|
||||||
<div className={classes["loader"]}>
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</DefaultNotaryDashboard>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
public override async componentDidMount() {
|
|
||||||
const folder = await this.getFolder();
|
|
||||||
this.setState({ selectedFolder: folder });
|
|
||||||
}
|
|
||||||
|
|
||||||
private doesFolderHaveCustomer(): boolean {
|
|
||||||
return this.state.selectedFolder?.customers !== undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
private onSelectedFolder(folder: OfficeFolder): void {
|
|
||||||
this.setState({ selectedFolder: folder });
|
|
||||||
}
|
|
||||||
|
|
||||||
private async restoreFolder() {
|
|
||||||
if (!this.state.selectedFolder) return;
|
|
||||||
await Folders.getInstance().restore(this.state.selectedFolder.uid ?? "");
|
|
||||||
this.props.router.push(
|
|
||||||
Module.getInstance()
|
|
||||||
.get()
|
|
||||||
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private openArchivedModal(): void {
|
|
||||||
this.setState({ isArchivedModalOpen: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
private closeArchivedModal(): void {
|
|
||||||
this.setState({ isArchivedModalOpen: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
private async downloadAnchoringProof(uid?: string) {
|
|
||||||
if (!uid) return;
|
|
||||||
this.setState({ loadingAnchoring: true });
|
|
||||||
try {
|
|
||||||
const file: Blob = await OfficeFolderAnchors.getInstance().download(uid);
|
|
||||||
const url = window.URL.createObjectURL(file);
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.style.display = "none";
|
|
||||||
a.href = url;
|
|
||||||
// the filename you want
|
|
||||||
a.download = `anchoring_proof_${this.props.selectedFolder?.folder_number}_${this.props.selectedFolder?.name}.zip`;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
this.setState({ loadingAnchoring: false });
|
|
||||||
} catch (e) {
|
|
||||||
this.setState({ loadingAnchoring: false });
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async getFolder(): Promise<OfficeFolder> {
|
|
||||||
const query = {
|
|
||||||
q: {
|
|
||||||
deed: { include: { deed_type: "true" } },
|
|
||||||
office: "true",
|
|
||||||
customers: { include: { contact: true } },
|
|
||||||
notes: "true",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const folder = await Folders.getInstance().getByUid(this.props.selectedFolderUid, query);
|
|
||||||
return folder;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function FolderInformation(props: IProps) {
|
|
||||||
const router = useRouter();
|
|
||||||
const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
|
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
|
||||||
const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
|
|
||||||
|
|
||||||
let { folderUid } = router.query;
|
|
||||||
folderUid = folderUid as string;
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<FolderInformationClass
|
|
||||||
{...props}
|
|
||||||
selectedFolderUid={folderUid}
|
|
||||||
selectedFolder={selectedFolder}
|
|
||||||
router={router}
|
|
||||||
isLoading={isLoading}
|
|
||||||
isAnchored={isAnchored}
|
|
||||||
getFolderCallback={getFolder}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user