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

format all front repo

Browse Source
This commit is contained in:
Hugo Lextrait 2023-04-17 11:43:18 +02:00
parent dae26fd7a0
commit f9ec6a47bd
76 changed files with 5644 additions and 5570 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored
View File

@ -31,5 +31,8 @@
"rust-client.rustupPath": "${env:HOME}/elrondsdk/vendor-rust/bin/rustup",
"rust-client.rlsPath": "${env:HOME}/elrondsdk/vendor-rust/bin/rls",
"rust-client.disableRustup": true,
"rust-client.autoStartRls": false
"rust-client.autoStartRls": false,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

15
package-lock.json generated
View File

@ -21,6 +21,7 @@
"eslint-config-next": "13.2.4",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.18",
"next": "13.2.4",
"prettier": "^2.8.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-select": "^5.7.2",
@ -3506,6 +3507,20 @@
"node": ">= 0.8.0"
}
},
"node_modules/prettier": {
"version": "2.8.7",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
"integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

6
package.json
View File

@ -6,7 +6,8 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"format": "prettier --write src"
},
"dependencies": {
"@emotion/react": "^11.10.6",
@ -22,6 +23,7 @@
"eslint-config-next": "13.2.4",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.18",
"next": "13.2.4",
"prettier": "^2.8.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-select": "^5.7.2",
@ -31,5 +33,3 @@
"typescript": "4.9.5"
}
}

4
src/front/Api/Auth/IdNot/index.ts
View File

