EditProject: switch client/endCustomer. Use a hook for setting new client

Author: Laoujin

frontend/src/components/client/NewClient.tsx

@@ -67,7 +67,7 @@ export const NewClientForm = ({onFinalize, fullWidth, newClientTypes}: NewClient
               if (btwResp && btwResp.valid) {
                 onFinalize(btwResponseToModel(config, btwResp, newClientTypes));
               } else {
-                onFinalize({...getNewClient(config), btw });
+                onFinalize({...getNewClient(config), btw, types: newClientTypes ?? [] });
               }
             }}
             onBtwChange={btw => setBtwResponse(btwResponseToModel(config, btw, newClientTypes))}

frontend/src/components/client/controls/ClientSelectWithCreateModal.tsx

@@ -27,30 +27,29 @@ export const EndCustomerSelectWithCreateModal = (props: ClientSelectWithCreateMo
 );
 
 
-export const ClientSelectWithCreateModal = ({value, onChange, clientType}: ClientSelectWithCreateModalProps) => {
+export const ClientSelectWithCreateModal = ({value, onChange, clientType = 'client'}: ClientSelectWithCreateModalProps) => {
   const [modalId, setModalId] = useState<ModalState>(null);
   const client = useSelector((state: ConfacState) => state.clients
     .filter(c => clientType === undefined || c.types.includes(clientType))
     .find(c => c._id === value)
   );
 
-  const clientTypeName = clientType || 'client';
   return (
     <>
       {modalId && (
         <ClientModal
           clientId={modalId === 'create' ? null : (client?._id ?? null)}
-          newClientTypes={[clientTypeName]}
+          newClientTypes={[clientType]}
           show
-          title={t(`client.createNewModal.${clientTypeName}`)}
+          title={t(`client.createNewModal.${clientType}`)}
           onClose={() => setModalId(null)}
           onConfirm={(model: ClientModel) => onChange(model._id, model)}
         />
       )}
-      <SelectWithCreateButton claim={Claim.ManageClients} setModalId={setModalId} createButtonText={`invoice.${clientTypeName}New`}>
+      <SelectWithCreateButton claim={Claim.ManageClients} setModalId={setModalId} createButtonText={`invoice.${clientType}New`}>
         <Form.Group className="form-group">
           <Form.Label>
-            <span style={{marginRight: 8}}>{t(`invoice.${clientTypeName}`)}</span>
+            <span style={{marginRight: 8}}>{t(`invoice.${clientType}`)}</span>
             {client && <ClientIconLinks client={client} />}
           </Form.Label>
           <ClientSelect value={value || ''} clientType={clientType} onChange={(id, model) => onChange(id, model)} />

frontend/src/components/consultant/controls/ConsultantSelectWithCreateModal.tsx

@@ -23,7 +23,7 @@ export const ConsultantSelectWithCreateModal = ({value, onChange}: SelectWithCre
       {modalId && (
         <ConsultantModal
           consultant={modalId !== 'create' ? consultant : null}
-          show={!!modalId}
+          show
           onClose={() => setModalId(null)}
           onConfirm={(model: ConsultantModel) => dispatch(saveConsultant(model, savedModel => onChange(savedModel._id, savedModel)) as any)}
         />

frontend/src/components/controls/form-controls/lib/ComponentsTypes.ts

@@ -1,6 +1,6 @@
 type CustomComponents = 'InvoiceLineTypeSelect' | 'ProjectLineTypeSelect' | 'InvoiceDateStrategySelect' | 'PropertiesSelect'
   | 'ExtraFields' | 'StringsSelect' | 'ClientSelect' | 'ClientTypeSelect' | 'ConsultantTypeSelect' | 'EditProjectClient' | 'EditProjectEndCustomer' | 'ProjectSelect'
-  | 'ConsultantSelectWithCreateModal' | 'InvoiceReplacementsInput' | 'InvoiceReplacementsTextEditor'
+  | 'ConsultantSelectWithCreateModal' | 'InvoiceReplacementsInput' | 'InvoiceReplacementsTextEditor' | 'EditProjectClientAsEndCustomer'
   | 'PartnerSelectWithCreateModal' | 'EndCustomerSelectWithCreateModal' | 'LanguageSelect' | 'EditInvoiceLines' | 'RolesSelect' | 'ClaimsSelect'
   | 'ProjectMonthInboundStatusSelect' | 'ProjectMonthStatusSelect' | 'AttachmentsTypeSelect' | 'EditProjectPartner'
   | 'ClientSelectWithCreateModal' | 'ContractStatusWithNotes' | 'ProjectClientContractStatus' | 'CountrySelect' | 'ProjectProformaSelect';

frontend/src/components/controls/form-controls/lib/EditComponentFactory.tsx

@@ -26,7 +26,7 @@ import {ExtraFieldsInput} from '../inputs/ExtraFieldsInput';
 import {TextEditor} from '../inputs/TextEditor';
 import {AttachmentsTypeSelect} from '../../attachments/AttachmentsTypeSelect';
 import {DatePicker} from '../DatePicker';
-import {EditProjectClient, EditProjectEndCustomer, EditProjectPartner} from '../../../project/controls/EditProjectClient';
+import {EditProjectClient, EditProjectEndCustomer, EditProjectPartner, EditProjectClientAsEndCustomer} from '../../../project/controls/EditProjectClient';
 import {ConsultantSelectWithCreateModal} from '../../../consultant/controls/ConsultantSelectWithCreateModal';
 import {LanguageSelect} from '../../LanguageSelect';
 import {EditInvoiceLines} from '../../../invoice/invoice-edit/invoice-lines/EditInvoiceLines';
@@ -81,6 +81,7 @@ export function getComponent(col: FormConfig) {
     ProjectSelect,
     EditProjectClient,
     EditProjectPartner,
+    EditProjectClientAsEndCustomer,
     EditProjectEndCustomer,
     ConsultantSelectWithCreateModal,
     InvoiceReplacementsInput,

frontend/src/components/hooks/useProjects.tsx

@@ -1,21 +1,19 @@
-import {Moment} from 'moment';
-import {useSelector} from 'react-redux';
-import {ConfacState} from '../../reducers/app-state';
+import { Moment } from 'moment';
+import { useSelector } from 'react-redux';
+import { ConfacState } from '../../reducers/app-state';
 import { ClientModel } from '../client/models/ClientModels';
 import { ConsultantModel } from '../consultant/models/ConsultantModel';
 import InvoiceModel from '../invoice/models/InvoiceModel';
-import {FullProjectModel} from '../project/models/FullProjectModel';
-import {FullProjectMonthModel, IFullProjectMonthModel} from '../project/models/FullProjectMonthModel';
+import { FullProjectModel } from '../project/models/FullProjectModel';
+import { FullProjectMonthModel, IFullProjectMonthModel } from '../project/models/FullProjectMonthModel';
 import { IProjectModel } from '../project/models/IProjectModel';
-import {ProjectMonthModel} from '../project/models/ProjectMonthModel';
+import { ProjectMonthModel } from '../project/models/ProjectMonthModel';
 
 
 export function useProjects(month?: Moment): FullProjectModel[] {
-  const {projects, clients, consultants} = useSelector((state: ConfacState) => ({
-    projects: state.projects,
-    clients: state.clients,
-    consultants: state.consultants
-  }));
+  const projects = useSelector((state: ConfacState) => state.projects);
+  const clients = useSelector((state: ConfacState) => state.clients);
+  const consultants = useSelector((state: ConfacState) => state.consultants);
 
   return projects.map(project => {
     const consultant = consultants.find(x => x._id === project.consultantId);

frontend/src/components/project/EditProject.tsx

@@ -1,77 +1,62 @@
-import {useState} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
-import {Container, Row, Form} from 'react-bootstrap';
-import {useNavigate} from 'react-router-dom';
-import {t} from '../utils';
-import {ArrayInput} from '../controls/form-controls/inputs/ArrayInput';
-import {deleteProject, saveProject} from '../../actions';
-import {StickyFooter} from '../controls/other/StickyFooter';
-import {BusyButton} from '../controls/form-controls/BusyButton';
-import {IProjectModel, ProjectClientInvoiceLine} from './models/IProjectModel';
-import {getNewProject, getNewProjectEndCustomer} from './models/getNewProject';
-import {ConfacState} from '../../reducers/app-state';
-import {getDefaultProjectMonthConfig} from './models/ProjectMonthModel';
-import {useDocumentTitle} from '../hooks/useDocumentTitle';
-import {getNewClient} from '../client/models/getNewClient';
-import {getNewConsultant} from '../consultant/models/getNewConsultant';
-import {Audit} from '../admin/audit/Audit';
-import {CopyProject} from './CopyProject';
-import {Claim} from '../users/models/UserModel';
-import {useParams} from 'react-router-dom';
-import {Col} from 'react-bootstrap';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Container, Row, Form, Col } from 'react-bootstrap';
+import { useNavigate, useParams } from 'react-router-dom';
+import { t } from '../utils';
+import { ArrayInput } from '../controls/form-controls/inputs/ArrayInput';
+import { deleteProject, saveProject } from '../../actions';
+import { StickyFooter } from '../controls/other/StickyFooter';
+import { BusyButton } from '../controls/form-controls/BusyButton';
+import { IProjectModel, ProjectClientInvoiceLine } from './models/IProjectModel';
+import { getNewProject, getNewProjectEndCustomer } from './models/getNewProject';
+import { ConfacState } from '../../reducers/app-state';
+import { getDefaultProjectMonthConfig } from './models/ProjectMonthModel';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
+import { Audit } from '../admin/audit/Audit';
+import { CopyProject } from './CopyProject';
+import { Claim } from '../users/models/UserModel';
 import { SingleContractIcon } from "../client/contract/SingleContractIcon";
-import {EnhanceWithConfirmation} from '../enhancers/EnhanceWithConfirmation';
-import {Button} from '../controls/form-controls/Button';
-import {isDateIntervalValid} from '../controls/other/ProjectValidator';
+import { EnhanceWithConfirmation } from '../enhancers/EnhanceWithConfirmation';
+import { Button} from '../controls/form-controls/Button';
+import { isDateIntervalValid } from '../controls/other/ProjectValidator';
 import useEntityChangedToast from '../hooks/useEntityChangedToast';
-import { projectFormConfigClient, projectFormConfigEndCustomer } from './models/ProjectFormConfig';
+import { getProjectFormConfig } from './models/ProjectFormConfig';
 
 
 const ConfirmationButton = EnhanceWithConfirmation(Button);
 
 
-export const EditProject = () => {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
+const useProjectState = () => {
   const params = useParams();
-  const model = useSelector((state: ConfacState) => state.projects.find(c => c._id === params.id));
+  const storeProject = useSelector((state: ConfacState) => state.projects.find(c => c._id === params.id));
+
   const consultants = useSelector((state: ConfacState) => state.consultants);
-  const [project, setProject] = useState<IProjectModel>(model || getNewProject());
-  const consultant = useSelector((state: ConfacState) => state.consultants.find(x => x._id === project.consultantId) || getNewConsultant());
+  const [project, setSimpleProject] = useState<IProjectModel>(storeProject || getNewProject());
   const clients = useSelector((state: ConfacState) => state.clients);
-  const client = useSelector((state: ConfacState) => state.clients.find(x => x._id === project.client.clientId) || getNewClient());
+
   const hasProjectMonths = useSelector((state: ConfacState) => state.projectsMonth.some(pm => pm.projectId === params.id));
-  const [needsSync, setNeedsSync] = useState<{consultant: boolean, client: boolean}>({consultant: false, client: false});
-  const [clientFormConfig, setClientFormConfig] = useState(project.forEndCustomer ? projectFormConfigClient : projectFormConfigEndCustomer)
 
-  useEntityChangedToast(project._id);
 
-  const docTitle = consultant._id ? 'projectEdit' : 'projectNew';
-  useDocumentTitle(docTitle, {consultant: consultant.firstName, client: client.name});
-  if (model && (!project._id || project._id !== params.id)) {
-    setProject(model);
-  }
-
-  if (needsSync.consultant || needsSync.client) {
-    let newProject = {...project};
-
-    if (needsSync.consultant) {
-      // Set ProjectMonth invoicing config based on the Consultant.Type
-      const selectedConsultant = consultants.find(c => c._id === project.consultantId);
-      newProject = {
-        ...newProject,
-        projectMonthConfig: {
-          ...newProject.projectMonthConfig,
-          ...getDefaultProjectMonthConfig(selectedConsultant && selectedConsultant.type),
-        },
-      };
+  useEffect(() => {
+    if (storeProject) {
+      setSimpleProject(storeProject);
+    } else {
+      setSimpleProject(getNewProject());
     }
+  }, [storeProject]); // eslint-disable-line
 
-    if (needsSync.client) {
-      // Set ProjectMonth invoicing config based on the Client.ChangingOrderNr
-      const selectedClient = clients.find(x => x._id === project.client.clientId);
+
+  const setProject = (value: IProjectModel) => {
+    const newProject = {...project, ...value};
+
+    // Set ProjectMonth invoicing config based on the Client.ChangingOrderNr
+    if (newProject.client.clientId !== project.client.clientId) {
+      const selectedClient = clients.find(x => x._id === newProject.client.clientId);
       if (selectedClient) {
-        newProject.projectMonthConfig.changingOrderNr = selectedClient.defaultChangingOrderNr;
+        newProject.projectMonthConfig = {
+          ...newProject.projectMonthConfig,
+          changingOrderNr: selectedClient.defaultChangingOrderNr,
+        };
 
         if (selectedClient.defaultInvoiceLines?.length > 1) {
           newProject.client = {
@@ -83,45 +68,63 @@ export const EditProject = () => {
       }
     }
 
-    setNeedsSync({consultant: false, client: false});
-    setProject(newProject);
-  }
-
-  const setProjectInterceptor = (value: IProjectModel) => {
-    const newProject = {...project, ...value};
+    // Set ProjectMonth invoicing config based on the Consultant.Type
+    if (newProject.consultantId !== project.consultantId) {
+      const selectedConsultant = consultants.find(c => c._id === newProject.consultantId);
+      if (selectedConsultant) {
+        newProject.projectMonthConfig = {
+          ...newProject.projectMonthConfig,
+          ...getDefaultProjectMonthConfig(selectedConsultant.type),
+        };
+      }
+    }
 
+    // Enable/Disable "project is via client at end customer"
     if (!newProject.forEndCustomer && newProject.endCustomer) {
+      newProject.client = {
+        ...newProject.client,
+        clientId: newProject.endCustomer.clientId,
+      }
       newProject.endCustomer = null;
+    } else if (newProject.forEndCustomer && !newProject.endCustomer) {
+      newProject.endCustomer = {
+        ...getNewProjectEndCustomer(),
+        clientId: newProject.client.clientId,
+      };
+      newProject.client = {
+        ...newProject.client,
+        clientId: '',
+      };
     }
 
-    if (newProject.forEndCustomer && !newProject.endCustomer) {
-      newProject.endCustomer = getNewProjectEndCustomer();
-    }
+    setSimpleProject(newProject);
+  };
 
-    const clientTypeForClientField = (newProject.forEndCustomer ? 'client' : 'endCustomer')
-    if (project.client.clientId) {
-      const selectedClient = clients.find(x => x._id === project.client.clientId);
-      if (selectedClient && !selectedClient.types.includes(clientTypeForClientField)) {
-        newProject.client.clientId = '';
-      }
-    }
+  return {
+    project,
+    setProject,
+    canDelete: !hasProjectMonths,
+  };
+}
 
-    setProject(newProject);
+const useEditProjectTitle = (project: IProjectModel) => {
+  const consultant = useSelector((state: ConfacState) => state.consultants.find(x => x._id === project.consultantId));
+  const client = useSelector((state: ConfacState) => state.clients.find(x => x._id === project.client.clientId));
+  const docTitle = consultant?._id ? 'projectEdit' : 'projectNew';
+  useDocumentTitle(docTitle, {consultant: consultant?.firstName ?? '', client: client?.name ?? ''});
+}
 
-    setClientFormConfig(newProject.forEndCustomer ? projectFormConfigClient: projectFormConfigEndCustomer)
 
+export const EditProject = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const {project, setProject, canDelete} = useProjectState();
+  const client = useSelector((state: ConfacState) => state.clients.find(x => x._id === project.client.clientId));
 
+  useEntityChangedToast(project._id);
+  useEditProjectTitle(project);
 
-    // Set a flag to update fields that receive default values from the
-    // selected Consultant/Client. Cannot update them at this point because
-    // the selectors have not yet included the Consultant/Client when the
-    // user created a new entity with the CreateModal button
-    const consultantChanged = value.consultantId !== project.consultantId;
-    const clientChanged = value.client.clientId !== project.client.clientId;
-    if (consultantChanged || clientChanged) {
-      setNeedsSync({consultant: consultantChanged, client: clientChanged});
-    }
-  };
+  const clientFormConfig = getProjectFormConfig(project);
 
   const isButtonDisabled = !project.consultantId
     || !project.client || !project.client.clientId
@@ -132,12 +135,15 @@ export const EditProject = () => {
     <Container className="edit-container">
       <Row className="page-title-container">
         <h1>{project._id ? t('project.project') : t('project.createNew')}</h1>
-        <Audit model={model} modelType="project" />
+        <Audit model={project} modelType="project" />
       </Row>
       <Row>
         <Col>
           <h2>
-            <SingleContractIcon contracts={[project.contract, client?.frameworkAgreement]} style={{fontSize: 28}} />
+            <SingleContractIcon
+              contracts={client ? [project.contract, client?.frameworkAgreement] : [project.contract]}
+              style={{fontSize: 28}}
+            />
             {t('project.contract.title')}
           </h2>
         </Col>
@@ -147,7 +153,7 @@ export const EditProject = () => {
           <ArrayInput
             config={clientFormConfig}
             model={project}
-            onChange={(value: IProjectModel) => setProjectInterceptor(value)}
+            onChange={(value: IProjectModel) => setProject(value)}
             tPrefix="project."
           />
         </Row>
@@ -159,7 +165,7 @@ export const EditProject = () => {
           variant="danger"
           title={t('project.deleteConfirm.title')}
           componentChildren={t('delete')}
-          claim={claims => !hasProjectMonths && !!project._id && claims.includes(Claim.DeleteProject)}
+          claim={claims => canDelete && !!project._id && claims.includes(Claim.DeleteProject)}
         >
           {t('project.deleteConfirm.content')}
         </ConfirmationButton>