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

✨ Multiple files working

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-24 15:38:55 +02:00
parent 0a151f0fb1
commit fd574305b4
5 changed files with 97 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Assets/Icons/left-arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 6L9 12L15 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 211 B

3
src/front/Assets/Icons/right-arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 210 B

13
src/front/Components/Layouts/DesignSystem/dummyData.ts
View File

@ -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 = {

16
src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss
View File

@ -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;
}
}

72
src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
View File

@ -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 = {
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<IPropsClass, IState> {
@ -37,6 +46,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
isRefuseModalVisible: false,
refuseText: "",
hasValidateAnchoring: false,
selectedDocument: null,
selectedDocumentIndex: -1
};
this.closeModals = this.closeModals.bind(this);
@ -49,19 +60,27 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
public override render(): JSX.Element | null {
return (
<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
{this.props.selectedDocument && (
{this.state.selectedDocument && (
<div className={classes["root"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
App 23 rue Torus Toulon
</Typography>
<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
{this.props.selectedDocument.document_type.name}
{this.state.selectedDocument.document_type.name}
</Typography>
<div className={classes["document-container"]}>
<div className={classes["arrow-container"]} onClick={this.goToPrevious()}>
<Image src={LeftArrowIcon} alt="left arrow" />
</div>
<div className={classes["file-container"]}>
{this.props.selectedDocument.files?.map((file) => (
{this.state.selectedDocument.files?.map((file) => (
<FilePreview href={file.file_path as string} key={file.uid} />
))}
</div>
<div className={classes["arrow-container"]} onClick={this.goToNext()}>
<Image src={RightArrowIcon} alt="right arrow" />
</div>
</div>
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
Refuser
@ -117,7 +136,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
</Confirm>
</div>
)}
{!this.props.selectedDocument && (
{!this.state.selectedDocument && (
<div className={classes["root"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
Document non trouvé
@ -128,6 +147,43 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
);
}
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<IPropsClass>, prevState: Readonly<IState>, 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<IPropsClass, IState> {
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 <ViewDocumentsClass {...props} selectedDocument={selectedDocument} />;
return <ViewDocumentsClass {...props} documentsList={documents} selectedDocument={selectedDocument} router={router} folderUid={folderUid as string}/>;
}