From 48cc9e23b5243e486e00cb20774930e2a876d340 Mon Sep 17 00:00:00 2001 From: Hugo Lextrait Date: Wed, 12 Apr 2023 17:42:32 +0200 Subject: [PATCH] DefaultNotaryDashboard done, front services init --- .env.example | 9 +- next.config.js | 23 ++-- src/front/Api/BaseApiService.ts | 30 +++-- .../Api/LeCoffreApi/Customer/BaseCustomer.ts | 2 +- .../Api/LeCoffreApi/Notary/BaseNotary.ts | 2 +- .../Api/LeCoffreApi/Notary/Users/Users.ts | 2 +- .../LeCoffreApi/SuperAdmin/BaseSuperAdmin.ts | 5 + .../Api/LeCoffreApi/SuperAdmin/Users/Users.ts | 67 ++++++++++ .../Components/DesignSystem/Button/index.tsx | 10 +- .../FolderBoxInformation/classes.module.scss | 27 ++++ .../Elements/FolderBoxInformation/index.tsx | 61 ++++++++++ .../FolderContainer/classes.module.scss | 1 + .../DesignSystem/FolderContainer/index.tsx | 19 ++- .../DesignSystem/FolderList/index.tsx | 10 +- .../FolderListContainer/classes.module.scss | 1 + .../FolderListContainer/index.tsx | 12 +- .../DesignSystem/InformationBox/index.tsx | 4 +- .../DesignSystem/SearchBar/index.tsx | 12 +- .../DesignSystem/UserFolder/index.tsx | 33 +++-- .../DefaultDoubleSidePage/index.tsx | 2 +- .../classes.module.scss | 4 +- .../DefaultNotaryDashboard/index.tsx | 22 +++- .../Layouts/DesignSystem/dummyData.ts | 115 ++++++++++++------ .../Components/Layouts/DesignSystem/index.tsx | 4 +- .../Folder/ClientSection/classes.module.scss | 19 +++ .../Layouts/Folder/ClientSection/index.tsx | 43 +++++++ .../Layouts/Folder/classes.module.scss | 44 +++++++ src/front/Components/Layouts/Folder/index.tsx | 69 +++++++++++ .../FolderInfomations/classes.module.scss | 16 --- .../Layouts/FolderInfomations/index.tsx | 11 -- src/front/Config/VariablesFront.ts | 35 ++---- src/pages/_app.tsx | 25 +++- src/pages/dossier.tsx | 5 + src/pages/folder-informations.tsx | 5 - tsconfig.json | 1 + 35 files changed, 580 insertions(+), 170 deletions(-) create mode 100644 src/front/Api/LeCoffreApi/SuperAdmin/BaseSuperAdmin.ts create mode 100644 src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts create mode 100644 src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss create mode 100644 src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx create mode 100644 src/front/Components/Layouts/Folder/ClientSection/classes.module.scss create mode 100644 src/front/Components/Layouts/Folder/ClientSection/index.tsx create mode 100644 src/front/Components/Layouts/Folder/classes.module.scss create mode 100644 src/front/Components/Layouts/Folder/index.tsx delete mode 100644 src/front/Components/Layouts/FolderInfomations/classes.module.scss delete mode 100644 src/front/Components/Layouts/FolderInfomations/index.tsx create mode 100644 src/pages/dossier.tsx delete mode 100644 src/pages/folder-informations.tsx diff --git a/.env.example b/.env.example index 30a38f6a..db9ecd5f 100644 --- a/.env.example +++ b/.env.example @@ -1,3 +1,6 @@ -NEXT_PUBLIC_API_URL= -NEXT_PUBLIC_RPC_GATEWAY_MAINNET_URL= -NEXT_PUBLIC_RPC_GATEWAY_TESTNET_URL= +BACK_API_PROTOCOL= +BACK_API_HOSTNAME= +BACK_API_PORT= +BACK_API_ROOT_URL= +BACK_API_VERSION= + diff --git a/next.config.js b/next.config.js index 5886c95f..5b4172f7 100644 --- a/next.config.js +++ b/next.config.js @@ -1,12 +1,15 @@ /** @type {import('next').NextConfig} */ -const nextConfig = { - reactStrictMode: true, - publicRuntimeConfig: { - // Will be available on both server and client - NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, - NEXT_PUBLIC_RPC_GATEWAY_MAINNET_URL: process.env.NEXT_PUBLIC_RPC_GATEWAY_MAINNET_URL, - NEXT_PUBLIC_RPC_GATEWAY_TESTNET_URL: process.env.NEXT_PUBLIC_RPC_GATEWAY_TESTNET_URL, - }, -} -module.exports = nextConfig +const nextConfig = { + reactStrictMode: false, + publicRuntimeConfig: { + // Will be available on both server and client + BACK_API_PROTOCOL: process.env.BACK_API_PROTOCOL, + BACK_API_HOST: process.env.BACK_API_HOST, + BACK_API_PORT: process.env.BACK_API_PORT, + BACK_API_ROOT_URL: process.env.BACK_API_ROOT_URL, + BACK_API_VERSION: process.env.BACK_API_VERSION, + }, +}; + +module.exports = nextConfig; diff --git a/src/front/Api/BaseApiService.ts b/src/front/Api/BaseApiService.ts index 7b8d0ef0..8fdaebe7 100644 --- a/src/front/Api/BaseApiService.ts +++ b/src/front/Api/BaseApiService.ts @@ -1,21 +1,26 @@ +import { FrontendVariables } from "@Front/Config/VariablesFront"; + export enum ContentType { JSON = "application/json", FORM_DATA = "multipart/form-data;", } - export default abstract class BaseApiService { - protected readonly backUrl = - process.env["NEXT_PUBLIC_API_HOSTNAME"] + - ":" + - process.env["NEXT_PUBLIC_API_PORT"] + - process.env["NEXT_PUBLIC_API_ROOT_URL"]; - protected readonly proxyUrl = - process.env["NEXT_PUBLIC_RPC_GATEWAY_HOSTNAME"] + - ":" + - process.env["NEXT_PUBLIC_RPC_GATEWAY_PORT"] + - process.env["NEXT_PUBLIC_RPC_GATEWAY_ROOT_URL"]; + private static baseUrl: string; + protected readonly variables = FrontendVariables.getInstance(); - protected constructor() {} + protected constructor() { + BaseApiService.baseUrl ??= + FrontendVariables.getInstance().BACK_API_PROTOCOL + + FrontendVariables.getInstance().BACK_API_HOST + + ":" + + FrontendVariables.getInstance().BACK_API_PORT ?? "" + + FrontendVariables.getInstance().BACK_API_ROOT_URL + + FrontendVariables.getInstance().BACK_API_VERSION; + } + + protected getBaseUrl() { + return BaseApiService.baseUrl; + } protected buildHeaders(contentType: ContentType) { const headers = new Headers(); @@ -35,7 +40,6 @@ export default abstract class BaseApiService { await fetch(url, { method: "GET", headers: this.buildHeaders(ContentType.JSON), - mode: "no-cors", }); console.log(request); return this.sendRequest(request); diff --git a/src/front/Api/LeCoffreApi/Customer/BaseCustomer.ts b/src/front/Api/LeCoffreApi/Customer/BaseCustomer.ts index 40d1d763..ac56570d 100644 --- a/src/front/Api/LeCoffreApi/Customer/BaseCustomer.ts +++ b/src/front/Api/LeCoffreApi/Customer/BaseCustomer.ts @@ -1,5 +1,5 @@ import BaseApiService from "@Front/Api/BaseApiService"; export default abstract class BaseNotary extends BaseApiService { - protected readonly namespaceUrl = this.backUrl.concat("/customers"); + protected readonly namespaceUrl = this.getBaseUrl().concat("/customers"); } diff --git a/src/front/Api/LeCoffreApi/Notary/BaseNotary.ts b/src/front/Api/LeCoffreApi/Notary/BaseNotary.ts index b0f4176c..2e1e013c 100644 --- a/src/front/Api/LeCoffreApi/Notary/BaseNotary.ts +++ b/src/front/Api/LeCoffreApi/Notary/BaseNotary.ts @@ -1,5 +1,5 @@ import BaseApiService from "@Front/Api/BaseApiService"; export default abstract class BaseNotary extends BaseApiService { - protected readonly namespaceUrl = this.backUrl.concat("/notary"); + protected readonly namespaceUrl = this.getBaseUrl().concat("/notary"); } diff --git a/src/front/Api/LeCoffreApi/Notary/Users/Users.ts b/src/front/Api/LeCoffreApi/Notary/Users/Users.ts index 00f54229..1b633144 100644 --- a/src/front/Api/LeCoffreApi/Notary/Users/Users.ts +++ b/src/front/Api/LeCoffreApi/Notary/Users/Users.ts @@ -45,7 +45,7 @@ export default class Users extends BaseNotary { } } - public async getOne(uid: string): Promise { + public async getByUid(uid: string): Promise { const url = new URL(this.baseURl.concat("/").concat(uid)); try { return await this.getRequest(url); diff --git a/src/front/Api/LeCoffreApi/SuperAdmin/BaseSuperAdmin.ts b/src/front/Api/LeCoffreApi/SuperAdmin/BaseSuperAdmin.ts new file mode 100644 index 00000000..848d5597 --- /dev/null +++ b/src/front/Api/LeCoffreApi/SuperAdmin/BaseSuperAdmin.ts @@ -0,0 +1,5 @@ +import BaseApiService from "@Front/Api/BaseApiService"; + +export default abstract class BaseSuperAdmin extends BaseApiService { + protected readonly namespaceUrl = this.getBaseUrl().concat("/super-admin"); +} diff --git a/src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts b/src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts new file mode 100644 index 00000000..5a96864a --- /dev/null +++ b/src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts @@ -0,0 +1,67 @@ +import { Service } from "typedi"; +import User from "le-coffre-resources/dist/Notary"; +import BaseSuperAdmin from "../BaseSuperAdmin"; + +@Service() +export default class Users extends BaseSuperAdmin { + private static instance: Users; + private readonly baseURl = this.namespaceUrl.concat("/Users"); + + private constructor() { + super(); + } + + public static getInstance() { + if (!this.instance) { + return new Users(); + } else { + return this.instance; + } + } + + public async get(): Promise { + const url = new URL(this.baseURl); + try { + return await this.getRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } + + public async getAuthorizationCode(): Promise { + try { + const url = + new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1? + client_id=4501646203F3EF67 + &redirect_uri=https://app.stg.lecoffre.smart-chain.fr/ + &scope=openid,profile,offline_access + &response_type=code`); + // const url = new URL("https://jsonplaceholder.typicode.com/todos/1"); + await this.getRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } + + public async getByUid(uid: string): Promise { + const url = new URL(this.baseURl.concat("/").concat(uid)); + try { + return await this.getRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } + + // public async post(params: User): Promise { + // const url = new URL(this.baseURl); + // try { + // return await this.postRequest(url, params); + // } catch (err) { + // this.onError(err); + // return Promise.reject(err); + // } + // } +} diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx index 86ca3248..08cd20ae 100644 --- a/src/front/Components/DesignSystem/Button/index.tsx +++ b/src/front/Components/DesignSystem/Button/index.tsx @@ -1,5 +1,6 @@ -import React from "react"; +import React, { CSSProperties } from "react"; import classes from "./classes.module.scss"; +import Image from "next/image"; export enum EButtonVariant { PRIMARY = "primary", @@ -13,7 +14,8 @@ type IProps = { children?: React.ReactNode; variant?: EButtonVariant; fullwidth?: "true" | "false"; - icon?: React.ReactNode; + icon? : string; + iconStyle?: CSSProperties; disabled?: boolean; type: "button" | "submit"; isloading: string; @@ -33,12 +35,10 @@ export default class Button extends React.Component { public override render(): JSX.Element { const attributes = { ...this.props }; delete attributes.icon; - // let icon = this.props.isloading === "true" ? : this.props.icon; // Notion de loader - let icon = this.props.icon; return ( ); } diff --git a/src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss b/src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss new file mode 100644 index 00000000..571bee50 --- /dev/null +++ b/src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss @@ -0,0 +1,27 @@ +@import "@Themes/constants.scss"; + +.root { + background-color: $grey-soft; + padding: 24px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + + .content { + display:grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 32px; + @media (max-width: $screen-l) { + grid-template-columns: 1fr 1fr; + + } + + &.isSignleDescription { + grid-template-columns: 1fr; + } + } + .edit-icon{ + margin-left: 48px; + } +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx b/src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx new file mode 100644 index 00000000..6a831f26 --- /dev/null +++ b/src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import classNames from "classnames"; +import Image from "next/image"; +import PenICon from "@Assets/Icons/pen.svg"; +import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; +import Typography, { ITypo } from "../../Typography"; + +type IProps = { + folder: IDashBoardFolder; + isDescription: boolean; +}; +type IState = {}; + +export default class FolderBoxInformation extends React.Component { + public static defaultProps = { + isDescription: false, + }; + + public override render(): JSX.Element { + return
+
+ {this.props.isDescription ? +
+ Note dossier : + {this.props.folder.description ?? "..."} +
+ : + <> +
+ Intitulé du dossier + {this.props.folder.name ?? "..."} +
+
+ Numéro de dossier + {this.props.folder.folder_number ?? "..."} +
+
+ Type d’acte + {this.props.folder.deed.deed_type.name ?? "..."} +
+
+ Ouverture du dossier + {this.formatDate(this.props.folder.created_at)} +
+ + } +
+ edit informations +
; + } + + private formatDate(date: Date | null): string { + if(!date) return "..."; + return date.toLocaleDateString("fr-FR", { + year: "numeric", + month: "long", + day: "numeric", + }); + } +} diff --git a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss index 0e7a13ec..0e7e89bf 100644 --- a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss +++ b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss @@ -7,6 +7,7 @@ width: 100%; padding: 24px; border: 1px solid $grey-medium; + cursor: pointer; &:hover{ background-color: $grey-medium; diff --git a/src/front/Components/DesignSystem/FolderContainer/index.tsx b/src/front/Components/DesignSystem/FolderContainer/index.tsx index d97d8be7..aaacfd8d 100644 --- a/src/front/Components/DesignSystem/FolderContainer/index.tsx +++ b/src/front/Components/DesignSystem/FolderContainer/index.tsx @@ -3,20 +3,23 @@ import classes from "./classes.module.scss"; import Typography, { ITypo } from "../Typography"; import Image from "next/image"; import ChevronIcon from "@Assets/Icons/chevron.svg"; -import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import WarningBadge from "../WarningBadge"; +import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; type IProps = { - folder: { - folder_number: OfficeFolder["folder_number"] ; - documents?: OfficeFolder["documents"]; - }; + folder: IDashBoardFolder; + onSelectedFolder?: (folder: IDashBoardFolder) => void; } type IState = {}; export default class FolderContainer extends React.Component { + public constructor(props: IProps) { + super(props); + this.onSelectedFolder = this.onSelectedFolder.bind(this); + } + public override render(): JSX.Element { - return
+ return
{"Dossier ".concat(this.props.folder.folder_number)} {this.countPendingDocuments() > 0 &&
} @@ -29,4 +32,8 @@ export default class FolderContainer extends React.Component { if (!this.props.folder.documents) return 0; return this.props.folder.documents?.filter((document) => document.document_status === "PENDING").length ?? 0; } + + private onSelectedFolder(): void { + this.props.onSelectedFolder && this.props.onSelectedFolder(this.props.folder); + } } diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx index ad6f1de4..75a7d53f 100644 --- a/src/front/Components/DesignSystem/FolderList/index.tsx +++ b/src/front/Components/DesignSystem/FolderList/index.tsx @@ -1,10 +1,11 @@ import React from "react"; import classes from "./classes.module.scss"; import FolderContainer from "../FolderContainer"; -import { IFolder } from "../SearchBar"; +import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; type IProps = { - folders: IFolder[]; + folders: IDashBoardFolder[]; + onSelectedFolder?: (folder: IDashBoardFolder) => void; }; type IState = {}; @@ -12,9 +13,8 @@ type IState = {}; export default class FolderList extends React.Component { public override render(): JSX.Element { return
- {this.props.folders.map((folder, key) => { - - return ; + {this.props.folders.map((folder) => { + return ; })};
; } diff --git a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss index 64dc4cf1..d4c56998 100644 --- a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss +++ b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss @@ -2,6 +2,7 @@ .root { min-height: 100%; + width: 389px; display: flex; flex-direction: column; justify-content: space-between; diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx index a29b3899..868ef01c 100644 --- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx +++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx @@ -1,14 +1,16 @@ import React from "react"; import classes from "./classes.module.scss"; -import SearchBar, { IFolder } from "../SearchBar"; +import SearchBar from "../SearchBar"; import Button from "../Button"; import FolderList from "../FolderList"; +import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; type IProps = { - folders: IFolder[]; + folders: IDashBoardFolder[]; + onSelectedFolder?: (folder: IDashBoardFolder) => void; }; type IState = { - filteredFolders: IFolder[]; + filteredFolders: IDashBoardFolder[]; }; export default class FolderListContainer extends React.Component { @@ -26,7 +28,7 @@ export default class FolderListContainer extends React.Component
- +
@@ -35,7 +37,7 @@ export default class FolderListContainer extends React.Component
; } - private filterFolders(folders: IFolder[]): IFolder[] { + private filterFolders(folders: IDashBoardFolder[]): IDashBoardFolder[] { this.setState({ filteredFolders: folders }) return folders; } diff --git a/src/front/Components/DesignSystem/InformationBox/index.tsx b/src/front/Components/DesignSystem/InformationBox/index.tsx index e8969bbe..276cc98e 100644 --- a/src/front/Components/DesignSystem/InformationBox/index.tsx +++ b/src/front/Components/DesignSystem/InformationBox/index.tsx @@ -15,13 +15,13 @@ type IFolderInformation = { export default class InformationBox extends React.Component { public override render(): JSX.Element { return
- {this.props.informations.map((information, key) => { + {/* {this.props.informations.map((information, key) => { const output =
{information.label} {information.value}
; return output; - })}; + })}; */}
; } } diff --git a/src/front/Components/DesignSystem/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx index f6503f19..57992f94 100644 --- a/src/front/Components/DesignSystem/SearchBar/index.tsx +++ b/src/front/Components/DesignSystem/SearchBar/index.tsx @@ -3,20 +3,16 @@ import classes from "./classes.module.scss"; import LoopIcon from "@Assets/Icons/loop.svg"; import Image from "next/image"; import Typography, { ITypo } from "../Typography"; -import { OfficeFolder } from "le-coffre-resources/dist/Customer"; +import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; type IProps = { - folders: IFolder[]; - onChange?: (folders: IFolder[]) => IFolder[]; + folders: IDashBoardFolder[]; + onChange?: (folders: IDashBoardFolder[]) => IDashBoardFolder[]; }; type IState = { hasValue: boolean; }; -export type IFolder = { - folder_number: OfficeFolder["folder_number"]; - documents?: OfficeFolder["documents"]; -}; export default class SearchBar extends React.Component { public constructor(props: IProps) { @@ -47,7 +43,7 @@ export default class SearchBar extends React.Component { } private filterFolders(event: React.ChangeEvent) { - const filteredFolders: IFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value)); + const filteredFolders: IDashBoardFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value)); return filteredFolders; } } diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index 1c3089fe..ee196f7f 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -10,10 +10,12 @@ import DocumentList from "./DocumentList"; import Button, { EButtonVariant } from "../Button"; import PlusIcon from "@Assets/Icons/plus.svg" import Confirm from "../Modal/Confirm"; +import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; type IProps = { customer: Customer animationDelay?: number; + folder: IDashBoardFolder; }; type IState = { isOpen: boolean; @@ -44,7 +46,7 @@ export default class UserFolder extends React.Component { public override render(): JSX.Element { const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED"); - const otherDocuments: Document[] | null = this.getOtherDocuments(documentsAsked); + const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments(); return
{
- +
@@ -87,23 +89,32 @@ export default class UserFolder extends React.Component { if (!this.props.customer.documents) return 0; const totalDocuments: number = this.props.customer.documents.length; const numberDocumentsAsked: number = this.getDocumentsByStatus("ASKED")?.length || 0; - return Math.round((numberDocumentsAsked / totalDocuments) * 100); + return Math.round(((totalDocuments - numberDocumentsAsked) / totalDocuments) * 100); } private getDocumentsByStatus(status: string): Document[] | null { if (!this.props.customer.documents) return null; - return this.props.customer.documents.filter((document) => document.document_status === status); + return this.props.customer.documents.filter((document) => document.document_status === status && document.folder.uid === this.props.folder.uid); } - private getOtherDocuments(documentToExclude: Document[] | null): Document[] | null { - if (!this.props.customer.documents) return null; - if (!documentToExclude) return this.props.customer.documents; - return this.props.customer.documents.filter((document) => !documentToExclude.includes(document)); + + // Get all documents Validated, pending + private getValidatedAndPendindDocuments(): Document[] | null { + const pendingDocuments = this.getDocumentsByStatus("PENDING"); + const validatedDocuments = this.getDocumentsByStatus("VALIDATED"); + if (!pendingDocuments && !validatedDocuments) return null; + pendingDocuments?.push(...validatedDocuments!); + return pendingDocuments; } + // TODO: REFACTO this because the other documents should only be correspond to other documents of the props folders + // private getOtherDocuments(documentToExclude: Document[] | null): Document[] | null { + // if (!this.props.customer.documents) return null; + // if (!documentToExclude) return this.props.customer.documents; + // return this.props.customer.documents.filter((document) => !documentToExclude.includes(document)); + // } + private toggleOpen(): void { - - if (this.state.isOpen) { this.closeComponent(); } @@ -141,5 +152,5 @@ export default class UserFolder extends React.Component { }) } - + } diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx index b6bd2d98..b738be62 100644 --- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx @@ -46,4 +46,4 @@ export default class DefaultDoubleSidePage extends React.Component void; }; type IState = { - folders: IFolder[]; + folders: IDashBoardFolder[]; }; +export type IDashBoardFolder = { + uid: OfficeFolder["uid"]; + name: OfficeFolder["name"]; + folder_number: OfficeFolder["folder_number"]; + documents?: OfficeFolder["documents"] + description: OfficeFolder["description"]; + deed: OfficeFolder["deed"]; + created_at: OfficeFolder["created_at"]; + office_folder_has_customers?: OfficeFolder["office_folder_has_customers"]; +}; export default class DefaultNotaryDashboard extends React.Component { public static defaultProps = { scrollTop: 0, }; - public constructor(props: IProps) { +public constructor(props: IProps) { super(props); this.state = { folders: folders, @@ -32,7 +42,7 @@ export default class DefaultNotaryDashboard extends React.Component
-
+
{this.props.children}
diff --git a/src/front/Components/Layouts/DesignSystem/dummyData.ts b/src/front/Components/Layouts/DesignSystem/dummyData.ts index ce25c07f..7d5b1d4d 100644 --- a/src/front/Components/Layouts/DesignSystem/dummyData.ts +++ b/src/front/Components/Layouts/DesignSystem/dummyData.ts @@ -8,12 +8,13 @@ import { Customer, DocumentType, Document, + OfficeFolderHasCustomer, } from "le-coffre-resources/dist/Notary"; import { ECustomerStatus } from "le-coffre-resources/dist/Customer/Customer"; import { EFolderStatus } from "le-coffre-resources/dist/Customer/OfficeFolder"; export const address: Address = { - uid: "a&23", + uid: "a&2azedzaa3", address: "123", city: "France", zip_code: 78140, @@ -22,7 +23,7 @@ export const address: Address = { }; export const office: Office = { - uid: "111213", + uid: "111zdazaefez213", idNot: "12EE12", name: "Office 1", crpcen: "AZezdz", @@ -32,7 +33,7 @@ export const office: Office = { office_status: "ACTIVATED", }; export const deedType: DeedType = { - uid: "123312", + uid: "123azefezgzeg312", name: "Acte mariage", description: "dzsdaf", archived_at: new Date(), @@ -42,14 +43,14 @@ export const deedType: DeedType = { }; export const deed: Deed = { - uid: "123124", + uid: "zegefzeferg", deed_type: deedType, created_at: new Date(), updated_at: new Date(), }; export const contact: Contact = { - uid: "123123", + uid: "g('yeh(grgrezg", first_name: "John", last_name: "Doe", email: "johnDoe@gmail.com", @@ -61,9 +62,22 @@ export const contact: Contact = { civility: "MALE", }; +export const contact2: Contact = { + uid: "g('yeh(grgrezg", + first_name: "Customer2", + last_name: "Doe", + email: "johnDoe@gmail.com", + address: address, + created_at: new Date(), + updated_at: new Date(), + cell_phone_number: "0132249865", + phone_number: "0132249865", + civility: "MALE", +}; + export const docType: DocumentType = { name: "Acte de naissance", - uid: "123123", + uid: "fezezfazegezrgrezg", created_at: new Date(), updated_at: new Date(), public_description: "Acte de naissance public description", @@ -71,14 +85,14 @@ export const docType: DocumentType = { archived_at: new Date(), }; export const customer: Customer = { - uid: "123123", + uid: "erhtgerfzeare", contact: contact, created_at: new Date(), updated_at: new Date(), status: ECustomerStatus.VALIDATED, }; export const folder: OfficeFolder = { - uid: "11123312", + uid: "zfaefergregrezterf", folder_number: "12331", name: "Mon dossier", status: EFolderStatus.ARCHIVED, @@ -91,17 +105,7 @@ export const folder: OfficeFolder = { }; export const document: Document = { - uid: "0", - depositor: customer, - document_status: "ASKED", - folder: folder, - document_type: docType, - updated_at: new Date(), - created_at: new Date(), -}; - -export const document2: Document = { - uid: "1", + uid: "fzeafergreztyzgrf", depositor: customer, document_status: "ASKED", folder: folder, @@ -111,7 +115,7 @@ export const document2: Document = { }; export const documentPending: Document = { - uid: "2", + uid: "fzefeazdagrtetrury", depositor: customer, document_status: "PENDING", folder: folder, @@ -121,7 +125,7 @@ export const documentPending: Document = { }; export const documentDeposited: Document = { - uid: "3", + uid: "uè§u§htfgrthytrgr", depositor: customer, document_status: "VALIDATED", folder: folder, @@ -131,18 +135,16 @@ export const documentDeposited: Document = { }; export const customer2: Customer = { - uid: "123123", - contact: contact, + uid: "yregrgetergrt", + contact: contact2, created_at: new Date(), updated_at: new Date(), status: ECustomerStatus.VALIDATED, - documents: [document, document2, documentPending, documentDeposited], + documents: [document, documentPending, documentDeposited, ], }; - - export const folderWithPendingDocument: OfficeFolder = { - uid: "11123312", + uid: "ferzferzfezeefzdd", folder_number: "00001", name: "Mon dossier", status: EFolderStatus.ARCHIVED, @@ -152,10 +154,10 @@ export const folderWithPendingDocument: OfficeFolder = { updated_at: new Date(), description: "Description", archived_description: "Archived description", - documents: [document, document2, documentPending, documentDeposited], + documents: [document, documentPending, documentDeposited], }; export const folderWithPendingDocument1: OfficeFolder = { - uid: "11123312", + uid: "gtrtyutyhretgytu", folder_number: "00002", name: "Mon dossier", status: EFolderStatus.ARCHIVED, @@ -168,7 +170,7 @@ export const folderWithPendingDocument1: OfficeFolder = { documents: [documentDeposited], }; export const folderWithPendingDocument2: OfficeFolder = { - uid: "11123312", + uid: "adzefzefsfrefzrtgtr", folder_number: "00003", name: "Mon dossier", status: EFolderStatus.ARCHIVED, @@ -178,10 +180,37 @@ export const folderWithPendingDocument2: OfficeFolder = { updated_at: new Date(), description: "Description", archived_description: "Archived description", - documents: [document, document2], + documents: [document], }; + +export const officeFolderHasCustomer1: OfficeFolderHasCustomer = { + uid: "ferzfergrzeyerezrz", + customer: customer, + office_folder: folderWithPendingDocument, + created_at: new Date(), + updated_at: new Date(), +}; + +export const officeFolderHasCustomer2: OfficeFolderHasCustomer = { + uid: "tezrfzdfgrggeerry", + customer: customer2, + office_folder: folderWithPendingDocument, + created_at: new Date(), + updated_at: new Date(), +}; + +export const document8: Document = { + uid: "eztreggrgbyunjukhg", + depositor: customer, + document_status: "ASKED", + folder: folderWithPendingDocument, + document_type: docType, + updated_at: new Date(), + created_at: new Date(), +}; + export const folderWithPendingDocument3: OfficeFolder = { - uid: "11123312", + uid: "mkovrijvrezviev", folder_number: "00014", name: "Mon dossier", status: EFolderStatus.ARCHIVED, @@ -191,6 +220,24 @@ export const folderWithPendingDocument3: OfficeFolder = { updated_at: new Date(), description: "Description", archived_description: "Archived description", - documents: [document, document2, documentDeposited, documentPending], + documents: [document, documentDeposited, documentPending], + office_folder_has_customers: [officeFolderHasCustomer1, officeFolderHasCustomer2], }; -export const folders : OfficeFolder[] = [folderWithPendingDocument, folderWithPendingDocument1, folderWithPendingDocument2, folderWithPendingDocument3] + +export const document2: Document = { + uid: "mejfihruehfoire", + depositor: customer, + document_status: "ASKED", + folder: folderWithPendingDocument3, + document_type: docType, + updated_at: new Date(), + created_at: new Date(), +}; + + +export const folders: OfficeFolder[] = [ + folderWithPendingDocument, + folderWithPendingDocument1, + folderWithPendingDocument2, + folderWithPendingDocument3, +]; diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index bfb71a74..f60aee8c 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -172,7 +172,7 @@ export default class DesignSystem extends BasePage {
Folder with no document to validate
- +
@@ -225,7 +225,7 @@ export default class DesignSystem extends BasePage { Notary Documents
- +
diff --git a/src/front/Components/Layouts/Folder/ClientSection/classes.module.scss b/src/front/Components/Layouts/Folder/ClientSection/classes.module.scss new file mode 100644 index 00000000..e15501c8 --- /dev/null +++ b/src/front/Components/Layouts/Folder/ClientSection/classes.module.scss @@ -0,0 +1,19 @@ +@import "@Themes/constants.scss"; + +.root { + width: 100%; + .no-client{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + .title{ + margin-bottom: 16px; + } + + } + .client{ + display: grid; + gap: 32px; + } +} diff --git a/src/front/Components/Layouts/Folder/ClientSection/index.tsx b/src/front/Components/Layouts/Folder/ClientSection/index.tsx new file mode 100644 index 00000000..0caa2007 --- /dev/null +++ b/src/front/Components/Layouts/Folder/ClientSection/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; +import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import PlusIcon from "@Assets/Icons/plus.svg"; +import UserFolder from "@Front/Components/DesignSystem/UserFolder"; + +type IProps = { + folder: IDashBoardFolder; +}; +type IState = {}; + +export default class ClientSection extends React.Component { + public override render(): JSX.Element { + return
+ {this.doesFolderHaveCustomer() ? +
+ {this.renderCustomerFolders()} +
+ : +
+
+ Aucun client n’est associé au dossier. +
+ +
} +
; + } + + private renderCustomerFolders() { + const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer) => { + if (!folderHasCustomer.customer) return null; + // TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder + return
; + }) + return output ?? null; + } + + private doesFolderHaveCustomer(): boolean { + return this.props.folder.office_folder_has_customers !== undefined; + } +} diff --git a/src/front/Components/Layouts/Folder/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss new file mode 100644 index 00000000..f2f055f7 --- /dev/null +++ b/src/front/Components/Layouts/Folder/classes.module.scss @@ -0,0 +1,44 @@ +.root { + display: flex; + align-items: center; + flex-direction: column; + min-height: 100%; + + + .folder-informations { + width: 100%; + min-height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + flex-grow: 1; + + .folder-header { + width: 100%; + + .header { + margin-bottom: 32px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + } + + .second-box { + margin-top: 24px; + margin-bottom: 32px; + } + + .progress-bar{ + margin-bottom: 32px; + } + + .button-container{ + :first-child{ + margin-right: 12px; + } + } + } +} \ No newline at end of file diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx new file mode 100644 index 00000000..9df3824d --- /dev/null +++ b/src/front/Components/Layouts/Folder/index.tsx @@ -0,0 +1,69 @@ +import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; +import BasePage from "../Base"; +import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; +import classes from "./classes.module.scss"; +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import FolderBoxInformation from "@Front/Components/DesignSystem/Elements/FolderBoxInformation"; +import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; +import ClientSection from "./ClientSection"; +import ChevronIcon from "@Assets/Icons/chevron.svg"; +import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users"; + +type IProps = {}; +type IState = { + selectedFolder: IDashBoardFolder | null; +}; +export default class Folder extends BasePage{ + public constructor(props: IProps) { + super(props); + this.state = { + selectedFolder: null, + }; + this.onSelectedFolder = this.onSelectedFolder.bind(this); + } + + public override render(): JSX.Element { + return ( + +
+ {this.state.selectedFolder &&
+
+
+ Informations du dossier + +
+ +
+ +
+
+ +
+ {this.doesFolderHaveCustomer() && } +
+ + {!this.doesFolderHaveCustomer() && } + +
+ + +
+
} +
+ + ); + } + + public override async componentDidMount() { + const users = await Users.getInstance().getByUid("5rOlvAleeX"); + console.log(users); + } + + private doesFolderHaveCustomer(): boolean { + return this.state.selectedFolder?.office_folder_has_customers !== undefined; + } + + private onSelectedFolder(folder: IDashBoardFolder): void { + this.setState({ selectedFolder: folder }); + } +} diff --git a/src/front/Components/Layouts/FolderInfomations/classes.module.scss b/src/front/Components/Layouts/FolderInfomations/classes.module.scss deleted file mode 100644 index 53e48bc0..00000000 --- a/src/front/Components/Layouts/FolderInfomations/classes.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -.root { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - .title { - margin: 32px 0; - text-align: center; - } - - .forget-password { - margin-top: 32px; - margin-bottom: 8px; - } -} \ No newline at end of file diff --git a/src/front/Components/Layouts/FolderInfomations/index.tsx b/src/front/Components/Layouts/FolderInfomations/index.tsx deleted file mode 100644 index 70306e12..00000000 --- a/src/front/Components/Layouts/FolderInfomations/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; -import BasePage from "../Base"; - -export default class FolderInfomations extends BasePage { - public override render(): JSX.Element { - return ( - - - ); - } -} diff --git a/src/front/Config/VariablesFront.ts b/src/front/Config/VariablesFront.ts index fbbe7e55..12cc48e4 100644 --- a/src/front/Config/VariablesFront.ts +++ b/src/front/Config/VariablesFront.ts @@ -1,31 +1,22 @@ -import { Service } from "typedi"; - -@Service() export class FrontendVariables { - private static instance: FrontendVariables; + private static instance: FrontendVariables; - public readonly WEB_LABEL: string; + public BACK_API_PROTOCOL!: string; - public readonly WEB_PORT!: string; + public BACK_API_HOST!: string; - public readonly WEB_ROOT_URL!: string; + public BACK_API_PORT!: string; - public readonly NEXT_PUBLIC_API_URL!: string; + public BACK_API_ROOT_URL!: string; - public readonly NODE_ENV!: string; + public BACK_API_VERSION!: string; - constructor() { - this.NODE_ENV = process.env["NODE_ENV"]!; - this.WEB_LABEL = process.env["WEB_LABEL"]!; - this.WEB_PORT = process.env["WEB_PORT"]!; - this.WEB_ROOT_URL = process.env["WEB_ROOT_URL"]!; - this.NEXT_PUBLIC_API_URL = process.env["NEXT_PUBLIC_API_URL"]!; - } + private constructor() {} - public static getInstance(): FrontendVariables { - if (!this.instance) { - this.instance = new this(); - } - return this.instance; - } + public static getInstance(): FrontendVariables { + if (!this.instance) { + this.instance = new this(); + } + return this.instance; + } } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index de0c6b71..4bf451a8 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,4 +1,5 @@ import { DefaultLayout } from "@Front/Components/LayoutTemplates/DefaultLayout"; +import { FrontendVariables } from "@Front/Config/VariablesFront"; import "@Front/index.scss"; import type { NextPage } from "next"; import type { AppType, AppProps } from "next/app"; @@ -10,12 +11,34 @@ export type NextPageWithLayout, TInitialProps = type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; +} & { + backApiProtocol: string, + backApiHost: string, + backApiPort: string, + backApiRootUrl: string, + backApiVersion: string, }; -const MyApp = (({ Component, pageProps }: AppPropsWithLayout) => { +const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPort, backApiRootUrl, backApiVersion }: AppPropsWithLayout) => { const getLayout = Component.getLayout ?? ((page) => ); + FrontendVariables.getInstance().BACK_API_PROTOCOL = backApiProtocol; + FrontendVariables.getInstance().BACK_API_HOST = backApiHost; + FrontendVariables.getInstance().BACK_API_PORT = backApiPort; + FrontendVariables.getInstance().BACK_API_ROOT_URL = backApiRootUrl; + FrontendVariables.getInstance().BACK_API_VERSION = backApiVersion; + return getLayout(); }) as AppType; +MyApp.getInitialProps = async () => { + return { + backApiProtocol: process.env["BACK_API_PROTOCOL"], + backApiHost: process.env["BACK_API_HOST"], + backApiPort: process.env["BACK_API_PORT"], + backApiRootUrl: process.env["BACK_API_ROOT_URL"], + backApiVersion: process.env["BACK_API_VERSION"], + }; +} + export default MyApp; diff --git a/src/pages/dossier.tsx b/src/pages/dossier.tsx new file mode 100644 index 00000000..f5f42bc2 --- /dev/null +++ b/src/pages/dossier.tsx @@ -0,0 +1,5 @@ +import Folder from "@Front/Components/Layouts/Folder"; + +export default function Route() { + return ; +} diff --git a/src/pages/folder-informations.tsx b/src/pages/folder-informations.tsx deleted file mode 100644 index 6283ee50..00000000 --- a/src/pages/folder-informations.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import FolderInfomations from "@Front/Components/Layouts/FolderInfomations"; - -export default function Route() { - return ; -} diff --git a/tsconfig.json b/tsconfig.json index 7662a30c..e13e0501 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -75,3 +75,4 @@ "node_modules" ] } +