From 989976d0bcb64c24701b8bd40716363d73eedd25 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 29 Jul 2024 11:09:56 +0200 Subject: [PATCH 1/2] :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 6d936e2ade4d7eb73b5f365bd69aac589cf80e17 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 29 Jul 2024 11:37:12 +0200 Subject: [PATCH 2/2] :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 (