✨ Documents working

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

@@ -1,15 +1,19 @@
 .root {
 	height: inherit;
+	min-height: inherit;
 	.file-container {
 		height: inherit;
+		min-height: inherit;
 		.image {
 			width: 100%;
 			height: inherit;
+			min-height: inherit;
 			object-fit: contain;
 		}
 
 		.pdf {
 			width: 100%;
+			min-height: inherit;
 			height: inherit;
 		}
 	}

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

@@ -36,8 +36,8 @@
 			overflow: hidden;
 
 			@media (max-width: ($screen-m - 1px)) {
-				width: 83px;
+				width: 56px;
-				min-width: 83px;
+				min-width: 56px;
 				transform: translateX(-389px);
 
 				&.opened {
@@ -46,6 +46,16 @@
 					min-width: 389px;
 				}
 			}
+
+			@media (max-width: $screen-s) {
+				width: 0px;
+				min-width: 0px;
+
+				&.opened {
+					width: 100vw;
+					min-width: 100vw;
+				}
+			}
 		}
 
 		.closable-left-side {
@@ -54,8 +64,8 @@
 			z-index: 0;
 			display: flex;
 			justify-content: center;
-			min-width: 83px;
+			min-width: 56px;
-			max-width: 83px;
+			max-width: 56px;
 			height: calc(100vh - 83px);
 			border-right: 1px $grey-medium solid;
 
@@ -68,6 +78,10 @@
 				transform: rotate(180deg);
 				cursor: pointer;
 			}
+
+			@media (max-width: $screen-s) {
+				display: none;
+			}
 		}
 
 		.right-side {
@@ -76,7 +90,25 @@
 			overflow-y: auto;
 
 			@media (max-width: ($screen-m - 1px)) {
-				min-width: calc(100vw - 83px);
+				min-width: calc(100vw - 56px);
+			}
+
+			@media(max-width: $screen-s){
+				flex: 1;
+				min-width: unset;
+			}
+
+			.back-arrow-mobile{
+				display: none;
+				@media (max-width: $screen-s) {
+					display: block;
+				}
+			}
+
+			.back-arrow-desktop{
+				@media (max-width: $screen-s) {
+					display: none;
+				}
 			}
 		}
 	}

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

@@ -1,8 +1,11 @@
 import "reflect-metadata";
+
 import ChevronIcon from "@Assets/Icons/chevron.svg";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
+import BackArrow from "@Front/Components/Elements/BackArrow";
 import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
 import WindowStore from "@Front/Stores/WindowStore";
 import classNames from "classnames";
@@ -12,10 +15,14 @@ import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
 
+
 type IProps = {
 	title: string;
 	children?: ReactNode;
 	onSelectedFolder: (folder: IDashBoardFolder) => void;
+	hasBackArrow: boolean;
+	backArrowUrl?: string;
+	mobileBackText?: string;
 };
 type IState = {
 	folders: IDashBoardFolder[];
@@ -35,8 +42,8 @@ export type IDashBoardFolder = {
 };
 export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
 	private onWindowResize = () => {};
-	public static defaultProps = {
+	public static defaultProps: Partial<IProps> = {
-		scrollTop: 0,
+		hasBackArrow: false,
 	};
 
 	public constructor(props: IProps) {
@@ -66,7 +73,27 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 					<div className={classNames(classes["closable-left-side"])}>
 						<Image alt="open side menu" src={ChevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
 					</div>
-					<div className={classes["right-side"]}>{this.props.children}</div>
+
+					<div className={classes["right-side"]}>
+						{this.props.hasBackArrow && (
+							<>
+								<div className={classes["back-arrow-desktop"]}>
+									<BackArrow url={this.props.backArrowUrl ?? ""} />
+								</div>
+								<div className={classes["back-arrow-mobile"]}>
+									<Button
+										icon={ChevronIcon}
+										iconposition={"left"}
+										iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+										variant={EButtonVariant.LINE}
+										onClick={this.onOpenLeftSide}>
+										{this.props.mobileBackText ?? "Retour"}
+									</Button>
+								</div>
+							</>
+						)}
+						{this.props.children}
+					</div>
 				</div>
 				<Version />
 			</div>

src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss

@@ -0,0 +1,28 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.title {
+		margin-top: 24px;
+	}
+
+	.subtitle {
+		margin-top: 32px;
+	}
+
+	.file-container {
+		min-height: 700px;
+		margin-top: 32px;
+		@media (max-width: $screen-s) {
+		}
+	}
+
+	.buttons-container {
+		display: flex;
+		gap: 24px;
+		justify-content: center;
+		margin-top: 32px;
+		@media (max-width: $screen-s) {
+			flex-direction: column-reverse;
+		}
+	}
+}

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

@@ -0,0 +1,81 @@
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import FilePreview from "@Front/Components/DesignSystem/FilePreview";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import React from "react";
+
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+
+type IProps = {};
+type IState = {
+	isRefuseModalVisible: boolean;
+	isValidateModalVisible: boolean;
+};
+
+export default class ViewDocuments extends BasePage<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+
+		this.state = {
+			isValidateModalVisible: false,
+			isRefuseModalVisible: false,
+		};
+
+		this.closeModals = this.closeModals.bind(this);
+		this.openValidateModal = this.openValidateModal.bind(this);
+		this.openRefuseModal = this.openRefuseModal.bind(this);
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}} hasBackArrow mobileBackText="Retour aux documents">
+				<div className={classes["root"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						App 23 rue Torus Toulon
+					</Typography>
+					<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
+						Diagnostic électricité
+					</Typography>
+					<div className={classes["file-container"]}>
+						<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf" />
+					</div>
+					<div className={classes["buttons-container"]}>
+						<Button variant={EButtonVariant.GHOST}>Refuser</Button>
+						<Button>Valider et ancrer</Button>
+						<Button disabled>Télécharger</Button>
+					</div>
+					<Confirm
+						isOpen={this.state.isValidateModalVisible}
+						onClose={this.closeModals}
+						closeBtn
+						header={"Créer un type de document"}
+						cancelText={"Annuler"}
+						confirmText={"Ajouter"}>
+						<div className={classes["add-document-form-container"]}></div>
+					</Confirm>
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+
+	private openValidateModal() {
+		this.setState({
+			isValidateModalVisible: true,
+		});
+	}
+
+	private openRefuseModal() {
+		this.setState({
+			isRefuseModalVisible: true,
+		});
+	}
+
+	private closeModals() {
+		this.setState({
+			isValidateModalVisible: false,
+			isRefuseModalVisible: false,
+		});
+	}
+}

src/pages/folder/[folderUid]/document/[documentUid]/index.tsx

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