✨ Mocking files in folders

2023-04-24 15:08:53 +02:00 · 2023-04-24 15:08:53 +02:00 · 0a151f0fb1
commit 0a151f0fb1
parent cacbfcc706
5 changed files with 139 additions and 99 deletions
--- a/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
+++ b/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
@ -7,11 +7,22 @@
 	justify-content: space-between;
 	align-items: center;
 	&.PENDING {
-		border-color: $orange-soft;
+		cursor: pointer;
+		border: 1px solid $orange-soft;
+		&:hover {
+			border: 1px solid $orange-soft;
+			outline: 1px solid $orange-soft;
+		}
 	}
 	&.VALIDATED {
-		border-color: $green-soft;
+		cursor: pointer;
+		border: 1px solid $green-soft;
+		&:hover {
+			border: 1px solid $green-soft;
+			outline: 1px solid $green-soft;
+		}
 	}
+
 	.valid-radius {
 		background-color: $green-flash;
 		padding: 6px;
--- a/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
+++ b/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
@ -1,12 +1,14 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import { Document } from "le-coffre-resources/dist/Customer";
-import Typography, { ITypo } from "../../Typography";
-import Image from "next/image";
-import TrashIcon from "@Assets/Icons/trash.svg";
 import ValidIcon from "@Assets/Icons/check-valid.svg";
+import TrashIcon from "@Assets/Icons/trash.svg";
 import classNames from "classnames";
+import { Document } from "le-coffre-resources/dist/Customer";
+import Image from "next/image";
+import { NextRouter, useRouter } from "next/router";
+import React from "react";
+
+import Typography, { ITypo } from "../../Typography";
 import WarningBadge from "../../WarningBadge";
+import classes from "./classes.module.scss";

 type IProps = {
 	document: {
@ -16,16 +18,22 @@ type IProps = {
 	};
 	openDeletionModal?: (uid: Document["uid"]) => void;
 };
+
+type IPropsClass = IProps & {
+	router: NextRouter;
+};
+
 type IState = {};

-export default class DocumentNotary extends React.Component<IProps, IState> {
-	public constructor(props: IProps) {
+class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
+	public constructor(props: IPropsClass) {
 		super(props);
 		this.onOpenDeletionModal = this.onOpenDeletionModal.bind(this);
+		this.onClick = this.onClick.bind(this);
 	}
 	public override render(): JSX.Element {
 		return (
-			<div className={classNames(classes["root"], classes[this.props.document.document_status])}>
+			<div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}>
 				<div>
 					<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
 					<Typography typo={ITypo.CAPTION_14}>Aucun document déposé</Typography>
@ -35,6 +43,11 @@ export default class DocumentNotary extends React.Component<IProps, IState> {
 		);
 	}

+	private onClick() {
+		if (this.props.document.document_status !== "VALIDATED" && this.props.document.document_status !== "PENDING") return;
+		this.props.router.push(`/folder/${this.props.document.folder.uid}/document/${this.props.document.uid}`);
+	}
+
 	private renderIcon(): JSX.Element {
 		switch (this.props.document.document_status) {
 			case "VALIDATED":
@ -55,3 +68,8 @@ export default class DocumentNotary extends React.Component<IProps, IState> {
 		this.props.openDeletionModal(this.props.document.uid);
 	}
 }
+
+export default function DocumentNotary(props: IProps): JSX.Element {
+	const router = useRouter();
+	return <DocumentNotaryClass {...props} router={router} />;
+}
--- a/src/front/Components/DesignSystem/UserFolder/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/index.tsx
@ -121,9 +121,10 @@ export default class UserFolder extends React.Component<IProps, IState> {

 	private getDocumentsByStatus(status: string): Document[] | null {
 		if (!this.props.customer.documents) return null;
-		return this.props.customer.documents.filter(
+		const filteredDocuments = this.props.customer.documents.filter(
 			(document) => document.document_status === status && document.folder.uid === this.props.folder.uid,
 		);
+		return filteredDocuments;
 	}

 	// Get all documents Validated, pending
--- a/src/front/Components/Layouts/DesignSystem/dummyData.ts
+++ b/src/front/Components/Layouts/DesignSystem/dummyData.ts
@ -81,7 +81,7 @@ export const customer: Customer = {
 	status: ECustomerStatus.VALIDATED,
 };
 export const folder: OfficeFolder = {
-	uid: "zfaefergregrezterf",
+	uid: "mkovrijvrezviev",
 	folder_number: "12331",
 	name: "Mon dossier",
 	status: EFolderStatus.ARCHIVED,
@ -93,6 +93,8 @@ export const folder: OfficeFolder = {
 	archived_description: "Archived description",
 };

+
+
 export const document: Document = {
 	uid: "fzeafergreztyzgrf",
 	depositor: customer,
@ -103,16 +105,6 @@ export const document: Document = {
 	created_at: new Date(),
 };

-export const documentPending: Document = {
-	uid: "fzefeazdagrtetrury",
-	depositor: customer,
-	document_status: "PENDING",
-	folder: folder,
-	document_type: docType,
-	updated_at: new Date(),
-	created_at: new Date(),
-};
-
 export const fileMock: File = {
 	uid: "super_file_uid",
 	created_at: new Date(),
@ -122,6 +114,17 @@ 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 documentPending: Document = {
+	uid: "fzefeazdagrtetrury",
+	depositor: customer,
+	document_status: "PENDING",
+	folder: folder,
+	document_type: docType,
+	updated_at: new Date(),
+	created_at: new Date(),
+	files: [fileMock],
+};
+
 export const documentDeposited: Document = {
 	uid: "uè§u§htfgrthytrgr",
 	depositor: customer,
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@ -1,5 +1,3 @@
-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,18 +7,19 @@ 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 Image from "next/image";
 import { useRouter } from "next/router";
 import React from "react";

 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
-import { Document } from "le-coffre-resources/dist/Customer";

+import "reflect-metadata";

 type IProps = {};
 type IPropsClass = {
-	selectedDocument: Document;
+	selectedDocument: Document | null;
 };
 type IState = {
 	isRefuseModalVisible: boolean;
@ -47,78 +46,84 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 		this.validateAnchoring = this.validateAnchoring.bind(this);
 	}

-	public override render(): JSX.Element {
+	public override render(): JSX.Element | null {
 		return (
-			<DefaultNotaryDashboard
-				title={"Demander des documents"}
-				hasBackArrow
-				mobileBackText="Retour aux documents">
-				<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}
-					</Typography>
-					<div className={classes["file-container"]}>
-						{this.props.selectedDocument.files?.map((file) => (
-							<FilePreview href={file.file_path as string} key={file.uid} />
-						))}
-					</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>
-					</div>
-					<Confirm
-						isOpen={this.state.isValidateModalVisible}
-						onClose={this.closeModals}
-						onAccept={this.validateAnchoring}
-						closeBtn={!this.state.hasValidateAnchoring}
-						hasContainerClosable={!this.state.hasValidateAnchoring}
-						header={this.state.hasValidateAnchoring ? "Document en cours de validation" : "Ancrer le document"}
-						cancelText={"Annuler"}
-						confirmText={"Confirmer"}
-						showButtons={!this.state.hasValidateAnchoring}>
-						<div className={classes["validate-document-container"]}>
-							{!this.state.hasValidateAnchoring && (
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
-									Êtes-vous sûr de vouloir ancrer ce document ?
-								</Typography>
-							)}
-							{this.state.hasValidateAnchoring && (
-								<div className={classes["document-validating-container"]}>
+			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
+				{this.props.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}
+						</Typography>
+						<div className={classes["file-container"]}>
+							{this.props.selectedDocument.files?.map((file) => (
+								<FilePreview href={file.file_path as string} key={file.uid} />
+							))}
+						</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>
+						</div>
+						<Confirm
+							isOpen={this.state.isValidateModalVisible}
+							onClose={this.closeModals}
+							onAccept={this.validateAnchoring}
+							closeBtn={!this.state.hasValidateAnchoring}
+							hasContainerClosable={!this.state.hasValidateAnchoring}
+							header={this.state.hasValidateAnchoring ? "Document en cours de validation" : "Ancrer le document"}
+							cancelText={"Annuler"}
+							confirmText={"Confirmer"}
+							showButtons={!this.state.hasValidateAnchoring}>
+							<div className={classes["validate-document-container"]}>
+								{!this.state.hasValidateAnchoring && (
 									<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
-										Le document s'ancre dans la blockchain.
+										Êtes-vous sûr de vouloir ancrer ce document ?
 									</Typography>
-									<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
-									<div className={classes["dont-show-again"]}>
-										<CheckBox option={{ label: "Ne plus afficher ce message", value: false }} toolTip={"Test"} />
+								)}
+								{this.state.hasValidateAnchoring && (
+									<div className={classes["document-validating-container"]}>
+										<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+											Le document s'ancre dans la blockchain.
+										</Typography>
+										<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
+										<div className={classes["dont-show-again"]}>
+											<CheckBox option={{ label: "Ne plus afficher ce message", value: false }} toolTip={"Test"} />
+										</div>
 									</div>
-								</div>
-							)}
-						</div>
-					</Confirm>
-					<Confirm
-						isOpen={this.state.isRefuseModalVisible}
-						onClose={this.closeModals}
-						onAccept={this.closeModals}
-						closeBtn
-						header={"Refuser le document ?"}
-						cancelText={"Annuler"}
-						confirmText={"Refuser"}
-						canConfirm={this.state.refuseText !== ""}>
-						<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
-								version.
-							</Typography>
-							<InputField fakeplaceholder="Motif du refus" textarea onChange={this.onRefuseTextChange} />
-						</div>
-					</Confirm>
-				</div>
+								)}
+							</div>
+						</Confirm>
+						<Confirm
+							isOpen={this.state.isRefuseModalVisible}
+							onClose={this.closeModals}
+							onAccept={this.closeModals}
+							closeBtn
+							header={"Refuser le document ?"}
+							cancelText={"Annuler"}
+							confirmText={"Refuser"}
+							canConfirm={this.state.refuseText !== ""}>
+							<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
+									version.
+								</Typography>
+								<InputField fakeplaceholder="Motif du refus" textarea onChange={this.onRefuseTextChange} />
+							</div>
+						</Confirm>
+					</div>
+				)}
+				{!this.props.selectedDocument && (
+					<div className={classes["root"]}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
+							Document non trouvé
+						</Typography>
+					</div>
+				)}
 			</DefaultNotaryDashboard>
 		);
 	}
@ -157,11 +162,13 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {

 export default function ViewDocuments(props: IProps) {
 	const router = useRouter();
-	let { folderUid } = router.query;
+	let { folderUid, documentUid } = router.query;
 	folderUid = folderUid as string;
-	
+
 	const folder = folders[0]!;
 	const documents = folder.documents!;
-	const selecteDocument = documents[2]!;
-	return <ViewDocumentsClass {...props} selectedDocument={selecteDocument}/>;
+
+	const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null;
+
+	return <ViewDocumentsClass {...props} selectedDocument={selectedDocument} />;
 }