functionnal searchbar for front end folder list (#6)

We need to add infinite scroll to this component

1) Folder list ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=5121c3f117db4114b998f8a560c9dc90

2) SearchBar ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=8dd6f1a469b840fc86dd51c596e211bf

3) Fixes ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=0b1860df9481401582e1da03d7b127d9

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) => {
+				
+				return <FolderContainer folder={folder} />;
+			})};
+		</div>;
+	}
+}

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

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

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

@@ -0,0 +1,36 @@
+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> {
+	//coinstructor
+	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"]}>
+			<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
+			<FolderList folders={this.state.filteredFolders}/>
+			<Button fullwidth={"true"}>Créer un dossier</Button>
+		</div>;
+	}
+
+	private filterFolders(folders: IFolder[]) :IFolder[] {
+		this.setState({ filteredFolders: folders })
+		return folders;
+	}
+}

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/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;
@@ -37,7 +39,7 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 		this.onSelectedOption = this.onSelectedOption.bind(this);
 	}
 
-	
+
 	public override render(): JSX.Element {
 
 		const selectOptions: IOption[] = [
@@ -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>
 		);