✨ Fixing folders

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

@@ -4,9 +4,11 @@ import Link from "next/link";
 import React from "react";
 
 import Button from "../Button";
-import FolderList from "../FolderList";
 import SearchBar from "../SearchBar";
 import classes from "./classes.module.scss";
+import BlockList, { IBlock } from "../BlockList";
+import { NextRouter, useRouter } from "next/router";
+import { EDocumentStatus } from "le-coffre-resources/dist/SuperAdmin/Document";
 
 type IProps = {
 	folders: IDashBoardFolder[];
@@ -14,17 +16,26 @@ type IProps = {
 	onSelectedFolder?: (folder: IDashBoardFolder) => void;
 	onCloseLeftSide?: () => void;
 };
+
+type IPropsClass = IProps & {
+	router: NextRouter;
+};
+
 type IState = {
 	filteredFolders: IDashBoardFolder[];
 };
 
-export default class FolderListContainer extends React.Component<IProps, IState> {
+class FolderListContainerClass extends React.Component<IPropsClass, IState> {
-	public constructor(props: IProps) {
+	private redirectPath: string = this.props.isArchived
+		? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
+		: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
+	public constructor(props: IPropsClass) {
 		super(props);
 		this.state = {
 			filteredFolders: this.props.folders,
 		};
 		this.filterFolders = this.filterFolders.bind(this);
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 	}
 
 	public override render(): JSX.Element {
@@ -33,15 +44,10 @@ export default class FolderListContainer extends React.Component<IProps, IState>
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
 					<div className={classes["searchbar"]}>
-						<SearchBar folders={this.props.folders} onChange={this.filterFolders} placeholder="Chercher un dossier" />
+						<SearchBar onChange={this.filterFolders} placeholder="Chercher un dossier" />
 					</div>
 					<div className={classes["folderlist-container"]}>
-						<FolderList
+						<BlockList blocks={this.getBlocks()} onSelectedBlock={this.onSelectedFolder} />
-							folders={this.state.filteredFolders}
-							onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder}
-							onCloseLeftSide={this.props.onCloseLeftSide}
-							isArchived={this.props.isArchived}
-						/>
 					</div>
 				</div>
 				{!this.props.isArchived && (
@@ -55,8 +61,62 @@ export default class FolderListContainer extends React.Component<IProps, IState>
 		);
 	}
 
-	private filterFolders(folders: IDashBoardFolder[]): IDashBoardFolder[] {
+	private getBlocks(): IBlock[] {
-		this.setState({ filteredFolders: folders });
+		const pendingFolders = this.props.folders
-		return folders;
+			.filter((folder) => {
+				const pendingDocuments = (folder.documents ?? []).filter(
+					(document) => document.document_status === EDocumentStatus.DEPOSITED,
+				);
+				return pendingDocuments.length >= 1;
+			})
+			.sort((folder1, folder2) => {
+				return folder1.created_at! > folder2.created_at! ? -1 : 1;
+			});
+
+		const otherFolders = this.props.folders
+			.filter((folder) => {
+				const pendingDocuments = (folder.documents ?? []).filter(
+					(document) => document.document_status === EDocumentStatus.DEPOSITED,
+				);
+				return pendingDocuments.length === 0;
+			})
+			.sort((folder1, folder2) => {
+				return folder1.created_at! > folder2.created_at! ? -1 : 1;
+			});
+
+		return [...pendingFolders, ...otherFolders].map((folder) => {
+			return { id: folder.uid!, name: folder.folder_number! + " - " + folder.name! };
+		});
+	}
+	private onSelectedFolder(block: IBlock) {
+		const folder = this.props.folders.find((folder) => folder.uid === block.id);
+		if (!folder) return;
+		this.props.onSelectedFolder && this.props.onSelectedFolder(folder);
+		const path = this.redirectPath.replace("[folderUid]", folder.uid ?? "");
+		this.props.router.push(path);
+	}
+
+	private filterFolders(value: string): void {
+		const filteredFolders: IDashBoardFolder[] = this.props.folders.filter((folder) => {
+			const name = folder.name.toLowerCase();
+			const number = folder.folder_number.toLowerCase();
+
+			if (folder.customers) {
+				const customerNames = folder.customers
+					.map((customer) => {
+						return `${customer.contact?.first_name.toLowerCase()} ${customer.contact?.last_name.toLowerCase()}`;
+					})
+					.join(", ");
+				return name.includes(value) || number.includes(value) || customerNames.includes(value);
+			}
+
+			return name.includes(value) || number.includes(value);
+		});
+		this.setState({ filteredFolders });
 	}
 }
+
+export default function FolderListContainer(props: IProps) {
+	const router = useRouter();
+	return <FolderListContainerClass {...props} router={router} />;
+}

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

@@ -4,10 +4,8 @@ import React from "react";
 
 import Typography, { ITypo } from "../Typography";
 import classes from "./classes.module.scss";
-import { IBlock } from "../BlockList";
 
 type IProps = {
-	blocks: IBlock[];
 	onChange?: (input: string) => void;
 	placeholder?: string;
 };

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx

@@ -43,16 +43,7 @@ export default function CollaboratorListContainer(props: IProps) {
 		<div className={classes["root"]}>
 			<div className={classes["header"]}>
 				<div className={classes["searchbar"]}>
-					<SearchBar
+					<SearchBar onChange={filterUsers} placeholder="Chercher un collaborateur" />
-						blocks={props.collaborators.map((collaborator) => {
-							return {
-								name: collaborator.contact?.first_name + " " + collaborator.contact?.last_name,
-								id: collaborator.uid!,
-							};
-						})}
-						onChange={filterUsers}
-						placeholder="Chercher un collaborateur"
-					/>
 				</div>
 				<div className={classes["folderlist-container"]}>
 					<BlockList

src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss

@@ -18,6 +18,7 @@
 		@media (max-width: $screen-s) {
 			grid-template-columns: repeat(1, 1fr);
 		}
+
 		.user-infos-row {
 			display: flex;
 			flex-direction: column;