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

84
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 Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; 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 Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; 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 { NextRouter, useRouter } from "next/router";
import BasePage from "../../Base"; import BasePage from "../../Base";
import classes from "./classes.module.scss"; 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 IProps = {};
type IState = { type IState = {
selectedFolder: IDashBoardFolder | null; selectedFolder: IDashBoardFolder | null;
isExistingClientSelected: boolean; selectedOption: ESelectedOption;
isNewClientSelected: boolean; availableCustomers: Customer[];
availableCustomers: Customer[] | null;
selectedCustomers: readonly IOption[]; selectedCustomers: readonly IOption[];
existingCustomers: IOption[];
}; };
type IPropsClass = IProps & { type IPropsClass = IProps & {
@ -36,10 +42,10 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
super(props); super(props);
this.state = { this.state = {
selectedFolder: null, selectedFolder: null,
isExistingClientSelected: true, selectedOption: ESelectedOption.EXISTING_CUSTOMER,
isNewClientSelected: false,
availableCustomers: [], availableCustomers: [],
selectedCustomers: [], selectedCustomers: [],
existingCustomers: [],
}; };
this.onSelectedFolder = this.onSelectedFolder.bind(this); this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.onExistingClientSelected = this.onExistingClientSelected.bind(this); this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
@ -61,24 +67,27 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
</div> </div>
<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography> <Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
<div className={classes["radiobox-container"]}> <div className={classes["radiobox-container"]}>
<RadioBox {this.state.availableCustomers.length !== 0 && (
name="client" <RadioBox
onChange={this.onExistingClientSelected} name="client"
defaultChecked={this.state.isExistingClientSelected} onChange={this.onExistingClientSelected}
value={"existing client"}> checked={this.state.selectedOption === "existing_customer"}
<Typography typo={ITypo.P_ERR_18}>Client existant</Typography> value={"existing client"}>
</RadioBox> <Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
</RadioBox>
)}
<RadioBox <RadioBox
name="client" name="client"
onChange={this.onNewClientSelected} onChange={this.onNewClientSelected}
defaultChecked={this.state.isNewClientSelected} checked={this.state.selectedOption === "new_customer"}
value={"new client"}> value={"new client"}>
<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography> <Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
</RadioBox> </RadioBox>
</div> </div>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}> <Form className={classes["form"]} onSubmit={this.onFormSubmit}>
{this.state.isExistingClientSelected && ( {this.state.selectedOption === "existing_customer" && (
<div className={classes["existing-client"]}> <div className={classes["existing-client"]}>
<MultiSelect <MultiSelect
options={selectOptions} options={selectOptions}
@ -95,7 +104,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
</div> </div>
)} )}
{this.state.isNewClientSelected && ( {this.state.selectedOption === "new_customer" && (
<div className={classes["new-client"]}> <div className={classes["new-client"]}>
<InputField name="last_name" fakeplaceholder="Nom" /> <InputField name="last_name" fakeplaceholder="Nom" />
<InputField name="first_name" fakeplaceholder="Prénom" /> <InputField name="first_name" fakeplaceholder="Prénom" />
@ -118,9 +127,21 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
public override async componentDidMount() { public override async componentDidMount() {
const query = {}; const query = {};
const availableCustomers = await Customers.getInstance().get(query); const availableCustomers = await Customers.getInstance().get(query);
let preSelectedCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid); let preExistingCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid);
const selectedCustomers = preSelectedCustomers ?? []; const existingCustomers = preExistingCustomers ?? [];
this.setState({ availableCustomers, selectedCustomers });
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> { 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 { try {
const folder = await Folders.getInstance().getByUid(folderUid, query); 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 { return {
label: folderHasCustomer.customer.contact?.first_name + " " + folderHasCustomer.customer.contact?.last_name, label: folderHasCustomer.customer.contact?.first_name + " " + folderHasCustomer.customer.contact?.last_name,
value: folderHasCustomer.customer.uid, 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); this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
return; return;
} }
return preSelectedCustomers; return preExistingCustomers;
} }
private getSelectedOptions(): IOption[] { private getSelectedOptions(): IOption[] {
@ -173,11 +194,11 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
} }
private onExistingClientSelected(): void { private onExistingClientSelected(): void {
this.setState({ isExistingClientSelected: true, isNewClientSelected: false }); this.setState({ selectedOption: ESelectedOption.EXISTING_CUSTOMER });
} }
private onNewClientSelected(): void { private onNewClientSelected(): void {
this.setState({ isExistingClientSelected: false, isNewClientSelected: true }); this.setState({ selectedOption: ESelectedOption.NEW_CUSTOMER });
} }
private async onFormSubmit( 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 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 { return {
customer: { uid: customer.value }, customer: { uid: customer.value },
}; };
}) as IPutFoldersParams["office_folder_has_customers"]; }) as IPutFoldersParams["office_folder_has_customers"];
if (this.state.isNewClientSelected) { if (this.state.selectedOption === "new_customer") {
const customer: Customer = await Customers.getInstance().post({ const customer: Customer = await Customers.getInstance().post({
contact: values, contact: values,
}); });