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

🐛 Carousel between files and not documents + download when validated

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-26 12:08:52 +02:00
parent e0f985e817
commit e2ede3a5be
2 changed files with 56 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,7 +131,7 @@ export const documentPending: Document = {
document_type: docType, document_type: docType,
updated_at: new Date(), updated_at: new Date(),
created_at: new Date(), created_at: new Date(),
files: [fileMock2], files: [fileMock,fileMock2],
}; };
export const documentDeposited: Document = { export const documentDeposited: Document = {

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

@ -11,7 +11,7 @@ import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"; import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { Document } from "le-coffre-resources/dist/Customer"; import { Document, File } from "le-coffre-resources/dist/Customer";
import Image from "next/image"; import Image from "next/image";
import { NextRouter, useRouter } from "next/router"; import { NextRouter, useRouter } from "next/router";
import React from "react"; import React from "react";
@ -19,9 +19,9 @@ import React from "react";
import BasePage from "../../Base"; import BasePage from "../../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
type IProps = {}; type IProps = {};
type IPropsClass = { type IPropsClass = {
documentsList: Document[];
selectedDocument: Document | null; selectedDocument: Document | null;
router: NextRouter; router: NextRouter;
folderUid: string; folderUid: string;
@ -32,8 +32,8 @@ type IState = {
isValidateModalVisible: boolean; isValidateModalVisible: boolean;
refuseText: string; refuseText: string;
hasValidateAnchoring: boolean; hasValidateAnchoring: boolean;
selectedDocument: Document | null; selectedFileIndex: number;
selectedDocumentIndex: number; selectedFile: File | null;
}; };
class ViewDocumentsClass extends BasePage<IPropsClass, IState> { class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
@ -45,8 +45,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
isRefuseModalVisible: false, isRefuseModalVisible: false,
refuseText: "", refuseText: "",
hasValidateAnchoring: false, hasValidateAnchoring: false,
selectedDocument: null, selectedFileIndex: 0,
selectedDocumentIndex: -1, selectedFile: null,
}; };
this.closeModals = this.closeModals.bind(this); this.closeModals = this.closeModals.bind(this);
@ -59,21 +59,23 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
this.hasPrevious = this.hasPrevious.bind(this); this.hasPrevious = this.hasPrevious.bind(this);
this.hasNext = this.hasNext.bind(this); this.hasNext = this.hasNext.bind(this);
this.downloadFile = this.downloadFile.bind(this);
} }
public override render(): JSX.Element | null { public override render(): JSX.Element | null {
return ( return (
<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents"> <DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
{this.state.selectedDocument && ( {this.props.selectedDocument && this.props.selectedDocument.files && this.state.selectedFile && (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}> <Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
App 23 rue Torus Toulon App 23 rue Torus Toulon
</Typography> </Typography>
<Typography typo={ITypo.H3} color={ITypoColor.BLACK} className={classes["subtitle"]}> <Typography typo={ITypo.H3} color={ITypoColor.BLACK} className={classes["subtitle"]}>
{this.state.selectedDocument.document_type.name} {this.props.selectedDocument.document_type.name}
</Typography> </Typography>
<div className={classes["document-container"]}> <div className={classes["document-container"]}>
{this.props.documentsList.length > 1 && ( {this.props.selectedDocument.files.length > 1 && (
<div <div
className={classes["arrow-container"]} className={classes["arrow-container"]}
onClick={this.goToPrevious} onClick={this.goToPrevious}
@ -82,11 +84,9 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
</div> </div>
)} )}
<div className={classes["file-container"]}> <div className={classes["file-container"]}>
{this.state.selectedDocument.files?.map((file) => ( <FilePreview href={this.state.selectedFile.file_path as string} key={this.state.selectedFile.uid} />
<FilePreview href={file.file_path as string} key={file.uid} />
))}
</div> </div>
{this.props.documentsList.length > 1 && ( {this.props.selectedDocument.files.length > 1 && (
<div <div
className={classes["arrow-container"]} className={classes["arrow-container"]}
onClick={this.goToNext} onClick={this.goToNext}
@ -96,11 +96,20 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
)} )}
</div> </div>
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
{this.props.selectedDocument?.document_status === "PENDING" && (
<>
<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}> <Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
Refuser Refuser
</Button> </Button>
<Button onClick={this.openValidateModal}>Valider et ancrer</Button> <Button onClick={this.openValidateModal}>Valider et ancrer</Button>
<Button disabled>Télécharger</Button> <Button disabled>Télécharger</Button>
</>
)}
{this.props.selectedDocument?.document_status === "VALIDATED" && (
<>
<Button onClick={this.downloadFile}>Télécharger</Button>
</>
)}
</div> </div>
<Confirm <Confirm
isOpen={this.state.isValidateModalVisible} isOpen={this.state.isValidateModalVisible}
@ -138,8 +147,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
closeBtn closeBtn
header={"Refuser le document ?"} header={"Refuser le document ?"}
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Refuser"} confirmText={"Refuser"}>
>
<div className={classes["refuse-document-container"]}> <div className={classes["refuse-document-container"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}> <Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
@ -150,7 +158,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
</Confirm> </Confirm>
</div> </div>
)} )}
{!this.state.selectedDocument && ( {(!this.state.selectedFile || !this.props.selectedDocument) && (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}> <Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
Document non trouvé Document non trouvé
@ -162,46 +170,52 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
} }
override componentDidMount(): void { override componentDidMount(): void {
if (!this.props.selectedDocument) return; if (!this.props.selectedDocument || !this.props.selectedDocument.files || !this.props.selectedDocument.files[0]) return;
this.setState({ this.setState({
selectedDocument: this.props.selectedDocument, selectedFile: this.props.selectedDocument.files[0],
selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid), selectedFileIndex: 0,
}); });
} }
override componentDidUpdate(prevProps: Readonly<IPropsClass>, prevState: Readonly<IState>, snapshot?: any): void { private downloadFile() {
if (prevProps.selectedDocument !== this.props.selectedDocument) { var link = document.createElement("a");
this.setState({ // If you don't know the name or want to use
selectedDocument: this.props.selectedDocument, // the webserver default set name = ''
selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid), link.setAttribute("download", "super_nom.pdf");
}); link.href = "/";
} document.body.appendChild(link);
link.click();
link.remove();
} }
private goToPrevious() { private goToPrevious() {
const index = this.state.selectedFileIndex - 1;
if (this.hasPrevious()) { if (this.hasPrevious()) {
this.props.router.push( this.setState({
`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.uid}`, selectedFile: this.props.selectedDocument!.files![index]!,
); selectedFileIndex: index,
});
} }
} }
private goToNext() { private goToNext() {
if (this.hasNext()) { if (this.hasNext()) {
this.props.router.push( const index = this.state.selectedFileIndex + 1;
`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`, this.setState({
); selectedFile: this.props.selectedDocument!.files![index]!,
selectedFileIndex: index,
});
} }
} }
private hasPrevious() { private hasPrevious() {
const index = this.state.selectedDocumentIndex - 1; const index = this.state.selectedFileIndex - 1;
return index >= 0; return index >= 0;
} }
private hasNext() { private hasNext() {
const index = this.state.selectedDocumentIndex + 1; const index = this.state.selectedFileIndex + 1;
return index < this.props.documentsList.length; return index < this.props.selectedDocument!.files!.length;
} }
private validateAnchoring() { private validateAnchoring() {
@ -256,13 +270,5 @@ export default function ViewDocuments(props: IProps) {
const folder = folders[0]!; const folder = folders[0]!;
const documents = folder.documents!.filter((document) => document.document_status !== "ASKED"); const documents = folder.documents!.filter((document) => document.document_status !== "ASKED");
const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null; const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null;
return ( return <ViewDocumentsClass {...props} selectedDocument={selectedDocument} router={router} folderUid={folderUid as string} />;
<ViewDocumentsClass
{...props}
documentsList={documents}
selectedDocument={selectedDocument}
router={router}
folderUid={folderUid as string}
/>
);
} }