Skip to content

Commit

Permalink
Merge pull request #21 from catenax-ng/bugfix/DCMFOSS-117
Browse files Browse the repository at this point in the history 
Table data fixed
  • Loading branch information
@Ruskyy
Ruskyy authored Dec 15, 2023
2 parents b8d6d1f + aee2ed2 commit 7c60a98
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 34 deletions.
19 changes: 16 additions & 3 deletions demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,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, findCompanyNameByBpn } = useContext(CompanyContext)!;
const [favoriteCapacityGroups, setFavoriteCapacityGroups] = useState<string[]>([]);

const handleSort = (column: string) => {
Expand Down Expand Up @@ -197,9 +198,21 @@ const CapacityGroupsList: React.FC = () => {
</OverlayTrigger>
</td>
<td>{capacitygroup.name}</td>
<td>{capacitygroup.customerBPNL}</td>
<td>{capacitygroup.customerName}</td>
<td>{capacitygroup.supplierBNPL}</td>
{user?.role === 'SUPPLIER' && (
<>
<td>{capacitygroup.customerBPNL}</td>
<td>{capacitygroup.customerName}</td>
</>
)}

{user?.role === 'CUSTOMER' && (
<>
<td>{capacitygroup.supplierBNPL}</td>
<td>{findCompanyNameByBpn(capacitygroup.supplierBNPL)}</td>
</>
)}


<td>{capacitygroup.numberOfMaterials}</td>
<td>{capacitygroup.favoritedBy}</td>
<td>
Expand Down
45 changes: 30 additions & 15 deletions demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsTableHeaders.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,36 @@ const CapacityGroupsTable: React.FC<CapacityGroupsTableProps> = ({ sortColumn, s
{sortColumn === 'name' && sortOrder === 'asc' && <BiCaretUp />}
{sortColumn === 'name' && sortOrder === 'desc' && <BiCaretDown />}
</th>
<th onClick={() => handleSort('customerBPNL')}>
Customber BPNL
{sortColumn === 'customerBPNL' && sortOrder === 'asc' && <BiCaretUp />}
{sortColumn === 'customerBPNL' && sortOrder === 'desc' && <BiCaretDown />}
</th>
<th onClick={() => handleSort('customerName')}>
Customer Name
{sortColumn === 'customerName' && sortOrder === 'asc' && <BiCaretUp />}
{sortColumn === 'customerName' && sortOrder === 'desc' && <BiCaretDown />}
</th>
<th onClick={() => handleSort('supplierBNPL')}>
Supplier BPNL
{sortColumn === 'supplierBNPL' && sortOrder === 'asc' && <BiCaretUp />}
{sortColumn === 'supplierBNPL' && sortOrder === 'desc' && <BiCaretDown />}
</th>
{user?.role === 'SUPPLIER' && (
<>
<th onClick={() => handleSort('customerBPNL')}>
Customer BPNL
{sortColumn === 'customerBPNL' && sortOrder === 'asc' && <BiCaretUp />}
{sortColumn === 'customerBPNL' && sortOrder === 'desc' && <BiCaretDown />}
</th>
<th onClick={() => handleSort('customerName')}>
Customer Name
{sortColumn === 'customerName' && sortOrder === 'asc' && <BiCaretUp />}
{sortColumn === 'customerName' && sortOrder === 'desc' && <BiCaretDown />}
</th>
</>
)}

{user?.role === 'CUSTOMER' && (
<>
<th onClick={() => handleSort('supplierBNPL')}>
Supplier BPNL
{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')}>
# of Materials
{sortColumn === 'numberOfMaterials' && sortOrder === 'asc' && <BiCaretUp />}
Expand Down
16 changes: 15 additions & 1 deletion demand-capacity-mgmt-frontend/src/components/demands/DemandList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -299,7 +302,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>
Expand Down
44 changes: 37 additions & 7 deletions demand-capacity-mgmt-frontend/src/components/demands/DemandListTableHeaders.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
*/

import { BiCaretDown, BiCaretUp } from 'react-icons/bi';
import { useUser } from '../../contexts/UserContext';

type DemandsTableProps = {
sortColumn: string | null;
Expand All @@ -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 />}
Expand Down
13 changes: 12 additions & 1 deletion demand-capacity-mgmt-frontend/src/components/demands/DemandManagement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,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>
Expand Down
41 changes: 35 additions & 6 deletions demand-capacity-mgmt-frontend/src/components/demands/DemandManagementTableHeaders.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
*/

import { BiCaretDown, BiCaretUp } from 'react-icons/bi';
import { useUser } from '../../contexts/UserContext';

type DemandsTableProps = {
sortColumn: string | null;
Expand All @@ -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 />}
Expand Down
14 changes: 13 additions & 1 deletion demand-capacity-mgmt-frontend/src/contexts/CompanyContextProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ export interface Company {
interface CompanyContextData {
companies: Company[];
topCompanies: Company[];
findCompanyByCompanyID: (companyID: string) => Company | undefined;
findCompanyNameByBpn: (bpn: string) => string | undefined;

}

export const CompanyContext = createContext<CompanyContextData | undefined>(undefined);
Expand Down Expand Up @@ -78,8 +81,17 @@ const CompanyContextProvider: React.FC<React.PropsWithChildren<{}>> = (props) =>



const findCompanyByCompanyID = (companyID: string | undefined): Company | undefined => {
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 }}>
<CompanyContext.Provider value={{ companies, topCompanies, findCompanyByCompanyID, findCompanyNameByBpn }}>
{props.children}
</CompanyContext.Provider>
);
Expand Down

0 comments on commit 7c60a98

Please sign in to comment.