From 5186b1bd45591bc3c8f1db37a385e86fd34d036a Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 29 Jul 2024 11:54:38 +0200 Subject: [PATCH] :sparkles: Every dashboard working --- .../SearchBlockList/classes.module.scss | 1 + .../DesignSystem/SearchBlockList/index.tsx | 4 +- .../classes.module.scss | 23 --- .../CollaboratorListContainer/index.tsx | 44 ----- .../classes.module.scss | 116 ------------- .../DefaultCollaboratorDashboard/index.tsx | 147 +++++----------- .../DefaultDashboardWithList/index.tsx | 14 +- .../DeedTypeListContainer/classes.module.scss | 32 ---- .../DeedTypeListContainer/index.tsx | 48 ------ .../classes.module.scss | 116 ------------- .../DefaultDeedTypeDashboard/index.tsx | 147 +++++----------- .../classes.module.scss | 30 ---- .../DocumentTypeListContainer/index.tsx | 48 ------ .../classes.module.scss | 116 ------------- .../DefaultDocumentTypesDashboard/index.tsx | 163 ++++++------------ .../DefaultOfficeDashboard/index.tsx | 2 +- .../RoleListContainer/classes.module.scss | 32 ---- .../RoleListContainer/index.tsx | 53 ------ .../DefaultRoleDashboard/classes.module.scss | 116 ------------- .../DefaultRoleDashboard/index.tsx | 146 +++++----------- .../DefaultUserDashboard/index.tsx | 2 +- 21 files changed, 175 insertions(+), 1225 deletions(-) delete mode 100644 src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx delete mode 100644 src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx delete mode 100644 src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx delete mode 100644 src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss delete mode 100644 src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx delete mode 100644 src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss diff --git a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss index 4354b29d..cc668f67 100644 --- a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss +++ b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss @@ -1,6 +1,7 @@ @import "@Themes/constants.scss"; .root { width: 336px; + min-width: 336px; height: 100%; max-height: 100%; diff --git a/src/front/Components/DesignSystem/SearchBlockList/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/index.tsx index 0ed80f61..0ca8fd77 100644 --- a/src/front/Components/DesignSystem/SearchBlockList/index.tsx +++ b/src/front/Components/DesignSystem/SearchBlockList/index.tsx @@ -7,7 +7,7 @@ import Button from "../Button"; import { useRouter } from "next/router"; import DropdownNavigation from "./DropdownNavigation"; -type IProps = { +export type ISearchBlockListProps = { blocks: IBlock[]; onSelectedBlock: (block: IBlock) => void; bottomButton?: { @@ -15,7 +15,7 @@ type IProps = { link: string; }; }; -export default function SearchBlockList(props: IProps) { +export default function SearchBlockList(props: ISearchBlockListProps) { const { blocks, onSelectedBlock, bottomButton } = props; const [selectedBlock, setSelectedBlock] = useState(null); diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss deleted file mode 100644 index abe261a4..00000000 --- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/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: calc(100vh - 215px); - height: 100%; - border-right: 1px solid var(--color-neutral-200); - overflow: auto; - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx deleted file mode 100644 index eee22e10..00000000 --- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useCallback } from "react"; - -import classes from "./classes.module.scss"; -import User from "le-coffre-resources/dist/Notary"; -import { useRouter } from "next/router"; -import Module from "@Front/Config/Module"; -import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; -import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; - -type IProps = { - collaborators: User[]; - onSelectedCollaborator?: (user: User) => void; - onCloseLeftSide?: () => void; -}; - -export default function CollaboratorListContainer(props: IProps) { - const router = useRouter(); - - const { collaboratorUid } = router.query; - - const onSelectedBlock = useCallback( - (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const redirectPath = Module.getInstance().get().modules.pages.Collaborators.pages.CollaboratorInformations.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 === collaboratorUid, - }; - })} - onSelectedBlock={onSelectedBlock} - /> -
- ); -} diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss deleted file mode 100644 index f54563dd..00000000 --- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/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/DefaultCollaboratorDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx index afa164f5..f4c86d3c 100644 --- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx @@ -1,93 +1,20 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; -import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/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 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 User from "le-coffre-resources/dist/Notary"; import JwtService from "@Front/Services/JwtService/JwtService"; -import WindowStore from "@Front/Stores/WindowStore"; -import classNames from "classnames"; -import User from "le-coffre-resources/dist/Admin"; -import Image from "next/image"; -import React, { ReactNode } from "react"; +import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users"; -import classes from "./classes.module.scss"; -import CollaboratorListContainer from "./CollaboratorListContainer"; -import { ChevronLeftIcon } from "@heroicons/react/24/solid"; +type IProps = IPropsDashboardWithList; -type IProps = { - title: string; - children?: ReactNode; - onSelectedUser: (user: User) => void; - hasBackArrow: boolean; - backArrowUrl?: string; - mobileBackText?: string; -}; -type IState = { - collaborators: User[] | null; - isLeftSideOpen: boolean; - leftSideCanBeClosed: boolean; -}; - -export default class DefaultCollaboratorDashboard extends React.Component { - private onWindowResize = () => {}; - public static defaultProps: Partial = { - hasBackArrow: false, - }; - - public constructor(props: IProps) { - super(props); - this.state = { - collaborators: 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.collaborators && ( - - )} -
-
- 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 DefaultCollaboratorDashboard(props: IProps) { + const [collaborators, setCollaborators] = React.useState(null); + const router = useRouter(); + const { collaboratorUid } = router.query; + useEffect(() => { const jwt = JwtService.getInstance().decodeJwt(); if (!jwt) return; const query: IGetUsersparams = { @@ -102,27 +29,31 @@ export default class DefaultCollaboratorDashboard extends React.Component setCollaborators(users)); + }, []); - private onOpenLeftSide() { - this.setState({ isLeftSideOpen: true }); - } + const onSelectedBlock = (block: IBlock) => { + router.push( + Module.getInstance().get().modules.pages.Collaborators.pages.CollaboratorInformations.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 ( + ({ + id: collaborator.uid!, + primaryText: collaborator.contact?.first_name + " " + collaborator.contact?.last_name, + isActive: collaborator.uid === collaboratorUid, + secondaryText: collaborator.contact?.email, + })) + : [] + } + /> + ); } diff --git a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx index 67fce823..3f3bd44a 100644 --- a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx @@ -4,8 +4,7 @@ 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"; +import SearchBlockList, { ISearchBlockListProps } from "@Front/Components/DesignSystem/SearchBlockList"; export type IPropsDashboardWithList = { title?: string; @@ -14,22 +13,19 @@ export type IPropsDashboardWithList = { hasBackArrow?: boolean; backArrowUrl?: string; mobileBackText?: string; -}; - -type IProps = IPropsDashboardWithList & { - blocksList: IBlock[]; - onSelectedBlock: (block: IBlock) => void; headerConnected?: boolean; }; +type IProps = IPropsDashboardWithList & ISearchBlockListProps; + export default function DefaultDashboardWithList(props: IProps) { - const { hasBackArrow, backArrowUrl, children, blocksList, onSelectedBlock, headerConnected = true } = props; + const { hasBackArrow, backArrowUrl, children, blocks, onSelectedBlock, headerConnected = true, bottomButton } = props; return (
- +
{hasBackArrow && (
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss deleted file mode 100644 index a1a8a9b9..00000000 --- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - width: calc(100vh - 83px); - display: flex; - flex-direction: column; - justify-content: space-between; - - position: relative; - - .header { - flex: 1; - } - - .searchbar { - padding: 40px 24px 24px 24px; - } - - .folderlist-container { - max-height: calc(100vh - 290px); - height: calc(100vh - 290px); - overflow: auto; - border-right: 1px solid var(--color-neutral-200); - } - - .create-container { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx deleted file mode 100644 index fd94a36d..00000000 --- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes"; -import Module from "@Front/Config/Module"; -import { DeedType } from "le-coffre-resources/dist/Admin"; -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 = { - deedTypes: DeedType[]; - onSelectedDeed?: (deed: DeedTypes) => void; - onCloseLeftSide?: () => void; -}; - -export default function DeedListContainer(props: IProps) { - const router = useRouter(); - const { deedTypeUid } = router.query; - - const onSelectedBlock = useCallback( - (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const redirectPath = Module.getInstance().get().modules.pages.DeedTypes.pages.DeedTypesInformations.props.path; - router.push(redirectPath.replace("[uid]", block.id)); - }, - [props, router], - ); - - return ( -
- { - return { - primaryText: deed.name, - id: deed.uid!, - isActive: deedTypeUid === deed.uid, - }; - })} - onSelectedBlock={onSelectedBlock} - bottomButton={{ - link: Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path, - text: "Créer un type d'acte", - }} - /> -
- ); -} diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss deleted file mode 100644 index f54563dd..00000000 --- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/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/DefaultDeedTypeDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx index 6db68829..f62d1e5d 100644 --- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx @@ -1,92 +1,19 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; +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 { DeedType } from "le-coffre-resources/dist/Notary"; import DeedTypes, { IGetDeedTypesParams } from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes"; -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 { Deed, DeedType } from "le-coffre-resources/dist/Notary"; -import Image from "next/image"; -import React, { ReactNode } from "react"; -import classes from "./classes.module.scss"; -import DeedListContainer from "./DeedTypeListContainer"; -import { ChevronLeftIcon } from "@heroicons/react/24/solid"; +type IProps = IPropsDashboardWithList; -type IProps = { - title: string; - children?: ReactNode; - onSelectedDeed: (deed: Deed) => void; - hasBackArrow: boolean; - backArrowUrl?: string; - mobileBackText?: string; -}; -type IState = { - deedTypes: DeedType[] | null; - isLeftSideOpen: boolean; - leftSideCanBeClosed: boolean; -}; - -export default class DefaultDeedTypesDashboard extends React.Component { - private onWindowResize = () => {}; - public static defaultProps: Partial = { - hasBackArrow: false, - }; - - public constructor(props: IProps) { - super(props); - this.state = { - deedTypes: 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.deedTypes && ( - - )} -
-
- 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 DefaultDeedTypeDashboard(props: IProps) { + const [deedTypes, setDeedTypes] = React.useState(null); + const router = useRouter(); + const { deedTypeUid } = router.query; + useEffect(() => { const query: IGetDeedTypesParams = { where: { archived_at: null, @@ -96,28 +23,32 @@ export default class DefaultDeedTypesDashboard extends React.Component setDeedTypes(deedTypes)); + }, []); - public override componentWillUnmount() { - this.onWindowResize(); - } + const onSelectedBlock = (block: IBlock) => { + router.push(Module.getInstance().get().modules.pages.DeedTypes.pages.DeedTypesInformations.props.path.replace("[uid]", block.id)); + }; - 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: deedTypes.uid!, + primaryText: deedTypes.name, + isActive: deedTypes.uid === deedTypeUid, + })) + : [] + } + bottomButton={{ + link: Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path, + text: "Créer une liste de pièces", + }} + /> + ); } diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss deleted file mode 100644 index f6b183e8..00000000 --- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - display: flex; - flex-direction: column; - justify-content: space-between; - - position: relative; - .header { - flex: 1; - } - - .searchbar { - padding: 40px 24px 24px 24px; - } - - .folderlist-container { - max-height: calc(100vh - 290px); - height: calc(100vh - 290px); - overflow: auto; - border-right: 1px solid var(--color-neutral-200); - } - - .create-container { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx deleted file mode 100644 index da7fb26f..00000000 --- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Module from "@Front/Config/Module"; -import { DocumentType } 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 = { - documentTypes: DocumentType[]; - onSelectedDocumentType?: (documentType: DocumentType) => void; - onCloseLeftSide?: () => void; -}; - -export default function DocumentTypeListContainer(props: IProps) { - const router = useRouter(); - - const { documentTypeUid } = router.query; - - const onSelectedBlock = useCallback( - (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const redirectPath = Module.getInstance().get().modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path; - router.push(redirectPath.replace("[uid]", block.id)); - }, - [props, router], - ); - - return ( -
- { - return { - primaryText: documentType.name, - id: documentType.uid!, - isActive: documentType.uid === documentTypeUid, - }; - })} - onSelectedBlock={onSelectedBlock} - bottomButton={{ - link: Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path, - text: "Créer un type de document", - }} - /> -
- ); -} diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss deleted file mode 100644 index f54563dd..00000000 --- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/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/DefaultDocumentTypesDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx index 584f0b58..451c1985 100644 --- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx @@ -1,124 +1,57 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; -import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; -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 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 JwtService from "@Front/Services/JwtService/JwtService"; -import WindowStore from "@Front/Stores/WindowStore"; -import classNames from "classnames"; +import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; import { DocumentType } from "le-coffre-resources/dist/Notary"; -import Image from "next/image"; -import React, { ReactNode } from "react"; -import classes from "./classes.module.scss"; -import DocumentTypeListContainer from "./DocumentTypeListContainer"; -import { ChevronLeftIcon } from "@heroicons/react/24/solid"; +type IProps = IPropsDashboardWithList; -type IProps = { - title: string; - children?: ReactNode; - onSelectedDocumentType: (documentType: DocumentType) => void; - hasBackArrow: boolean; - backArrowUrl?: string; - mobileBackText?: string; -}; -type IState = { - documentTypes: DocumentType[] | null; - isLeftSideOpen: boolean; - leftSideCanBeClosed: boolean; -}; - -export default class DefaultDocumentTypesDashboard extends React.Component { - private onWindowResize = () => {}; - public static defaultProps: Partial = { - hasBackArrow: false, - }; - - public constructor(props: IProps) { - super(props); - this.state = { - documentTypes: 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.documentTypes && ( - - )} -
-
- 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 DefaultDocumentTypeDashboard(props: IProps) { + const [documentTypes, setDocumentTypes] = React.useState(null); + const router = useRouter(); + const { documentTypeUid } = router.query; + useEffect(() => { const jwt = JwtService.getInstance().decodeJwt(); if (!jwt) return; - const documentTypes = await DocumentTypes.getInstance().get({ - where: { - office_uid: jwt.office_Id, - }, - orderBy: { - name: "asc", - }, - }); - this.setState({ documentTypes }); - } + DocumentTypes.getInstance() + .get({ + where: { + office_uid: jwt.office_Id, + }, + orderBy: { + name: "asc", + }, + }) + .then((documentTypes) => setDocumentTypes(documentTypes)); + }, []); - public override componentWillUnmount() { - this.onWindowResize(); - } + const onSelectedBlock = (block: IBlock) => { + router.push( + Module.getInstance().get().modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path.replace("[uid]", block.id), + ); + }; - 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: documentType.uid!, + primaryText: documentType.name, + isActive: documentType.uid === documentTypeUid, + })) + : [] + } + bottomButton={{ + link: Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path, + text: "Créer un type de document", + }} + /> + ); } diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx index 0cdeaf38..f3a5a2f6 100644 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx @@ -27,7 +27,7 @@ export default function DefaultOfficeDashboard(props: IProps) { ({ id: office.uid!, diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss deleted file mode 100644 index 3cc8b688..00000000 --- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - width: calc(100vh - 83px); - display: flex; - flex-direction: column; - justify-content: space-between; - - position: relative; - - .header { - flex: 1; - } - - .searchbar { - padding: 40px 24px 24px 24px; - } - - .folderlist-container { - max-height: calc(100vh - 215px); - height: calc(100vh - 215px); - overflow: auto; - border-right: 1px solid var(--color-neutral-200); - } - - .create-container { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx deleted file mode 100644 index b02309c9..00000000 --- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import Module from "@Front/Config/Module"; -import { OfficeRole } from "le-coffre-resources/dist/Admin"; -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 = { - roles: OfficeRole[]; - onSelectedRole?: (role: OfficeRole) => void; - onCloseLeftSide?: () => void; -}; - -export default function RoleListContainer(props: IProps) { - const router = useRouter(); - - const { roleUid } = router.query; - - const onSelectedBlock = useCallback( - (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const redirectPath = Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path; - router.push(redirectPath.replace("[uid]", block.id)); - }, - [props, router], - ); - - return ( -
- { - if (role.name === "admin") return false; - return true; - }) - .map((role) => { - return { - primaryText: role.name, - id: role.uid!, - isActive: role.uid === roleUid, - }; - })} - onSelectedBlock={onSelectedBlock} - bottomButton={{ - link: Module.getInstance().get().modules.pages.Roles.pages.Create.props.path, - text: "Créer un rôle", - }} - /> -
- ); -} diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss deleted file mode 100644 index f54563dd..00000000 --- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/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/DefaultRoleDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx index 86a971ce..cadc71a3 100644 --- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx @@ -1,117 +1,49 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; +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 { OfficeRole } from "le-coffre-resources/dist/Notary"; import OfficeRoles, { IGetRolesParams } from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; -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 { OfficeRole } from "le-coffre-resources/dist/Admin"; -import Image from "next/image"; -import React, { ReactNode } from "react"; -import classes from "./classes.module.scss"; -import RoleListContainer from "./RoleListContainer"; -import { ChevronLeftIcon } from "@heroicons/react/24/outline"; +type IProps = IPropsDashboardWithList; -type IProps = { - title: string; - children?: ReactNode; - onSelectedRole: (role: OfficeRole) => void; - hasBackArrow: boolean; - backArrowUrl?: string; - mobileBackText?: string; -}; -type IState = { - roles: OfficeRole[] | null; - isLeftSideOpen: boolean; - leftSideCanBeClosed: boolean; -}; - -export default class DefaultRoleDashboard extends React.Component { - private onWindowResize = () => {}; - public static defaultProps: Partial = { - hasBackArrow: false, - }; - - public constructor(props: IProps) { - super(props); - this.state = { - roles: 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.roles && } -
-
- 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 DefaultRoleDashboard(props: IProps) { + const [roles, setRoles] = React.useState(null); + const router = useRouter(); + const { roleUid } = router.query; + useEffect(() => { const query: IGetRolesParams = { include: { rules: true }, }; - const roles = await OfficeRoles.getInstance().get(query); + OfficeRoles.getInstance() + .get(query) + .then((roles) => setRoles(roles)); + }, []); - this.setState({ roles }); - } + const onSelectedBlock = (block: IBlock) => { + router.push(Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path.replace("[uid]", block.id)); + }; - 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: role.uid!, + primaryText: role.name, + isActive: role.uid === roleUid, + })) + : [] + } + bottomButton={{ + link: Module.getInstance().get().modules.pages.Roles.pages.Create.props.path, + text: "Créer un rôle", + }} + /> + ); } diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx index e3b97389..d5643677 100644 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx @@ -31,7 +31,7 @@ export default function DefaultUserDashboard(props: IProps) { ({ id: user.uid!,