Merge branch 'dev' of https://github.com/smart-chain-fr/leCoffre-front into dev

src/front/Assets/icons/loop.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4351 10.0629H10.7124L10.4563 9.81589C11.3528 8.77301 11.8925 7.4191 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.4191 11.8925 8.77301 11.3528 9.81589 10.4563L10.0629 10.7124V11.4351L14.6369 16L16 14.6369L11.4351 10.0629ZM5.94625 10.0629C3.66838 10.0629 1.82962 8.22413 1.82962 5.94625C1.82962 3.66838 3.66838 1.82962 5.94625 1.82962C8.22413 1.82962 10.0629 3.66838 10.0629 5.94625C10.0629 8.22413 8.22413 10.0629 5.94625 10.0629Z" fill="#939393"/>
+</svg>

src/front/Components/DesignSystem/FolderContainer/classes.module.scss

@@ -8,16 +8,17 @@
     padding: 24px;
     border: 1px solid $grey-medium;
 
+    &:hover{
+        background-color: $grey-medium;
+    }
+
     .left-side {
         display: inline-flex;
         justify-content: space-between;
         align-items: center;
 
-        .warning-circle {
+        .warning{
             margin-left: 32px;
-            padding: 6px;
-            border-radius: 100px;
-            background-color: $orange-flash;
         }
     }
 }

src/front/Components/DesignSystem/FolderContainer/index.tsx

@@ -8,7 +8,7 @@ import WarningBadge from "../WarningBadge";
 
 type IProps = {
 	folder: {
-		folder_number: OfficeFolder["folder_number"];
+		folder_number: OfficeFolder["folder_number"] ;
 		documents?: OfficeFolder["documents"];
 	};
 }
@@ -19,15 +19,14 @@ export default class FolderContainer extends React.Component<IProps, IState> {
 		return <div className={classes["root"]}>
 			<div className={classes["left-side"]}>
 				<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
-				{this.countPendingDocuments() > 0 && <WarningBadge />}
-				
+				{this.countPendingDocuments() > 0 && <div className={classes["warning"]}><WarningBadge /></div>}
 			</div>
 			<Image alt="chevron" src={ChevronIcon} />
 		</div>;
 	}
 
 	private countPendingDocuments(): number {
-		if(!this.props.folder.documents) return 0;
+		if (!this.props.folder.documents) return 0;
 		return this.props.folder.documents?.filter((document) => document.document_status === "PENDING").length ?? 0;
 	}
 }

src/front/Components/DesignSystem/FolderList/classes.module.scss

@@ -0,0 +1,4 @@
+@import "@Themes/constants.scss";
+
+.root {
+}

src/front/Components/DesignSystem/FolderList/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import FolderContainer from "../FolderContainer";
+import { IFolder } from "../SearchBar";
+
+type IProps = {
+	folders: IFolder[];
+};
+
+type IState = {};
+
+export default class FolderList extends React.Component<IProps, IState> {
+	public override render(): JSX.Element {
+		return <div className={classes["root"]}>
+			{this.props.folders.map((folder, key) => {
+				
+				return <FolderContainer folder={folder} key={key}/>;
+			})};
+		</div>;
+	}
+}

src/front/Components/DesignSystem/FolderListContainer/classes.module.scss

@@ -0,0 +1,11 @@
+@import "@Themes/constants.scss";
+
+.root {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .searchbar{
+        padding: 40px 24px 24px 24px;
+    }
+}

src/front/Components/DesignSystem/FolderListContainer/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import SearchBar, { IFolder } from "../SearchBar";
+import Button from "../Button";
+import FolderList from "../FolderList";
+
+type IProps = {
+	folders: IFolder[];
+};
+type IState = {
+	filteredFolders: IFolder[];
+};
+
+export default class FolderListContainer extends React.Component<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			filteredFolders: this.props.folders,
+		};
+		this.filterFolders = this.filterFolders.bind(this);
+	}
+
+	public override render(): JSX.Element {
+		return <div className={classes["root"]}>
+			<div>
+				<div className={classes["searchbar"]}>
+					<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
+				</div>
+				<FolderList folders={this.state.filteredFolders} />
+			</div>
+			<div>
+
+				<Button fullwidth={"true"}>Créer un dossier</Button>
+			</div>
+		</div>;
+	}
+
+	private filterFolders(folders: IFolder[]): IFolder[] {
+		this.setState({ filteredFolders: folders })
+		return folders;
+	}
+}

src/front/Components/DesignSystem/InformationBox/index.tsx

