EndCustomer model in project list.

itenium-be · Dec 27, 2024 · 1bc1070 · 1bc1070
1 parent aed5ec2
commit 1bc1070
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 deletions.
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/ProjectEndCustomerIcon.tsx b/frontend/src/components/project/controls/ProjectEndCustomerIcon.tsx
@@ -1,24 +1,50 @@
-import { ClientModel } from '../../client/models/ClientModels';
-import {Icon, IconProps} from '../../controls/Icon';
-import { ProjectEndCustomerModel } from '../models/IProjectModel';
+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) => {
+export const ProjectEndCustomerIcon = ({
+  endCustomer,
+  endCustomerClientModel,
+  ...props
+}: ProjectEndCustomerIconProps) => {
 
-  if(!endCustomer){
+  const [modal, setModal] = useState<boolean>(false);
+
+  if (!endCustomer) {
     return null;
   }
-
-  const title = [
-    endCustomerClientModel?.name,
-    endCustomer.contact,
-    endCustomer.notes,
-  ].filter(Boolean).join('<br/>');
 
-  return <Icon  fa="fa fa-user" size={1} title={title} {...props} />
+  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/models/getProjectFeature.tsx b/frontend/src/components/project/models/getProjectFeature.tsx
@@ -135,7 +135,7 @@ const projectListConfig = (config: ProjectFeatureBuilderConfig): IList<FullProje
     value: p => <ProjectClientTariff projectClient={p.details.partner} />,
   },
   {
-    key: 'forEndKlant',
+    key: 'endCustomer',
     header: '',
     value: p => <ProjectEndCustomerIcon endCustomer={p.details.endCustomer} endCustomerClientModel={p.endCustomer}/>
   }, {