From 4936540456d387225bef053d296b7bbf2714903b Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 10 May 2023 11:39:51 +0200 Subject: [PATCH] :bug: Fixing responsive in an opened folder --- .../UserFolder/DocumentList/index.tsx | 12 ++++- .../UserFolder/classes.module.scss | 31 +++++------- .../DesignSystem/UserFolder/index.tsx | 50 +++++++++---------- 3 files changed, 47 insertions(+), 46 deletions(-) diff --git a/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx b/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx index 561735b2..3d17c55f 100644 --- a/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx @@ -3,6 +3,7 @@ import classes from "./classes.module.scss"; import { Document } from "le-coffre-resources/dist/Customer"; import Typography, { ITypo } from "../../Typography"; import DocumentNotary from "../../Document/DocumentNotary"; +import classNames from "classnames"; type IProps = { title: string; @@ -17,13 +18,15 @@ type IProps = { | null; openDeletionModal: (uid: Document["uid"]) => void; folderUid: string; + className?: string; }; type IState = {}; export default class DocumentList extends React.Component { public override render(): JSX.Element { + const classNameToAdd = this.props.className ? classNames(classes["root"], this.props.className) : classes["root"]; return ( -
+
{this.props.title}
@@ -32,7 +35,12 @@ export default class DocumentList extends React.Component { {this.props.documents && this.props.documents.map((document) => { return ( - + ); })}
diff --git a/src/front/Components/DesignSystem/UserFolder/classes.module.scss b/src/front/Components/DesignSystem/UserFolder/classes.module.scss index 7c711ca0..ecaffe07 100644 --- a/src/front/Components/DesignSystem/UserFolder/classes.module.scss +++ b/src/front/Components/DesignSystem/UserFolder/classes.module.scss @@ -57,29 +57,24 @@ gap: 64px; margin-top: 32px; - @media(max-width: $screen-s){ - grid-template-columns: 1fr; + @media (max-width: $screen-s) { gap: 32px; - } - } - - .button-container { - display: inline-grid; - justify-items: start; - gap: 32px; - margin-top: 16px; - - .button-desktop{ - @media(max-width: $screen-s){ - display: none; - } + display: flex; + flex-direction: column; } - .button-mobile{ - display: none; + .documents-asked{ + order: -1; + } + + .button-container { + display: inline-grid; + justify-items: start; + gap: 32px; + margin-top: 16px; @media(max-width: $screen-s){ - display: block; + order: -1; } } } diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index a8014bc2..f01f6cbb 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -1,9 +1,11 @@ import ChevronIcon from "@Assets/Icons/chevron.svg"; import PlusIcon from "@Assets/Icons/plus.svg"; +import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents"; import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import Module from "@Front/Config/Module"; import classNames from "classnames"; import Customer, { Document } from "le-coffre-resources/dist/Customer"; +import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import Image from "next/image"; import Link from "next/link"; import React from "react"; @@ -14,8 +16,6 @@ import QuantityProgressBar from "../QuantityProgressBar"; import classes from "./classes.module.scss"; import DocumentList from "./DocumentList"; import UserFolderHeader from "./UserFolderHeader"; -import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; -import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents"; type IProps = { customer: Customer; @@ -53,7 +53,8 @@ export default class UserFolder extends React.Component { const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments(); const redirectPath = Module.getInstance() .get() - .modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "").replace("[customerUid]", this.props.customer.uid ?? ""); + .modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "") + .replace("[customerUid]", this.props.customer.uid ?? ""); return (
{
- + chevron open close { title="Documents demandés" openDeletionModal={this.openDeletionModal} folderUid={this.props.folder.uid!} + className={classes["documents-asked"]} /> { openDeletionModal={this.openDeletionModal} folderUid={this.props.folder.uid!} /> -
- {!this.props.isArchived && ( -
- - + + - - {} - {} -
- )} +
+ )} +
)} @@ -128,11 +127,11 @@ export default class UserFolder extends React.Component { this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); } - private async deleteAskedDocument(){ - try{ + private async deleteAskedDocument() { + try { await Documents.getInstance().delete(this.state.selectedDocumentToDelete); window.location.reload(); - }catch(e){ + } catch (e) { console.error(e); } } @@ -140,7 +139,7 @@ export default class UserFolder extends React.Component { private calculateDocumentsPercentageProgress(): number { if (!this.props.customer.documents) return 0; const totalDocuments: number = this.props.customer.documents.length; - const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0; + const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0; const numberDocumentsAsked: number = this.getDocumentsByStatus(EDocumentStatus.ASKED)?.length || 0; const depositedDocuments: number = totalDocuments - numberDocumentsAsked - numberDocumentsRefused; @@ -172,13 +171,12 @@ export default class UserFolder extends React.Component { // return this.props.customer.documents.filter((document) => !documentToExclude.includes(document)); // } - - private changeUserFolder(){ + private changeUserFolder() { this.props.onChange(this.props.customer.uid!); } private openDeletionModal(uid?: string): void { - if(!uid) return; + if (!uid) return; this.setState({ isOpenDeletionModal: true,