@@ -15,8 +15,8 @@ type IFolderInformation = {
 export default class InformationBox extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return <div className={classes["root"]}>
-			{this.props.informations.map((information) => {
-				const output = <div className={classes["information"]}>
+			{this.props.informations.map((information, key) => {
+				const output = <div className={classes["information"] } key={key}>
 					<span className={classes["label"]}>{information.label}</span>
 					<span className={classes["value"]}>{information.value}</span>
 				</div>;

src/front/Components/DesignSystem/SearchBar/classes.module.scss

@@ -0,0 +1,31 @@
+@import "@Themes/constants.scss";
+
+.root {
+    display: flex;
+    align-items: center;
+    padding-left: 24px;
+    background-color: $white;
+    border: 1px solid $grey-medium;
+    position: relative;
+
+    .fake-placeholder {
+        position: absolute;
+        left: 47px;
+        top: 24px;
+        color: $grey;
+        pointer-events: none;
+    }
+
+    .input {
+        border: 0;
+        margin-left: 8px;
+        padding: 24px 0;
+        width: 100%;
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 22px;
+        color: $grey;
+    }
+}

src/front/Components/DesignSystem/SearchBar/index.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+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";
+
+type IProps = {
+	folders: IFolder[];
+	onChange?: (folders: IFolder[]) => IFolder[];
+};
+type IState = {
+	hasValue: boolean;
+};
+
+export type IFolder = {
+	folder_number: OfficeFolder["folder_number"];
+	documents?: OfficeFolder["documents"];
+};
+
+export default class SearchBar extends React.Component<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			hasValue: false,
+		};
+		this.doesInputHaveValue = this.doesInputHaveValue.bind(this);
+		this.onChange = this.onChange.bind(this);
+	}
+	public override render(): JSX.Element {
+		return <div className={classes["root"]}>
+			<Image src={LoopIcon} alt="Loop icon" />
+			{!this.state.hasValue && <Typography typo={ITypo.P_ERR_18}><div className={classes["fake-placeholder"]}>Select</div></Typography>}
+			<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
+		</div>;
+	}
+
+	private onChange(event: React.ChangeEvent<HTMLInputElement>) {
+		const hasValue = event.target.value.length > 0
+		this.doesInputHaveValue(hasValue);
+		if (!this.props.onChange) return;
+		this.props.onChange(this.filterFolders(event));
+	}
+
+	private doesInputHaveValue(hasValue: boolean) {
+		this.setState({ hasValue });
+	}
+
+	private filterFolders(event: React.ChangeEvent<HTMLInputElement>) {
+		const filteredFolders: IFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value));
+		return filteredFolders;
+	}
+}

src/front/Components/DesignSystem/UserFolder/index.tsx

@@ -130,7 +130,6 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	}
 
 	private openDeletionModal(uid: string): void {
-		console.log("Delete item > ", uid);
 		// TODO: call API to delete document
 		this.setState({
 			isOpenDeletionModal: true

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss

@@ -0,0 +1,14 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.content {
+		.left-side {
+			max-width: 389px;
+			height: calc(100vh - 83px);
+		}
+
+		.right-side {
+			width: 100%;
+		}
+	}
+}

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx

@@ -0,0 +1,42 @@
+import 'reflect-metadata';
+import React, { ReactNode } from "react";
+import classes from "./classes.module.scss";
+import { IFolder } from "@Front/Components/DesignSystem/SearchBar";
+import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"
+import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
+import Header from "@Front/Components/DesignSystem/Header";
+import Version from "@Front/Components/DesignSystem/Version";
+
+type IProps = {
+	title: string;
+	children?: ReactNode;
+};
+type IState = {
+	folders: IFolder[];
+};
+
+export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
+	public static defaultProps = {
+		scrollTop: 0,
+	};
+
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			folders: folders,
+		};
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<div className={classes["root"]}>
+				<Header isUserConnected={true} />
+				<div className={classes["content"]}>
+					<div className={classes["left-side"]}><FolderListContainer folders={this.state.folders} /></div>
+					<div className={classes["right-side"]}>{this.props.children}</div>
+				</div>
+				<Version />
+			</div>
+		);
+	}
+}

