🐛 Carousel between files and not documents + download when validated
This commit is contained in:
Maxime Lalo
parent
e0f985e817
commit
e2ede3a5be
@ -131,7 +131,7 @@ export const documentPending: Document = {
|
||||
document_type: docType,
|
||||
updated_at: new Date(),
|
||||
created_at: new Date(),
|
||||
files: [fileMock2],
|
||||
files: [fileMock,fileMock2],
|
||||
};
|
||||
|
||||
export const documentDeposited: Document = {
|
||||
|
||||
@ -11,7 +11,7 @@ import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
|
||||
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 { NextRouter, useRouter } from "next/router";
|
||||
import React from "react";
|
||||
@ -19,9 +19,9 @@ import React from "react";
|
||||
import BasePage from "../../Base";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
|
||||
type IProps = {};
|
||||
type IPropsClass = {
|
||||
documentsList: Document[];
|
||||
selectedDocument: Document | null;
|
||||
router: NextRouter;
|
||||
folderUid: string;
|
||||
@ -32,8 +32,8 @@ type IState = {
|
||||
isValidateModalVisible: boolean;
|
||||
refuseText: string;
|
||||
hasValidateAnchoring: boolean;
|
||||
selectedDocument: Document | null;
|
||||
selectedDocumentIndex: number;
|
||||
selectedFileIndex: number;
|
||||
selectedFile: File | null;
|
||||
};
|
||||
|
||||
class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
@ -45,8 +45,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
isRefuseModalVisible: false,
|
||||
refuseText: "",
|
||||
hasValidateAnchoring: false,
|
||||
selectedDocument: null,
|
||||
selectedDocumentIndex: -1,
|
||||
selectedFileIndex: 0,
|
||||
selectedFile: null,
|
||||
};
|
||||
|
||||
this.closeModals = this.closeModals.bind(this);
|
||||
@ -59,21 +59,23 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
|
||||
this.hasPrevious = this.hasPrevious.bind(this);
|
||||
this.hasNext = this.hasNext.bind(this);
|
||||
|
||||
this.downloadFile = this.downloadFile.bind(this);
|
||||
}
|
||||
|
||||
public override render(): JSX.Element | null {
|
||||
return (
|
||||
<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"]}>
|
||||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
|
||||
App 23 rue Torus Toulon
|
||||
</Typography>
|
||||
<Typography typo={ITypo.H3} color={ITypoColor.BLACK} className={classes["subtitle"]}>
|
||||
{this.state.selectedDocument.document_type.name}
|
||||
{this.props.selectedDocument.document_type.name}
|
||||
</Typography>
|
||||
<div className={classes["document-container"]}>
|
||||
{this.props.documentsList.length > 1 && (
|
||||
{this.props.selectedDocument.files.length > 1 && (
|
||||
<div
|
||||
className={classes["arrow-container"]}
|
||||
onClick={this.goToPrevious}
|
||||
@ -82,11 +84,9 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
</div>
|
||||
)}
|
||||
<div className={classes["file-container"]}>
|
||||
{this.state.selectedDocument.files?.map((file) => (
|
||||
<FilePreview href={file.file_path as string} key={file.uid} />
|
||||
))}
|
||||
<FilePreview href={this.state.selectedFile.file_path as string} key={this.state.selectedFile.uid} />
|
||||
</div>
|
||||
{this.props.documentsList.length > 1 && (
|
||||
{this.props.selectedDocument.files.length > 1 && (
|
||||
<div
|
||||
className={classes["arrow-container"]}
|
||||
onClick={this.goToNext}
|
||||
@ -96,11 +96,20 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
)}
|
||||
</div>
|
||||
<div className={classes["buttons-container"]}>
|
||||
<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
|
||||
Refuser
|
||||
</Button>
|
||||
<Button onClick={this.openValidateModal}>Valider et ancrer</Button>
|
||||
<Button disabled>Télécharger</Button>
|
||||
{this.props.selectedDocument?.document_status === "PENDING" && (
|
||||
<>
|
||||
<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
|
||||
Refuser
|
||||
</Button>
|
||||
<Button onClick={this.openValidateModal}>Valider et ancrer</Button>
|
||||
<Button disabled>Télécharger</Button>
|
||||
</>
|
||||
)}
|
||||
{this.props.selectedDocument?.document_status === "VALIDATED" && (
|
||||
<>
|
||||
<Button onClick={this.downloadFile}>Télécharger</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Confirm
|
||||
isOpen={this.state.isValidateModalVisible}
|
||||
@ -138,8 +147,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
closeBtn
|
||||
header={"Refuser le document ?"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={"Refuser"}
|
||||
>
|
||||
confirmText={"Refuser"}>
|
||||
<div className={classes["refuse-document-container"]}>
|
||||
<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
|
||||
@ -150,7 +158,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
</Confirm>
|
||||
</div>
|
||||
)}
|
||||
{!this.state.selectedDocument && (
|
||||
{(!this.state.selectedFile || !this.props.selectedDocument) && (
|
||||
<div className={classes["root"]}>
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
|
||||
Document non trouvé
|
||||
@ -162,46 +170,52 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
}
|
||||
|
||||
override componentDidMount(): void {
|
||||
if (!this.props.selectedDocument) return;
|
||||
if (!this.props.selectedDocument || !this.props.selectedDocument.files || !this.props.selectedDocument.files[0]) return;
|
||||
this.setState({
|
||||
selectedDocument: this.props.selectedDocument,
|
||||
selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid),
|
||||
selectedFile: this.props.selectedDocument.files[0],
|
||||
selectedFileIndex: 0,
|
||||
});
|
||||
}
|
||||
|
||||
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 downloadFile() {
|
||||
var link = document.createElement("a");
|
||||
// If you don't know the name or want to use
|
||||
// the webserver default set name = ''
|
||||
link.setAttribute("download", "super_nom.pdf");
|
||||
link.href = "/";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
}
|
||||
|
||||
private goToPrevious() {
|
||||
const index = this.state.selectedFileIndex - 1;
|
||||
if (this.hasPrevious()) {
|
||||
this.props.router.push(
|
||||
`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.uid}`,
|
||||
);
|
||||
this.setState({
|
||||
selectedFile: this.props.selectedDocument!.files![index]!,
|
||||
selectedFileIndex: index,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private goToNext() {
|
||||
if (this.hasNext()) {
|
||||
this.props.router.push(
|
||||
`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`,
|
||||
);
|
||||
const index = this.state.selectedFileIndex + 1;
|
||||
this.setState({
|
||||
selectedFile: this.props.selectedDocument!.files![index]!,
|
||||
selectedFileIndex: index,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private hasPrevious() {
|
||||
const index = this.state.selectedDocumentIndex - 1;
|
||||
const index = this.state.selectedFileIndex - 1;
|
||||
return index >= 0;
|
||||
}
|
||||
|
||||
private hasNext() {
|
||||
const index = this.state.selectedDocumentIndex + 1;
|
||||
return index < this.props.documentsList.length;
|
||||
const index = this.state.selectedFileIndex + 1;
|
||||
return index < this.props.selectedDocument!.files!.length;
|
||||
}
|
||||
|
||||
private validateAnchoring() {
|
||||
@ -256,13 +270,5 @@ export default function ViewDocuments(props: IProps) {
|
||||
const folder = folders[0]!;
|
||||
const documents = folder.documents!.filter((document) => document.document_status !== "ASKED");
|
||||
const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null;
|
||||
return (
|
||||
<ViewDocumentsClass
|
||||
{...props}
|
||||
documentsList={documents}
|
||||
selectedDocument={selectedDocument}
|
||||
router={router}
|
||||
folderUid={folderUid as string}
|
||||
/>
|
||||
);
|
||||
return <ViewDocumentsClass {...props} selectedDocument={selectedDocument} router={router} folderUid={folderUid as string} />;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user