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

✨ Mocking files in folders

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-24 15:08:53 +02:00
parent cacbfcc706
commit 0a151f0fb1
5 changed files with 139 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
View File

@ -7,11 +7,22 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&.PENDING { &.PENDING {
border-color: $orange-soft; cursor: pointer;
border: 1px solid $orange-soft;
&:hover {
border: 1px solid $orange-soft;
outline: 1px solid $orange-soft;
}
} }
&.VALIDATED { &.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 { .valid-radius {
background-color: $green-flash; background-color: $green-flash;
padding: 6px; padding: 6px;

36
src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
View File

@ -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 ValidIcon from "@Assets/Icons/check-valid.svg";
import TrashIcon from "@Assets/Icons/trash.svg";
import classNames from "classnames"; 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 WarningBadge from "../../WarningBadge";
import classes from "./classes.module.scss";
type IProps = { type IProps = {
document: { document: {
@ -16,16 +18,22 @@ type IProps = {
}; };
openDeletionModal?: (uid: Document["uid"]) => void; openDeletionModal?: (uid: Document["uid"]) => void;
}; };
type IPropsClass = IProps & {
router: NextRouter;
};
type IState = {}; type IState = {};
export default class DocumentNotary extends React.Component<IProps, IState> { class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
public constructor(props: IProps) { public constructor(props: IPropsClass) {
super(props); super(props);
this.onOpenDeletionModal = this.onOpenDeletionModal.bind(this); this.onOpenDeletionModal = this.onOpenDeletionModal.bind(this);
this.onClick = this.onClick.bind(this);
} }
public override render(): JSX.Element { public override render(): JSX.Element {
return ( 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> <div>
<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography> <Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
<Typography typo={ITypo.CAPTION_14}>Aucun document déposé</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 { private renderIcon(): JSX.Element {
switch (this.props.document.document_status) { switch (this.props.document.document_status) {
case "VALIDATED": case "VALIDATED":
@ -55,3 +68,8 @@ export default class DocumentNotary extends React.Component<IProps, IState> {
this.props.openDeletionModal(this.props.document.uid); this.props.openDeletionModal(this.props.document.uid);
} }
} }
export default function DocumentNotary(props: IProps): JSX.Element {
const router = useRouter();
return <DocumentNotaryClass {...props} router={router} />;
}

3
src/front/Components/DesignSystem/UserFolder/index.tsx
View File

@ -121,9 +121,10 @@ export default class UserFolder extends React.Component<IProps, IState> {
private getDocumentsByStatus(status: string): Document[] | null { private getDocumentsByStatus(status: string): Document[] | null {
if (!this.props.customer.documents) return 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, (document) => document.document_status === status && document.folder.uid === this.props.folder.uid,
); );
return filteredDocuments;
} }
// Get all documents Validated, pending // Get all documents Validated, pending

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

@ -81,7 +81,7 @@ export const customer: Customer = {
status: ECustomerStatus.VALIDATED, status: ECustomerStatus.VALIDATED,
}; };
export const folder: OfficeFolder = { export const folder: OfficeFolder = {
uid: "zfaefergregrezterf", uid: "mkovrijvrezviev",
folder_number: "12331", folder_number: "12331",
name: "Mon dossier", name: "Mon dossier",
status: EFolderStatus.ARCHIVED, status: EFolderStatus.ARCHIVED,
@ -93,6 +93,8 @@ export const folder: OfficeFolder = {
archived_description: "Archived description", archived_description: "Archived description",
}; };
export const document: Document = { export const document: Document = {
uid: "fzeafergreztyzgrf", uid: "fzeafergreztyzgrf",
depositor: customer, depositor: customer,
@ -103,16 +105,6 @@ export const document: Document = {
created_at: new Date(), 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 = { export const fileMock: File = {
uid: "super_file_uid", uid: "super_file_uid",
created_at: new Date(), 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", "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 = { export const documentDeposited: Document = {
uid: "uè§u§htfgrthytrgr", uid: "uè§u§htfgrthytrgr",
depositor: customer, depositor: customer,

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

@ -1,5 +1,3 @@
import "reflect-metadata";
import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif"; import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox"; 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 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 Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React from "react"; import React from "react";
import BasePage from "../../Base"; import BasePage from "../../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer";
import "reflect-metadata";
type IProps = {}; type IProps = {};
type IPropsClass = { type IPropsClass = {
selectedDocument: Document; selectedDocument: Document | null;
}; };
type IState = { type IState = {
isRefuseModalVisible: boolean; isRefuseModalVisible: boolean;
@ -47,78 +46,84 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
this.validateAnchoring = this.validateAnchoring.bind(this); this.validateAnchoring = this.validateAnchoring.bind(this);
} }
public override render(): JSX.Element { public override render(): JSX.Element | null {
return ( return (
<DefaultNotaryDashboard <DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
title={"Demander des documents"} {this.props.selectedDocument && (
hasBackArrow <div className={classes["root"]}>
mobileBackText="Retour aux documents"> <Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
<div className={classes["root"]}> App 23 rue Torus Toulon
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}> </Typography>
App 23 rue Torus Toulon <Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
</Typography> {this.props.selectedDocument.document_type.name}
<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}> </Typography>
{this.props.selectedDocument.document_type.name} <div className={classes["file-container"]}>
</Typography> {this.props.selectedDocument.files?.map((file) => (
<div className={classes["file-container"]}> <FilePreview href={file.file_path as string} key={file.uid} />
{this.props.selectedDocument.files?.map((file) => ( ))}
<FilePreview href={file.file_path as string} key={file.uid} /> </div>
))} <div className={classes["buttons-container"]}>
</div> <Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
<div className={classes["buttons-container"]}> Refuser
<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}> </Button>
Refuser <Button onClick={this.openValidateModal}>Valider et ancrer</Button>
</Button> <Button disabled>Télécharger</Button>
<Button onClick={this.openValidateModal}>Valider et ancrer</Button> </div>
<Button disabled>Télécharger</Button> <Confirm
</div> isOpen={this.state.isValidateModalVisible}
<Confirm onClose={this.closeModals}
isOpen={this.state.isValidateModalVisible} onAccept={this.validateAnchoring}
onClose={this.closeModals} closeBtn={!this.state.hasValidateAnchoring}
onAccept={this.validateAnchoring} hasContainerClosable={!this.state.hasValidateAnchoring}
closeBtn={!this.state.hasValidateAnchoring} header={this.state.hasValidateAnchoring ? "Document en cours de validation" : "Ancrer le document"}
hasContainerClosable={!this.state.hasValidateAnchoring} cancelText={"Annuler"}
header={this.state.hasValidateAnchoring ? "Document en cours de validation" : "Ancrer le document"} confirmText={"Confirmer"}
cancelText={"Annuler"} showButtons={!this.state.hasValidateAnchoring}>
confirmText={"Confirmer"} <div className={classes["validate-document-container"]}>
showButtons={!this.state.hasValidateAnchoring}> {!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"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}> <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> </Typography>
<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} /> )}
<div className={classes["dont-show-again"]}> {this.state.hasValidateAnchoring && (
<CheckBox option={{ label: "Ne plus afficher ce message", value: false }} toolTip={"Test"} /> <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> )}
)} </div>
</div> </Confirm>
</Confirm> <Confirm
<Confirm isOpen={this.state.isRefuseModalVisible}
isOpen={this.state.isRefuseModalVisible} onClose={this.closeModals}
onClose={this.closeModals} onAccept={this.closeModals}
onAccept={this.closeModals} closeBtn
closeBtn header={"Refuser le document ?"}
header={"Refuser le document ?"} cancelText={"Annuler"}
cancelText={"Annuler"} confirmText={"Refuser"}
confirmText={"Refuser"} canConfirm={this.state.refuseText !== ""}>
canConfirm={this.state.refuseText !== ""}> <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 version.
version. </Typography>
</Typography> <InputField fakeplaceholder="Motif du refus" textarea onChange={this.onRefuseTextChange} />
<InputField fakeplaceholder="Motif du refus" textarea onChange={this.onRefuseTextChange} /> </div>
</div> </Confirm>
</Confirm> </div>
</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> </DefaultNotaryDashboard>
); );
} }
@ -157,11 +162,13 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
export default function ViewDocuments(props: IProps) { export default function ViewDocuments(props: IProps) {
const router = useRouter(); const router = useRouter();
let { folderUid } = router.query; let { folderUid, documentUid } = router.query;
folderUid = folderUid as string; folderUid = folderUid as string;
const folder = folders[0]!; const folder = folders[0]!;
const documents = folder.documents!; 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} />;
} }