✨ add uid in url for folder

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": false,
+    "editor.formatOnSave": true,
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },

prettier.config.js

@@ -1,17 +1,24 @@
 module.exports = {
-  overrides: [
+	overrides: [
-    {
+		{
-      files: ["src//*.ts", "src//.tsx", "src/**/.scss", "./*.js"],
+			files: [
-      options: {
+				"src//*.ts",
-        tabWidth: 4,
+				"src//.tsx",
-        useTabs: true,
+				"src/**/.scss",
-        singleQuote: false,
+				"./*.js",
-        trailingComma: "all",
+			],
-        printWidth: 140,
+			options: {
-        endOfLine: "lf",
+				tabWidth: 4,
-        semi: true,
+				useTabs: true,
-        bracketSameLine: true,
+				singleQuote: false,
-      },
+				trailingComma:
-    },
+					"all",
-  ],
+				printWidth: 140,
+				endOfLine:
+					"lf",
+				semi: true,
+				bracketSameLine: true,
+			},
+		},
+	],
 };

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

@@ -2,6 +2,7 @@ import React from "react";
 import classes from "./classes.module.scss";
 import FolderContainer from "../FolderContainer";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import Link from "next/link";
 
 type IProps = {
 	folders: IDashBoardFolder[];
@@ -16,7 +17,9 @@ export default class FolderList extends React.Component<IProps, IState> {
 		return <div className={classes["root"]}>
 			{this.props.folders.map((folder) => {
 				return <div onClick={this.props.onCloseLeftSide} key={folder.uid}>
+					<Link href={"/dossier/".concat(folder.uid)}>
 					<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
+					</Link>
 				</div>
 			})};
 		</div>;

src/front/Components/Elements/InputField/index.tsx

@@ -42,6 +42,7 @@ export default class InputField extends React.Component<IProps> {
 						{this.props.inputStatus === "success" && <Image alt="success icon" src={SuccessIcon} />}
 						{this.props.inputStatus === "error" && <Image alt="error icon" src={ErrorIcon} />}
 					</div>
+
 				</div>
 				{this.props.errorMsg && <div className={classes["errorMsg"]}>{this.props.errorMsg}</div>}
 			</>

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

@@ -38,7 +38,6 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
 			{ value: "adazzqsdaad", label: "jane Doe" },
 			{ value: "adazzqsdaad", label: "Marcelino Doe" },
 		];
-		console.log("this.state.hasNewClientSelected", this.state.hasNewClientSelected)
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
@@ -80,7 +79,6 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
 	}
 
 	private onMutiSelectChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>): void {
-		console.log(newValue.length <= 0)
 		if (newValue.length <= 0) {
 			this.setState({ hasNewClientSelected: false });
 			return;

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

@@ -2,13 +2,13 @@ import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/Layo
 import BasePage from "../Base";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import classes from "./classes.module.scss";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+// import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
+// import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
-import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
+// import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
-import ClientSection from "./ClientSection";
+// import ClientSection from "./ClientSection";
-import ChevronIcon from "@Assets/Icons/chevron.svg";
+// import ChevronIcon from "@Assets/Icons/chevron.svg";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+// import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
-import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+// import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 
 type IProps = {};
 type IState = {
@@ -32,7 +32,7 @@ export default class Folder extends BasePage<IProps, IState>{
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
-					{this.state.selectedFolder
+					{/* {this.state.selectedFolder
 						?
 						<div className={classes["folder-informations"]}>
 							<div className={classes["folder-header"]}>
@@ -69,13 +69,13 @@ export default class Folder extends BasePage<IProps, IState>{
 									<InputField name="input field" fakeplaceholder="Description" textarea />
 							</Confirm>
 						</div>
-						:
+						: */}
 						<div className={classes["no-folder-selected"]}>
 							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 							<div className={classes["choose-a-folder"]}>
 								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>Veuillez sélectionner un dossier.</Typography>
 							</div>
-						</div>}
+						</div>
 				</div>
 			</DefaultNotaryDashboard>
 		);
@@ -84,9 +84,9 @@ export default class Folder extends BasePage<IProps, IState>{
 		// const users = await Users.getInstance().getByUid("5rOlvAleeX");
 	}
 
-	private doesFolderHaveCustomer(): boolean {
+	// private doesFolderHaveCustomer(): boolean {
-		return this.state.selectedFolder?.office_folder_has_customers !== undefined;
+	// 	return this.state.selectedFolder?.office_folder_has_customers !== undefined;
-	}
+	// }
 
 	private onSelectedFolder(folder: IDashBoardFolder): void {
 		this.setState({ selectedFolder: folder });

src/front/Components/Layouts/FolderInformation/ClientSection/index.tsx

@@ -24,7 +24,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					<div className={classes["title"]}>
 						<Typography typo={ITypo.P_18}>Aucun client n’est associé au dossier.</Typography>
 					</div>
-					<Link href={"/dossier/ajouter-client"}>
+					<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
 					<Button variant={EButtonVariant.LINE} icon={PlusIcon}>Ajouter un client</Button>
 					</Link>
 				</div>}

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

@@ -0,0 +1,72 @@
+@import "@Themes/constants.scss";
+
+.root {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    min-height: 100%;
+
+    .no-folder-selected {
+        width: 100%;
+
+        .choose-a-folder {
+            margin-top: 96px;
+            text-align: center;
+        }
+    }
+
+    .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;
+                flex-wrap: wrap;
+            }
+        }
+
+        .second-box {
+            margin-top: 24px;
+            margin-bottom: 32px;
+        }
+
+        .progress-bar {
+            margin-bottom: 32px;
+        }
+
+        .button-container {
+            width: 100%;
+            text-align: center;
+            :first-child {
+                margin-right: 12px;
+            }
+            > * {
+                margin: auto;
+            }
+            @media (max-width: $screen-m) {
+                :first-child {
+                    margin-right: 0;
+                    margin-bottom: 12px;
+                }
+                > * {
+                    width: 100%;
+                }
+            }
+        }
+        .modal-title{
+            margin-bottom: 24px;
+        }
+    }
+}

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

