✨ redirect view document page
This commit is contained in:
parent
26d217b6ae
commit
8f63ab3d30
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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} />
|
||||||
|
@ -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": {
|
||||||
|
@ -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": {
|
||||||
|
@ -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": {
|
||||||
|
@ -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": {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user