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

🔨 handle better fetching documents in documents tables

Browse Source
This commit is contained in:
Max S 2024-09-13 13:09:51 +02:00
parent d6456199cf
commit 3044bc1608
2 changed files with 45 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
View File

@ -19,10 +19,13 @@ import classes from "./classes.module.scss";
import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
import DeleteSentDocumentModal from "./DeleteSentDocumentModal";
import FilesNotary from "@Front/Api/LeCoffreApi/Notary/FilesNotary/Files";
import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
import NoDocument from "../NoDocument";
import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
type IProps = {
documents: Document[];
documentsNotary: DocumentNotary[];
customerUid: string;
folderUid: string;
};
@ -34,23 +37,46 @@ const tradDocumentStatus: Record<EDocumentStatus, string> = {
};
export default function DocumentTables(props: IProps) {
const { documents: documentsProps, folderUid, documentsNotary } = props;
const [documents, setDocuments] = useState<Document[]>(documentsProps);
const [documentUid, setDocumentUid] = useState<string | null>(null);
const { folderUid, customerUid } = props;
const [documents, setDocuments] = useState<Document[]>([]);
const [documentsNotary, setDocumentsNotary] = useState<DocumentNotary[]>([]);
const [focusedDocumentUid, setFocusedDocumentUid] = useState<string | null>(null);
const isMobile = useMediaQuery("(max-width:524px)");
const deleteAskedDocumentModal = useOpenable();
const deleteSentDocumentModal = useOpenable();
const fetchDocuments = useCallback(
() =>
Documents.getInstance()
.get({
where: { folder: { uid: folderUid }, depositor: { uid: customerUid } },
include: { files: true, document_type: true },
})
.then(setDocuments)
.catch(console.warn),
[customerUid, folderUid],
);
const fetchDocumentsNotary = useCallback(
() =>
DocumentsNotary.getInstance()
.get({ where: { folder: { uid: folderUid }, customer: { uid: customerUid } }, include: { files: true } })
.then(setDocumentsNotary)
.catch(console.warn),
[customerUid, folderUid],
);
useEffect(() => {
setDocuments(documentsProps);
}, [documentsProps]);
fetchDocuments();
fetchDocumentsNotary();
}, [fetchDocuments, fetchDocumentsNotary]);
const openDeleteAskedDocumentModal = useCallback(
(uid: string | undefined) => {
if (!uid) return;
setDocumentUid(uid);
setFocusedDocumentUid(uid);
deleteAskedDocumentModal.open();
},
[deleteAskedDocumentModal],
@ -59,7 +85,7 @@ export default function DocumentTables(props: IProps) {
const openDeleteSentDocumentModal = useCallback(
(uid: string | undefined) => {
if (!uid) return;
setDocumentUid(uid);
setFocusedDocumentUid(uid);
deleteSentDocumentModal.open();
},
[deleteSentDocumentModal],
@ -237,9 +263,9 @@ export default function DocumentTables(props: IProps) {
return (validatedDocuments.length / total) * 100;
}, [askedDocuments.length, refusedDocuments.length, toValidateDocuments.length, validatedDocuments.length]);
const handleDelete = useCallback((_documentUid: string) => {
window.location.reload();
}, []);
console.log({ documents });
if (documents.length === 0 && documentsNotary.length === 0) return <NoDocument />;
return (
<div className={classes["root"]}>
@ -254,19 +280,19 @@ export default function DocumentTables(props: IProps) {
{validatedDocuments.length > 0 && <Table header={getHeader("Validé le", isMobile)} rows={validatedDocuments} />}
{refusedDocuments.length > 0 && <Table header={getHeader("Demandé le", isMobile)} rows={refusedDocuments} />}
{sentDocuments.length > 0 && <Table header={getHeader("Envoyé le", isMobile)} rows={sentDocuments} />}
{documentUid && (
{focusedDocumentUid && (
<>
<DeleteAskedDocumentModal
isOpen={deleteAskedDocumentModal.isOpen}
onClose={deleteAskedDocumentModal.close}
onDeleteSuccess={handleDelete}
documentUid={documentUid}
onDeleteSuccess={fetchDocuments}
documentUid={focusedDocumentUid}
/>
<DeleteSentDocumentModal
isOpen={deleteSentDocumentModal.isOpen}
onClose={deleteSentDocumentModal.close}
onDeleteSuccess={handleDelete}
documentUid={documentUid}
onDeleteSuccess={fetchDocumentsNotary}
documentUid={focusedDocumentUid}
/>
</>
)}

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

@ -1,4 +1,3 @@
import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Tabs from "@Front/Components/Elements/Tabs";
@ -7,16 +6,14 @@ import { DocumentIcon, UserPlusIcon } from "@heroicons/react/24/outline";
import Customer from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { DocumentNotary } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import { AnchorStatus } from "..";
import classes from "./classes.module.scss";
import ClientBox from "./ClientBox";
import DocumentTables from "./DocumentTables";
import EmailReminder from "./EmailReminder";
import NoDocument from "./NoDocument";
type IProps = {
folder: OfficeFolder;
@ -27,7 +24,6 @@ export type ICustomer = Customer & { id: string };
export default function ClientView(props: IProps) {
const { folder, anchorStatus } = props;
const [documentsNotary, setDocumentsNotary] = useState<DocumentNotary[]>([]);
const customers: ICustomer[] = useMemo(
() =>
@ -77,12 +73,6 @@ export default function ClientView(props: IProps) {
[folder],
);
useEffect(() => {
DocumentsNotary.getInstance()
.get({ where: { folder: { uid: folder.uid }, customer: { uid: customer.uid } }, include: { files: true } })
.then((documentsNotary) => setDocumentsNotary(documentsNotary));
}, [customer.uid, folder]);
return (
<section className={classes["root"]}>
<div className={classes["tab-container"]}>
@ -132,11 +122,7 @@ export default function ClientView(props: IProps) {
</div>
</div>
{doesCustomerHaveDocument || documentsNotary.length > 0 ? (
<DocumentTables documents={customer.documents ?? []} documentsNotary={documentsNotary} folderUid={folder?.uid ?? ""} />
) : (
<NoDocument />
)}
{customer.uid && folder.uid && <DocumentTables customerUid={customer.uid} folderUid={folder.uid} />}
</div>
</section>
);