Merge pull request #307 from itenium-be/issue-299-eindklant-part2

Issue 299 - eindklant icoon in projectlist grid & eindklant info in facturatie project modal.
itenium-be · Dec 27, 2024 · 66c30d5 · 66c30d5
2 parents cbd2a39 + e976d35
commit 66c30d5
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 9 deletions.
diff --git a/frontend/src/components/hooks/useProjects.tsx b/frontend/src/components/hooks/useProjects.tsx
@@ -21,7 +21,8 @@ export function useProjects(month?: Moment): FullProjectModel[] {
     const consultant = consultants.find(x => x._id === project.consultantId);
     const client = clients.find(x => x._id === project.client.clientId);
     const partner = project.partner && clients.find(x => project.partner && x._id === project.partner.clientId);
-    return new FullProjectModel(project, month, consultant, client, partner);
+    const endCustomer =  (!!project.endCustomer?.clientId) ? clients.find(x=> x._id === project.endCustomer!.clientId): undefined;
+    return new FullProjectModel(project, month, consultant, client, partner, endCustomer);
   });
 }
 
@@ -125,6 +126,7 @@ export function mapToProjectMonth(confacState: ProjectMonthResolverState, projec
     consultant,
     client,
     partner: project.partner && confacState.clients.find(c => project.partner && c._id === project.partner.clientId),
+    endCustomer: !!project.endCustomer?.clientId ? confacState.clients.find(c=> c._id === project.endCustomer!.clientId): undefined,
     invoice: invoice || confacState.invoices.find(i => i.projectMonth && i.projectMonth.projectMonthId === projectMonth._id),
   };
 

diff --git a/frontend/src/components/project/ProjectsList.scss b/frontend/src/components/project/ProjectsList.scss
@@ -13,10 +13,11 @@ $borderSeparator: 3px solid $table-border-color;
     td:nth-child(4) { width: 30%; }
     td:nth-child(5) { min-width: 110px; }
 
