@@ -49,9 +54,11 @@ export default function ClientBox(props: IProps) {
className={classes["delete-button"]}
variant={EButtonVariant.ERROR}
styletype={EButtonstyletype.TEXT}
- rightIcon={}>
+ rightIcon={}
+ onClick={open}>
Supprimer le client
+ {}} />
);
}
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx
new file mode 100644
index 00000000..08f66894
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx
@@ -0,0 +1,37 @@
+import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
+import Modal from "@Front/Components/DesignSystem/Modal";
+import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import React, { useCallback } from "react";
+
+type IProps = {
+ documentUid: string;
+ isOpen: boolean;
+ onClose?: () => void;
+
+ onDeleteSuccess: (uid: string) => void;
+};
+
+export default function DeleteAskedDocumentModal(props: IProps) {
+ const { isOpen, onClose, documentUid, onDeleteSuccess } = props;
+
+ const onDelete = useCallback(
+ () =>
+ Documents.getInstance()
+ .delete(documentUid)
+ .then(() => onDeleteSuccess(documentUid))
+ .then(onClose)
+ .catch((error) => console.warn(error)),
+ [documentUid, onClose, onDeleteSuccess],
+ );
+
+ return (
+
+ Cette action annulera la demande du document en cours.
+
+ );
+}
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
index 73f090b5..642ed5e6 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
@@ -1,16 +1,17 @@
-import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
import IconButton from "@Front/Components/DesignSystem/IconButton";
import Table from "@Front/Components/DesignSystem/Table";
import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import useOpenable from "@Front/Hooks/useOpenable";
import { ArrowDownTrayIcon, EyeIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import { useCallback, useEffect, useMemo, useState } from "react";
import classes from "./classes.module.scss";
+import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
type IProps = {
documents: Document[];
@@ -39,20 +40,21 @@ const header: readonly IHead[] = [
export default function DocumentTables(props: IProps) {
const { documents: documentsProps, totalOfDocumentTypes } = props;
const [documents, setDocuments] = useState
(documentsProps);
+ const [documentUid, setDocumentUid] = useState(null);
+
+ const deleteAskedOocumentModal = useOpenable();
useEffect(() => {
setDocuments(documentsProps);
}, [documentsProps]);
- const deleteAskedDocument = useCallback(
+ const openDeleteAskedDocumentModal = useCallback(
(uid: string | undefined) => {
if (!uid) return;
- return Documents.getInstance()
- .delete(uid)
- .then(() => setDocuments(documents.filter((document) => document.uid !== uid)))
- .catch((error) => console.warn(error));
+ setDocumentUid(uid);
+ deleteAskedOocumentModal.open();
},
- [documents],
+ [deleteAskedOocumentModal],
);
const askDocuments: IRowProps[] = useMemo(
@@ -67,11 +69,11 @@ export default function DocumentTables(props: IProps) {
),
created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
- actions: deleteAskedDocument(document.uid)} />} />,
+ actions: openDeleteAskedDocumentModal(document.uid)} />} />,
};
})
.filter((document) => document !== null) as IRowProps[],
- [deleteAskedDocument, documents],
+ [documents, openDeleteAskedDocumentModal],
);
const toValidateDocuments: IRowProps[] = useMemo(
@@ -136,7 +138,11 @@ export default function DocumentTables(props: IProps) {
[documents],
);
- const progressValidated = useMemo(() => validatedDocuments.length / totalOfDocumentTypes, [validatedDocuments, totalOfDocumentTypes]);
+ const progressValidated = useMemo(() => {
+ if (totalOfDocumentTypes === 0) return 100;
+ if (validatedDocuments.length === 0) return 0;
+ return (validatedDocuments.length / totalOfDocumentTypes) * 100;
+ }, [validatedDocuments, totalOfDocumentTypes]);
return (
@@ -150,6 +156,14 @@ export default function DocumentTables(props: IProps) {
{toValidateDocuments.length > 0 &&
}
{validatedDocuments.length > 0 &&
}
{refusedDocuments.length > 0 &&
}
+ {documentUid && (
+
setDocuments(documents.filter((document) => document.uid !== uid))}
+ documentUid={documentUid}
+ />
+ )}
- } variant={EIconButtonVariant.NEUTRAL} />
- }
- variant={EIconButtonVariant.NEUTRAL}
- />
+
+ } variant={EIconButtonVariant.NEUTRAL} />
+
+
+ }
+ variant={EIconButtonVariant.NEUTRAL}
+ />
+
} variant={EIconButtonVariant.ERROR} />