From 03c79c197ec9c876090dbefbccf52c96fd126183 Mon Sep 17 00:00:00 2001 From: Hugo Lextrait Date: Fri, 5 May 2023 11:28:10 +0200 Subject: [PATCH] add customers, create customers to a folder --- .gitignore | 1 + package.json | 2 +- .../SuperAdmin/Customers/Customers.ts | 7 +- .../DesignSystem/MultiSelect/index.tsx | 19 ++- .../UserFolder/UserFolderHeader/index.tsx | 7 +- .../Folder/AddClientToFolder/index.tsx | 110 +++++++++++++----- .../Folder/FolderInformation/index.tsx | 43 ++++--- .../UpdateFolderCollaborators/index.tsx | 89 +++++++------- .../FolderInformation/index.tsx | 10 +- 9 files changed, 194 insertions(+), 94 deletions(-) diff --git a/.gitignore b/.gitignore index 1cc82db5..63a49dfe 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ /node_modules /.pnp .pnp.js +dist/ # testing /coverage diff --git a/package.json b/package.json index f7c9576f..cb79458c 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "tsc && next dev", "build": "next build", "start": "next start", "lint": "next lint", diff --git a/src/front/Api/LeCoffreApi/SuperAdmin/Customers/Customers.ts b/src/front/Api/LeCoffreApi/SuperAdmin/Customers/Customers.ts index a52c30c2..ac7fa867 100644 --- a/src/front/Api/LeCoffreApi/SuperAdmin/Customers/Customers.ts +++ b/src/front/Api/LeCoffreApi/SuperAdmin/Customers/Customers.ts @@ -6,8 +6,8 @@ import { ECivility } from "le-coffre-resources/dist/Customer/Contact"; // TODO Type get query params -> Where + inclue + orderby export interface IGetCustomersparams { - where?:{}, - include?:{}, + where?: {}; + include?: {}; } // TODO Type getbyuid query params @@ -45,7 +45,8 @@ export default class Customers extends BaseSuperAdmin { public async get(q: IGetCustomersparams): Promise { const url = new URL(this.baseURl); - Object.entries(q).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value))); + const query = { q }; + Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value))); try { return await this.getRequest(url); } catch (err) { diff --git a/src/front/Components/DesignSystem/MultiSelect/index.tsx b/src/front/Components/DesignSystem/MultiSelect/index.tsx index 5ddacf88..f59e0dd2 100644 --- a/src/front/Components/DesignSystem/MultiSelect/index.tsx +++ b/src/front/Components/DesignSystem/MultiSelect/index.tsx @@ -58,8 +58,8 @@ export default class MultiSelect extends React.Component { options={this.props.options} styles={styles} onChange={this.onChange} - value={this.props.value} - defaultValue={this.props.defaultValue} + value={this.props.defaultValue} + defaultValue={this.state.selectedOptions} closeMenuOnSelect={this.props.shouldCloseMenuOnSelect} isMulti isOptionDisabled={this.props.isOptionDisabled} @@ -88,6 +88,21 @@ export default class MultiSelect extends React.Component { } } + public override componentDidUpdate(prevProps: IProps): void { + if (this.props.defaultValue === prevProps.defaultValue) return; + if (this.props.defaultValue) { + // If default value contains multiple IOptions + if (Array.isArray(this.props.defaultValue)) { + this.setState({ selectedOptions: this.props.defaultValue }); + } + + // If default value is a single IOption + if ("label" in this.props.defaultValue) { + this.setState({ selectedOptions: [this.props.defaultValue] }); + } + } + } + private onFocus() { this.setState({ isFocused: true }); } diff --git a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx index f32f3dc7..bdc82961 100644 --- a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx @@ -44,8 +44,8 @@ export default class UserFolderHeader extends React.Component {
Numéro de téléphone - {this.formatPhoneNumber(this.props.customer.contact.phone_number ?? "") ?? - this.formatPhoneNumber(this.props.customer.contact.cell_phone_number)} + {this.formatPhoneNumber(this.props.customer.contact.cell_phone_number) ?? + this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
@@ -82,6 +82,5 @@ export default class UserFolderHeader extends React.Component { return output.join(""); } - private onEditClick(): void { - } + private onEditClick(): void {} } diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx index 3fecf627..44f7e245 100644 --- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx +++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx @@ -8,14 +8,13 @@ import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import { NextRouter, useRouter } from "next/router"; -import { ActionMeta, MultiValue } from "react-select"; 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 from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders"; +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"; @@ -24,7 +23,8 @@ type IState = { selectedFolder: IDashBoardFolder | null; isExistingClientSelected: boolean; isNewClientSelected: boolean; - hasNewClientSelected: boolean; + availableCustomers: Customer[] | null; + selectedCustomers: readonly IOption[]; }; type IPropsClass = IProps & { @@ -38,7 +38,8 @@ class AddClientToFolderClass extends BasePage { selectedFolder: null, isExistingClientSelected: true, isNewClientSelected: false, - hasNewClientSelected: false, + availableCustomers: [], + selectedCustomers: [], }; this.onSelectedFolder = this.onSelectedFolder.bind(this); this.onExistingClientSelected = this.onExistingClientSelected.bind(this); @@ -47,11 +48,8 @@ class AddClientToFolderClass extends BasePage { this.onFormSubmit = this.onFormSubmit.bind(this); } public override render(): JSX.Element { - const selectOptions = [ - { value: "adazzdsqaad", label: "john Doe" }, - { value: "rijgreipgje", label: "jane Doe" }, - { value: "gipjerpogkzfe", label: "Marcelino Doe" }, - ]; + const selectOptions: IOption[] = this.getSelectedOptions(); + const backwardPath = Module.getInstance() .get() .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid); @@ -82,14 +80,17 @@ class AddClientToFolderClass extends BasePage {
{this.state.isExistingClientSelected && (
- +
- +
)} @@ -114,12 +115,57 @@ class AddClientToFolderClass extends BasePage { ); } - private onMutiSelectChange(newValue: MultiValue, actionMeta: ActionMeta): void { - if (newValue.length <= 0) { - this.setState({ hasNewClientSelected: false }); + 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 }); + } + + private async getFolderPreSelectedCustomers(folderUid: string): Promise { + const query = { + q: { + office_folder_has_customers: { + include: { + customer: { + include: { + contact: true, + }, + }, + }, + }, + }, + }; + let preSelectedCustomers: IOption[] = []; + try { + const folder = await Folders.getInstance().getByUid(folderUid, query); + preSelectedCustomers = folder.office_folder_has_customers!.map((folderHasCustomer) => { + return { + label: folderHasCustomer.customer.contact?.first_name + " " + folderHasCustomer.customer.contact?.last_name, + value: folderHasCustomer.customer.uid, + }; + }); + } catch (error) { + this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path); return; } - this.setState({ hasNewClientSelected: true }); + return preSelectedCustomers; + } + + private getSelectedOptions(): IOption[] { + let options = this.state.availableCustomers?.map((customer) => { + return { + label: customer.contact?.first_name + " " + customer.contact?.last_name, + value: customer.uid, + }; + }); + if (!options) options = []; + return options; + } + + private onMutiSelectChange(selectedCustomers: readonly IOption[]): void { + this.setState({ selectedCustomers }); } private onSelectedFolder(folder: IDashBoardFolder): void { @@ -140,20 +186,30 @@ class AddClientToFolderClass extends BasePage { [key: string]: any; }, ) { - values["civility"] = ECivility.MALE; - const customer = { - contact: values, - }; - const newCustomerCreated: Customer = await Customers.getInstance().post(customer); - console.log("NEW CUSTOMER CREATED >>>", newCustomerCreated); + values["civility"] = ECivility.MALE; // TODO: should maybe be deleted later or added to the form - if (newCustomerCreated) { + let customersToLink: IPutFoldersParams["office_folder_has_customers"] = []; + if (this.state.isNewClientSelected) { + const customer: Customer = await Customers.getInstance().post({ + customer: values, + }); + if (!customer.uid) return; + customersToLink = [{ customer: { uid: customer.uid } }]; + } + + if (this.state.isExistingClientSelected) { + customersToLink = this.state.selectedCustomers.map((customer) => { + return { + customer: { uid: customer.value }, + }; + }) as IPutFoldersParams["office_folder_has_customers"]; + } + + if (customersToLink) { const body = { - office_folder_has_customers: [{ customer: { uid: newCustomerCreated.uid } }], + office_folder_has_customers: customersToLink, }; - console.log("BODY >>>", body); - await Folders.getInstance().put(this.props.selectedFolderUid, body); this.props.router.push(`/folders/${this.props.selectedFolderUid}`); } diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index 961b537a..86d1e494 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx @@ -15,7 +15,7 @@ import BasePage from "../../Base"; import classes from "./classes.module.scss"; import ClientSection from "./ClientSection"; import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document"; -import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders"; +import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders"; import { OfficeFolder } from "le-coffre-resources/dist/Customer"; import { ChangeEvent } from "react"; @@ -54,7 +54,11 @@ class FolderInformationClass extends BasePage { .get() .modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid); return ( - +
{this.state.selectedFolder ? (
@@ -74,7 +78,11 @@ class FolderInformationClass extends BasePage {
- +
{this.doesFolderHaveCustomer() && }
@@ -102,7 +110,12 @@ class FolderInformationClass extends BasePage {
Souhaitez-vous vraiment archiver le dossier ?
- + ) : ( @@ -125,9 +138,9 @@ class FolderInformationClass extends BasePage { }); } - private getCompletionNumber(){ + private getCompletionNumber() { const documents = this.state.selectedFolder?.documents; - if(!documents) return 0; + if (!documents) return 0; const totalDocuments = documents.length; const askedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.ASKED).length; const depositedDocuments = totalDocuments - askedDocuments; @@ -152,15 +165,15 @@ class FolderInformationClass extends BasePage { this.setState({ isArchivedModalOpen: false }); } - private onArchivedDescriptionInputChange(e: ChangeEvent){ - this.setState({inputArchivedDescripton: e.target.value}) + private onArchivedDescriptionInputChange(e: ChangeEvent) { + this.setState({ inputArchivedDescripton: e.target.value }); } private async onArchivedModalAccepted() { if (!this.state.selectedFolder) return; const folder = this.state.selectedFolder; folder.archived_description = this.state.inputArchivedDescripton; - await Folders.getInstance().archive(this.state.selectedFolder.uid ?? "", folder); + await Folders.getInstance().archive(this.state.selectedFolder.uid ?? "", folder as IPutFoldersParams); this.closeArchivedModal(); this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path); } @@ -173,13 +186,13 @@ class FolderInformationClass extends BasePage { office_folder_has_customers: { include: { customer: { include: { contact: true } } } }, documents: { include: { - depositor:{ + depositor: { include: { - contact: true - } - } - } - } + contact: true, + }, + }, + }, + }, }, }; const folder = await Folders.getInstance().getByUid(this.props.selectedFolderUid, query); diff --git a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx index 5397894d..d0d05218 100644 --- a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx @@ -46,15 +46,15 @@ class UpdateFolderCollaboratorsClass extends BasePage { this.onFormSubmit = this.onFormSubmit.bind(this); this.onChangeSelectedCollaborators = this.onChangeSelectedCollaborators.bind(this); } - public override render(): JSX.Element { + public override render(): JSX.Element { const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path; const backwardPath = foldersInformationPath.replace("[folderUid]", this.props.selectedFolderUid); - const selectOptions : IOption[]= this.state.availableCollaborators.map((collaborator) => { + const selectOptions: IOption[] = this.state.availableCollaborators.map((collaborator) => { return { label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name, value: collaborator.uid, - } - }) + }; + }); return (
@@ -75,7 +75,12 @@ class UpdateFolderCollaboratorsClass extends BasePage { {this.state.selectedOption === ERadioBoxValue.SELECTION && (
- +
)} @@ -91,11 +96,11 @@ class UpdateFolderCollaboratorsClass extends BasePage { ); } - public override async componentDidMount(){ + public override async componentDidMount() { await this.getFolderAvailableCollaborators(this.props.selectedFolderUid); } - private async getFolderAvailableCollaborators(folderUid: string){ + private async getFolderAvailableCollaborators(folderUid: string) { const query = { q: { office: true, @@ -104,44 +109,44 @@ class UpdateFolderCollaboratorsClass extends BasePage { user_stakeholder: { include: { contact: true, - } - } - } + }, + }, + }, }, }, - }; + }; let folder = null; try { - folder = await Folders.getInstance().getByUid(folderUid, query); - const preSelectedCollaborators : IOption[]= folder.office_folder_has_stakeholder!.map((collaborator) => { + folder = await Folders.getInstance().getByUid(folderUid, query); + const preSelectedCollaborators: IOption[] = folder.office_folder_has_stakeholder!.map((collaborator) => { return { label: collaborator.user_stakeholder.contact?.first_name + " " + collaborator.user_stakeholder.contact?.last_name, value: collaborator.user_stakeholder.uid, - } - }) - this.setState({selectedCollaborators: preSelectedCollaborators}) - } catch (error) { + }; + }); + this.setState({ selectedCollaborators: preSelectedCollaborators }); + } catch (error) { this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path); return; } - + const userQuery: IGetUsersparams = { - where: { + where: { office_uid: folder.office?.uid, }, - include:{ + include: { contact: { - select:{ - first_name:true, - last_name:true, - } - } - } + select: { + first_name: true, + last_name: true, + }, + }, + }, }; - const availableCollaborators = await Users.getInstance().get(userQuery); - this.setState({availableCollaborators}); + const availableCollaborators = await Users.getInstance().get(userQuery); + this.setState({ availableCollaborators }); } private onSelectedOptionAllOffice(event: React.ChangeEvent) { @@ -168,18 +173,24 @@ class UpdateFolderCollaboratorsClass extends BasePage { private async onFormSubmit(e: React.FormEvent | null, values: { [key: string]: string }) { try { - let collaboratorsUid : OfficeFolderHasStakeholder[]; - if(this.state.selectedOption === ERadioBoxValue.SELECTION){ - collaboratorsUid = this.state.selectedCollaborators.map((collaborator) => ({user_stakeholder: {uid: collaborator.value}} as OfficeFolderHasStakeholder)); + let collaboratorsUid: OfficeFolderHasStakeholder[]; + if (this.state.selectedOption === ERadioBoxValue.SELECTION) { + collaboratorsUid = this.state.selectedCollaborators.map( + (collaborator) => ({ user_stakeholder: { uid: collaborator.value } } as OfficeFolderHasStakeholder), + ); + } else { + collaboratorsUid = this.state.availableCollaborators.map( + (collaborator) => ({ user_stakeholder: { uid: collaborator.uid } } as OfficeFolderHasStakeholder), + ); } - else{ - collaboratorsUid = this.state.availableCollaborators.map((collaborator) => ({user_stakeholder: {uid: collaborator.uid}} as OfficeFolderHasStakeholder)); - } - await Folders.getInstance().put(this.props.selectedFolderUid, {office_folder_has_stakeholder: collaboratorsUid}); - this.props.router.push(Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid)); - + await Folders.getInstance().put(this.props.selectedFolderUid, { office_folder_has_stakeholder: collaboratorsUid }); + this.props.router.push( + Module.getInstance() + .get() + .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid), + ); } catch (error) { - console.error(error) + console.error(error); } } } @@ -188,5 +199,5 @@ export default function UpdateFolderCollaborators() { const router = useRouter(); let { folderUid } = router.query; folderUid = folderUid as string; - return ; + return ; } diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx index 21399c54..840adf24 100644 --- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx @@ -12,7 +12,7 @@ import BasePage from "../../Base"; import classes from "./classes.module.scss"; import ClientSection from "./ClientSection"; import { OfficeFolder } from "le-coffre-resources/dist/Customer"; -import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders"; +import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders"; import Module from "@Front/Config/Module"; type IProps = {}; @@ -121,8 +121,12 @@ class FolderInformationClass extends BasePage { if (!this.state.selectedFolder) return; const folder = this.state.selectedFolder; folder.archived_description = null; - await Folders.getInstance().restore(this.state.selectedFolder.uid ?? "", folder); - this.props.router.push(Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid)); + await Folders.getInstance().restore(this.state.selectedFolder.uid ?? "", folder as IPutFoldersParams); + this.props.router.push( + Module.getInstance() + .get() + .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid), + ); } private openArchivedModal(): void {