4nk/lecoffre-back
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add profile (#5)

Browse Source 
solve this ticket :
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28293&t=k&c=657791f3b1c64e6cbbf22f9378c0bdae

add profile content

---------

Co-authored-by: OxSaitama <arnaud.daubernatali@smart-chain.fr>
Co-authored-by: Hugo Lextrait <hugo.lextrait@smart-chain.fr>
This commit is contained in:
Arnaud D. Natali 2023-02-27 12:29:34 +01:00 committed by GitHub
parent 0de484983f
commit c4659e99e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 414 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss Normal file
View File

@ -0,0 +1,12 @@
@import "@Themes/constants.scss";
.root {
display: flex;
position: relative;
width: fit-content;
margin: auto;
.content{
align-content: center;
}
}

28
src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import classNames from "classnames";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
type IPropsClass = {
text: string | JSX.Element;
path?: string;
isEnabled?: boolean;
};
type IStateClass = {};
export default class ProfileLink extends React.Component<IPropsClass, IStateClass> {
public override render(): JSX.Element | null {
if (this.props.isEnabled === false) return null;
return (
<Link href={this.props.path ?? ""} className={classNames(classes["root"])}>
<div className={classes["content"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
{this.props.text}
</Typography>
</div>
</Link>
);
}
}

30
src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss Normal file
View File

@ -0,0 +1,30 @@
@import "@Themes/constants.scss";
.root {
display: flex;
flex-direction: column;
background-color: $white;
box-shadow: $shadow-nav;
padding: 24px;
position: absolute;
top: 107px;
right: 66px;
text-align: center;
> *:not(:last-child) {
margin-bottom: 24px;
}
.separator {
width: 100%;
border: 1px solid $grey-medium;
}
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
}

30
src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import classes from "./classes.module.scss";
import ProfileLink from "../ProfileLink";
import LogOutButton from "@Front/Components/DesignSystem/LogOutButton";
type IProps = {
isOpen: boolean;
closeModal: () => void;
};
type IState = {};
export default class ProfileModal extends React.Component<IProps, IState> {
// TODO isEnabled depending on role given by DB
public override render(): JSX.Element | null {
if (!this.props.isOpen) return null;
return (
<>
<div className={classes["background"]} onClick={this.props.closeModal} />
<div className={classes["root"]}>
<ProfileLink text="Mon compte" path={""} isEnabled={true} />
<ProfileLink text="Gestion des utilisateurs" path={""} isEnabled={true} />
<ProfileLink text="Gestion des offices" path={""} isEnabled={true} />
<ProfileLink text="CGU" path={""} isEnabled={true} />
<div className={classes["separator"]} />
<LogOutButton />
</div>
</>
);
}
}

1
src/front/Components/DesignSystem/Header/Profile/classes.module.scss
View File

@ -2,6 +2,7 @@
.root {
.profile-icon{
cursor: pointer;
height: 24px;
width: 24px;
}

27
src/front/Components/DesignSystem/Header/Profile/index.tsx
View File

@ -2,14 +2,37 @@ import React from "react";
import classes from "./classes.module.scss";
import Image from "next/image";
import ProfileIcon from "@Assets/icons/user.svg";
import ProfileModal from "./ProfileModal";
type IProps = {};
type IState = {};
type IState = {
isModalOpen: boolean;
};
export default class Profile extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
isModalOpen: false,
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
public override render(): JSX.Element {
return <div className={classes["root"]}>
<Image alt="notifications" src={ProfileIcon} className={classes["profile-icon"]} />
<Image alt="profile" src={ProfileIcon} className={classes["profile-icon"]} onClick={this.openModal} />
{this.state.isModalOpen && <ProfileModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
</div>;
}
private openModal() {
this.setState({ isModalOpen: true });
};
private closeModal() {
this.setState({ isModalOpen: false });
};
}

1
src/front/Components/DesignSystem/Header/classes.module.scss
View File

@ -8,6 +8,7 @@
background-color: $white;
box-shadow: $shadow-nav;
padding: 0 48px;
position: relative;
.logo-container {
.logo {

14
src/front/Components/DesignSystem/LogOutButton/classes.module.scss Normal file
View File

@ -0,0 +1,14 @@
@import "@Themes/constants.scss";
.root {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.disconnect-icon {
margin-left: 8px;
width: 24px;
height: 24px;
}
}

27
src/front/Components/DesignSystem/LogOutButton/index.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
import Image from "next/image";
import DisconnectIcon from "@Assets/icons/disconnect.svg";
import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "../Typography";
type IProps = {};
type IState = {
isLogged: boolean;
};
export default class LogOutButton extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div className={classes["root"]} onClick={this.disconnect}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
Déconnexion
</Typography>
<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
</div>
);
}
private disconnect() {
console.log("disconnected");
}
}

100
src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links) Normal file
View File

@ -0,0 +1,100 @@
import BasePage from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
type IState = {
isModalDisplayed: boolean;
};
type IProps = {};
export default class DesignSystem extends BasePage<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
isModalDisplayed: false,
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
public override render(): JSX.Element {
return (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H1}>Website design System</Typography>
</div>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.P_18}>
This page allows to gather all the design system of the site. A Design System is a library of components, visuals and principles with reusable code. This evolving kit offers a UX and UI repository for
designers and developers of digital products and services. The construction of a design system offers many advantages. This solution facilitates the work of the teams and reduces the "design debt" and the
"technical debt". The result is a coherent ecosystem and therefore a better experience for users and customers.
</Typography>
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Button components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
<Button variant={EButtonVariant.GHOST}>Ghost</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Toaster component</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>
Spawn a toast
</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Modal components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>
Show Modal
</Button>
<Confirm isOpen={this.state.isModalDisplayed} onClose={this.closeModal} closeBtn header={"Title"} cancelText={"Cancel"} confirmText={"Confirmer"}>
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
</Confirm>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>HeaderLink components</Typography>
</div>
<div className={classes["inline-flex"]}>
<HeaderLink text={"Home"} path={"/"} />
<HeaderLink text={"Design-system"} path={"/design-system"} />
</div>
</div>
</div>
</DefaultTemplate>
);
}
private openModal() {
this.setState({
isModalDisplayed: true,
});
}
private closeModal() {
this.setState({
isModalDisplayed: false,
});
}
private spawnToast() {
const toast: IToast = { title: "Un collaborateur veut rejoindre votre office", text: "12:00 - 1 fev 2023" };
Toasts.getInstance().open(toast);
}
}

