diff --git a/src/front/Assets/Icons/left-arrow.svg b/src/front/Assets/Icons/left-arrow.svg new file mode 100644 index 00000000..4ac63441 --- /dev/null +++ b/src/front/Assets/Icons/left-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/front/Assets/Icons/right-arrow.svg b/src/front/Assets/Icons/right-arrow.svg new file mode 100644 index 00000000..5704297c --- /dev/null +++ b/src/front/Assets/Icons/right-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/front/Components/Layouts/DesignSystem/dummyData.ts b/src/front/Components/Layouts/DesignSystem/dummyData.ts index 98dd4ed3..fa647ccb 100644 --- a/src/front/Components/Layouts/DesignSystem/dummyData.ts +++ b/src/front/Components/Layouts/DesignSystem/dummyData.ts @@ -106,7 +106,7 @@ export const document: Document = { }; export const fileMock: File = { - uid: "super_file_uid", + uid: "super_file_uid_1", created_at: new Date(), updated_at: new Date(), document: document, @@ -114,6 +114,15 @@ export const fileMock: File = { "https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf", }; +export const fileMock2: File = { + uid: "super_file_uid_2", + created_at: new Date(), + updated_at: new Date(), + document: document, + file_path: + "https://minteed-prod-euwest3-s3.s3.eu-west-3.amazonaws.com/Qm_Wq_En1_DCA_8yt_RX_Qx_QFA_9_Fm_ZKZH_Qqb_VH_1_Q_Mnv_G_Jtt1_FS_Xp_2a35a36e19", +}; + export const documentPending: Document = { uid: "fzefeazdagrtetrury", depositor: customer, @@ -122,7 +131,7 @@ export const documentPending: Document = { document_type: docType, updated_at: new Date(), created_at: new Date(), - files: [fileMock], + files: [fileMock2], }; export const documentDeposited: Document = { diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss index 1542ed78..752f6dcc 100644 --- a/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss +++ b/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss @@ -9,10 +9,20 @@ margin-top: 32px; } - .file-container { - min-height: 700px; + .document-container { margin-top: 32px; - @media (max-width: $screen-s) { + gap: 64px; + display: flex; + justify-content: space-between; + align-items: center; + + .arrow-container{ + cursor: pointer; + } + + .file-container{ + min-height: 700px; + flex: 1; } } diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx index 77fcd08e..50e1ad52 100644 --- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx @@ -1,3 +1,5 @@ +import "reflect-metadata"; + import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import CheckBox from "@Front/Components/DesignSystem/CheckBox"; @@ -9,23 +11,30 @@ import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import { Document } from "le-coffre-resources/dist/Customer"; import Image from "next/image"; -import { useRouter } from "next/router"; +import { NextRouter, useRouter } from "next/router"; import React from "react"; import BasePage from "../../Base"; import classes from "./classes.module.scss"; -import "reflect-metadata"; +import LeftArrowIcon from "@Assets/Icons/left-arrow.svg"; +import RightArrowIcon from "@Assets/Icons/right-arrow.svg"; type IProps = {}; type IPropsClass = { - selectedDocument: Document | null; + documentsList: Document[]; + selectedDocument: Document | null; + router: NextRouter; + folderUid: string; }; + type IState = { isRefuseModalVisible: boolean; isValidateModalVisible: boolean; refuseText: string; hasValidateAnchoring: boolean; + selectedDocument: Document | null; + selectedDocumentIndex: number; }; class ViewDocumentsClass extends BasePage { @@ -37,6 +46,8 @@ class ViewDocumentsClass extends BasePage { isRefuseModalVisible: false, refuseText: "", hasValidateAnchoring: false, + selectedDocument: null, + selectedDocumentIndex: -1 }; this.closeModals = this.closeModals.bind(this); @@ -49,18 +60,26 @@ class ViewDocumentsClass extends BasePage { public override render(): JSX.Element | null { return ( - {this.props.selectedDocument && ( + {this.state.selectedDocument && (
App 23 rue Torus Toulon - {this.props.selectedDocument.document_type.name} + {this.state.selectedDocument.document_type.name} -
- {this.props.selectedDocument.files?.map((file) => ( - - ))} +
+
+ left arrow +
+
+ {this.state.selectedDocument.files?.map((file) => ( + + ))} +
+
+ right arrow +
)} - {!this.props.selectedDocument && ( + {!this.state.selectedDocument && (
Document non trouvé @@ -128,6 +147,43 @@ class ViewDocumentsClass extends BasePage { ); } + override componentDidMount(): void { + if(!this.props.selectedDocument) return; + this.setState({ + selectedDocument: this.props.selectedDocument, + selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid), + }); + } + + override componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any): void { + if (prevProps.selectedDocument !== this.props.selectedDocument) { + this.setState({ + selectedDocument: this.props.selectedDocument, + selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid), + }); + } + } + + private goToPrevious() { + return () => { + const index = this.state.selectedDocumentIndex - 1; + if (index < 0) { + return; + } + this.props.router.push(`/folder/${this.props.folderUid}/document/${this.props.documentsList[index]!.uid}`) + }; + } + + private goToNext() { + return () => { + const index = this.state.selectedDocumentIndex + 1; + if (index >= this.props.documentsList.length) { + return; + } + this.props.router.push(`/folder/${this.props.folderUid}/document/${this.props.documentsList[index]!.uid}`) + } + } + private validateAnchoring() { this.setState({ hasValidateAnchoring: true, @@ -163,12 +219,10 @@ class ViewDocumentsClass extends BasePage { export default function ViewDocuments(props: IProps) { const router = useRouter(); let { folderUid, documentUid } = router.query; - folderUid = folderUid as string; const folder = folders[0]!; const documents = folder.documents!; const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null; - - return ; + return ; }