redirect view document page

This commit is contained in:
Max S 2024-07-23 12:05:46 +02:00
parent 26d217b6ae
commit 8f63ab3d30
7 changed files with 61 additions and 34 deletions

View File

@ -5,18 +5,20 @@ import Table from "@Front/Components/DesignSystem/Table";
import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable"; import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag"; import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Module from "@Front/Config/Module";
import useOpenable from "@Front/Hooks/useOpenable"; import useOpenable from "@Front/Hooks/useOpenable";
import { ArrowDownTrayIcon, EyeIcon, TrashIcon } from "@heroicons/react/24/outline"; import { ArrowDownTrayIcon, EyeIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Document, File } from "le-coffre-resources/dist/Customer"; import { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal"; import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
import FilePreviewModal from "./FilePreviewModal";
type IProps = { type IProps = {
documents: Document[]; documents: Document[];
folderUid: string;
}; };
const header: readonly IHead[] = [ const header: readonly IHead[] = [
@ -46,11 +48,9 @@ const tradDocumentStatus: Record<EDocumentStatus, string> = {
}; };
export default function DocumentTables(props: IProps) { export default function DocumentTables(props: IProps) {
const { documents: documentsProps } = props; const { documents: documentsProps, folderUid } = props;
const [documents, setDocuments] = useState<Document[]>(documentsProps); const [documents, setDocuments] = useState<Document[]>(documentsProps);
const [documentUid, setDocumentUid] = useState<string | null>(null); const [documentUid, setDocumentUid] = useState<string | null>(null);
const previewModal = useOpenable();
const [file, setFile] = useState<{ file: File; blob: Blob } | null>(null);
const deleteAskedOocumentModal = useOpenable(); const deleteAskedOocumentModal = useOpenable();
@ -67,19 +67,6 @@ export default function DocumentTables(props: IProps) {
[deleteAskedOocumentModal], [deleteAskedOocumentModal],
); );
const onPreview = useCallback(
(document: Document) => {
const file = document.files?.[0];
if (!file || !file?.uid) return;
return Files.getInstance()
.download(file.uid)
.then((blob) => setFile({ file, blob }))
.then(() => previewModal.open())
.catch((e) => console.warn(e));
},
[previewModal],
);
const onDownload = useCallback((doc: Document) => { const onDownload = useCallback((doc: Document) => {
const file = doc.files?.[0]; const file = doc.files?.[0];
if (!file || !file?.uid) return; if (!file || !file?.uid) return;
@ -136,11 +123,19 @@ export default function DocumentTables(props: IProps) {
/> />
), ),
created_at: document.created_at, created_at: document.created_at,
actions: <IconButton onClick={() => onPreview(document)} icon={<EyeIcon />} />, actions: (
<Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.ViewDocuments.props.path.replace("[folderUid]", folderUid)
.replace("[documentUid]", document.uid ?? "")}>
<IconButton icon={<EyeIcon />} />
</Link>
),
}; };
}) })
.filter((document) => document !== null) as IRowProps[], .filter((document) => document !== null) as IRowProps[],
[documents, onPreview], [documents, folderUid],
); );
const validatedDocuments: IRowProps[] = useMemo( const validatedDocuments: IRowProps[] = useMemo(
@ -161,14 +156,20 @@ export default function DocumentTables(props: IProps) {
created_at: document.created_at, created_at: document.created_at,
actions: ( actions: (
<div className={classes["actions"]}> <div className={classes["actions"]}>
<IconButton onClick={() => onPreview(document)} icon={<EyeIcon />} /> <Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.ViewDocuments.props.path.replace("[folderUid]", folderUid)
.replace("[documentUid]", document.uid ?? "")}>
<IconButton icon={<EyeIcon />} />
</Link>
<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} /> <IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
</div> </div>
), ),
}; };
}) })
.filter((document) => document !== null) as IRowProps[], .filter((document) => document !== null) as IRowProps[],
[documents, onDownload, onPreview], [documents, folderUid, onDownload],
); );
const refusedDocuments: IRowProps[] = useMemo( const refusedDocuments: IRowProps[] = useMemo(
@ -220,14 +221,6 @@ export default function DocumentTables(props: IProps) {
documentUid={documentUid} documentUid={documentUid}
/> />
)} )}
{file && (
<FilePreviewModal
isOpen={previewModal.isOpen}
onClose={previewModal.close}
file={file.file}
url={URL.createObjectURL(file.blob)}
/>
)}
</div> </div>
); );
} }

View File

@ -98,7 +98,11 @@ export default function ClientView(props: IProps) {
</Link> </Link>
)} )}
</div> </div>
{doesCustomerHaveDocument ? <DocumentTables documents={customer.documents ?? []} /> : <NoDocument />} {doesCustomerHaveDocument ? (
<DocumentTables documents={customer.documents ?? []} folderUid={folder?.uid ?? ""} />
) : (
<NoDocument />
)}
</div> </div>
</section> </section>
); );

View File

@ -105,9 +105,11 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
)} )}
</div> </div>
<div className={classes["footer"]}> <div className={classes["footer"]}>
{this.state.document?.document_status === EDocumentStatus.DEPOSITED && (
<div className={classes["alert"]}> <div className={classes["alert"]}>
<MessageBox type={"info"}>Veuillez valider le document afin de pouvoir le télécharger.</MessageBox> <MessageBox type={"info"}>Veuillez valider le document afin de pouvoir le télécharger.</MessageBox>
</div> </div>
)}
{/* {this.state.document?.document_type?.name === "Document d'identité" && ( {/* {this.state.document?.document_type?.name === "Document d'identité" && (
<div className={classes["ocr-container"]}> <div className={classes["ocr-container"]}>
<OcrResult percentage={this.state.validatedPercentage} /> <OcrResult percentage={this.state.validatedPercentage} />

View File

@ -66,6 +66,13 @@
"labelKey": "ask_documents" "labelKey": "ask_documents"
} }
}, },
"ViewDocuments": {
"enabled": true,
"props": {
"path": "/folders/[folderUid]/documents/[documentUid]",
"labelKey": "ask_documents"
}
},
"EditDescription": { "EditDescription": {
"enabled": true, "enabled": true,
"props": { "props": {

View File

@ -66,6 +66,13 @@
"labelKey": "ask_documents" "labelKey": "ask_documents"
} }
}, },
"ViewDocuments": {
"enabled": true,
"props": {
"path": "/folders/[folderUid]/documents/[documentUid]",
"labelKey": "ask_documents"
}
},
"EditDescription": { "EditDescription": {
"enabled": true, "enabled": true,
"props": { "props": {

View File

@ -66,6 +66,13 @@
"labelKey": "ask_documents" "labelKey": "ask_documents"
} }
}, },
"ViewDocuments": {
"enabled": true,
"props": {
"path": "/folders/[folderUid]/documents/[documentUid]",
"labelKey": "ask_documents"
}
},
"EditDescription": { "EditDescription": {
"enabled": true, "enabled": true,
"props": { "props": {

View File

@ -66,6 +66,13 @@
"labelKey": "ask_documents" "labelKey": "ask_documents"
} }
}, },
"ViewDocuments": {
"enabled": true,
"props": {
"path": "/folders/[folderUid]/documents/[documentUid]",
"labelKey": "ask_documents"
}
},
"EditDescription": { "EditDescription": {
"enabled": true, "enabled": true,
"props": { "props": {