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

🐛 Open only one customer at a time

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-04 13:56:11 +02:00
parent 7eeb866db0
commit 07cb7f47d3
2 changed files with 62 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,9 +20,11 @@ type IProps = {
animationDelay?: number;
folder: IDashBoardFolder;
isArchived?: boolean;
isOpened: boolean;
onOpen: (id: string) => void;
onClose: () => void;
};
type IState = {
isOpen: boolean;
isOpenDeletionModal: boolean;
willClose: boolean;
};
@ -37,7 +39,6 @@ export default class UserFolder extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
isOpen: false,
isOpenDeletionModal: false,
willClose: false,
};
@ -54,7 +55,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
.get()
.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "");
return (
<div className={classes["root"]}>
<div className={classes["root"]} data-opened={this.props.isOpened.toString()}>
<Confirm
isOpen={this.state.isOpenDeletionModal}
onClose={this.closeDeletionModal}
@ -74,12 +75,12 @@ export default class UserFolder extends React.Component<IProps, IState> {
<Image
src={ChevronIcon}
alt="chevron open close"
className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])}
className={classNames(classes["chevron-icon"], this.props.isOpened && classes["open"])}
onClick={this.toggleOpen}
/>
</div>
{this.state.isOpen && (
{this.props.isOpened && (
<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
<QuantityProgressBar
title="Complétion du dossier client"
@ -119,10 +120,19 @@ export default class UserFolder extends React.Component<IProps, IState> {
);
}
public override componentDidUpdate(): void {
public override componentDidUpdate(prevProps: IProps): void {
this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
if(prevProps.isOpened !== this.props.isOpened) {
if(this.props.isOpened) {
this.openComponent();
}else{
this.closeComponent();
}
}
}
private calculateDocumentsPercentageProgress(): number {
if (!this.props.customer.documents) return 0;
const totalDocuments: number = this.props.customer.documents.length;
@ -155,7 +165,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
// }
private toggleOpen(): void {
if (this.state.isOpen) {
if (this.props.isOpened) {
this.closeComponent();
} else {
this.openComponent();
@ -163,17 +173,15 @@ export default class UserFolder extends React.Component<IProps, IState> {
}
private openComponent(): void {
this.setState({
isOpen: true,
});
this.props.onOpen(this.props.folder.uid!);
}
private closeComponent(): void {
if (this.state.willClose) return;
this.setState({ willClose: true });
window.setTimeout(() => {
this.props.onClose();
this.setState({
isOpen: false,
willClose: false,
});
}, this.props.animationDelay);

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

@ -1,19 +1,32 @@
import React from "react";
import classes from "./classes.module.scss";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import PlusIcon from "@Assets/Icons/plus.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
import Link from "next/link";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import Link from "next/link";
import React from "react";
import classes from "./classes.module.scss";
type IProps = {
folder: IDashBoardFolder;
};
type IState = {};
type IState = {
openedCustomer: string;
};
export default class ClientSection extends React.Component<IProps, IState> {
public constructor(props: IProps) {
super(props);
this.state = {
openedCustomer: "",
};
this.selectUserFolder = this.selectUserFolder.bind(this);
this.closeUserFolder = this.closeUserFolder.bind(this);
}
public override render(): JSX.Element {
const navigatePath = Module.getInstance()
.get()
@ -48,14 +61,35 @@ export default class ClientSection extends React.Component<IProps, IState> {
}
private renderCustomerFolders() {
const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, index) => {
if (!folderHasCustomer.customer) return null;
// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
return <UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} />;
return (
<UserFolder
folder={this.props.folder}
customer={folderHasCustomer.customer}
key={this.props.folder.uid}
isOpened={this.state.openedCustomer === this.props.folder.uid}
onOpen={this.selectUserFolder}
onClose={this.closeUserFolder}
/>
);
});
return output ?? null;
}
private closeUserFolder() {
this.setState({
openedCustomer: "",
});
}
private selectUserFolder(index: string) {
this.setState({
openedCustomer: index,
});
}
private doesFolderHaveCustomer(): boolean {
if (!this.props.folder?.office_folder_has_customers) return false;
return this.props.folder?.office_folder_has_customers!.length > 0;