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

defaultnotarytemplate and animations on the left bar

Browse Source
This commit is contained in:
Hugo Lextrait 2023-04-13 17:58:32 +02:00
parent e84701867a
commit b32deb6578
19 changed files with 260 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/front/Api/BaseApiService.ts
View File

@ -42,7 +42,6 @@ export default abstract class BaseApiService {
method: "GET",
headers: this.buildHeaders(ContentType.JSON),
});
console.log(request);
return this.sendRequest<T>(request);
}
@ -50,14 +49,14 @@ export default abstract class BaseApiService {
url: URL,
body: { [key: string]: unknown } = {}
) {
const request = async () =>
return this.sendRequest<T>(
async () =>
await fetch(url, {
method: "POST",
headers: this.buildHeaders(ContentType.JSON),
body: this.buildBody(body),
});
return this.sendRequest<T>(request);
})
);
}
protected async putRequest<T>(

28
src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts
View File

@ -13,7 +13,7 @@ export default class Users extends BaseSuperAdmin {
public static getInstance() {
if (!this.instance) {
return new Users();
return new this();
} else {
return this.instance;
}
@ -29,22 +29,6 @@ export default class Users extends BaseSuperAdmin {
}
}
public async getAuthorizationCode(): Promise<any> {
try {
const url =
new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
client_id=4501646203F3EF67
&redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
&scope=openid,profile,offline_access
&response_type=code`);
// const url = new URL("https://jsonplaceholder.typicode.com/todos/1");
await this.getRequest(url);
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
public async getByUid(uid: string): Promise<User> {
const url = new URL(this.baseURl.concat("/").concat(uid));
try {
@ -54,14 +38,4 @@ export default class Users extends BaseSuperAdmin {
return Promise.reject(err);
}
}
// public async post(params: User): Promise<User> {
// const url = new URL(this.baseURl);
// try {
// return await this.postRequest<User>(url, params);
// } catch (err) {
// this.onError(err);
// return Promise.reject(err);
// }
// }
}

36
src/front/Components/DesignSystem/Button/index.tsx
View File

@ -17,29 +17,29 @@ type IProps = {
icon?: string;
iconStyle?: CSSProperties;
disabled?: boolean;
type: "button" | "submit";
isloading: string;
type?: "button" | "submit";
isloading?: string;
};
type IState = {};
export default function Button(props: IProps) {
const {
variant = EButtonVariant.PRIMARY,
disabled = false,
type = "button",
isloading = "false",
fullwidth = "false",
onClick,
children,
icon,
iconStyle
} = props;
export default class Button extends React.Component<IProps, IState> {
static defaultProps: IProps = {
variant: EButtonVariant.PRIMARY,
disabled: false,
type: "button",
isloading: "false",
fullwidth: "false",
};
public override render(): JSX.Element {
const attributes = { ...this.props };
const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
delete attributes.icon;
return (
<button {...attributes} onClick={this.props.onClick} className={classes["root"]} type={this.props.type}>
{this.props.children}
{this.props.icon && <Image src={this.props.icon} style={this.props.iconStyle} alt={"button icon"}/>}
<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
{children}
{icon && <Image src={icon} style={iconStyle} alt={"button icon"} />}
</button>
);
}
}

4
src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss
View File

@ -15,6 +15,10 @@
@media (max-width: $screen-l) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: $screen-s) {
grid-template-columns: 1fr;
}
&.isSignleDescription {

29
src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx
View File

@ -8,40 +8,36 @@ import Typography, { ITypo } from "../../Typography";
type IProps = {
folder: IDashBoardFolder;
isDescription: boolean;
};
type IState = {};
export default class FolderBoxInformation extends React.Component<IProps, IState> {
public static defaultProps = {
isDescription: false,
isDescription?: boolean;
};
public override render(): JSX.Element {
return <div className={classNames(classes["root"], this.props.isDescription && classes["isSignleDescription"])}>
export default function FolderBoxInformation(props: IProps) {
const { isDescription = false } = props;
return <div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
<div className={classes["content"]}>
{this.props.isDescription ?
{isDescription ?
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
<Typography typo={ITypo.P_18}>{this.props.folder.description ?? "..."}</Typography>
<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
</div>
:
<>
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
<Typography typo={ITypo.P_18}>{this.props.folder.name ?? "..."}</Typography>
<Typography typo={ITypo.P_18}>{props.folder.name ?? "..."}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
<Typography typo={ITypo.P_18}>{this.props.folder.folder_number ?? "..."}</Typography>
<Typography typo={ITypo.P_18}>{props.folder.folder_number ?? "..."}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
<Typography typo={ITypo.P_18}>{this.props.folder.deed.deed_type.name ?? "..."}</Typography>
<Typography typo={ITypo.P_18}>{props.folder.deed.deed_type.name ?? "..."}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
<Typography typo={ITypo.P_18}>{this.formatDate(this.props.folder.created_at)}</Typography>
<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
</div>
</>
}
@ -50,7 +46,7 @@ export default class FolderBoxInformation extends React.Component<IProps, IState
</div>;
}
private formatDate(date: Date | null): string {
function formatDate(date: Date | null): string {
if (!date) return "...";
return date.toLocaleDateString("fr-FR", {
year: "numeric",
@ -58,4 +54,3 @@ export default class FolderBoxInformation extends React.Component<IProps, IState
day: "numeric",
});
}
}

5
src/front/Components/DesignSystem/FolderList/index.tsx
View File

@ -6,6 +6,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar
type IProps = {
folders: IDashBoardFolder[];
onSelectedFolder?: (folder: IDashBoardFolder) => void;
onCloseLeftSide?: () => void;
};
type IState = {};
@ -14,7 +15,9 @@ export default class FolderList extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}>
{this.props.folders.map((folder) => {
return <FolderContainer folder={folder} key={folder.uid} onSelectedFolder={this.props.onSelectedFolder}/>;
return <div onClick={this.props.onCloseLeftSide} key={folder.uid}>
<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
</div>
})};
</div>;
}

3
src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
View File

@ -2,10 +2,11 @@
.root {
min-height: 100%;
width: 389px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.searchbar {
padding: 40px 24px 24px 24px;
}

3
src/front/Components/DesignSystem/FolderListContainer/index.tsx
View File

@ -8,6 +8,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar
type IProps = {
folders: IDashBoardFolder[];
onSelectedFolder?: (folder: IDashBoardFolder) => void;
onCloseLeftSide?: () => void;
};
type IState = {
filteredFolders: IDashBoardFolder[];
@ -28,7 +29,7 @@ export default class FolderListContainer extends React.Component<IProps, IState>
<div className={classes["searchbar"]}>
<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
</div>
<FolderList folders={this.state.filteredFolders} onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder} />
<FolderList folders={this.state.filteredFolders} onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder} onCloseLeftSide={this.props.onCloseLeftSide}/>
</div>
<div>

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

@ -10,7 +10,7 @@
padding: 0 48px;
position: sticky;
top: 0;
z-index: 1;
z-index: 2;
@media (max-width: $screen-m) {
transition: transform 500ms ease-out;

18
src/front/Components/DesignSystem/Header/index.tsx
View File

@ -26,7 +26,6 @@ type IState = {
};
export default class Header extends React.Component<IProps, IState> {
private onScrollYDirectionChange = () => { };
private onWindowResize = () => { };
private headerBreakpoint = 1300;
@ -45,7 +44,6 @@ export default class Header extends React.Component<IProps, IState> {
this.closeNotificationMenu = this.closeNotificationMenu.bind(this);
this.closeProfileMenu = this.closeProfileMenu.bind(this);
this.openProfileMenu = this.openProfileMenu.bind(this);
this.visibility = this.visibility.bind(this);
}
public override render(): JSX.Element {
return (
@ -77,31 +75,15 @@ export default class Header extends React.Component<IProps, IState> {
}
public override componentDidMount() {
this.onScrollYDirectionChange = WindowStore.getInstance().onScrollYDirectionChange((scrollYDirection) =>
this.visibility(scrollYDirection),
);
this.onWindowResize = WindowStore.getInstance().onResize((window) =>
this.onResize(window)
);
}
public override componentWillUnmount() {
this.onScrollYDirectionChange();
this.onWindowResize();
}
private visibility(scrollYDirection: number) {
let open: IState["open"] = EHeaderOpeningState.OPEN;
if (window.scrollY > 50 && scrollYDirection < 0 && Math.abs(scrollYDirection) > 8 && window.innerWidth < this.headerBreakpoint) {
open = EHeaderOpeningState.CLOSED;
this.closeBurgerMenu();
this.closeNotificationMenu();
}
if (open !== this.state.open) this.setState({ open });
}
private onResize(window: Window) {
if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false });
if (window.innerWidth < this.headerBreakpoint && this.state.isProfileMenuOpen) this.setState({ isProfileMenuOpen: false });

2
src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
View File

@ -17,7 +17,7 @@
transition: width 300ms;
background-color: $turquoise-flash;
.percentage{
width: 37px;
width: 0;
position: absolute;
top: 16px;
left: 50%;

2
src/front/Components/DesignSystem/Select/index.tsx
View File

@ -4,7 +4,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
import Typography, { ITypo } from "../Typography";
import classes from "./classes.module.scss";
import WindowStore from "@Front/Stores/Window";
import WindowStore from "@Front/Stores/WindowStore";
import Image from "next/image";
type IProps = {

48
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
View File

@ -3,14 +3,58 @@
.root {
.content {
display: flex;
.left-side {
width: 389px;
overflow: hidden;
height: calc(100vh - 83px);
.left-side {
background-color: $white;
z-index: 1;
display: flex;
width: 389px;
min-width: 389px;
transition: all 0.3s $custom-easing;
overflow: hidden;
@media (max-width: ($screen-m - 1px)) {
width: 83px;
min-width: 83px;
transform: translateX(-389px);
&.opened {
transform: translateX(0px);
width: 389px;
min-width: 389px;
}
}
}
.closable-left-side {
position: absolute;
background-color: $white;
z-index: 0;
display: flex;
justify-content: center;
min-width: 83px;
max-width: 83px;
height: calc(100vh - 83px);
border-right: 1px $grey-medium solid;
@media (min-width: $screen-m) {
display: none;
}
.chevron-icon {
margin-top: 21px;
transform: rotate(180deg);
cursor: pointer;
}
}
.right-side {
width: 100%;
padding: 64px 48px;
overflow-y: auto;
}
}
}

45
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
View File

@ -6,6 +6,10 @@ import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"
import { OfficeFolder } from 'le-coffre-resources/dist/Customer';
import chevronIcon from "@Assets/Icons/chevron.svg";
import Image from 'next/image';
import classNames from 'classnames';
import WindowStore from '@Front/Stores/WindowStore';
type IProps = {
title: string;
children?: ReactNode;
@ -13,6 +17,8 @@ type IProps = {
};
type IState = {
folders: IDashBoardFolder[];
isLeftSideOpen: boolean;
leftSideCanBeClosed: boolean;
};
export type IDashBoardFolder = {
@ -26,6 +32,7 @@ export type IDashBoardFolder = {
office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
};
export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
private onWindowResize = () => { };
public static defaultProps = {
scrollTop: 0,
};
@ -34,19 +41,55 @@ public constructor(props: IProps) {
super(props);
this.state = {
folders: folders,
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 (
<div className={classes["root"]}>
<Header isUserConnected={true} />
<div className={classes["content"]}>
<div className={classes["left-side"]}><FolderListContainer folders={this.state.folders} onSelectedFolder={this.props.onSelectedFolder}/></div>
<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
<FolderListContainer folders={this.state.folders} onSelectedFolder={this.props.onSelectedFolder} onCloseLeftSide={this.onCloseLeftSide} />
</div>
<div className={classNames(classes["closable-left-side"])}>
<Image alt='open side menu' src={chevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
</div>
<div className={classes["right-side"]}>{this.props.children}</div>
</div>
<Version />
</div>
);
}
public override componentDidMount(): void {
this.onWindowResize = WindowStore.getInstance().onResize((window) =>
this.onResize(window)
);
}
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 });
}
}

2
src/front/Components/Layouts/Folder/ClientSection/classes.module.scss
View File

@ -2,11 +2,13 @@
.root {
width: 100%;
padding-bottom: 32px;
.no-client{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 72px;
.title{
margin-bottom: 16px;
}

25
src/front/Components/Layouts/Folder/classes.module.scss
View File

@ -1,9 +1,19 @@
@import "@Themes/constants.scss";
.root {
display: flex;
align-items: center;
flex-direction: column;
min-height: 100%;
.no-folder-selected {
width: 100%;
.choose-a-folder {
margin-top: 96px;
text-align: center;
}
}
.folder-informations {
width: 100%;
@ -23,6 +33,7 @@
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
}
@ -36,9 +47,23 @@
}
.button-container {
width: 100%;
text-align: center;
:first-child {
margin-right: 12px;
}
> * {
margin: auto;
}
@media (max-width: $screen-m) {
:first-child {
margin-right: 0;
margin-bottom: 12px;
}
> * {
width: 100%;
}
}
}
}
}

20
src/front/Components/Layouts/Folder/index.tsx
View File

@ -1,13 +1,12 @@
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import BasePage from "../Base";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation from "@Front/Components/DesignSystem/Elements/FolderBoxInformation";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import ClientSection from "./ClientSection";
import ChevronIcon from "@Assets/Icons/chevron.svg";
import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
type IProps = {};
type IState = {
@ -22,11 +21,14 @@ export default class Folder extends BasePage<IProps, IState>{
this.onSelectedFolder = this.onSelectedFolder.bind(this);
}
// TODO: Message if the user has not created any folder yet
public override render(): JSX.Element {
return (
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
<div className={classes["root"]}>
{this.state.selectedFolder && <div className={classes["folder-informations"]}>
{this.state.selectedFolder
?
<div className={classes["folder-informations"]}>
<div className={classes["folder-header"]}>
<div className={classes["header"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
@ -48,15 +50,21 @@ export default class Folder extends BasePage<IProps, IState>{
<Button variant={EButtonVariant.GHOST}>Archiver le dossier</Button>
<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
</div>
</div>
:
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>Veuillez sélectionner un dossier.</Typography>
</div>
</div>}
</div>
</DefaultNotaryDashboard>
);
}
public override async componentDidMount() {
const users = await Users.getInstance().getByUid("5rOlvAleeX");
console.log(users);
// const users = await Users.getInstance().getByUid("5rOlvAleeX");
// console.log(users);
}
private doesFolderHaveCustomer(): boolean {

67
src/front/Stores/Window.ts
View File

@ -1,67 +0,0 @@
import EventEmitter from "events";
export default class WindowStore {
private static ctx: WindowStore;
private readonly event = new EventEmitter();
private constructor() {
WindowStore.ctx = this;
this.iniEvents();
}
public static getInstance() {
if (!WindowStore.ctx) return new this();
return WindowStore.ctx;
}
public onScrollYDirectionChange(callback: (scrollYDifference: number) => void) {
this.event.on("scrollYDirectionChange", callback);
return () => {
this.event.off("scrollYDirectionChange", callback);
};
}
public onResize(callback: (window: Window) => void) {
this.event.on("resize", callback);
return () => {
this.event.off("resize", callback);
};
}
public onClick(callback: (e: MouseEvent) => void) {
this.event.on("click", callback);
return () => {
this.event.off("click", callback);
};
}
private iniEvents(): void {
window.addEventListener("scroll", (e: Event) => this.scrollYHandler());
window.addEventListener("resize", (e: Event) => this.resizeHandler());
document.addEventListener("click", (e: MouseEvent) => this.clickHandler(e), true);
}
private clickHandler(e: MouseEvent) {
this.event.emit("click", e);
}
private scrollYHandler = (() => {
let previousY: number = window.scrollY;
let snapShotY: number = previousY;
let previousYDirection: number = 1;
return (): void => {
const scrollYDirection = window.scrollY - previousY > 0 ? 1 : -1;
if (previousYDirection !== scrollYDirection) {
snapShotY = window.scrollY;
}
this.event.emit("scrollYDirectionChange", snapShotY - window.scrollY);
previousY = window.scrollY;
previousYDirection = scrollYDirection;
};
})();
private resizeHandler() {
this.event.emit("resize", window);
}
}

21
src/front/Stores/WindowStore.ts
View File

@ -10,7 +10,7 @@ export default class WindowStore {
}
public static getInstance() {
if (!WindowStore.ctx) new this();
if (!WindowStore.ctx) return new this();
return WindowStore.ctx;
}
@ -28,17 +28,28 @@ export default class WindowStore {
};
}
private iniEvents(): void {
window.addEventListener("scroll", (e: Event) => this.scrollYHandler(e));
window.addEventListener("resize", (e: Event) => this.resizeHandler());
public onClick(callback: (e: MouseEvent) => void) {
this.event.on("click", callback);
return () => {
this.event.off("click", callback);
};
}
private iniEvents(): void {
window.addEventListener("scroll", (e: Event) => this.scrollYHandler());
window.addEventListener("resize", (e: Event) => this.resizeHandler());
document.addEventListener("click", (e: MouseEvent) => this.clickHandler(e), true);
}
private clickHandler(e: MouseEvent) {
this.event.emit("click", e);
}
private scrollYHandler = (() => {
let previousY: number = window.scrollY;
let snapShotY: number = previousY;
let previousYDirection: number = 1;
return (e: Event): void => {
return (): void => {
const scrollYDirection = window.scrollY - previousY > 0 ? 1 : -1;
if (previousYDirection !== scrollYDirection) {
snapShotY = window.scrollY;