From 791aeacfc45c1fa2e9f0e2247d89211df56ed566 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 29 Jul 2024 10:53:52 +0200 Subject: [PATCH 1/4] :sparkles: Dropdown responsive working --- .../Dropdown/DropdownMenu/classes.module.scss | 1 + .../DropdownNavigation/index.tsx | 81 ++++--------------- 2 files changed, 18 insertions(+), 64 deletions(-) diff --git a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss index d8742a45..a56ca26e 100644 --- a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss +++ b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss @@ -30,6 +30,7 @@ overflow: visible; .content { max-height: 500px; + overflow: auto; opacity: 1; } } diff --git a/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx index 50c7ef77..990f292d 100644 --- a/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx +++ b/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx @@ -1,8 +1,8 @@ -import React, { useCallback, useEffect } from "react"; +import React, { useEffect } from "react"; import { IBlock } from "../BlockList/Block"; import classes from "./classes.module.scss"; -import Typography, { ETypo, ETypoColor } from "../../Typography"; -import { ChevronDownIcon } from "@heroicons/react/24/outline"; +import Dropdown from "../../Dropdown"; +import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption"; type IProps = { blocks: IBlock[]; onSelectedBlock: (block: IBlock) => void; @@ -11,72 +11,25 @@ type IProps = { export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSelectedBlock = blocks[0] }: IProps) { const [selectedBlock, setSelectedBlock] = React.useState(defaultSelectedBlock ?? null); - const [isDropdownOpened, setIsDropdownOpened] = React.useState(false); - const rootRef = React.useRef(null); - - const selectBlock = useCallback( - (id: string) => { - setIsDropdownOpened(false); - setSelectedBlock(blocks.find((folder) => folder.id === id)!); - onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === id)!); - }, - [blocks, onSelectedBlock], - ); - - const handleOnClick = () => setIsDropdownOpened((prev) => !prev); - - useEffect(() => { - // on click outside of root, close dropdown - const handleClickOutside = (event: MouseEvent) => { - if (rootRef.current && !rootRef.current.contains(event.target as Node)) { - setIsDropdownOpened(false); - } - }; - document.addEventListener("mousedown", handleClickOutside); - return () => document.removeEventListener("mousedown", handleClickOutside); - }, []); useEffect(() => { if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock); }, [defaultSelectedBlock]); - return ( -
- {selectedBlock && ( - <> -
-
- {selectedBlock.secondaryText && ( - - {selectedBlock.secondaryText} - - )} - - {selectedBlock.primaryText} - -
- -
- {isDropdownOpened && ( -
- {blocks - .filter((block) => block.id !== selectedBlock.id) - .map((block) => ( -
selectBlock(block.id)}> - {block.secondaryText && ( - - {block.secondaryText} - - )} - - {block.primaryText} - -
- ))} -
- )} - - )} + return ( +
+ { + return { + id: block.id, + label: { + subtext: block.primaryText, + text: block.secondaryText, + }, + } as IOption; + })} + selectedOption={selectedBlock ? { id: selectedBlock.id, label: selectedBlock.primaryText } : undefined} + />
); } From 6870ffd47cfe8bdb3a49c1428af9fe3197149e7d Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 29 Jul 2024 11:09:56 +0200 Subject: [PATCH 2/4] :sparkles: Refacto users super admin --- .../DropdownNavigation/index.tsx | 11 ++ .../SearchBlockList/classes.module.scss | 1 + .../DefaultUserDashboard/classes.module.scss | 109 +------------- .../DefaultUserDashboard/index.tsx | 140 ++++++------------ src/front/Components/Layouts/Users/index.tsx | 2 +- 5 files changed, 67 insertions(+), 196 deletions(-) diff --git a/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx index 990f292d..458f6d67 100644 --- a/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx +++ b/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx @@ -16,6 +16,16 @@ export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSel if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock); }, [defaultSelectedBlock]); + const handleDropDownSelect = (option: IOption) => { + const block = blocks.find((block) => block.id === option.id); + if (block) { + setSelectedBlock(block); + onSelectedBlock + ? onSelectedBlock(block) + : console.error("DropdownNavigation: onSelectedBlock prop is required to handle block selection"); + } + }; + return (
diff --git a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss index d7a8ef40..4354b29d 100644 --- a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss +++ b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss @@ -11,6 +11,7 @@ justify-content: flex-start; @media (max-width: $screen-m) { + height: auto; gap: 16px; padding: var(--spacing-lg, 24px); width: auto; diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss index 059853fe..882a9394 100644 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss @@ -1,115 +1,22 @@ @import "@Themes/constants.scss"; -@keyframes growWidth { - 0% { - width: 100%; - } - - 100% { - width: 200%; - } -} - .root { + position: relative; .content { display: flex; - overflow: hidden; + justify-content: flex-start; height: calc(100vh - var(--header-height)); - .overlay { - position: absolute; - width: 100%; - height: 100%; - background-color: var(--color-generic-white); - opacity: 0.5; - z-index: 2; - transition: all 0.3s $custom-easing; + @media (max-width: $screen-m) { + flex-direction: column; } - - .left-side { - background-color: var(--color-generic-white); - z-index: 3; - display: flex; - width: 336px; - min-width: 336px; - transition: all 0.3s $custom-easing; - overflow: hidden; - - @media (max-width: ($screen-m - 1px)) { - width: 56px; - min-width: 56px; - transform: translateX(-389px); - - &.opened { - transform: translateX(0px); - width: 336px; - min-width: 336px; - } - } - - @media (max-width: $screen-s) { - width: 0px; - min-width: 0px; - - &.opened { - width: 100vw; - min-width: 100vw; - } - } - } - - .closable-left-side { - position: absolute; - background-color: var(--color-generic-white); - z-index: 0; - display: flex; - justify-content: center; - min-width: 56px; - max-width: 56px; - height: calc(100vh - var(--header-height)); - border-right: 1px var(--color-neutral-200 solid); - - @media (min-width: $screen-m) { - display: none; - } - - .chevron-icon { - margin-top: 21px; - transform: rotate(180deg); - cursor: pointer; - } - - @media (max-width: $screen-s) { - display: none; - } - } - .right-side { - min-width: calc(100vw - 389px); - padding: 24px; + min-width: calc(100% - 336px); overflow-y: auto; + padding: var(--spacing-lg, 24px); - @media (max-width: ($screen-m - 1px)) { - 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; - margin-bottom: 24px; - } - } - - .back-arrow-desktop { - @media (max-width: $screen-s) { - display: none; - } + @media (max-width: $screen-m) { + width: 100%; } } } diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx index 27a6d89b..c3d6a1f6 100644 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx @@ -1,115 +1,67 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; -import { ChevronLeftIcon } from "@heroicons/react/20/solid"; import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users"; -import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Header from "@Front/Components/DesignSystem/Header"; import Version from "@Front/Components/DesignSystem/Version"; import BackArrow from "@Front/Components/Elements/BackArrow"; -import WindowStore from "@Front/Stores/WindowStore"; -import classNames from "classnames"; import User from "le-coffre-resources/dist/SuperAdmin"; -import Image from "next/image"; -import React, { ReactNode } from "react"; +import React, { ReactNode, useEffect } from "react"; import classes from "./classes.module.scss"; -import UserListContainer from "./UserListContainer"; +import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; +import { useRouter } from "next/router"; +import Module from "@Front/Config/Module"; +import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; type IProps = { title: string; children?: ReactNode; - onSelectedUser: (user: User) => void; - hasBackArrow: boolean; + hasBackArrow?: boolean; backArrowUrl?: string; - mobileBackText?: string; -}; -type IState = { - users: User[] | null; - isLeftSideOpen: boolean; - leftSideCanBeClosed: boolean; }; -export default class DefaultUserDashboard extends React.Component { - private onWindowResize = () => {}; - public static defaultProps: Partial = { - hasBackArrow: false, - }; - - public constructor(props: IProps) { - super(props); - this.state = { - users: null, - isLeftSideOpen: false, - leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false, - }; - this.onOpenLeftSide = this.onOpenLeftSide.bind(this); - this.onCloseLeftSide = this.onCloseLeftSide.bind(this); - } - - public override render(): JSX.Element { - return ( -
-
-
- {this.state.isLeftSideOpen &&
} -
- {this.state.users && } -
-
- open side menu -
- -
- {this.props.hasBackArrow && ( -
- -
- )} - {this.props.mobileBackText && ( -
- -
- )} - {this.props.children} -
-
- -
- ); - } - - public override async componentDidMount() { - this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window)); +export default function DefaultUserDashboard(props: IProps) { + const { hasBackArrow, children, backArrowUrl } = props; + const [users, setUsers] = React.useState(null); + const router = useRouter(); + useEffect(() => { const query: IGetUsersparams = { include: { contact: true }, }; - const users = await Users.getInstance().get(query); - this.setState({ users }); - } - public override componentWillUnmount() { - this.onWindowResize(); - } + Users.getInstance() + .get(query) + .then((users) => setUsers(users)); + }, []); - private onOpenLeftSide() { - this.setState({ isLeftSideOpen: true }); - } + const onSelectedBlock = (block: IBlock) => { + router.push(Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path.replace("[uid]", block.id)); + }; - private onCloseLeftSide() { - if (!this.state.leftSideCanBeClosed) return; - this.setState({ isLeftSideOpen: false }); - } - - private onResize(window: Window) { - if (window.innerWidth > 1023) { - if (!this.state.leftSideCanBeClosed) return; - this.setState({ leftSideCanBeClosed: false }); - } - this.setState({ leftSideCanBeClosed: true }); - } + return ( +
+
+
+ {users && ( + { + return { + id: user.uid, + primaryText: user.contact?.first_name + " " + user.contact?.last_name, + secondaryText: user.contact?.email, + } as IBlock; + })} + onSelectedBlock={onSelectedBlock} + /> + )} +
+ {hasBackArrow && ( +
+ +
+ )} + {children} +
+
+ +
+ ); } diff --git a/src/front/Components/Layouts/Users/index.tsx b/src/front/Components/Layouts/Users/index.tsx index 60f48873..b9da00ca 100644 --- a/src/front/Components/Layouts/Users/index.tsx +++ b/src/front/Components/Layouts/Users/index.tsx @@ -9,7 +9,7 @@ type IState = {}; export default class Users extends BasePage { public override render(): JSX.Element { return ( - +
Informations des utilisateurs From f6130e00b826b500d1baabcb15f2ec14c30f89e0 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 29 Jul 2024 11:31:09 +0200 Subject: [PATCH 3/4] :sparkles: Fixing build and creating default dashboard --- .../FolderList/classes.module.scss | 14 -- .../DesignSystem/FolderList/index.tsx | 76 ---------- .../FolderListContainer/index.tsx | 4 - .../classes.module.scss | 0 .../DefaultDashboardWithList/index.tsx | 42 ++++++ .../DefaultNotaryDashboard/index.tsx | 5 +- .../OfficeListContainer/classes.module.scss | 23 --- .../OfficeListContainer/index.tsx | 44 ------ .../classes.module.scss | 116 --------------- .../DefaultOfficeDashboard/index.tsx | 140 +++++------------- .../UserListContainer/classes.module.scss | 23 --- .../UserListContainer/index.tsx | 44 ------ .../DefaultUserDashboard/index.tsx | 57 +++---- .../Layouts/Folder/AskDocuments/index.tsx | 2 +- .../Layouts/Folder/UpdateClient/index.tsx | 2 +- src/front/Components/Layouts/Folder/index.tsx | 10 +- .../UpdateFolderMetadata/index.tsx | 2 +- .../Layouts/FolderArchived/index.tsx | 6 +- .../Offices/OfficeInformations/index.tsx | 2 +- .../Components/Layouts/Offices/index.tsx | 2 +- .../Layouts/Users/UserInformations/index.tsx | 2 +- 21 files changed, 107 insertions(+), 509 deletions(-) delete mode 100644 src/front/Components/DesignSystem/FolderList/classes.module.scss delete mode 100644 src/front/Components/DesignSystem/FolderList/index.tsx rename src/front/Components/LayoutTemplates/{DefaultUserDashboard => DefaultDashboardWithList}/classes.module.scss (100%) create mode 100644 src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx delete mode 100644 src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx delete mode 100644 src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx diff --git a/src/front/Components/DesignSystem/FolderList/classes.module.scss b/src/front/Components/DesignSystem/FolderList/classes.module.scss deleted file mode 100644 index b1bf1c69..00000000 --- a/src/front/Components/DesignSystem/FolderList/classes.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - height: calc(100vh - 290px); - overflow-y: scroll; - - &.archived { - height: calc(100vh - 220px); - } - - .active { - background-color: var(--color-neutral-200); - } -} diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx deleted file mode 100644 index c319582a..00000000 --- a/src/front/Components/DesignSystem/FolderList/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import Module from "@Front/Config/Module"; -import classNames from "classnames"; -import { OfficeFolder } from "le-coffre-resources/dist/Notary"; -import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document"; -import Link from "next/link"; -import { useRouter } from "next/router"; -import React from "react"; - -import FolderContainer from "../FolderContainer"; -import classes from "./classes.module.scss"; - -type IProps = { - folders: OfficeFolder[]; - isArchived: boolean; - onSelectedFolder?: (folder: OfficeFolder) => void; - onCloseLeftSide?: () => void; -}; - -type IPropsClass = IProps & { - selectedFolder: string; -}; - -type IState = {}; - -class FolderListClass extends React.Component { - 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 override render(): JSX.Element { - return
{this.renderFolders()}
; - } - - private renderFolders(): JSX.Element[] { - const pendingFolders = this.props.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 ( -
- - ; - -
- ); - }); - } -} - -export default function FolderList(props: IProps) { - const router = useRouter(); - let { folderUid } = router.query; - folderUid = folderUid as string; - return ; -} diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx index 53df5b74..188bcfd6 100644 --- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx +++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx @@ -11,8 +11,6 @@ import SearchBlockList from "../SearchBlockList"; type IProps = { folders: OfficeFolder[]; isArchived: boolean; - onSelectedFolder?: (folder: OfficeFolder) => void; - onCloseLeftSide?: () => void; }; export default function FolderListContainer(props: IProps) { @@ -64,10 +62,8 @@ export default function FolderListContainer(props: IProps) { const [blocks, setBlocks] = React.useState(getBlocks(folders)); const onSelectedFolder = (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); const folder = folders.find((folder) => folder.uid === block.id); if (!folder) return; - props.onSelectedFolder && props.onSelectedFolder(folder); const path = redirectPath.replace("[folderUid]", folder.uid ?? ""); router.push(path); }; diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss similarity index 100% rename from src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss rename to src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss diff --git a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx new file mode 100644 index 00000000..26d30539 --- /dev/null +++ b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx @@ -0,0 +1,42 @@ +import Header from "@Front/Components/DesignSystem/Header"; +import Version from "@Front/Components/DesignSystem/Version"; +import BackArrow from "@Front/Components/Elements/BackArrow"; +import React, { ReactNode } from "react"; + +import classes from "./classes.module.scss"; +import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; +import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; + +export type IPropsDashboardWithList = { + title?: string; + children?: ReactNode; + isArchived?: boolean; + hasBackArrow?: boolean; + backArrowUrl?: string; + mobileBackText?: string; + blocksList: IBlock[]; + onSelectedBlock: (block: IBlock) => void; + headerConnected?: boolean; +}; + +export default function DefaultDashboardWithList(props: IPropsDashboardWithList) { + const { hasBackArrow, backArrowUrl, children, blocksList, onSelectedBlock, headerConnected = true } = props; + + return ( +
+
+
+ +
+ {hasBackArrow && ( +
+ +
+ )} + {children} +
+
+ +
+ ); +} diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx index 2a5e00a7..3b3a383b 100644 --- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx @@ -13,14 +13,13 @@ type IProps = { title: string; children?: ReactNode; isArchived?: boolean; - onSelectedFolder?: (folder: OfficeFolder) => void; hasBackArrow?: boolean; backArrowUrl?: string; mobileBackText?: string; }; export default function DefaultNotaryDashboard(props: IProps) { - const { hasBackArrow, onSelectedFolder, backArrowUrl, children, isArchived } = props; + const { hasBackArrow, backArrowUrl, children, isArchived } = props; const [folders, setFolders] = React.useState([]); @@ -67,7 +66,7 @@ export default function DefaultNotaryDashboard(props: IProps) {
- +
{hasBackArrow && (
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss deleted file mode 100644 index a34b9618..00000000 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - width: calc(100vh - 83px); - display: flex; - flex-direction: column; - justify-content: space-between; - - .header { - flex: 1; - } - - .searchbar { - padding: 40px 24px 24px 24px; - } - - .folderlist-container { - max-height: 100vh; - height: 100vh; - overflow: auto; - border-right: 1px solid var(--color-neutral-200); - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx deleted file mode 100644 index b3c92662..00000000 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import Module from "@Front/Config/Module"; -import { Office } from "le-coffre-resources/dist/SuperAdmin"; -import { useRouter } from "next/router"; -import React, { useCallback } from "react"; - -import classes from "./classes.module.scss"; -import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; -import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; - -type IProps = { - offices: Office[]; - onSelectedOffice?: (office: Office) => void; - onCloseLeftSide?: () => void; -}; - -export default function OfficeListContainer(props: IProps) { - const router = useRouter(); - - const { officeUid } = router.query; - - const onSelectedBlock = useCallback( - (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const redirectPath = Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path; - router.push(redirectPath.replace("[uid]", block.id)); - }, - [props, router], - ); - - return ( -
- { - return { - primaryText: office.crpcen + " - " + office.name, - id: office.uid!, - isActive: office.uid === officeUid, - }; - })} - onSelectedBlock={onSelectedBlock} - /> -
- ); -} diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss deleted file mode 100644 index f54563dd..00000000 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss +++ /dev/null @@ -1,116 +0,0 @@ -@import "@Themes/constants.scss"; - -@keyframes growWidth { - 0% { - width: 100%; - } - - 100% { - width: 200%; - } -} - -.root { - .content { - display: flex; - overflow: hidden; - height: calc(100vh - var(--header-height)); - - .overlay { - position: absolute; - width: 100%; - height: 100%; - background-color: var(--color-generic-white); - opacity: 0.5; - z-index: 2; - transition: all 0.3s $custom-easing; - } - - .left-side { - background-color: var(--color-generic-white); - z-index: 3; - display: flex; - width: 336px; - min-width: 336px; - transition: all 0.3s $custom-easing; - overflow: hidden; - - @media (max-width: ($screen-m - 1px)) { - width: 56px; - min-width: 56px; - transform: translateX(-389px); - - &.opened { - transform: translateX(0px); - width: 336px; - min-width: 336px; - } - } - - @media (max-width: $screen-s) { - width: 0px; - min-width: 0px; - - &.opened { - width: 100vw; - min-width: 100vw; - } - } - } - - .closable-left-side { - position: absolute; - background-color: var(--color-generic-white); - z-index: 0; - display: flex; - justify-content: center; - min-width: 56px; - max-width: 56px; - height: calc(100vh - var(--header-height)); - border-right: 1px var(--color-neutral-200) solid; - - @media (min-width: $screen-m) { - display: none; - } - - .chevron-icon { - margin-top: 21px; - transform: rotate(180deg); - cursor: pointer; - } - - @media (max-width: $screen-s) { - display: none; - } - } - - .right-side { - min-width: calc(100vw - 389px); - padding: 24px; - overflow-y: auto; - - @media (max-width: ($screen-m - 1px)) { - 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; - margin-bottom: 24px; - } - } - - .back-arrow-desktop { - @media (max-width: $screen-s) { - display: none; - } - } - } - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx index bbb729f3..0cdeaf38 100644 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx @@ -1,112 +1,42 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; +import { Office } from "le-coffre-resources/dist/SuperAdmin"; +import React, { useEffect } from "react"; + +import { useRouter } from "next/router"; +import Module from "@Front/Config/Module"; +import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; +import DefaultDashboardWithList, { IPropsDashboardWithList } from "../DefaultDashboardWithList"; import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices"; -import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import Header from "@Front/Components/DesignSystem/Header"; -import Version from "@Front/Components/DesignSystem/Version"; -import BackArrow from "@Front/Components/Elements/BackArrow"; -import WindowStore from "@Front/Stores/WindowStore"; -import classNames from "classnames"; -import { Office } from "le-coffre-resources/dist/Notary"; -import Image from "next/image"; -import React, { ReactNode } from "react"; -import classes from "./classes.module.scss"; -import OfficeListContainer from "./OfficeListContainer"; -import { ChevronLeftIcon } from "@heroicons/react/24/outline"; +type IProps = IPropsDashboardWithList; -type IProps = { - title: string; - children?: ReactNode; - onSelectedOffice: (office: Office) => void; - hasBackArrow: boolean; - backArrowUrl?: string; - mobileBackText?: string; -}; -type IState = { - offices: Office[] | null; - isLeftSideOpen: boolean; - leftSideCanBeClosed: boolean; -}; +export default function DefaultOfficeDashboard(props: IProps) { + const [offices, setOffices] = React.useState(null); + const router = useRouter(); + const { officeUid } = router.query; + useEffect(() => { + Offices.getInstance() + .get() + .then((offices) => setOffices(offices)); + }, []); -export default class DefaultOfficeDashboard extends React.Component { - private onWindowResize = () => {}; - public static defaultProps: Partial = { - hasBackArrow: false, + const onSelectedBlock = (block: IBlock) => { + router.push(Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path.replace("[uid]", block.id)); }; - public constructor(props: IProps) { - super(props); - this.state = { - offices: null, - isLeftSideOpen: false, - leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false, - }; - this.onOpenLeftSide = this.onOpenLeftSide.bind(this); - this.onCloseLeftSide = this.onCloseLeftSide.bind(this); - } - - public override render(): JSX.Element { - return ( -
-
-
- {this.state.isLeftSideOpen &&
} -
- {this.state.offices && } -
-
- open side menu -
- -
- {this.props.hasBackArrow && ( -
- -
- )} - {this.props.mobileBackText && ( -
- -
- )} - {this.props.children} -
-
- -
- ); - } - - public override async componentDidMount() { - this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window)); - const offices = await Offices.getInstance().get(); - this.setState({ offices }); - } - - public override componentWillUnmount() { - this.onWindowResize(); - } - - private onOpenLeftSide() { - this.setState({ isLeftSideOpen: true }); - } - - private onCloseLeftSide() { - if (!this.state.leftSideCanBeClosed) return; - this.setState({ isLeftSideOpen: false }); - } - - private onResize(window: Window) { - if (window.innerWidth > 1023) { - if (!this.state.leftSideCanBeClosed) return; - this.setState({ leftSideCanBeClosed: false }); - } - this.setState({ leftSideCanBeClosed: true }); - } + return ( + ({ + id: office.uid!, + primaryText: office.name, + isActive: office.uid === officeUid, + secondaryText: office.crpcen, + })) + : [] + } + /> + ); } diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss deleted file mode 100644 index a34b9618..00000000 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - width: calc(100vh - 83px); - display: flex; - flex-direction: column; - justify-content: space-between; - - .header { - flex: 1; - } - - .searchbar { - padding: 40px 24px 24px 24px; - } - - .folderlist-container { - max-height: 100vh; - height: 100vh; - overflow: auto; - border-right: 1px solid var(--color-neutral-200); - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx deleted file mode 100644 index 0842539d..00000000 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import Module from "@Front/Config/Module"; -import User from "le-coffre-resources/dist/Notary"; -import { useRouter } from "next/router"; -import React, { useCallback } from "react"; - -import classes from "./classes.module.scss"; -import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; -import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; - -type IProps = { - users: User[]; - onSelectedUser?: (user: User) => void; - onCloseLeftSide?: () => void; -}; - -export default function UserListContainer(props: IProps) { - const router = useRouter(); - - const { userUid } = router.query; - - const onSelectedBlock = useCallback( - (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const redirectPath = Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path; - router.push(redirectPath.replace("[uid]", block.id)); - }, - [props, router], - ); - - return ( -
- { - return { - primaryText: user.contact?.first_name + " " + user.contact?.last_name, - id: user.uid!, - isActive: user.uid === userUid, - }; - })} - onSelectedBlock={onSelectedBlock} - /> -
- ); -} diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx index c3d6a1f6..e3b97389 100644 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx @@ -1,27 +1,18 @@ import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users"; -import Header from "@Front/Components/DesignSystem/Header"; -import Version from "@Front/Components/DesignSystem/Version"; -import BackArrow from "@Front/Components/Elements/BackArrow"; import User from "le-coffre-resources/dist/SuperAdmin"; -import React, { ReactNode, useEffect } from "react"; +import React, { useEffect } from "react"; -import classes from "./classes.module.scss"; -import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; import { useRouter } from "next/router"; import Module from "@Front/Config/Module"; import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; +import DefaultDashboardWithList, { IPropsDashboardWithList } from "../DefaultDashboardWithList"; -type IProps = { - title: string; - children?: ReactNode; - hasBackArrow?: boolean; - backArrowUrl?: string; -}; +type IProps = IPropsDashboardWithList; export default function DefaultUserDashboard(props: IProps) { - const { hasBackArrow, children, backArrowUrl } = props; const [users, setUsers] = React.useState(null); const router = useRouter(); + const { userUid } = router.query; useEffect(() => { const query: IGetUsersparams = { include: { contact: true }, @@ -37,31 +28,19 @@ export default function DefaultUserDashboard(props: IProps) { }; return ( -
-
-
- {users && ( - { - return { - id: user.uid, - primaryText: user.contact?.first_name + " " + user.contact?.last_name, - secondaryText: user.contact?.email, - } as IBlock; - })} - onSelectedBlock={onSelectedBlock} - /> - )} -
- {hasBackArrow && ( -
- -
- )} - {children} -
-
- -
+ ({ + id: user.uid!, + primaryText: user.contact?.first_name + " " + user.contact?.last_name, + isActive: user.uid === userUid, + secondaryText: user.contact?.email, + })) + : [] + } + /> ); } diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index a0af3c56..fc6f4ce3 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -50,7 +50,7 @@ class AskDocumentsClass extends BasePage { .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid); return ( - {}}> +
diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx index 75d08e65..92095538 100644 --- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx @@ -74,7 +74,7 @@ class UpdateClientClass extends BasePage { public override render(): JSX.Element { return ( - +
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx index a9aeaa84..fdcda8f0 100644 --- a/src/front/Components/Layouts/Folder/index.tsx +++ b/src/front/Components/Layouts/Folder/index.tsx @@ -6,10 +6,10 @@ import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNot import Module from "@Front/Config/Module"; import JwtService from "@Front/Services/JwtService/JwtService"; import { DocumentIcon } from "@heroicons/react/24/outline"; -import User, { OfficeFolder } from "le-coffre-resources/dist/Notary"; +import User from "le-coffre-resources/dist/Notary"; import Image from "next/image"; import Link from "next/link"; -import { useCallback, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import classes from "./classes.module.scss"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; @@ -17,14 +17,10 @@ import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus"; import { useRouter } from "next/router"; export default function Folder() { - const [_folder, setFolder] = useState(null); const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true); const router = useRouter(); const [activeUser, setActiveUser] = useState(); - const onSelectedFolder = useCallback((folder: OfficeFolder): void => { - setFolder(folder); - }, []); useEffect(() => { const decodedJwt = JwtService.getInstance().decodeJwt(); @@ -59,7 +55,7 @@ export default function Folder() { }, [router]); return ( - +
diff --git a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx index a74522b7..fc3708bb 100644 --- a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx @@ -39,7 +39,7 @@ class UpdateFolderMetadataClass extends BasePage { .get() .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid); return ( - +
diff --git a/src/front/Components/Layouts/FolderArchived/index.tsx b/src/front/Components/Layouts/FolderArchived/index.tsx index 748e2001..2ee150f2 100644 --- a/src/front/Components/Layouts/FolderArchived/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/index.tsx @@ -23,11 +23,7 @@ export default class FolderArchived extends BasePage { // TODO: Message if the user has not created any folder yet public override render(): JSX.Element { return ( - +
Informations du dossier diff --git a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx index f6e8b91e..2a761172 100644 --- a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx +++ b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx @@ -117,7 +117,7 @@ export default function OfficeInformations(props: IProps) { ); return ( - +
Office {officeSelected?.crpcen + " - " + officeSelected?.name} diff --git a/src/front/Components/Layouts/Offices/index.tsx b/src/front/Components/Layouts/Offices/index.tsx index bded3736..5c060f27 100644 --- a/src/front/Components/Layouts/Offices/index.tsx +++ b/src/front/Components/Layouts/Offices/index.tsx @@ -9,7 +9,7 @@ type IState = {}; export default class Offices extends BasePage { public override render(): JSX.Element { return ( - +
Informations des offices diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx index 2ffc406f..2a723553 100644 --- a/src/front/Components/Layouts/Users/UserInformations/index.tsx +++ b/src/front/Components/Layouts/Users/UserInformations/index.tsx @@ -210,7 +210,7 @@ export default function UserInformations(props: IProps) { }, [currentAppointment, getUser]); return ( - + {!isLoading && (
From 354d6576a4359345d0ba53bb12e9561a04edc7e4 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 29 Jul 2024 11:37:12 +0200 Subject: [PATCH 4/4] :sparkles: Fixing build --- .../LayoutTemplates/DefaultDashboardWithList/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx index 26d30539..67fce823 100644 --- a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx @@ -14,12 +14,15 @@ export type IPropsDashboardWithList = { hasBackArrow?: boolean; backArrowUrl?: string; mobileBackText?: string; +}; + +type IProps = IPropsDashboardWithList & { blocksList: IBlock[]; onSelectedBlock: (block: IBlock) => void; headerConnected?: boolean; }; -export default function DefaultDashboardWithList(props: IPropsDashboardWithList) { +export default function DefaultDashboardWithList(props: IProps) { const { hasBackArrow, backArrowUrl, children, blocksList, onSelectedBlock, headerConnected = true } = props; return (