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

✨ OCR Working with mock

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-27 11:40:25 +02:00
parent 88be309c10
commit 2284fc4848
8 changed files with 180 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/front/Components/DesignSystem/Typography/classes.module.scss
View File

@ -129,4 +129,16 @@
&.purple-flash {
color: var(--purple-flash);
}
&.green-flash {
color: var(--green-flash);
}
&.red-flash {
color: var(--red-flash);
}
&.orange-flash {
color: var(--orange-flash);
}
}

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

@ -35,6 +35,9 @@ export enum ITypoColor {
GREY = "grey",
BLACK = "black",
PURPLE_FLASH = "purple-flash",
GREEN_FLASH = "green-flash",
ORANGE_FLASH = "orange-flash",
RED_FLASH = "red-flash",
}
export default class Typography extends React.Component<IProps, IState> {

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

@ -48,6 +48,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
this.closeComponent = this.closeComponent.bind(this);
}
public override render(): JSX.Element {
console.log(this.props.folder.documents);
const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
const redirectPath = Module.getInstance()

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

@ -73,6 +73,17 @@ export const docType: DocumentType = {
private_description: "Acte de naissance private description",
archived_at: new Date(),
};
export const identityDocType: DocumentType = {
name: "Carte d'identité",
uid: "fezezfazegezrgrezg",
created_at: new Date(),
updated_at: new Date(),
public_description: "Carte d'identité public description",
private_description: "Carte d'identité private description",
archived_at: new Date(),
};
export const customer: Customer = {
uid: "erhtgerfzeare",
contact: contact,
@ -123,6 +134,25 @@ export const fileMock2: File = {
"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 identityFile: File = {
uid: "identity_file_uid",
created_at: new Date(),
updated_at: new Date(),
document: document,
file_path: "https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/cni_fake_c7259d4923.png"
};
export const documentIdentity: Document = {
uid: "ethrthbkjtrbporjbh",
depositor: customer,
document_status: "PENDING",
folder: folder,
document_type: identityDocType,
updated_at: new Date(),
created_at: new Date(),
files: [identityFile],
};
export const documentPending: Document = {
uid: "fzefeazdagrtetrury",
depositor: customer,
@ -151,7 +181,7 @@ export const customer2: Customer = {
created_at: new Date(),
updated_at: new Date(),
status: ECustomerStatus.VALIDATED,
documents: [document, documentPending, documentDeposited],
documents: [document, documentPending, documentDeposited, documentIdentity],
};
export const folderWithPendingDocument: OfficeFolder = {
@ -165,7 +195,7 @@ export const folderWithPendingDocument: OfficeFolder = {
updated_at: new Date(),
description: "Description",
archived_description: "Archived description",
documents: [document, documentPending, documentDeposited],
documents: [document, documentPending, documentDeposited, documentIdentity],
};
export const folderWithPendingDocument1: OfficeFolder = {
uid: "gtrtyutyhretgytu",

37
src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss Normal file
View File

@ -0,0 +1,37 @@
@import "@Themes/constants.scss";
.root{
background-color: var(--grey-soft);
padding: 24px;
.result-text{
color: rgba(0, 0, 0, 0.4);
}
.result-container{
display: flex;
.percentage-container{
display: flex;
align-items: center;
gap: 8px;
.dot{
width: 11px;
height: 11px;
border-radius: 50px;
&[data-color="green-flash"]{
background-color: var(--green-flash);
}
&[data-color="orange-flash"]{
background-color: var(--orange-flash);
}
&[data-color="red-flash"]{
background-color: var(--red-flash);
}
}
}
}
}

41
src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx Normal file
View File

@ -0,0 +1,41 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";
import classes from "./classes.module.scss";
type IProps = {
percentage: number;
};
type IState = {};
export default class OcrResult extends React.Component<IProps, IState> {
public override render(): JSX.Element | null {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.P_16} className={classes["result-text"]}>
Résultat de l'analyse :
</Typography>
<div className={classes["result-container"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
Document conforme à :&nbsp;
</Typography>
<div className={classes["percentage-container"]}>
<Typography typo={ITypo.P_18} color={this.getColor()}>
{this.props.percentage}%
</Typography>
<div className={classes["dot"]} data-color={this.getColor()} />
</div>
</div>
</div>
);
}
private getColor() {
if (this.props.percentage > 75) {
return ITypoColor.GREEN_FLASH;
} else {
return ITypoColor.RED_FLASH;
}
}
}

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

@ -31,13 +31,20 @@
}
}
.buttons-container {
display: flex;
gap: 24px;
justify-content: center;
margin-top: 32px;
@media (max-width: $screen-s) {
flex-direction: column-reverse;
.footer{
width: fit-content;
margin: auto;
.ocr-container{
margin-top: 42px;
}
.buttons-container {
display: flex;
gap: 24px;
justify-content: center;
margin-top: 32px;
@media (max-width: $screen-s) {
flex-direction: column-reverse;
}
}
}

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

@ -1,5 +1,3 @@
import "reflect-metadata";
import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
@ -18,7 +16,9 @@ import React from "react";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import OcrResult from "./OcrResult";
import "reflect-metadata";
type IProps = {};
type IPropsClass = {
@ -93,21 +93,29 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
</div>
)}
</div>
<div className={classes["buttons-container"]}>
{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" && (
<a href={this.state.selectedFile.file_path!} download>
<Button>Télécharger</Button>
</a>
<div className={classes["footer"]}>
{this.props.selectedDocument?.document_type.name === "Carte d'identité" && (
<div className={classes["ocr-container"]}>
<OcrResult percentage={this.getRandomPercentageForOcr()} />
</div>
)}
<div className={classes["buttons-container"]}>
{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" && (
<a href={this.state.selectedFile.file_path!} download>
<Button>Télécharger</Button>
</a>
)}
</div>
</div>
<Confirm
isOpen={this.state.isValidateModalVisible}
@ -175,6 +183,22 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
});
}
private getRandomPercentageForOcr() {
// find diff
let difference = 100 - 90;
// generate random number
let rand = Math.random();
// multiply with difference
rand = Math.floor(rand * difference);
// add with min value
rand = rand + 90;
return rand;
}
private goToPrevious() {
const index = this.state.selectedFileIndex - 1;
if (this.hasPrevious()) {