4
src/front/assets/icons/disconnect.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.8601 6.64001C20.1185 7.8988 20.9754 9.50246 21.3224 11.2482C21.6694 12.994 21.491 14.8034 20.8098 16.4478C20.1285 18.0921 18.9749 19.4976 17.4949 20.4864C16.015 21.4752 14.275 22.0029 12.4951 22.0029C10.7152 22.0029 8.97527 21.4752 7.49529 20.4864C6.01532 19.4976 4.86176 18.0921 4.18049 16.4478C3.49921 14.8034 3.32081 12.994 3.66784 11.2482C4.01487 9.50246 4.87174 7.8988 6.13012 6.64001" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5 2V12" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 694 B

141
src/front/components/Layouts/DesignSystem/index.tsx Normal file
View File

@ -0,0 +1,141 @@
import BasePage from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import ToolTip from "@Front/Components/DesignSystem/ToolTip";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
// import Input from "@Front/Components/DesignSystem/Input";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
type IState = {
isModalDisplayed: boolean;
};
type IProps = {};
export default class DesignSystem extends BasePage<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
isModalDisplayed: false,
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
public override render(): JSX.Element {
return (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H1}>Website design System</Typography>
</div>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.P_18}>
This page allows to gather all the design system of the site. A Design System is a library of components, visuals and principles with reusable code. This evolving kit offers a UX and UI repository for
designers and developers of digital products and services. The construction of a design system offers many advantages. This solution facilitates the work of the teams and reduces the "design debt" and the
"technical debt". The result is a coherent ecosystem and therefore a better experience for users and customers.
</Typography>
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Button components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
<Button variant={EButtonVariant.GHOST}>Ghost</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Toaster component</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>
Spawn a toast
</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Modal components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>
Show Modal
</Button>
<Confirm isOpen={this.state.isModalDisplayed} onClose={this.closeModal} closeBtn header={"Title"} cancelText={"Cancel"} confirmText={"Confirmer"}>
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
</Confirm>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>HeaderLink components</Typography>
</div>
<div className={classes["inline-flex"]}>
<HeaderLink text={"Home"} path={"/"} />
<HeaderLink text={"Design-system"} path={"/design-system"} />
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>CheckBox component</Typography>
</div>
<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip"/>
<CheckBox name="Check Box 2" />
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>RadioBox component</Typography>
</div>
<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">Radio Box 1</RadioBox>
<RadioBox name="RadioBox">Radio Box 2</RadioBox>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Tool tip component</Typography>
</div>
<ToolTip title="toolTip" text="tooltip content" isNotFlex={true} />
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Input component</Typography>
</div>
<div className={classes["sub-section"]}>
<InputField name="input field" fakeplaceholder="input place hodler" />
</div>
<div className={classes["sub-section"]}>
<InputField name="input field" fakeplaceholder="text area place hodler" large={true} />
</div>
<div className={classes["sub-section"]}>
<InputField name="input field" fakeplaceholder="number place hodler" type="number" />
</div>
</div>
</div>
</DefaultTemplate>
);
}
private openModal() {
this.setState({
isModalDisplayed: true,
});
}
private closeModal() {
this.setState({
isModalDisplayed: false,
});
}
private spawnToast() {
const toast: IToast = {
title: "Un collaborateur veut rejoindre votre office",
text: "12:00 - 1 fev 2023",
};
Toasts.getInstance().open(toast);
}
}

1
src/front/index.scss
View File

@ -30,6 +30,7 @@ input {
a,
a:visited {
color: initial;
text-decoration: none !important;
opacity: 1;
transition: opacity 0.15s ease-in-out;