Table data fixed

eclipse-tractusx · Dec 12, 2023 · aa917a4 · aa917a4
1 parent 3683da9
commit aa917a4
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 17 deletions.
diff --git a/demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsList.tsx b/demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsList.tsx
@@ -53,7 +53,7 @@ const CapacityGroupsList: React.FC = () => {
   const [sortOrder, setSortOrder] = useState('asc');
   const [capacitygroupsPerPage, setcapacitygroupsPerPage] = useState(20); // Set the default value here
   const { addFavorite, fetchFavoritesByType, deleteFavorite } = useContext(FavoritesContext)!;
-  const { findCompanyByCompanyID } = useContext(CompanyContext)!;
+  const { findCompanyByCompanyID, findCompanyNameByBpn } = useContext(CompanyContext)!;
   const [favoriteCapacityGroups, setFavoriteCapacityGroups] = useState<string[]>([]);
 
   const handleSort = (column: string) => {
@@ -210,6 +210,7 @@ const CapacityGroupsList: React.FC = () => {
           {user?.role === 'CUSTOMER' && (
             <>
               <td>{capacitygroup.supplierBNPL}</td>
+              <td>{findCompanyNameByBpn(capacitygroup.supplierBNPL)}</td>
             </>
           )}
 

diff --git a/demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsTableHeaders.tsx b/demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsTableHeaders.tsx
@@ -73,6 +73,11 @@ const CapacityGroupsTable: React.FC<CapacityGroupsTableProps> = ({ sortColumn, s
                 {sortColumn === 'supplierBNPL' && sortOrder === 'asc' && <BiCaretUp />}
                 {sortColumn === 'supplierBNPL' && sortOrder === 'desc' && <BiCaretDown />}
               </th>
+              <th onClick={() => handleSort('supplierName')}>
+                Supplier Name
+                {sortColumn === 'supplierName' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'supplierName' && sortOrder === 'desc' && <BiCaretDown />}
+              </th>
             </>
           )}
           <th onClick={() => handleSort('numberOfMaterials')}>

diff --git a/demand-capacity-mgmt-frontend/src/components/demands/DemandList.tsx b/demand-capacity-mgmt-frontend/src/components/demands/DemandList.tsx
@@ -28,6 +28,7 @@ import CapacityGroupsProvider from '../../contexts/CapacityGroupsContextProvider
 import { DemandContext } from '../../contexts/DemandContextProvider';
 import { FavoritesContext } from "../../contexts/FavoritesContextProvider";
 import UnitsofMeasureContextContextProvider from '../../contexts/UnitsOfMeasureContextProvider';
+import { useUser } from '../../contexts/UserContext';
 import { DemandProp, DemandSeries, DemandSeriesValue } from '../../interfaces/demand_interfaces';
 import { EventType } from '../../interfaces/event_interfaces';
 import { FavoriteType, MaterialDemandFavoriteResponse } from "../../interfaces/favorite_interfaces";
@@ -57,6 +58,8 @@ const DemandList: React.FC<{
   eventTypes = []
 }) => {
 
+    const { user } = useUser();
+
     const [showDetailsModal, setShowDetailsModal] = useState(false);
     const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
     const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
@@ -296,7 +299,18 @@ const DemandList: React.FC<{
                 </div>
               </Button>
             </td>
-            <td>{demand.customer.bpn}</td>
+            {user?.role === 'SUPPLIER' ? (
+              <>
+                <td>{demand.customer.bpn}</td>
+                <td>{demand.customer.companyName}</td>
+              </>
+            ) : null}
+            {user?.role === 'CUSTOMER' ? (
+              <>
+                <td>{demand.supplier.bpn}</td>
+                <td>{demand.supplier.companyName}</td>
+              </>
+            ) : null}
             <td>{demand.materialNumberCustomer}</td>
             <td>{demand.materialNumberSupplier}</td>
             <td>

diff --git a/demand-capacity-mgmt-frontend/src/components/demands/DemandListTableHeaders.tsx b/demand-capacity-mgmt-frontend/src/components/demands/DemandListTableHeaders.tsx
@@ -21,6 +21,7 @@
  */
 
 import { BiCaretDown, BiCaretUp } from 'react-icons/bi';
+import { useUser } from '../../contexts/UserContext';
 
 type DemandsTableProps = {
   sortColumn: string | null;
@@ -31,20 +32,49 @@ type DemandsTableProps = {
 };
 
 const DemandListTable: React.FC<DemandsTableProps> = ({ sortColumn, sortOrder, handleSort, demandItems, hasfavorites }) => {
-
+  const { user } = useUser();
   return (
     <table className="table table-striped table-hover">
       <thead>
         <tr>
           {hasfavorites && <th></th>}
           {hasfavorites && <th></th>}
           <th></th>
-          <th onClick={() => handleSort('customer.bpn')}>
-            Company Id{' '}
-            {sortColumn === 'customer.bpn' && sortOrder === 'asc' && <BiCaretUp />}
-            {sortColumn === 'customer.bpn' && sortOrder === 'desc' && <BiCaretDown />}
-            {!sortColumn && <i className="material-icons">...</i>}
-          </th>
+
+
+          {user?.role === 'SUPPLIER' ? (
+            <>
+              <th onClick={() => handleSort('customer.bpn')}>
+                Customer BPN{' '}
+                {sortColumn === 'customer.bpn' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'customer.bpn' && sortOrder === 'desc' && <BiCaretDown />}
+                {!sortColumn && <i className="material-icons">...</i>}
+              </th>
+              <th onClick={() => handleSort('customer.name')}>
+                Customer Name{' '}
+                {sortColumn === 'customer.name' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'customer.name' && sortOrder === 'desc' && <BiCaretDown />}
+                {!sortColumn && <i className="material-icons">...</i>}
+              </th>
+            </>
+          ) : null}
+          {user?.role === 'CUSTOMER' ? (
+            <>
+              <th onClick={() => handleSort('supplier.bpn')}>
+                Supplier BPN{' '}
+                {sortColumn === 'supplier.bpn' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'supplier.bpn' && sortOrder === 'desc' && <BiCaretDown />}
+                {!sortColumn && <i className="material-icons">...</i>}
+              </th>
+              <th onClick={() => handleSort('supplier.name')}>
+                Supplier Name{' '}
+                {sortColumn === 'supplier.name' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'supplier.name' && sortOrder === 'desc' && <BiCaretDown />}
+                {!sortColumn && <i className="material-icons">...</i>}
+              </th>
+            </>
+          ) : null}
+
           <th onClick={() => handleSort('materialNumberCustomer')}>
             Material No. Customer{' '}
             {sortColumn === 'materialNumberCustomer' && sortOrder === 'asc' && <BiCaretUp />}

diff --git a/demand-capacity-mgmt-frontend/src/components/demands/DemandManagement.tsx b/demand-capacity-mgmt-frontend/src/components/demands/DemandManagement.tsx
@@ -256,7 +256,18 @@ const DemandManagement: React.FC = () => {
                             </div>
                         </Button>
                     </td>
-                    <td>{demand.customer.bpn}</td>
+                    {user?.role === 'SUPPLIER' ? (
+                        <>
+                            <td>{demand.customer.bpn}</td>
+                            <td>{demand.customer.companyName}</td>
+                        </>
+                    ) : null}
+                    {user?.role === 'CUSTOMER' ? (
+                        <>
+                            <td>{demand.supplier.bpn}</td>
+                            <td>{demand.supplier.companyName}</td>
+                        </>
+                    ) : null}
                     <td>{demand.materialNumberCustomer}</td>
                     <td>{demand.materialNumberSupplier}</td>
                     <td>

diff --git a/demand-capacity-mgmt-frontend/src/components/demands/DemandManagementTableHeaders.tsx b/demand-capacity-mgmt-frontend/src/components/demands/DemandManagementTableHeaders.tsx
@@ -21,6 +21,7 @@
  */
 
 import { BiCaretDown, BiCaretUp } from 'react-icons/bi';
+import { useUser } from '../../contexts/UserContext';
 
 type DemandsTableProps = {
   sortColumn: string | null;
@@ -31,18 +32,46 @@ type DemandsTableProps = {
 
 const DemandManagementTable: React.FC<DemandsTableProps> = ({ sortColumn, sortOrder, handleSort, demandItems }) => {
 
+  const { user } = useUser();
+
   return (
     <table className="table table-striped table-hover">
       <thead>
         <tr>
           <th></th>
           <th></th>
-          <th onClick={() => handleSort('customer.bpn')}>
-            Company Id{' '}
-            {sortColumn === 'customer.bpn' && sortOrder === 'asc' && <BiCaretUp />}
-            {sortColumn === 'customer.bpn' && sortOrder === 'desc' && <BiCaretDown />}
-            {!sortColumn && <i className="material-icons">...</i>}
-          </th>
+          {user?.role === 'SUPPLIER' ? (
+            <>
+              <th onClick={() => handleSort('customer.bpn')}>
+                Customer BPN{' '}
+                {sortColumn === 'customer.bpn' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'customer.bpn' && sortOrder === 'desc' && <BiCaretDown />}
+                {!sortColumn && <i className="material-icons">...</i>}
+              </th>
+              <th onClick={() => handleSort('customer.name')}>
+                Customer Name{' '}
+                {sortColumn === 'customer.name' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'customer.name' && sortOrder === 'desc' && <BiCaretDown />}
+                {!sortColumn && <i className="material-icons">...</i>}
+              </th>
+            </>
+          ) : null}
+          {user?.role === 'CUSTOMER' ? (
+            <>
+              <th onClick={() => handleSort('supplier.bpn')}>
+                Supplier BPN{' '}
+                {sortColumn === 'supplier.bpn' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'supplier.bpn' && sortOrder === 'desc' && <BiCaretDown />}
+                {!sortColumn && <i className="material-icons">...</i>}
+              </th>
+              <th onClick={() => handleSort('supplier.name')}>
+                Supplier Name{' '}
+                {sortColumn === 'supplier.name' && sortOrder === 'asc' && <BiCaretUp />}
+                {sortColumn === 'supplier.name' && sortOrder === 'desc' && <BiCaretDown />}
+                {!sortColumn && <i className="material-icons">...</i>}
+              </th>
+            </>
+          ) : null}
           <th onClick={() => handleSort('materialNumberCustomer')}>
             Material No. Customer{' '}
             {sortColumn === 'materialNumberCustomer' && sortOrder === 'asc' && <BiCaretUp />}

diff --git a/demand-capacity-mgmt-frontend/src/contexts/CompanyContextProvider.tsx b/demand-capacity-mgmt-frontend/src/contexts/CompanyContextProvider.tsx
@@ -40,6 +40,7 @@ interface CompanyContextData {
   companies: Company[];
   topCompanies: Company[];
   findCompanyByCompanyID: (companyID: string) => Company | undefined;
+  findCompanyNameByBpn: (bpn: string) => string | undefined;
 }
 
 export const CompanyContext = createContext<CompanyContextData | undefined>(undefined);
@@ -84,9 +85,13 @@ const CompanyContextProvider: React.FC<React.PropsWithChildren<{}>> = (props) =>
     return companies.find(company => company.id === companyID);
   };
 
+  const findCompanyNameByBpn = (bpn: string | undefined): string => {
+    const companyName = companies.find(company => company.bpn === bpn)?.companyName;
+    return companyName || 'N/A';
+  };
 
   return (
-    <CompanyContext.Provider value={{ companies, topCompanies, findCompanyByCompanyID }}>
+    <CompanyContext.Provider value={{ companies, topCompanies, findCompanyByCompanyID, findCompanyNameByBpn }}>
       {props.children}
     </CompanyContext.Provider>
   );