src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 import classes from "./classes.module.scss";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
+import 'reflect-metadata';
 
 type IProps = {
 	title: string;
@@ -21,7 +22,7 @@ export default class DefaultTemplate extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<>
-				<Header isUserConnected={true}/>
+				<Header isUserConnected={true} />
 				<div className={classes["root"]}>
 					<div className={classes["content"]}>{this.props.children}</div>
 				</div>

src/front/Components/Layouts/DesignSystem/dummyData.ts

@@ -48,19 +48,6 @@ export const deed: Deed = {
   updated_at: new Date(),
 };
 
-export const folder: OfficeFolder = {
-  uid: "11123312",
-  folder_number: "12331",
-  name: "Mon dossier",
-  status: EFolderStatus.ARCHIVED,
-  deed: deed,
-  office: office,
-  created_at: new Date(),
-  updated_at: new Date(),
-  description: "Description",
-  archived_description: "Archived description",
-};
-
 export const contact: Contact = {
   uid: "123123",
   first_name: "John",
@@ -90,6 +77,18 @@ export const customer: Customer = {
   updated_at: new Date(),
   status: ECustomerStatus.VALIDATED,
 };
+export const folder: OfficeFolder = {
+  uid: "11123312",
+  folder_number: "12331",
+  name: "Mon dossier",
+  status: EFolderStatus.ARCHIVED,
+  deed: deed,
+  office: office,
+  created_at: new Date(),
+  updated_at: new Date(),
+  description: "Description",
+  archived_description: "Archived description",
+};
 
 export const document: Document = {
   uid: "0",
@@ -140,9 +139,11 @@ export const customer2: Customer = {
   documents: [document, document2, documentPending, documentDeposited],
 };
 
+
+
 export const folderWithPendingDocument: OfficeFolder = {
   uid: "11123312",
-  folder_number: "12332",
+  folder_number: "00001",
   name: "Mon dossier",
   status: EFolderStatus.ARCHIVED,
   deed: deed,
@@ -151,5 +152,45 @@ export const folderWithPendingDocument: OfficeFolder = {
   updated_at: new Date(),
   description: "Description",
   archived_description: "Archived description",
-  documents: [documentPending],
+  documents: [document, document2, documentPending, documentDeposited],
 };
+export const folderWithPendingDocument1: OfficeFolder = {
+  uid: "11123312",
+  folder_number: "00002",
+  name: "Mon dossier",
+  status: EFolderStatus.ARCHIVED,
+  deed: deed,
+  office: office,
+  created_at: new Date(),
+  updated_at: new Date(),
+  description: "Description",
+  archived_description: "Archived description",
+  documents: [documentDeposited],
+};
+export const folderWithPendingDocument2: OfficeFolder = {
+  uid: "11123312",
+  folder_number: "00003",
+  name: "Mon dossier",
+  status: EFolderStatus.ARCHIVED,
+  deed: deed,
+  office: office,
+  created_at: new Date(),
+  updated_at: new Date(),
+  description: "Description",
+  archived_description: "Archived description",
+  documents: [document, document2],
+};
+export const folderWithPendingDocument3: OfficeFolder = {
+  uid: "11123312",
+  folder_number: "00014",
+  name: "Mon dossier",
+  status: EFolderStatus.ARCHIVED,
+  deed: deed,
+  office: office,
+  created_at: new Date(),
+  updated_at: new Date(),
+  description: "Description",
+  archived_description: "Archived description",
+  documents: [document, document2, documentDeposited, documentPending],
+};
+export const folders : OfficeFolder[] = [folderWithPendingDocument, folderWithPendingDocument1, folderWithPendingDocument2, folderWithPendingDocument3]

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -13,11 +13,13 @@ import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import "reflect-metadata";
 import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
-import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument } from "./dummyData"
+import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData"
 import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
 import Select, { IOption } from "@Front/Components/DesignSystem/Select";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
 import MultiSelect from "@Front/Components/DesignSystem/Materials/MultiSelect";
+import SearchBar from "@Front/Components/DesignSystem/SearchBar";
+import FolderList from "@Front/Components/DesignSystem/FolderListContainer";
 
 type IState = {
 	isModalDisplayed: boolean;
@@ -65,8 +67,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							</Typography>
 						</div>
 					</div>
-					<MultiSelect options={selectOptions} placeholder="Numéro CRPCEN"/>
-
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>Button components</Typography>
@@ -229,6 +229,35 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						</div>
 					</div>
 
+					<div className={classes["section"]}>
+						<div className={classes["sub-section"]}>
+							<Typography typo={ITypo.H3}>MultiSelect</Typography>
+						</div>
+						<div className={classes["sub-section"]}>
+							<MultiSelect options={selectOptions} placeholder="Numéro CRPCEN" />
+						</div>
+					</div>
+
+
+					<div className={classes["section"]}>
+						<div className={classes["sub-section"]}>
+							<Typography typo={ITypo.H3}>Document SearchBar</Typography>
+						</div>
+						<div className={classes["sub-section"]}>
+							<SearchBar folders={folders} />
+						</div>
+					</div>
+
+					<div className={classes["section"]}>
+						<div className={classes["sub-section"]}>
+							<Typography typo={ITypo.H3}>Folder List</Typography>
+						</div>
+						<div className={classes["sub-section"]}>
+							<FolderList folders={folders} />
+						</div>
+					</div>
+
+
 				</div>
 			</DefaultTemplate>
 		);

src/front/Components/Layouts/FolderInfomations/classes.module.scss

@@ -0,0 +1,16 @@
+.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;
+    }
+}

src/front/Components/Layouts/FolderInfomations/index.tsx

@@ -0,0 +1,11 @@
+import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import BasePage from "../Base";
+
+export default class FolderInfomations extends BasePage {
+	public override render(): JSX.Element {
+		return (
+			<DefaultNotaryDashboard title={""}>
+			</DefaultNotaryDashboard>
+		);
+	}
+}

src/pages/folder-informations.tsx

@@ -0,0 +1,5 @@
+import FolderInfomations from "@Front/Components/Layouts/FolderInfomations";
+
+export default function Route() {
+	return <FolderInfomations />;
+}