@ -17,9 +17,7 @@ export default class Auth extends BaseApiService {
public async getIdnotJwt(autorizationCode: string | string[]): Promise<any> {
const variables = FrontendVariables.getInstance();
const baseBackUrl =
variables.BACK_API_PROTOCOL +
variables.BACK_API_HOST +
(variables.BACK_API_PORT ? ":" + variables.BACK_API_PORT : "");
variables.BACK_API_PROTOCOL + variables.BACK_API_HOST + (variables.BACK_API_PORT ? ":" + variables.BACK_API_PORT : "");
const url = new URL(`${baseBackUrl}/api/v1/idnot-user/${autorizationCode}`);
try {
return await this.postRequest<any>(url);

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

@ -12,9 +12,7 @@ export default abstract class BaseApiService {
BaseApiService.baseUrl ??=
FrontendVariables.getInstance().BACK_API_PROTOCOL +
FrontendVariables.getInstance().BACK_API_HOST +
(FrontendVariables.getInstance().BACK_API_PORT
? ":" + FrontendVariables.getInstance().BACK_API_PORT
: "") +
(FrontendVariables.getInstance().BACK_API_PORT ? ":" + FrontendVariables.getInstance().BACK_API_PORT : "") +
FrontendVariables.getInstance().BACK_API_ROOT_URL +
FrontendVariables.getInstance().BACK_API_VERSION;
}
@ -45,24 +43,18 @@ export default abstract class BaseApiService {
return this.sendRequest<T>(request);
}
protected async postRequest<T>(
url: URL,
body: { [key: string]: unknown } = {}
) {
protected async postRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
return this.sendRequest<T>(
async () =>
await fetch(url, {
method: "POST",
headers: this.buildHeaders(ContentType.JSON),
body: this.buildBody(body),
})
}),
);
}
protected async putRequest<T>(
url: URL,
body: { [key: string]: unknown } = {}
) {
protected async putRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
const request = async () =>
await fetch(url, {
method: "PUT",
@ -73,10 +65,7 @@ export default abstract class BaseApiService {
return this.sendRequest<T>(request);
}
protected async patchRequest<T>(
url: URL,
body: { [key: string]: unknown } = {}
) {
protected async patchRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
const request = async () =>
await fetch(url, {
method: "PATCH",
@ -87,10 +76,7 @@ export default abstract class BaseApiService {
return this.sendRequest<T>(request);
}
protected async deleteRequest<T>(
url: URL,
body: { [key: string]: unknown } = {}
) {
protected async deleteRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
const request = async () =>
await fetch(url, {
method: "DELETE",
@ -117,10 +103,7 @@ export default abstract class BaseApiService {
return this.processResponse<T>(response, request);
}
protected async processResponse<T>(
response: Response,
request: () => Promise<Response>
): Promise<T> {
protected async processResponse<T>(response: Response, request: () => Promise<Response>): Promise<T> {
let responseJson: any | null;
try {
responseJson = await response.json();

3
src/front/Api/LeCoffreApi/Notary/Users/Users.ts
View File

@ -31,8 +31,7 @@ export default class Users extends BaseNotary {
public async getAuthorizationCode(): Promise<any> {
try {
const url =
new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
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

4
src/front/Assets/docs/content.md
View File

@ -7,9 +7,7 @@ Then, add the tezoslink.net RPC endpoint to your prefered Tezos JS library.
> i.e with [Sotez](https://github.com/AndrewKishino/sotez) :
>
> ```js
> const sotez = new Sotez(
> "https://<NETWORK>.tezoslink.net/v1/<YOUR_PROJECT_ID>"
> );
> const sotez = new Sotez("https://<NETWORK>.tezoslink.net/v1/<YOUR_PROJECT_ID>");
> ```
## Networks

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

@ -31,7 +31,7 @@ export default function Button(props: IProps) {
onClick,
children,
icon,
iconStyle
iconStyle,
} = props;
const attributes = { ...props, variant, disabled, type, isloading, fullwidth };

10
src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
View File

@ -6,20 +6,18 @@
display: flex;
justify-content: space-between;
align-items: center;
&.PENDING{
&.PENDING {
border-color: $orange-soft;
}
&.VALIDATED{
&.VALIDATED {
border-color: $green-soft;
}
.valid-radius{
.valid-radius {
background-color: $green-flash;
padding: 6px;
border-radius: 20px;
}
.trash{
.trash {
cursor: pointer;
}
}

19
src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
View File

@ -13,8 +13,7 @@ type IProps = {
uid: Document["uid"];
document_type: Document["document_type"];
document_status: Document["document_status"];
}
};
openDeletionModal?: (uid: Document["uid"]) => void;
};
type IState = {};
@ -25,30 +24,34 @@ export default class DocumentNotary extends React.Component<IProps, IState> {
this.onOpenDeletionModal = this.onOpenDeletionModal.bind(this);
}
public override render(): JSX.Element {
return <div className={classNames(classes["root"], classes[this.props.document.document_status])}>
return (
<div className={classNames(classes["root"], classes[this.props.document.document_status])}>
<div>
<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
<Typography typo={ITypo.CAPTION_14}>Aucun document déposé</Typography>
</div>
{this.renderIcon()}
</div>;
</div>
);
}
private renderIcon(): JSX.Element {
switch (this.props.document.document_status) {
case "VALIDATED":
return <div className={classes["valid-radius"]}>
return (
<div className={classes["valid-radius"]}>
<Image src={ValidIcon} alt="valid icon" />
</div>
);
case "PENDING":
return <WarningBadge />
return <WarningBadge />;
default:
return <Image src={TrashIcon} alt="trash icon" className={classes["trash"]} onClick={this.onOpenDeletionModal}/>;
return <Image src={TrashIcon} alt="trash icon" className={classes["trash"]} onClick={this.onOpenDeletionModal} />;
}
}
private onOpenDeletionModal(): void {
if(!this.props.openDeletionModal) return;
if (!this.props.openDeletionModal) return;
this.props.openDeletionModal(this.props.document.uid);
}
}

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

@ -9,23 +9,21 @@
justify-content: space-between;
.content {
display:grid;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 32px;
@media (max-width: $screen-l) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: $screen-s) {
grid-template-columns: 1fr;
}
&.isSignleDescription {
grid-template-columns: 1fr;
}
}
.edit-icon{
.edit-icon {
margin-left: 48px;
}
}

12
src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
View File

@ -14,14 +14,15 @@ type IProps = {
export default function FolderBoxInformation(props: IProps) {
const { isDescription = false } = props;
return <div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
return (
<div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
<div className={classes["content"]}>
{isDescription ?
{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"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
@ -40,10 +41,11 @@ export default function FolderBoxInformation(props: IProps) {
<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
</div>
</>
}
)}
</div>
<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
</div>;
</div>
);
}
function formatDate(date: Date | null): string {

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

@ -9,7 +9,7 @@
border: 1px solid $grey-medium;
cursor: pointer;
&:hover{
&:hover {
background-color: $grey-medium;
}
@ -18,7 +18,7 @@
justify-content: space-between;
align-items: center;
.warning{
.warning {
margin-left: 32px;
}
}

14
src/front/Components/DesignSystem/FolderContainer/index.tsx
View File

@ -9,7 +9,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar
type IProps = {
folder: IDashBoardFolder;
onSelectedFolder?: (folder: IDashBoardFolder) => void;
}
};
type IState = {};
export default class FolderContainer extends React.Component<IProps, IState> {
@ -19,13 +19,19 @@ export default class FolderContainer extends React.Component<IProps, IState> {
}
public override render(): JSX.Element {
return <div className={classes["root"]} onClick={this.onSelectedFolder}>
return (
<div className={classes["root"]} onClick={this.onSelectedFolder}>
<div className={classes["left-side"]}>
<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
{this.countPendingDocuments() > 0 && <div className={classes["warning"]}><WarningBadge /></div>}
{this.countPendingDocuments() > 0 && (
<div className={classes["warning"]}>
<WarningBadge />
</div>
)}
</div>
<Image alt="chevron" src={ChevronIcon} />
</div>;
</div>
);
}
private countPendingDocuments(): number {

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

@ -14,14 +14,19 @@ type IState = {};
export default class FolderList extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}>
return (
<div className={classes["root"]}>
{this.props.folders.map((folder) => {
return <div onClick={this.props.onCloseLeftSide} key={folder.uid}>
return (
<div onClick={this.props.onCloseLeftSide} key={folder.uid}>
<Link href={"/dossier/".concat(folder.uid)}>
<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
</Link>
</div>
})};
</div>;
);
})}
;
</div>
);
}
}

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

@ -24,22 +24,27 @@ export default class FolderListContainer extends React.Component<IProps, IState>
}
public override render(): JSX.Element {
return <div className={classes["root"]}>
return (
<div className={classes["root"]}>
<div>
<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} onCloseLeftSide={this.props.onCloseLeftSide}/>
<FolderList
folders={this.state.filteredFolders}
onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder}
onCloseLeftSide={this.props.onCloseLeftSide}
/>
</div>
<div>
<Button fullwidth={"true"}>Créer un dossier</Button>
</div>
</div>;
</div>
);
}
private filterFolders(folders: IDashBoardFolder[]): IDashBoardFolder[] {
this.setState({ filteredFolders: folders })
this.setState({ filteredFolders: folders });
return folders;
}
}

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

@ -2,11 +2,11 @@
.root {
position: relative;
textarea{
textarea {
resize: none;
height: auto;
box-sizing: border-box;
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-size: 18px;

6
src/front/Components/DesignSystem/Header/Notifications/index.tsx
View File

@ -17,7 +17,7 @@ type IState = {
};
export default class Notifications extends React.Component<IProps, IState> {
private removeOnToastChange: () => void = () => { };
private removeOnToastChange: () => void = () => {};
constructor(props: IProps) {
super(props);
@ -38,7 +38,9 @@ export default class Notifications extends React.Component<IProps, IState> {
)}
</div>
{this.props.isModalOpen && <NotificationModal isOpen={this.props.isModalOpen} closeModal={this.props.closeNotificationModal} />}
{this.props.isModalOpen && (
<NotificationModal isOpen={this.props.isModalOpen} closeModal={this.props.closeNotificationModal} />
)}
</div>
);
}

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

@ -9,8 +9,7 @@ type IProps = {
openProfileModal: () => void;
closeProfileModal: () => void;
};
type IState = {
};
type IState = {};
export default class Profile extends React.Component<IProps, IState> {
constructor(props: IProps) {

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

@ -26,7 +26,7 @@ type IState = {
};
export default class Header extends React.Component<IProps, IState> {
private onWindowResize = () => { };
private onWindowResize = () => {};
private headerBreakpoint = 1300;
constructor(props: IProps) {
@ -53,31 +53,40 @@ export default class Header extends React.Component<IProps, IState> {
<Image src={LogoIcon} alt="logo" className={classes["logo"]} />
</Link>
</div>
{this.props.isUserConnected &&
{this.props.isUserConnected && (
<>
<Navigation />
<div className={classes["right-section"]}>
<div className={classes["notification-section"]}>
<Notifications isModalOpen={this.state.isNotificationMenuOpen} openNotificationModal={this.openNotificationMenu} closeNotificationModal={this.closeNotificationMenu} />
<Notifications
isModalOpen={this.state.isNotificationMenuOpen}
openNotificationModal={this.openNotificationMenu}
closeNotificationModal={this.closeNotificationMenu}
/>
</div>
<div className={classes["profile-section"]}>
<Profile isModalOpen={this.state.isProfileMenuOpen} closeProfileModal={this.closeProfileMenu} openProfileModal={this.openProfileMenu} />
<Profile
isModalOpen={this.state.isProfileMenuOpen}
closeProfileModal={this.closeProfileMenu}
openProfileModal={this.openProfileMenu}
/>
</div>
<div className={classes["burger-menu"]}>
<BurgerMenu isModalOpen={this.state.isBurgerMenuOpen} closeBurgerMenu={this.closeBurgerMenu} openBurgerMenu={this.openBurgerMenu} />
<BurgerMenu
isModalOpen={this.state.isBurgerMenuOpen}
closeBurgerMenu={this.closeBurgerMenu}
openBurgerMenu={this.openBurgerMenu}
/>
</div>
</div>
</>
}
)}
</div>
);
}
public override componentDidMount() {
this.onWindowResize = WindowStore.getInstance().onResize((window) =>
this.onResize(window)
);
this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
}
public override componentWillUnmount() {

9
src/front/Components/DesignSystem/InformationBox/index.tsx
View File

@ -9,12 +9,12 @@ type IState = {};
type IFolderInformation = {
label: string;
value: string;
}
};
export default class InformationBox extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}>
return (
<div className={classes["root"]}>
{/* {this.props.informations.map((information, key) => {
const output = <div className={classes["information"] } key={key}>
<span className={classes["label"]}>{information.label}</span>
@ -22,6 +22,7 @@ export default class InformationBox extends React.Component<IProps, IState> {
</div>;
return output;
})}; */}
</div>;
</div>
);
}
}

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

@ -19,6 +19,5 @@ export default class LogOutButton extends React.Component<IProps, IState> {
);
}
private disconnect() {
}
private disconnect() {}
}

4
src/front/Components/DesignSystem/Modal/Alert/index.tsx
View File

@ -13,14 +13,14 @@ type IState = {
export default class Alert extends React.Component<IProps, IState> {
static defaultProps = {
closeText: "Ok",
...Modal.defaultProps
...Modal.defaultProps,
};
constructor(props: IProps) {
super(props);
this.state = {
isOpen: this.props.isOpen ?? true,
}
};
this.onClose = this.onClose.bind(this);
}

6
src/front/Components/DesignSystem/Modal/Confirm/index.tsx
View File

@ -19,7 +19,7 @@ export default class Confirm extends React.Component<IProps, IState> {
cancelText: "Cancel",
confirmText: "Confirm",
isConfirmButtonDisabled: false,
...Modal.defaultProps
...Modal.defaultProps,
};
public override render(): JSX.Element | null {
@ -30,8 +30,7 @@ export default class Confirm extends React.Component<IProps, IState> {
onClose={this.props.onClose}
header={this.props.header}
footer={this.footer()}
animationDelay={this.props.animationDelay}
>
animationDelay={this.props.animationDelay}>
{this.props.children}
</Modal>
);
@ -40,7 +39,6 @@ export default class Confirm extends React.Component<IProps, IState> {
private footer(): JSX.Element {
return (
<div className={classes["buttons-container"]}>
{this.props.showCancelButton && (
<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
{this.props.cancelText}

24
src/front/Components/DesignSystem/Modal/index.tsx
View File

@ -28,7 +28,7 @@ type IState = {
export default class Modal extends React.Component<IProps, IState> {
static defaultProps = {
animationDelay: 250
animationDelay: 250,
};
public rootRefElement = React.createRef<HTMLDivElement>();
constructor(props: IProps) {
@ -36,19 +36,23 @@ export default class Modal extends React.Component<IProps, IState> {
this.close = this.close.bind(this);
this.state = {
willClose: false
willClose: false,
};
}
public override render(): JSX.Element | null {
if (!this.props.isOpen) return null;
const onClick = (this.props.hasContainerClosable && this.close) || (() => { });
const onClick = (this.props.hasContainerClosable && this.close) || (() => {});
return (
<div ref={this.rootRefElement} className={classes["root"]} data-side-background={this.props.withSideBackground} data-will-close={this.state.willClose.toString()}>
<div
ref={this.rootRefElement}
className={classes["root"]}
data-side-background={this.props.withSideBackground}
data-will-close={this.state.willClose.toString()}>
<div className={classes["background"]} onClick={this.close} />
<div
className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
onClick={onClick} >
onClick={onClick}>
{this.props.closeBtn && (
<div className={classes["cross"]}>
<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
@ -73,12 +77,12 @@ export default class Modal extends React.Component<IProps, IState> {
protected close() {
if (this.state.willClose) return;
this.setState({ willClose: true })
this.setState({ willClose: true });
window.setTimeout(() => {
this.setState({
willClose: false
})
this.props.onClose()
}, this.props.animationDelay)
willClose: false,
});
this.props.onClose();
}, this.props.animationDelay);
}
}

5
src/front/Components/DesignSystem/MultiSelect/classes.module.scss
View File

@ -11,9 +11,8 @@
border: 1px solid $grey-medium;
background-color: transparent;
&.active{
&.active {
padding: 16px 24px;
}
.label {
font-family: var(--font-primary);
@ -32,7 +31,7 @@
border: none;
width: 100%;
>div {
> div {
width: 100%;
}
}

20
src/front/Components/DesignSystem/MultiSelect/index.tsx
View File

@ -7,7 +7,6 @@ import { IOption } from "../Select";
import Typography, { ITypo } from "../Typography";
import classNames from "classnames";
type IProps = {
options: IOption[];
label?: string | JSX.Element;
@ -26,13 +25,13 @@ type IState = {
export default class MultiSelect extends React.Component<IProps, IState> {
public static defaultProps: Partial<IProps> = {
placeholder: "Sélectionner une option...",
}
};
constructor(props: IProps) {
super(props);
this.state = {
isSelectedOption: this.props.defaultValue ? true : false
}
isSelectedOption: this.props.defaultValue ? true : false,
};
this.onChange = this.onChange.bind(this);
this.onEmptyResearch = this.onEmptyResearch.bind(this);
}
@ -41,13 +40,13 @@ export default class MultiSelect extends React.Component<IProps, IState> {
<div className={classes["root"]}>
<div className={classNames(classes["label-container"], this.state.isSelectedOption && classes["active"])}>
{this.props.label && <div className={classes["label"]}>{this.props.label}</div>}
{this.state.isSelectedOption &&
{this.state.isSelectedOption && (
<>
< Typography typo={ITypo.NAV_INPUT_16}>
<Typography typo={ITypo.NAV_INPUT_16}>
<div className={classes["is-active-placeholder"]}>{this.props.placeholder}</div>
</Typography>
</>
}
)}
<div className={classes["input-container"]}>
<ReactSelect
placeholder={this.props.placeholder}
@ -63,17 +62,16 @@ export default class MultiSelect extends React.Component<IProps, IState> {
/>
</div>
</div>
</div >
</div>
);
}
private onChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
this.props.onChange && this.props.onChange(newValue, actionMeta);
this.setState({ isSelectedOption: newValue.length > 0 });
}
private onEmptyResearch(){
return "Aucune option correspondante"
private onEmptyResearch() {
return "Aucune option correspondante";
}
}

8
src/front/Components/DesignSystem/MultiSelect/styles.tsx
View File

@ -31,7 +31,7 @@ export const styles = {
fontSize: "16px",
lineHeight: "22px",
color: "#939393",
letter: "0.5 px"
letter: "0.5 px",
}),
multiValue: (provided: any) => ({
...provided,
@ -65,13 +65,12 @@ export const styles = {
}),
indicatorSeparator: () => ({
display: "none",
}),
menu: (provided: any) => ({
...provided,
position: "static",
border: "0",
boxShadow: "none"
boxShadow: "none",
}),
menuList: (provided: any) => ({
...provided,
@ -87,7 +86,7 @@ export const styles = {
">svg": {
width: "16px",
height: "16px",
}
},
}),
indicatorsContainer: (provided: any) => ({
...provided,
@ -99,4 +98,3 @@ export const styles = {
fontSize: "16px",
}),
};

5
src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx
View File

@ -6,12 +6,11 @@ type IProps = {
percentage: number;
};
export default class ProgressBar extends React.Component<IProps> {
public override render(): JSX.Element {
const quantity = (this.props.percentage.toFixed(2)).toString().concat("%")
const quantity = this.props.percentage.toFixed(2).toString().concat("%");
return (
<div className={classes["root"]}>
<div className={classes["progress"]} style={{ width: quantity }} >
<div className={classes["progress"]} style={{ width: quantity }}>
<Typography typo={ITypo.P_16}>
<div className={classes["percentage"]}>{quantity}</div>
</Typography>

4
src/front/Components/DesignSystem/QuantityProgressBar/index.tsx
View File

@ -11,7 +11,9 @@ type IProps = {
export default class QuantityProgressBar extends React.Component<IProps> {
public override render(): JSX.Element {
let numerator: number = this.props.currentNumber;
if (this.props.currentNumber > this.props.total) { numerator = this.props.total }
if (this.props.currentNumber > this.props.total) {
numerator = this.props.total;
}
const percentage = (numerator / this.props.total) * 100;
return (

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

@ -21,7 +21,7 @@
margin-left: 8px;
padding: 24px 0;
width: 100%;
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-size: 18px;

19
src/front/Components/DesignSystem/SearchBar/index.tsx
View File

@ -13,7 +13,6 @@ type IState = {
hasValue: boolean;
};
export default class SearchBar extends React.Component<IProps, IState> {
public constructor(props: IProps) {
super(props);
@ -24,15 +23,21 @@ export default class SearchBar extends React.Component<IProps, IState> {
this.onChange = this.onChange.bind(this);
}
public override render(): JSX.Element {
return <div className={classes["root"]}>
return (
<div className={classes["root"]}>
<Image src={LoopIcon} alt="Loop icon" />
{!this.state.hasValue && <Typography typo={ITypo.P_ERR_18}><div className={classes["fake-placeholder"]}>Select</div></Typography>}
{!this.state.hasValue && (
<Typography typo={ITypo.P_ERR_18}>
<div className={classes["fake-placeholder"]}>Select</div>
</Typography>
)}
<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
</div>;
</div>
);
}
private onChange(event: React.ChangeEvent<HTMLInputElement>) {
const hasValue = event.target.value.length > 0
const hasValue = event.target.value.length > 0;
this.doesInputHaveValue(hasValue);
if (!this.props.onChange) return;
this.props.onChange(this.filterFolders(event));
@ -43,7 +48,9 @@ export default class SearchBar extends React.Component<IProps, IState> {
}
private filterFolders(event: React.ChangeEvent<HTMLInputElement>) {
const filteredFolders: IDashBoardFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value));
const filteredFolders: IDashBoardFolder[] = this.props.folders.filter((folder) =>
folder.folder_number.includes(event.target.value),
);
return filteredFolders;
}
}

6
src/front/Components/DesignSystem/Select/classes.module.scss
View File

@ -21,7 +21,7 @@
border-radius: 8px 0 0 8px;
}
.container-input chevron-icon{
.container-input chevron-icon {
display: flex;
align-items: center;
@ -113,12 +113,12 @@
align-items: center;
margin-right: 11px;
>svg {
> svg {
height: 20px;
margin-right: 11px;
}
>img {
> img {
height: 20px;
width: 20px;
}

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

@ -31,7 +31,7 @@ type IState = {
export default class Select extends React.Component<IProps, IState> {
private contentRef = React.createRef<HTMLUListElement>();
private rootRef = React.createRef<HTMLDivElement>();
private removeOnresize = () => { };
private removeOnresize = () => {};
constructor(props: IProps) {
super(props);
@ -67,7 +67,6 @@ export default class Select extends React.Component<IProps, IState> {
</Typography>
</div>
</>
</div>
<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
</label>
@ -82,14 +81,11 @@ export default class Select extends React.Component<IProps, IState> {
{this.props.options.map((option, index) => (
<li key={`${index}-${option.value}`} className={classes["container-li"]} onClick={(e) => this.onSelect(option, e)}>
<div className={classes["token-icon"]}>{option.icon}</div>
<Typography typo={ITypo.P_18}>
{option.label}
</Typography>
<Typography typo={ITypo.P_18}>{option.label}</Typography>
</li>
))}
</ul>
{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
</div>
);

15
src/front/Components/DesignSystem/ToolTip/index.tsx
View File

@ -16,18 +16,19 @@ type IState = {
event: React.MouseEvent<HTMLElement> | null;
};
const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
<TooltipMUI {...props} classes={{ popper: className }} />
))(({ theme }) => ({
const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: "var(--colormerdum)",
color: "var(--colormerdum)",
//boxShadow: theme.shadows[1],
fontSize: 11,
},[`& .${tooltipClasses.arrow}`]: {
},
[`& .${tooltipClasses.arrow}`]: {
// color: theme.palette.common.black,
},
}));
}),
);
export default class Tooltip extends React.Component<IProps, IState> {
static defaultProps: Partial<IProps> = {
@ -41,9 +42,7 @@ export default class Tooltip extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<LightTooltip title={this.props.text} placement="top" arrow>
<span
className={this.props.className}
style={!this.props.isNotFlex ? { display: "flex" } : {}}>
<span className={this.props.className} style={!this.props.isNotFlex ? { display: "flex" } : {}}>
<Image src={ToolTipIcon} alt="toolTip icon" />
</span>
</LightTooltip>

4
src/front/Components/DesignSystem/UserFolder/DocumentList/classes.module.scss
View File

@ -2,10 +2,10 @@
.root {
width: 100%;
.title{
.title {
margin-bottom: 8px;
}
.content{
.content {
display: grid;
gap: 16px;
margin-top: 32px;

20
src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
View File

@ -7,28 +7,34 @@ import DocumentNotary from "../../Document/DocumentNotary";
type IProps = {
title: string;
subtitle?: string;
documents: {
documents:
| {
uid: Document["uid"];
document_type: Document["document_type"];
document_status: Document["document_status"];
}[] | null;
}[]
| null;
openDeletionModal: (uid: Document["uid"]) => void;
};
type IState = {};
export default class DocumentList extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}>
return (
<div className={classes["root"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
</div>
<Typography typo={ITypo.P_16}>{this.props.subtitle}</Typography>
<div className={classes["content"]}>
{this.props.documents && this.props.documents.map((document) => {
return <DocumentNotary document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal}/>
{this.props.documents &&
this.props.documents.map((document) => {
return (
<DocumentNotary document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal} />
);
})}
</div>
</div>;
</div>
);
}
}

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

@ -17,7 +17,6 @@
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
.icons {

29
src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
View File

@ -8,18 +8,19 @@ import WarningBadge from "../../WarningBadge";
type IProps = {
contact: {
first_name: Contact["first_name"],
last_name: Contact["last_name"],
phone_number: Contact["phone_number"],
cell_phone_number: Contact["cell_phone_number"],
email: Contact["email"],
}
first_name: Contact["first_name"];
last_name: Contact["last_name"];
phone_number: Contact["phone_number"];
cell_phone_number: Contact["cell_phone_number"];
email: Contact["email"];
};
};
type IState = {};
export default class UserFolderHeader extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}>
return (
<div className={classes["root"]}>
<div className={classes["content"]}>
<div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
@ -33,7 +34,10 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
<div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
<Typography typo={ITypo.P_18}>{this.formatPhoneNumber(this.props.contact.phone_number) ?? this.formatPhoneNumber(this.props.contact.cell_phone_number)}</Typography>
<Typography typo={ITypo.P_18}>
{this.formatPhoneNumber(this.props.contact.phone_number) ??
this.formatPhoneNumber(this.props.contact.cell_phone_number)}
</Typography>
</div>
<div className={classes["container"]}>
@ -43,15 +47,16 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
</div>
<div className={classes["icons"]}>
<WarningBadge />
<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick}/>
<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
</div>
</div>;
</div>
);
}
private formatPhoneNumber(phoneNumber: string): string {
if (!phoneNumber) return "";
const output = phoneNumber.split('').map((char, index) => {
if(index%2) return char + " ";
const output = phoneNumber.split("").map((char, index) => {
if (index % 2) return char + " ";
return char;
});
return output.join("");

77
src/front/Components/DesignSystem/UserFolder/index.tsx
View File

@ -8,12 +8,12 @@ import QuantityProgressBar from "../QuantityProgressBar";
import classNames from "classnames";
import DocumentList from "./DocumentList";
import Button, { EButtonVariant } from "../Button";
import PlusIcon from "@Assets/Icons/plus.svg"
import PlusIcon from "@Assets/Icons/plus.svg";
import Confirm from "../Modal/Confirm";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
type IProps = {
customer: Customer
customer: Customer;
animationDelay?: number;
folder: IDashBoardFolder;
};
@ -25,7 +25,7 @@ type IState = {
export default class UserFolder extends React.Component<IProps, IState> {
static defaultProps = {
animationDelay: 300
animationDelay: 300,
};
public rootRefElement = React.createRef<HTMLDivElement>();
@ -34,21 +34,20 @@ export default class UserFolder extends React.Component<IProps, IState> {
this.state = {
isOpen: false,
isOpenDeletionModal: false,
willClose: false
willClose: false,
};
this.toggleOpen = this.toggleOpen.bind(this);
this.closeDeletionModal = this.closeDeletionModal.bind(this);
this.openDeletionModal = this.openDeletionModal.bind(this);
this.openComponent = this.openComponent.bind(this);
this.closeComponent = this.closeComponent.bind(this);
}
public override render(): JSX.Element {
const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
return <div className={classes["root"]}>
return (
<div className={classes["root"]}>
<Confirm
isOpen={this.state.isOpenDeletionModal}
onClose={this.closeDeletionModal}
@ -60,25 +59,45 @@ export default class UserFolder extends React.Component<IProps, IState> {
</Confirm>
<div className={classes["header"]} onClick={this.toggleOpen}>
<UserFolderHeader contact={this.props.
customer.contact} />
<Image src={ChevronIcon} alt="chevron open close" className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])} onClick={this.toggleOpen} />
<UserFolderHeader contact={this.props.customer.contact} />
<Image
src={ChevronIcon}
alt="chevron open close"
className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])}
onClick={this.toggleOpen}
/>
</div>
{this.state.isOpen &&
{this.state.isOpen && (
<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={this.calculateDocumentsPercentageProgress()} />
<QuantityProgressBar
title="Complétion du dossier"
total={100}
currentNumber={this.calculateDocumentsPercentageProgress()}
/>
<div className={classes["content"]}>
<DocumentList documents={documentsAsked} title="Documents demandés" openDeletionModal={this.openDeletionModal} />
<DocumentList documents={otherDocuments} title="Documents à valider / validés" subtitle="Vous avez des documents à valider." openDeletionModal={this.openDeletionModal} />
<DocumentList
documents={documentsAsked}
title="Documents demandés"
openDeletionModal={this.openDeletionModal}
/>
<DocumentList
documents={otherDocuments}
title="Documents à valider / validés"
subtitle="Vous avez des documents à valider."
openDeletionModal={this.openDeletionModal}
/>
</div>
<div className={classes["button-container"]}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>Demander un autre document </Button>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
Demander un autre document{" "}
</Button>
<Button>Envoyer un mail de demande de documents</Button>
</div>
</div>
}
</div>;
)}
</div>
);
}
public override componentDidUpdate(): void {
@ -94,10 +113,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
private getDocumentsByStatus(status: string): Document[] | null {
if (!this.props.customer.documents) return null;
return this.props.customer.documents.filter((document) => document.document_status === status && document.folder.uid === this.props.folder.uid);
return this.props.customer.documents.filter(
(document) => document.document_status === status && document.folder.uid === this.props.folder.uid,
);
}
// Get all documents Validated, pending
private getValidatedAndPendindDocuments(): Document[] | null {
const pendingDocuments = this.getDocumentsByStatus("PENDING");
@ -117,40 +137,37 @@ export default class UserFolder extends React.Component<IProps, IState> {
private toggleOpen(): void {
if (this.state.isOpen) {
this.closeComponent();
}
else {
} else {
this.openComponent();
}
}
private openComponent(): void {
this.setState({
isOpen: true
isOpen: true,
});
}
private closeComponent(): void {
if (this.state.willClose) return;
this.setState({ willClose: true })
this.setState({ willClose: true });
window.setTimeout(() => {
this.setState({
isOpen: false,
willClose: false
willClose: false,
});
}, this.props.animationDelay)
}, this.props.animationDelay);
}
private openDeletionModal(uid: string): void {
// TODO: call API to delete document
this.setState({
isOpenDeletionModal: true
isOpenDeletionModal: true,
});
}
private closeDeletionModal(): void {
this.setState({
isOpenDeletionModal: false
})
isOpenDeletionModal: false,
});
}
}

6
src/front/Components/DesignSystem/WarningBadge/index.tsx
View File

@ -8,8 +8,10 @@ type IState = {};
export default class WarningBadge extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}>
return (
<div className={classes["root"]}>
<Image src={WarningIcon} alt="warning icon" />
</div>;
</div>
);
}
}

1
src/front/Components/Elements/InputField/index.tsx
View File

@ -42,7 +42,6 @@ export default class InputField extends React.Component<IProps> {
{this.props.inputStatus === "success" && <Image alt="success icon" src={SuccessIcon} />}
{this.props.inputStatus === "error" && <Image alt="error icon" src={ErrorIcon} />}
</div>
</div>
{this.props.errorMsg && <div className={classes["errorMsg"]}>{this.props.errorMsg}</div>}
</>

4
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
View File

@ -27,9 +27,7 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
<Header isUserConnected={false} />
<div className={classes["content"]}>
<div className={classes["sides"]}>
<div className={classes["side-content"]}>
{this.props.children}
</div>
<div className={classes["side-content"]}>{this.props.children}</div>
</div>
<div className={classNames(classes["sides"], classes["image-container"])}>
<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />

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

@ -26,7 +26,6 @@
min-width: 389px;
}
}
}
.closable-left-side {
@ -44,7 +43,6 @@
display: none;
}
.chevron-icon {
margin-top: 21px;
transform: rotate(180deg);

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

@ -1,15 +1,15 @@
import 'reflect-metadata';
import "reflect-metadata";
import React, { ReactNode } from "react";
import classes from "./classes.module.scss";
import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
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 { 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';
import Image from "next/image";
import classNames from "classnames";
import WindowStore from "@Front/Stores/WindowStore";
type IProps = {
title: string;
children?: ReactNode;
@ -25,14 +25,14 @@ export type IDashBoardFolder = {
uid: OfficeFolder["uid"];
name: OfficeFolder["name"];
folder_number: OfficeFolder["folder_number"];
documents?: OfficeFolder["documents"]
documents?: OfficeFolder["documents"];
description: OfficeFolder["description"];
deed: OfficeFolder["deed"];
created_at: OfficeFolder["created_at"];
office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
};
export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
private onWindowResize = () => { };
private onWindowResize = () => {};
public static defaultProps = {
scrollTop: 0,
};
@ -49,16 +49,19 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
}
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<Header isUserConnected={true} />
<div className={classes["content"]}>
<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
<FolderListContainer folders={this.state.folders} onSelectedFolder={this.props.onSelectedFolder} onCloseLeftSide={this.onCloseLeftSide} />
<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} />
<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>
@ -68,9 +71,7 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
}
public override componentDidMount(): void {
this.onWindowResize = WindowStore.getInstance().onResize((window) =>
this.onResize(window)
);
this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
}
public override componentWillUnmount() {
this.onWindowResize();

2
src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
View File

@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
import classes from "./classes.module.scss";
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import 'reflect-metadata';
import "reflect-metadata";
type IProps = {
title: string;

14
src/front/Components/Layouts/AddClientToFolder/classes.module.scss
View File

@ -4,18 +4,22 @@
display: flex;
flex-direction: column;
min-height: 100%;
align-items: flex-start;
.radiobox-container{
.radiobox-container {
margin: 32px 0;
}
.button-container{
.button-container {
margin-top: 24px;
:first-child{
:first-child {
margin-right: 32px;
}
}
.new-client{
>:not(:last-child){
.new-client {
> :not(:last-child) {
margin-bottom: 24px;
}
}

27
src/front/Components/Layouts/AddClientToFolder/index.tsx
View File

@ -9,6 +9,7 @@ import { ActionMeta, MultiValue } from "react-select";
import { IOption } from "@Front/Components/DesignSystem/Select";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Form from "@Front/Components/DesignSystem/Form";
import ChevonIcon from "@Assets/icons/chevron.svg";
type IProps = {};
type IState = {
@ -17,7 +18,7 @@ type IState = {
isNewClientSelected: boolean;
hasNewClientSelected: boolean;
};
export default class AddClientToFolder extends BasePage<IProps, IState>{
export default class AddClientToFolder extends BasePage<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
@ -41,10 +42,16 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
return (
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
<div className={classes["root"]}>
<Button icon={ChevonIcon} variant={EButtonVariant.LINE}>
Retour
</Button>
<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
<Form>
<div className={classes["radiobox-container"]}>
<RadioBox name="client" onChange={this.onExistingClientSelected} defaultChecked={this.state.isExistingClientSelected}>
<RadioBox
name="client"
onChange={this.onExistingClientSelected}
defaultChecked={this.state.isExistingClientSelected}>
<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
</RadioBox>
<RadioBox name="client" onChange={this.onNewClientSelected} defaultChecked={this.state.isNewClientSelected}>
@ -52,17 +59,20 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
</RadioBox>
</div>
{this.state.isExistingClientSelected && <div className={classes["existing-client"]}>
{this.state.isExistingClientSelected && (
<div className={classes["existing-client"]}>
<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
<div className={classes["button-container"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">Associer au dossier</Button>
<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">
Associer au dossier
</Button>
</div>
</div>
}
)}
{this.state.isNewClientSelected && <div className={classes["new-client"]}>
{this.state.isNewClientSelected && (
<div className={classes["new-client"]}>
<InputField name="input field" fakeplaceholder="Nom" />
<InputField name="input field" fakeplaceholder="Prénom" />
<InputField name="input field" fakeplaceholder="E-mail" isEmail />
@ -71,7 +81,8 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
<Button type="submit">Associer au dossier</Button>
</div>
</div>}
</div>
)}
</Form>
</div>
</DefaultNotaryDashboard>

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

@ -12,7 +12,7 @@
display: inline-flex;
}
.folder-conatainer{
width: 389px ;
.folder-conatainer {
width: 389px;
}
}

3
src/front/Components/Layouts/DesignSystem/dummyData.ts
View File

@ -140,7 +140,7 @@ export const customer2: Customer = {
created_at: new Date(),
updated_at: new Date(),
status: ECustomerStatus.VALIDATED,
documents: [document, documentPending, documentDeposited, ],
documents: [document, documentPending, documentDeposited],
};
export const folderWithPendingDocument: OfficeFolder = {
@ -234,7 +234,6 @@ export const document2: Document = {
created_at: new Date(),
};
export const folders: OfficeFolder[] = [
folderWithPendingDocument,
folderWithPendingDocument1,

19
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -13,7 +13,7 @@ import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import "reflect-metadata";
import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData"
import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData";
import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
import Select, { IOption } from "@Front/Components/DesignSystem/Select";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
@ -28,7 +28,6 @@ type IState = {
type IProps = {};
export default class DesignSystem extends BasePage<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
@ -39,18 +38,15 @@ export default class DesignSystem extends BasePage<IProps, IState> {
this.onSelectedOption = this.onSelectedOption.bind(this);
}
public override render(): JSX.Element {
const selectOptions: IOption[] = [
{ value: "1", label: "Divorce" },
{ value: "2", label: "Succession" },
{ value: "3", label: "Vente immobilière" },
]
];
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>
@ -174,7 +170,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
</div>
</div>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.P_16}>Folder with document waiting for being validate</Typography>
<div className={classes["folder-conatainer"]}>
<FolderContainer folder={folderWithPendingDocument} />
@ -188,7 +183,12 @@ export default class DesignSystem extends BasePage<IProps, IState> {
</div>
<div className={classes["sub-section"]}>
<div className={classes["folder-conatainer"]}>
<Select options={selectOptions} onChange={this.onSelectedOption} placeholder={"Type d’acte"} selectedOption={this.state.selectedOption} />
<Select
options={selectOptions}
onChange={this.onSelectedOption}
placeholder={"Type d’acte"}
selectedOption={this.state.selectedOption}
/>
</div>
</div>
</div>
@ -236,7 +236,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Document SearchBar</Typography>
@ -254,8 +253,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
<FolderList folders={folders} />
</div>
</div>
</div>
</DefaultTemplate>
);

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

@ -65,7 +65,7 @@
}
}
}
.modal-title{
.modal-title {
margin-bottom: 24px;
}
}

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

@ -15,7 +15,7 @@ type IState = {
selectedFolder: IDashBoardFolder | null;
isArchivedModalOpen: boolean;
};
export default class Folder extends BasePage<IProps, IState>{
export default class Folder extends BasePage<IProps, IState> {
public constructor(props: IProps) {
super(props);
this.state = {
@ -73,7 +73,9 @@ export default class Folder extends BasePage<IProps, IState>{
<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>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
Veuillez sélectionner un dossier.
</Typography>
</div>
</div>
</div>

7
src/front/Components/Layouts/FolderInformation/ClientSection/classes.module.scss
View File

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

29
src/front/Components/Layouts/FolderInformation/ClientSection/index.tsx
View File

@ -14,29 +14,36 @@ type IState = {};
export default class ClientSection extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}>
{this.doesFolderHaveCustomer() ?
<div className={classes["client"]}>
{this.renderCustomerFolders()}
</div>
:
return (
<div className={classes["root"]}>
{this.doesFolderHaveCustomer() ? (
<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
) : (
<div className={classes["no-client"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.P_18}>Aucun client n’est associé au dossier.</Typography>
</div>
<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>Ajouter un client</Button>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
Ajouter un client
</Button>
</Link>
</div>}
</div>;
</div>
)}
</div>
);
}
private renderCustomerFolders() {
const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
if (!folderHasCustomer.customer) return null;
// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
return <div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}><UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} /></div>;
})
return (
<div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} />
</div>
);
});
return output ?? null;
}

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

@ -65,7 +65,7 @@
}
}
}
.modal-title{
.modal-title {
margin-bottom: 24px;
}
}

22
src/front/Components/Layouts/FolderInformation/index.tsx
View File

@ -18,7 +18,7 @@ type IState = {
selectedFolder: IDashBoardFolder | null;
isArchivedModalOpen: boolean;
};
class FolderInformationClass extends BasePage<IPropsClass, IState>{
class FolderInformationClass extends BasePage<IPropsClass, IState> {
public constructor(props: IPropsClass) {
super(props);
this.state = {
@ -35,13 +35,14 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
return (
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
<div className={classes["root"]}>
{this.state.selectedFolder
?
{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>
<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>Modifier les collaborateurs</Button>
<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
Modifier les collaborateurs
</Button>
</div>
<FolderBoxInformation folder={this.state.selectedFolder} />
<div className={classes["second-box"]}>
@ -56,7 +57,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
<div className={classes["button-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>Archiver le dossier</Button>
<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
Archiver le dossier
</Button>
<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
</div>
<Confirm
@ -72,13 +75,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
<InputField name="input field" fakeplaceholder="Description" textarea />
</Confirm>
</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>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
Veuillez sélectionner un dossier.
</Typography>
</div>
</div>}
</div>
)}
</div>
</DefaultNotaryDashboard>
);

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

@ -15,21 +15,13 @@ export default class LoginClass extends BasePage {
<div className={classes["root"]}>
<Image alt="coffre" src={CoffreIcon} />
<Typography typo={ITypo.H1}>
<div className={classes["title"]}>
Connexion espace professionnel
</div>
<div className={classes["title"]}>Connexion espace professionnel</div>
</Typography>
<Button onClick={this.redirectUserOnConnection}>
S’identifier avec ID.not
</Button>
<Button onClick={this.redirectUserOnConnection}>S’identifier avec ID.not</Button>
<Typography typo={ITypo.P_18}>
<div className={classes["forget-password"]}>
Vous n’arrivez pas à vous connecter ?
</div>
<div className={classes["forget-password"]}>Vous n’arrivez pas à vous connecter ?</div>
</Typography>
<Button variant={EButtonVariant.LINE}>
Contacter l’administrateur
</Button>
<Button variant={EButtonVariant.LINE}>Contacter l’administrateur</Button>
</div>
</DefaultDoubleSidePage>
);
@ -38,9 +30,7 @@ export default class LoginClass extends BasePage {
private redirectUserOnConnection() {
const variables = FrontendVariables.getInstance();
const baseFronturl =
variables.BACK_API_PROTOCOL +
variables.FRONT_APP_HOST +
(variables.FRONT_APP_PORT ? ":" + variables.FRONT_APP_PORT : "");
variables.BACK_API_PROTOCOL + variables.FRONT_APP_HOST + (variables.FRONT_APP_PORT ? ":" + variables.FRONT_APP_PORT : "");
const authorizeEndPoint = variables.IDNOT_AUTHORIZE_ENDPOINT;
const clientId = variables.IDNOT_CLIENT_ID;
const url = `${authorizeEndPoint}?client_id=${clientId}&redirect_uri=${baseFronturl}/authorized-client&scope=openid,profile,offline_access&response_type=code`;

6
src/front/Components/Layouts/LoginCallback/index.tsx
View File

@ -14,7 +14,7 @@ import Auth from "@Front/Api/Auth/IdNot";
import Folder from "../Folder";
import LoginClass from "../Login";
type IPropsClass = {};
type IPropsClass = {};
// type IStateClass = {};
@ -86,5 +86,5 @@ export default function LoginCallBack(props: IPropsClass) {
getIdNotJwt();
return <Folder {...props} />;
}
return <LoginClass {...props}/>
}
return <LoginClass {...props} />;
}

31
src/pages/_app.tsx
View File

@ -12,18 +12,30 @@ export type NextPageWithLayout<TProps = Record<string, unknown>, TInitialProps =
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
} & {
backApiProtocol: string,
backApiHost: string,
backApiPort: string,
backApiRootUrl: string,
backApiVersion: string,
frontAppHost: string,
frontAppPort: string,
backApiProtocol: string;
backApiHost: string;
backApiPort: string;
backApiRootUrl: string;
backApiVersion: string;
frontAppHost: string;
frontAppPort: string;
idNotAuthorizeEndpoint: string;
idNotClientId: string;
};
const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPort, backApiRootUrl, backApiVersion, frontAppHost, frontAppPort, idNotAuthorizeEndpoint, idNotClientId }: AppPropsWithLayout) => {
const MyApp = (({
Component,
pageProps,
backApiProtocol,
backApiHost,
backApiPort,
backApiRootUrl,
backApiVersion,
frontAppHost,
frontAppPort,
idNotAuthorizeEndpoint,
idNotClientId,
}: AppPropsWithLayout) => {
const getLayout = Component.getLayout ?? ((page) => <DefaultLayout children={page}></DefaultLayout>);
FrontendVariables.getInstance().BACK_API_PROTOCOL = backApiProtocol;
@ -36,7 +48,6 @@ const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPor
FrontendVariables.getInstance().IDNOT_AUTHORIZE_ENDPOINT = idNotAuthorizeEndpoint;
FrontendVariables.getInstance().IDNOT_CLIENT_ID = idNotClientId;
return getLayout(<Component {...pageProps} />);
}) as AppType;
@ -52,6 +63,6 @@ MyApp.getInitialProps = async () => {
idNotAuthorizeEndpoint: process.env["IDNOT_AUTHORIZE_ENDPOINT"],
idNotClientId: process.env["IDNOT_CLIENT_ID"],
};
}
};
export default MyApp;