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

Can't remove/update clients in a folder, only add and hiding existing customers if none available (#35)

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-09 17:03:34 +02:00 committed by GitHub
commit 73c3010464
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import React from "react";
import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
@ -7,12 +8,17 @@ type IProps = {
children: React.ReactNode;
name: string;
toolTip?: string;
checked?: boolean;
defaultChecked?: boolean;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
value: string;
disabled: boolean;
};
export default class RadioBox extends React.Component<IProps> {
static defaultProps = {
disabled: false,
};
public override render(): JSX.Element {
return (
<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
@ -20,9 +26,11 @@ export default class RadioBox extends React.Component<IProps> {
<input
type="radio"
name={this.props.name}
checked={this.props.checked}
defaultChecked={this.props.defaultChecked}
onChange={this.props.onChange}
value={this.props.value}
disabled={this.props.disabled}
/>
{this.props.children}
{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}

72
src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
View File

@ -1,3 +1,7 @@
import "reflect-metadata";
import Customers from "@Front/Api/LeCoffreApi/SuperAdmin/Customers/Customers";
import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
@ -7,24 +11,26 @@ import { IOption } from "@Front/Components/DesignSystem/Select";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
import { Customer } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { NextRouter, useRouter } from "next/router";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import Link from "next/link";
import Module from "@Front/Config/Module";
import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
import Customers from "@Front/Api/LeCoffreApi/SuperAdmin/Customers/Customers";
import { Customer } from "le-coffre-resources/dist/Notary";
enum ESelectedOption {
EXISTING_CUSTOMER = "existing_customer",
NEW_CUSTOMER = "new_customer",
}
type IProps = {};
type IState = {
selectedFolder: IDashBoardFolder | null;
isExistingClientSelected: boolean;
isNewClientSelected: boolean;
availableCustomers: Customer[] | null;
selectedOption: ESelectedOption;
availableCustomers: Customer[];
selectedCustomers: readonly IOption[];
existingCustomers: IOption[];
};
type IPropsClass = IProps & {
@ -36,10 +42,10 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
super(props);
this.state = {
selectedFolder: null,
isExistingClientSelected: true,
isNewClientSelected: false,
selectedOption: ESelectedOption.EXISTING_CUSTOMER,
availableCustomers: [],
selectedCustomers: [],
existingCustomers: [],
};
this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
@ -61,24 +67,27 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
</div>
<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
<div className={classes["radiobox-container"]}>
{this.state.availableCustomers.length !== 0 && (
<RadioBox
name="client"
onChange={this.onExistingClientSelected}
defaultChecked={this.state.isExistingClientSelected}
checked={this.state.selectedOption === "existing_customer"}
value={"existing client"}>
<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
</RadioBox>
)}
<RadioBox
name="client"
onChange={this.onNewClientSelected}
defaultChecked={this.state.isNewClientSelected}
checked={this.state.selectedOption === "new_customer"}
value={"new client"}>
<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
</RadioBox>
</div>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
{this.state.isExistingClientSelected && (
{this.state.selectedOption === "existing_customer" && (
<div className={classes["existing-client"]}>
<MultiSelect
options={selectOptions}
@ -95,7 +104,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
</div>
)}
{this.state.isNewClientSelected && (
{this.state.selectedOption === "new_customer" && (
<div className={classes["new-client"]}>
<InputField name="last_name" fakeplaceholder="Nom" />
<InputField name="first_name" fakeplaceholder="Prénom" />
@ -118,9 +127,21 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
public override async componentDidMount() {
const query = {};
const availableCustomers = await Customers.getInstance().get(query);
let preSelectedCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid);
const selectedCustomers = preSelectedCustomers ?? [];
this.setState({ availableCustomers, selectedCustomers });
let preExistingCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid);
const existingCustomers = preExistingCustomers ?? [];
existingCustomers.forEach((customer) => {
const index = availableCustomers.findIndex((availableCustomer) => availableCustomer.uid === customer.value);
if (index !== -1) availableCustomers.splice(index, 1);
});
if (availableCustomers.length === 0) {
this.setState({
selectedOption: ESelectedOption.NEW_CUSTOMER,
});
}
this.setState({ availableCustomers, existingCustomers });
}
private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOption[] | undefined> {
@ -137,10 +158,10 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
},
},
};
let preSelectedCustomers: IOption[] = [];
let preExistingCustomers: IOption[] = [];
try {
const folder = await Folders.getInstance().getByUid(folderUid, query);
preSelectedCustomers = folder.office_folder_has_customers!.map((folderHasCustomer) => {
preExistingCustomers = folder.office_folder_has_customers!.map((folderHasCustomer) => {
return {
label: folderHasCustomer.customer.contact?.first_name + " " + folderHasCustomer.customer.contact?.last_name,
value: folderHasCustomer.customer.uid,
@ -150,7 +171,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
return;
}
return preSelectedCustomers;
return preExistingCustomers;
}
private getSelectedOptions(): IOption[] {
@ -173,11 +194,11 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
}
private onExistingClientSelected(): void {
this.setState({ isExistingClientSelected: true, isNewClientSelected: false });
this.setState({ selectedOption: ESelectedOption.EXISTING_CUSTOMER });
}
private onNewClientSelected(): void {
this.setState({ isExistingClientSelected: false, isNewClientSelected: true });
this.setState({ selectedOption: ESelectedOption.NEW_CUSTOMER });
}
private async onFormSubmit(
@ -188,13 +209,14 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
) {
values["civility"] = ECivility.MALE; // TODO: should maybe be deleted later or added to the form
let customersToLink: IPutFoldersParams["office_folder_has_customers"] = this.state.selectedCustomers.map((customer) => {
const allCustomersToLink = this.state.selectedCustomers.concat(this.state.existingCustomers);
let customersToLink: IPutFoldersParams["office_folder_has_customers"] = allCustomersToLink.map((customer) => {
return {
customer: { uid: customer.value },
};
}) as IPutFoldersParams["office_folder_has_customers"];
if (this.state.isNewClientSelected) {
if (this.state.selectedOption === "new_customer") {
const customer: Customer = await Customers.getInstance().post({
contact: values,
});