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

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

@ -42,7 +42,6 @@ export default abstract class BaseApiService {
method: "GET", method: "GET",
headers: this.buildHeaders(ContentType.JSON), headers: this.buildHeaders(ContentType.JSON),
}); });
console.log(request);
return this.sendRequest<T>(request); return this.sendRequest<T>(request);
} }
@ -50,14 +49,14 @@ export default abstract class BaseApiService {
url: URL, url: URL,
body: { [key: string]: unknown } = {} body: { [key: string]: unknown } = {}
) { ) {
const request = async () => return this.sendRequest<T>(
await fetch(url, { async () =>
method: "POST", await fetch(url, {
headers: this.buildHeaders(ContentType.JSON), method: "POST",
body: this.buildBody(body), headers: this.buildHeaders(ContentType.JSON),
}); body: this.buildBody(body),
})
return this.sendRequest<T>(request); );
} }
protected async putRequest<T>( 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() { public static getInstance() {
if (!this.instance) { if (!this.instance) {
return new Users(); return new this();
} else { } else {
return this.instance; 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> { public async getByUid(uid: string): Promise<User> {
const url = new URL(this.baseURl.concat("/").concat(uid)); const url = new URL(this.baseURl.concat("/").concat(uid));
try { try {
@ -54,14 +38,4 @@ export default class Users extends BaseSuperAdmin {
return Promise.reject(err); 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);
// }
// }
} }

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

@ -14,32 +14,32 @@ type IProps = {
children?: React.ReactNode; children?: React.ReactNode;
variant?: EButtonVariant; variant?: EButtonVariant;
fullwidth?: "true" | "false"; fullwidth?: "true" | "false";
icon? : string; icon?: string;
iconStyle?: CSSProperties; iconStyle?: CSSProperties;
disabled?: boolean; disabled?: boolean;
type: "button" | "submit"; type?: "button" | "submit";
isloading: string; 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> { const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
static defaultProps: IProps = { delete attributes.icon;
variant: EButtonVariant.PRIMARY, return (
disabled: false, <button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
type: "button", {children}
isloading: "false", {icon && <Image src={icon} style={iconStyle} alt={"button icon"} />}
fullwidth: "false", </button>
}; );
public override render(): JSX.Element {
const attributes = { ...this.props };
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>
);
}
} }

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

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

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

@ -8,54 +8,49 @@ import Typography, { ITypo } from "../../Typography";
type IProps = { type IProps = {
folder: IDashBoardFolder; folder: IDashBoardFolder;
isDescription: boolean; isDescription?: boolean;
}; };
type IState = {};
export default class FolderBoxInformation extends React.Component<IProps, IState> { export default function FolderBoxInformation(props: IProps) {
public static defaultProps = { const { isDescription = false } = props;
isDescription: false,
};
public override render(): JSX.Element { return <div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
return <div className={classNames(classes["root"], this.props.isDescription && classes["isSignleDescription"])}> <div className={classes["content"]}>
<div className={classes["content"]}> {isDescription ?
{this.props.isDescription ? <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
</div>
:
<>
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography> <Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
<Typography typo={ITypo.P_18}>{this.props.folder.description ?? "..."}</Typography> <Typography typo={ITypo.P_18}>{props.folder.name ?? "..."}</Typography>
</div> </div>
: <div className={classes["text-container"]}>
<> <Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
<div className={classes["text-container"]}> <Typography typo={ITypo.P_18}>{props.folder.folder_number ?? "..."}</Typography>
<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography> </div>
<Typography typo={ITypo.P_18}>{this.props.folder.name ?? "..."}</Typography> <div className={classes["text-container"]}>
</div> <Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
<div className={classes["text-container"]}> <Typography typo={ITypo.P_18}>{props.folder.deed.deed_type.name ?? "..."}</Typography>
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography> </div>
<Typography typo={ITypo.P_18}>{this.props.folder.folder_number ?? "..."}</Typography> <div className={classes["text-container"]}>
</div> <Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
<div className={classes["text-container"]}> <Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography> </div>
<Typography typo={ITypo.P_18}>{this.props.folder.deed.deed_type.name ?? "..."}</Typography> </>
</div> }
<div className={classes["text-container"]}> </div>
<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography> <Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
<Typography typo={ITypo.P_18}>{this.formatDate(this.props.folder.created_at)}</Typography> </div>;
</div>
</>
}
</div>
<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]}/>
</div>;
}
private formatDate(date: Date | null): string {
if(!date) return "...";
return date.toLocaleDateString("fr-FR", {
year: "numeric",
month: "long",
day: "numeric",
});
}
} }
function formatDate(date: Date | null): string {
if (!date) return "...";
return date.toLocaleDateString("fr-FR", {
year: "numeric",
month: "long",
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 = { type IProps = {
folders: IDashBoardFolder[]; folders: IDashBoardFolder[];
onSelectedFolder?: (folder: IDashBoardFolder) => void; onSelectedFolder?: (folder: IDashBoardFolder) => void;
onCloseLeftSide?: () => void;
}; };
type IState = {}; type IState = {};
@ -14,7 +15,9 @@ export default class FolderList extends React.Component<IProps, IState> {
public override render(): JSX.Element { public override render(): JSX.Element {
return <div className={classes["root"]}> return <div className={classes["root"]}>
{this.props.folders.map((folder) => { {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>; </div>;
} }

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

@ -2,11 +2,12 @@
.root { .root {
min-height: 100%; min-height: 100%;
width: 389px; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
.searchbar{
.searchbar {
padding: 40px 24px 24px 24px; 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 = { type IProps = {
folders: IDashBoardFolder[]; folders: IDashBoardFolder[];
onSelectedFolder?: (folder: IDashBoardFolder) => void; onSelectedFolder?: (folder: IDashBoardFolder) => void;
onCloseLeftSide?: () => void;
}; };
type IState = { type IState = {
filteredFolders: IDashBoardFolder[]; filteredFolders: IDashBoardFolder[];
@ -28,7 +29,7 @@ export default class FolderListContainer extends React.Component<IProps, IState>
<div className={classes["searchbar"]}> <div className={classes["searchbar"]}>
<SearchBar folders={this.props.folders} onChange={this.filterFolders} /> <SearchBar folders={this.props.folders} onChange={this.filterFolders} />
</div> </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>
<div> <div>

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

@ -10,7 +10,7 @@
padding: 0 48px; padding: 0 48px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 2;
@media (max-width: $screen-m) { @media (max-width: $screen-m) {
transition: transform 500ms ease-out; 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> { export default class Header extends React.Component<IProps, IState> {
private onScrollYDirectionChange = () => { };
private onWindowResize = () => { }; private onWindowResize = () => { };
private headerBreakpoint = 1300; private headerBreakpoint = 1300;
@ -45,7 +44,6 @@ export default class Header extends React.Component<IProps, IState> {
this.closeNotificationMenu = this.closeNotificationMenu.bind(this); this.closeNotificationMenu = this.closeNotificationMenu.bind(this);
this.closeProfileMenu = this.closeProfileMenu.bind(this); this.closeProfileMenu = this.closeProfileMenu.bind(this);
this.openProfileMenu = this.openProfileMenu.bind(this); this.openProfileMenu = this.openProfileMenu.bind(this);
this.visibility = this.visibility.bind(this);
} }
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
@ -77,31 +75,15 @@ export default class Header extends React.Component<IProps, IState> {
} }
public override componentDidMount() { public override componentDidMount() {
this.onScrollYDirectionChange = WindowStore.getInstance().onScrollYDirectionChange((scrollYDirection) =>
this.visibility(scrollYDirection),
);
this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onWindowResize = WindowStore.getInstance().onResize((window) =>
this.onResize(window) this.onResize(window)
); );
} }
public override componentWillUnmount() { public override componentWillUnmount() {
this.onScrollYDirectionChange();
this.onWindowResize(); 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) { private onResize(window: Window) {
if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false }); if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false });
if (window.innerWidth < this.headerBreakpoint && this.state.isProfileMenuOpen) this.setState({ isProfileMenuOpen: 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; transition: width 300ms;
background-color: $turquoise-flash; background-color: $turquoise-flash;
.percentage{ .percentage{
width: 37px; width: 0;
position: absolute; position: absolute;
top: 16px; top: 16px;
left: 50%; 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 Typography, { ITypo } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import WindowStore from "@Front/Stores/Window"; import WindowStore from "@Front/Stores/WindowStore";
import Image from "next/image"; import Image from "next/image";
type IProps = { type IProps = {

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

@ -3,14 +3,58 @@
.root { .root {
.content { .content {
display: flex; display: flex;
overflow: hidden;
height: calc(100vh - 83px);
.left-side { .left-side {
background-color: $white;
z-index: 1;
display: flex;
width: 389px; 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); 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 { .right-side {
width: 100%; width: 100%;
padding: 64px 48px; padding: 64px 48px;
overflow-y: auto;
} }
} }
} }

47
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 Version from "@Front/Components/DesignSystem/Version";
import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData" import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"
import { OfficeFolder } from 'le-coffre-resources/dist/Customer'; 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 = { type IProps = {
title: string; title: string;
children?: ReactNode; children?: ReactNode;
@ -13,6 +17,8 @@ type IProps = {
}; };
type IState = { type IState = {
folders: IDashBoardFolder[]; folders: IDashBoardFolder[];
isLeftSideOpen: boolean;
leftSideCanBeClosed: boolean;
}; };
export type IDashBoardFolder = { export type IDashBoardFolder = {
@ -26,27 +32,64 @@ export type IDashBoardFolder = {
office_folder_has_customers?: OfficeFolder["office_folder_has_customers"]; office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
}; };
export default class DefaultNotaryDashboard extends React.Component<IProps, IState> { export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
private onWindowResize = () => { };
public static defaultProps = { public static defaultProps = {
scrollTop: 0, scrollTop: 0,
}; };
public constructor(props: IProps) { public constructor(props: IProps) {
super(props); super(props);
this.state = { this.state = {
folders: folders, 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 { public override render(): JSX.Element {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Header isUserConnected={true} /> <Header isUserConnected={true} />
<div className={classes["content"]}> <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 className={classes["right-side"]}>{this.props.children}</div>
</div> </div>
<Version /> <Version />
</div> </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 { .root {
width: 100%; width: 100%;
padding-bottom: 32px;
.no-client{ .no-client{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 72px;
.title{ .title{
margin-bottom: 16px; margin-bottom: 16px;
} }

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

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

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

@ -1,13 +1,12 @@
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import BasePage from "../Base"; 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 classes from "./classes.module.scss";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation from "@Front/Components/DesignSystem/Elements/FolderBoxInformation"; import FolderBoxInformation from "@Front/Components/DesignSystem/Elements/FolderBoxInformation";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import ClientSection from "./ClientSection"; import ClientSection from "./ClientSection";
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
type IProps = {}; type IProps = {};
type IState = { type IState = {
@ -21,42 +20,51 @@ export default class Folder extends BasePage<IProps, IState>{
}; };
this.onSelectedFolder = this.onSelectedFolder.bind(this); this.onSelectedFolder = this.onSelectedFolder.bind(this);
} }
// TODO: Message if the user has not created any folder yet
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}> <DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
<div className={classes["root"]}> <div className={classes["root"]}>
{this.state.selectedFolder && <div className={classes["folder-informations"]}> {this.state.selectedFolder
<div className={classes["folder-header"]}> ?
<div className={classes["header"]}> <div className={classes["folder-informations"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography> <div className={classes["folder-header"]}>
<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>Modifier les collaborateurs</Button> <div className={classes["header"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>Modifier les collaborateurs</Button>
</div>
<FolderBoxInformation folder={this.state.selectedFolder} />
<div className={classes["second-box"]}>
<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
</div>
<div className={classes["progress-bar"]}>
<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
</div>
{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
</div> </div>
<FolderBoxInformation folder={this.state.selectedFolder} />
<div className={classes["second-box"]}>
<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
</div>
<div className={classes["progress-bar"]}>
<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
</div>
{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
</div>
{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />} {!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Button variant={EButtonVariant.GHOST}>Archiver le dossier</Button> <Button variant={EButtonVariant.GHOST}>Archiver le dossier</Button>
<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button> <Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
</div>
</div> </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> </div>
</DefaultNotaryDashboard> </DefaultNotaryDashboard>
); );
} }
public override async componentDidMount() { public override async componentDidMount() {
const users = await Users.getInstance().getByUid("5rOlvAleeX"); // const users = await Users.getInstance().getByUid("5rOlvAleeX");
console.log(users); // console.log(users);
} }
private doesFolderHaveCustomer(): boolean { 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);
}
}

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

@ -10,7 +10,7 @@ export default class WindowStore {
} }
public static getInstance() { public static getInstance() {
if (!WindowStore.ctx) new this(); if (!WindowStore.ctx) return new this();
return WindowStore.ctx; return WindowStore.ctx;
} }
@ -21,24 +21,35 @@ export default class WindowStore {
}; };
} }
public onResize(callback: (window: Window) => void) { public onResize(callback: (window: Window) => void) {
this.event.on("resize", callback); this.event.on("resize", callback);
return () => { return () => {
this.event.off("resize", callback); this.event.off("resize", callback);
}; };
} }
private iniEvents(): void { public onClick(callback: (e: MouseEvent) => void) {
window.addEventListener("scroll", (e: Event) => this.scrollYHandler(e)); this.event.on("click", callback);
window.addEventListener("resize", (e: Event) => this.resizeHandler()); 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 = (() => { private scrollYHandler = (() => {
let previousY: number = window.scrollY; let previousY: number = window.scrollY;
let snapShotY: number = previousY; let snapShotY: number = previousY;
let previousYDirection: number = 1; let previousYDirection: number = 1;
return (e: Event): void => { return (): void => {
const scrollYDirection = window.scrollY - previousY > 0 ? 1 : -1; const scrollYDirection = window.scrollY - previousY > 0 ? 1 : -1;
if (previousYDirection !== scrollYDirection) { if (previousYDirection !== scrollYDirection) {
snapShotY = window.scrollY; snapShotY = window.scrollY;
@ -50,7 +61,7 @@ export default class WindowStore {
}; };
})(); })();
private resizeHandler() { private resizeHandler() {
this.event.emit("resize", window); this.event.emit("resize", window);
} }
} }