@@ -0,0 +1,114 @@
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import BasePage from "../Base";
+import Typography, { ITypo, ITypoColor } 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/FolderBoxInformation";
+import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
+import ClientSection from "./ClientSection";
+import ChevronIcon from "@Assets/Icons/chevron.svg";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import { useRouter } from "next/router";
+
+type IPropsClass = {
+	selectedFolderUid: string;
+};
+type IState = {
+	selectedFolder: IDashBoardFolder | null;
+	isArchivedModalOpen: boolean;
+};
+class FolderInformationClass extends BasePage<IPropsClass, IState>{
+	public constructor(props: IPropsClass) {
+		super(props);
+		this.state = {
+			selectedFolder: null,
+			isArchivedModalOpen: false,
+		};
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+		this.openArchivedModal = this.openArchivedModal.bind(this);
+		this.closeArchivedModal = this.closeArchivedModal.bind(this);
+	}
+
+	// TODO: Message if the user has not created any folder yet
+	public override render(): JSX.Element {
+		return (
+			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
+				<div className={classes["root"]}>
+					{this.state.selectedFolder
+						?
+						<div className={classes["folder-informations"]}>
+							<div className={classes["folder-header"]}>
+								<div className={classes["header"]}>
+									<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+									<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>Modifier les collaborateurs</Button>
+								</div>
+								<FolderBoxInformation folder={this.state.selectedFolder} />
+								<div className={classes["second-box"]}>
+									<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
+								</div>
+								<div className={classes["progress-bar"]}>
+									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
+								</div>
+								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
+							</div>
+
+							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
+
+							<div className={classes["button-container"]}>
+								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>Archiver le dossier</Button>
+								<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
+							</div>
+							<Confirm
+								isOpen={this.state.isArchivedModalOpen}
+								onClose={this.closeArchivedModal}
+								closeBtn
+								header={"Archiver le dossier ?"}
+								cancelText={"Annuler"}
+								confirmText={"Archiver"}>
+								<div className={classes["modal-title"]}>
+									<Typography typo={ITypo.P_16}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
+								</div>
+								<InputField name="input field" fakeplaceholder="Description" textarea />
+							</Confirm>
+						</div>
+						:
+						<div className={classes["no-folder-selected"]}>
+							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+							<div className={classes["choose-a-folder"]}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>Veuillez sélectionner un dossier.</Typography>
+							</div>
+						</div>}
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+	public override async componentDidMount() {
+		// if()
+		// const selectedFolder = await Fodler.getInstance().getByUid(this.props.selectedFolderUid);
+		// this.setState({ selectedFolder });
+	}
+
+	private doesFolderHaveCustomer(): boolean {
+		return this.state.selectedFolder?.office_folder_has_customers !== undefined;
+	}
+
+	private onSelectedFolder(folder: IDashBoardFolder): void {
+		this.setState({ selectedFolder: folder });
+	}
+
+	private openArchivedModal(): void {
+		this.setState({ isArchivedModalOpen: true });
+	}
+
+	private closeArchivedModal(): void {
+		this.setState({ isArchivedModalOpen: false });
+	}
+}
+
+export default function FolderInformation() {
+	const router = useRouter();
+	let { uid } = router.query;
+	uid = uid as string;
+	return <FolderInformationClass selectedFolderUid={uid} />;
+}

src/pages/dossier/[uid]/index.tsx

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