-    td:nth-child(6) { width: 30%; }
-    td:nth-child(7) { min-width: 100px; }
-    td:nth-child(8) { min-width: 150px; }
-    td:nth-child(9) { min-width: 100px; }
+    td:nth-child(6) { min-width: 30px; }
+    td:nth-child(7) { width: 30%; }
+    td:nth-child(8) { min-width: 100px; }
+    td:nth-child(9) { min-width: 150px; }
+    td:nth-child(10) { min-width: 100px; }
 
     thead, tbody {
       th, td {

diff --git a/frontend/src/components/project/controls/EditProjectClient.tsx b/frontend/src/components/project/controls/EditProjectClient.tsx
@@ -87,7 +87,8 @@ type EditProjectEndCustomerProps = MinimalInputProps<ProjectEndCustomerModel>;
 
 const endCustomerConfig: FullFormConfig = [
   {key: 'clientId', component: 'EndCustomerSelectWithCreateModal', cols: 5},
-  {key: 'notes', component: 'text', cols: 5},
+  {key: 'contact', component: 'text', cols: 2, suffix:'user'},
+  {key: 'notes', component: 'text', cols: 3},
 ];
 
 export const EditProjectEndCustomer = ({value, onChange} : EditProjectEndCustomerProps ) => {

diff --git a/frontend/src/components/project/controls/ProjectEndCustomerIcon.tsx b/frontend/src/components/project/controls/ProjectEndCustomerIcon.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { ClientModal } from "../../client/controls/ClientModal";
+import { ClientModel } from "../../client/models/ClientModels";
+import { Icon, IconProps } from "../../controls/Icon";
+import { ProjectEndCustomerModel } from "../models/IProjectModel";
+
+type ProjectEndCustomerIconProps = IconProps & {
+  endCustomer: ProjectEndCustomerModel | null | undefined;
+  endCustomerClientModel: ClientModel | null | undefined;
+};
+
+export const ProjectEndCustomerIcon = ({
+  endCustomer,
+  endCustomerClientModel,
+  ...props
+}: ProjectEndCustomerIconProps) => {
+
+  const [modal, setModal] = useState<boolean>(false);
+
+  if (!endCustomer) {
+    return null;
+  }
+
+  const title = [
+      endCustomerClientModel?.name,
+      endCustomer.contact,
+      endCustomer.notes,
+    ].filter(Boolean).join("<br/>");
+
+  return (
+    <div>
+      <Icon
+        fa="fa fa-user"
+        size={1}
+        title={title}
+        {...props}
+        onClick={() => setModal(true)}
+      />
+      {modal && endCustomerClientModel && (
+        <ClientModal
+          client={endCustomerClientModel}
+          show={modal}
+          onClose={() => {
+            setModal(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/components/project/controls/ProjectMonthModal.tsx b/frontend/src/components/project/controls/ProjectMonthModal.tsx
@@ -75,7 +75,7 @@ export const ProjectMonthModal = ({onClose, projectMonth}: ProjectMonthModalProp
         <ProjectDuration project={fullProjectMonth.project} />
 
         <hr />
-
+        
         <div className="project-client">
           {fullProjectMonth.client.name}
           <small><ProjectClientTariff projectClient={fullProjectMonth.project.client} /></small>
@@ -88,6 +88,13 @@ export const ProjectMonthModal = ({onClose, projectMonth}: ProjectMonthModalProp
           )}
         </div>
 
+        {fullProjectMonth.endCustomer &&  
+          <div>
+             <hr/>
+             <h5>{fullProjectMonth.endCustomer.name}</h5>
+          </div>
+        }
+
       </div>
     </Modal>
   );

diff --git a/frontend/src/components/project/models/FullProjectModel.ts b/frontend/src/components/project/models/FullProjectModel.ts
@@ -32,14 +32,17 @@ export class FullProjectModel {
   client: ClientModel;
   /** ATTN: ProjectClientModel properties to be found in details.partner */
   partner?: ClientModel;
+  /** ATTN: ProjectClientModel properties to be found in details.endCustomer */
+  endCustomer?: ClientModel;
 
-
-  constructor(json: IProjectModel, month?: Moment, consultant?: ConsultantModel, client?: ClientModel, partner?: ClientModel) {
+  
+  constructor(json: IProjectModel, month?: Moment, consultant?: ConsultantModel, client?: ClientModel, partner?: ClientModel, endCustomer?: ClientModel) {
     this.details = json;
     this._month = month || moment();
     this.consultant = consultant || getNewConsultant();
     this.client = client || getNewClient();
     this.partner = partner;
+    this.endCustomer = endCustomer;
   }
 
 

diff --git a/frontend/src/components/project/models/FullProjectMonthModel.ts b/frontend/src/components/project/models/FullProjectMonthModel.ts
@@ -20,6 +20,7 @@ export class FullProjectMonthModel {
   consultant: ConsultantModel;
   client: ClientModel;
   partner?: ClientModel;
+  endCustomer?: ClientModel;
   invoice?: InvoiceModel;
 
   constructor(json: IFullProjectMonthModel) {
@@ -28,6 +29,7 @@ export class FullProjectMonthModel {
     this.consultant = json.consultant;
     this.client = json.client;
     this.partner = json.partner;
+    this.endCustomer = json.endCustomer;
     this.invoice = json.invoice;
   }
 }
@@ -40,5 +42,6 @@ export interface IFullProjectMonthModel {
   consultant: ConsultantModel;
   client: ClientModel;
   partner?: ClientModel;
+  endCustomer?: ClientModel;
   invoice?: InvoiceModel;
 }
diff --git a/frontend/src/components/project/models/getProjectFeature.tsx b/frontend/src/components/project/models/getProjectFeature.tsx
@@ -16,6 +16,7 @@ import {ProjectForecastPartnerFooter} from "../project-month-list/table/footers/
 import {getTariffs} from '../utils/getTariffs';
 import {getProjectMarkup} from '../utils/getProjectMarkup';
 import {ContractIcons} from '../../client/contract/ContractIcons';
+import { ProjectEndCustomerIcon } from '../controls/ProjectEndCustomerIcon';
 
 
 export type ProjectFeatureBuilderConfig = IFeatureBuilderConfig<FullProjectModel, ProjectListFilters>;
@@ -132,6 +133,11 @@ const projectListConfig = (config: ProjectFeatureBuilderConfig): IList<FullProje
     key: 'partnerTariff',
     header: 'project.partner.tariff',
     value: p => <ProjectClientTariff projectClient={p.details.partner} />,
+  },
+  {
+    key: 'endCustomer',
+    header: '',
+    value: p => <ProjectEndCustomerIcon endCustomer={p.details.endCustomer} endCustomerClientModel={p.endCustomer}/>
   }, {
     key: 'client',
     header: 'project.client.clientId',