Skip to content

Commit

Permalink
Merge branch 'Demo_branch' of https://github.com/catenax-ng/tx-demand…
Browse files Browse the repository at this point in the history 
…-capacity-mgmt into Demo_branch
  • Loading branch information
@OSousa117
OSousa117 committed Oct 27, 2023
2 parents 8172396 + dae5242 commit d91f4f7
Show file tree
Hide file tree
Showing 15 changed files with 1,000 additions and 361 deletions.
94 changes: 59 additions & 35 deletions demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,33 +21,35 @@
*/


import React, { useContext, useMemo, useState, useEffect } from 'react';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { Button, Col, Dropdown, Form, OverlayTrigger, Row, Tooltip } from 'react-bootstrap';
import { FaCopy, FaEllipsisV, FaEye, FaRedo, FaStar } from 'react-icons/fa';
import { useUser } from '../../contexts/UserContext';
import { FaCopy, FaEllipsisV, FaEye, FaRedo } from 'react-icons/fa';
import { LuStar } from 'react-icons/lu';
import { CapacityGroupContext } from '../../contexts/CapacityGroupsContextProvider';
import { FavoritesContext } from "../../contexts/FavoritesContextProvider";
import { useUser } from '../../contexts/UserContext';
import '../../index.css';
import { CapacityGroupProp } from '../../interfaces/capacitygroup_interfaces';
import { EventType } from '../../interfaces/event_interfaces';
import {
FavoriteType,
SingleCapacityGroupFavoriteResponse
} from "../../interfaces/favorite_interface";
import { getUserGreeting } from '../../interfaces/user_interface';
import { LoadingMessage } from '../common/LoadingMessages';
import Pagination from '../common/Pagination';
import Search from '../common/Search';
import CapacityGroupsTable from './CapacityGroupsTable';
import {
FavoriteType,
SingleCapacityGroupFavoriteResponse
} from "../../interfaces/Favorite_interface";
import {FavoritesContext} from "../../contexts/FavoritesContextProvider";


const CapacityGroupsList: React.FC = () => {
const { user } = useUser();
const { capacitygroups, isLoading, fetchCapacityGroupsWithRetry } = useContext(CapacityGroupContext)!;

const [filteredCapacityGroups, setFilteredCapacityGroups] = useState<CapacityGroupProp[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [currentPage, setCurrentPage] = useState(1);
const [sortColumn, setSortColumn] = useState('');
const [sortOrder, setSortOrder] = useState('');
const [sortOrder, setSortOrder] = useState('asc');
const [capacitygroupsPerPage, setcapacitygroupsPerPage] = useState(20); // Set the default value here
const { addFavorite, fetchFavoritesByType, deleteFavorite } = useContext(FavoritesContext)!;
const [favoriteCapacityGroups, setFavoriteCapacityGroups] = useState<string[]>([]);
Expand Down Expand Up @@ -94,11 +96,13 @@ const CapacityGroupsList: React.FC = () => {
}, [capacitygroups]);


const filteredcapacitygroups = useMemo(() => {
let sortedcapacitygroups = [...capacitygroups];
const isCapacityGroupFavorite = (capacityGroupID: string) => favoriteCapacityGroups.includes(capacityGroupID);

useMemo(() => {
let filteredcapacitygroups = [...capacitygroups];

if (searchQuery !== '') {
sortedcapacitygroups = sortedcapacitygroups.filter((capacitygroup) =>
filteredcapacitygroups = filteredcapacitygroups.filter((capacitygroup) =>
capacitygroup.internalId.toString().includes(searchQuery.toLowerCase()) ||
capacitygroup.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
capacitygroup.customerBPNL.toString().includes(searchQuery.toLowerCase()) ||
Expand All @@ -110,8 +114,21 @@ const CapacityGroupsList: React.FC = () => {
);
}

// Separate favorited and unfavorited demands
const favoriteCapacityGroups = filteredcapacitygroups.filter((capacitygroup) => isCapacityGroupFavorite(capacitygroup.internalId));
const unfavoritedCapacityGroups = filteredcapacitygroups.filter((capacitygroup) => !isCapacityGroupFavorite(capacitygroup.internalId));

// Sort favorited demands by changedAt timestamp in descending order
//favoriteCapacityGroups.sort((a, b) => new Date(b.changedAt).getTime() - new Date(a.changedAt).getTime());

// Sort unfavorited demands by changedAt timestamp in descending order
//unfavoritedCapacityGroups.sort((a, b) => new Date(b.changedAt).getTime() - new Date(a.changedAt).getTime());

// Concatenate favorited and unfavorited demands
const sortedCapacityGroups = [...favoriteCapacityGroups, ...unfavoritedCapacityGroups];

if (sortColumn !== '') {
sortedcapacitygroups.sort((a, b) => {
sortedCapacityGroups.sort((a, b) => {
const aValue = String(a[sortColumn]);
const bValue = String(b[sortColumn]);

Expand All @@ -120,21 +137,21 @@ const CapacityGroupsList: React.FC = () => {

if (sortOrder === 'desc') {
// Reverse the array if the sort order is descending
sortedcapacitygroups.reverse();
sortedCapacityGroups.reverse();
}
}

return sortedcapacitygroups;
setFilteredCapacityGroups(sortedCapacityGroups);
}, [capacitygroups, searchQuery, sortColumn, sortOrder]);

const slicedcapacitygroups = useMemo(() => {
const indexOfLastCapacityGroup = currentPage * capacitygroupsPerPage;
const indexOfFirstCapacityGroup = indexOfLastCapacityGroup - capacitygroupsPerPage;
return filteredcapacitygroups.slice(indexOfFirstCapacityGroup, indexOfLastCapacityGroup);
}, [filteredcapacitygroups, currentPage, capacitygroupsPerPage]);
return filteredCapacityGroups.slice(indexOfFirstCapacityGroup, indexOfLastCapacityGroup);
}, [filteredCapacityGroups, currentPage, capacitygroupsPerPage]);

const totalPagesNum = useMemo(() => Math.ceil(filteredcapacitygroups.length / capacitygroupsPerPage), [
filteredcapacitygroups,
const totalPagesNum = useMemo(() => Math.ceil(filteredCapacityGroups.length / capacitygroupsPerPage), [
filteredCapacityGroups,
capacitygroupsPerPage,
]);

Expand All @@ -143,19 +160,26 @@ const CapacityGroupsList: React.FC = () => {
slicedcapacitygroups.map((capacitygroup) => (
<tr key={capacitygroup.internalId}>
<td>
<FaStar
<span className='inlinefav'>
<LuStar
className={favoriteCapacityGroups.includes(capacitygroup.internalId) ? "text-warning" : "text-muted"}
opacity={favoriteCapacityGroups.includes(capacitygroup.internalId) ? "1" : "0.2"}
onClick={() => toggleFavorite(capacitygroup.internalId)}
size={25}
/>
/>
</span>
</td>
<td>
<Button href={`/details/${capacitygroup.internalId}`} target='new-tab' variant="outline-primary" >
<div style={{ display: "flex", justifyContent: "center" }}>
<FaEye size={20} />
</div>
</Button>
<OverlayTrigger
placement="top"
overlay={<Tooltip id={`tooltip-copy-${capacitygroup.internalId}-open`}>Go to Details</Tooltip>}
>
<Button href={`/details/${capacitygroup.internalId}`} target='new-tab' variant="outline-primary" >
<div style={{ display: "flex", justifyContent: "center" }}>
<FaEye size={20} />
</div>
</Button>
</OverlayTrigger>
</td>
<td>
<OverlayTrigger
Expand Down Expand Up @@ -193,14 +217,14 @@ const CapacityGroupsList: React.FC = () => {
Down
</span>
) :
capacitygroup.linkStatus === EventType.GENERAL_EVENT ? (
<span className="badge rounded-pill text-bg-success" id="tag-ok">
General
</span>
)
capacitygroup.linkStatus === EventType.GENERAL_EVENT ? (
<span className="badge rounded-pill text-bg-success" id="tag-ok">
General
</span>
)
: (
<span className="badge rounded-pill text-bg-secondary">N/A</span>
)}
<span className="badge rounded-pill text-bg-secondary">N/A</span>
)}
</td>
<td>
<Dropdown>
Expand Down Expand Up @@ -256,7 +280,7 @@ const CapacityGroupsList: React.FC = () => {
pages={totalPagesNum}
setCurrentPage={setCurrentPage}
currentItems={slicedcapacitygroups}
items={filteredcapacitygroups}
items={filteredCapacityGroups}
/>
<div className="col-sm">
<div className="float-end">
Expand Down
132 changes: 73 additions & 59 deletions demand-capacity-mgmt-frontend/src/components/demands/DemandList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,21 @@
* ********************************************************************************
*/

import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
import {Button, Col, Dropdown, Form, Row} from 'react-bootstrap';
import {FaCopy, FaEllipsisV, FaInfoCircle, FaSearch, FaStar, FaTrashAlt} from 'react-icons/fa';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { Button, Col, Dropdown, Form, Row } from 'react-bootstrap';
import { FaCopy, FaEllipsisV, FaInfoCircle, FaSearch, FaTrashAlt } from 'react-icons/fa';
import { LuStar } from 'react-icons/lu';
import CapacityGroupsProvider from '../../contexts/CapacityGroupsContextProvider';
import {DemandContext} from '../../contexts/DemandContextProvider';
import {FavoritesContext} from "../../contexts/FavoritesContextProvider";
import {FavoriteType, MaterialDemandFavoriteResponse} from "../../interfaces/Favorite_interface";
import { DemandContext } from '../../contexts/DemandContextProvider';
import { FavoritesContext } from "../../contexts/FavoritesContextProvider";
import UnitsofMeasureContextContextProvider from '../../contexts/UnitsOfMeasureContextProvider';
import {DemandProp, DemandSeries, DemandSeriesValue} from '../../interfaces/demand_interfaces';
import {EventType} from '../../interfaces/event_interfaces';
import { DemandProp, DemandSeries, DemandSeriesValue } from '../../interfaces/demand_interfaces';
import { EventType } from '../../interfaces/event_interfaces';
import { FavoriteType, MaterialDemandFavoriteResponse } from "../../interfaces/favorite_interface";
import CapacityGroupAddToExisting from '../capacitygroup/CapacityGroupAddToExisting';
import CapacityGroupWizardModal from '../capacitygroup/CapacityGroupWizardModal';
import DangerConfirmationModal, {ConfirmationAction} from '../common/DangerConfirmationModal';
import {LoadingMessage} from '../common/LoadingMessages';
import DangerConfirmationModal, { ConfirmationAction } from '../common/DangerConfirmationModal';
import { LoadingMessage } from '../common/LoadingMessages';
import Pagination from '../common/Pagination';
import DemandDetailsModal from './DemandDetailsModal';
import DemandListTable from './DemandListTable';
Expand Down Expand Up @@ -72,27 +73,28 @@ const DemandList: React.FC<{
const [selectedDemands, setSelectedDemands] = useState<DemandProp[]>([]);

const [currentPage, setCurrentPage] = useState(1);//Its updated from showWizard
const [sortColumn, setSortColumn] = useState<keyof DemandProp>('changedAt');
const [sortColumn, setSortColumn] = useState<keyof DemandProp | null>(null);
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');


const [demandsPerPage, setDemandsPerPage] = useState(6); //Only show 5 items by default
const [filteredDemands, setFilteredDemands] = useState<DemandProp[]>([]);
const fetchFavorites = async () => {
try {
const favorites = await fetchFavoritesByType(FavoriteType.MATERIAL_DEMAND);
console.log(favorites)
if (favorites && favorites.materialDemands) {
setFavoriteDemands(favorites.materialDemands.map((fav: MaterialDemandFavoriteResponse) => fav.id));
}
} catch (error) {
console.error('Error fetching favorites by type in DemandList:', error);
try {
const favorites = await fetchFavoritesByType(FavoriteType.MATERIAL_DEMAND);
console.log(favorites)
if (favorites && favorites.materialDemands) {
setFavoriteDemands(favorites.materialDemands.map((fav: MaterialDemandFavoriteResponse) => fav.id));
}
} catch (error) {
console.error('Error fetching favorites by type in DemandList:', error);
}
};

useEffect(() => {
setShowWizardModal(showWizard || false);
fetchDemandProps();
fetchFavorites();
setShowWizardModal(showWizard || false);
fetchDemandProps();
fetchFavorites();
}, [showWizard]);


Expand Down Expand Up @@ -169,11 +171,13 @@ const DemandList: React.FC<{

const handleCloseDetails = () => setShowDetailsModal(false);

const isDemandFavorited = (demandId: string) => favoriteDemands.includes(demandId);

useMemo(() => {
let sortedDemands = [...demandprops];
let filteredDemands = [...demandprops];

if (searchQuery !== '') {
sortedDemands = sortedDemands.filter((demand) =>
filteredDemands = filteredDemands.filter((demand) =>
demand.materialDescriptionCustomer.toLowerCase().includes(searchQuery.toLowerCase()) ||
demand.id.toString().includes(searchQuery.toLowerCase()) ||
demand.customer.bpn.toString().toLowerCase().includes(searchQuery.toLowerCase()) ||
Expand All @@ -182,29 +186,37 @@ const DemandList: React.FC<{
);
}

// Separate favorited and unfavorited demands
const favoritedDemands = filteredDemands.filter((demand) => isDemandFavorited(demand.id));
const unfavoritedDemands = filteredDemands.filter((demand) => !isDemandFavorited(demand.id));

// Sort favorited demands by changedAt timestamp in descending order
favoritedDemands.sort((a, b) => new Date(b.changedAt).getTime() - new Date(a.changedAt).getTime());

// Sort unfavorited demands by changedAt timestamp in descending order
unfavoritedDemands.sort((a, b) => new Date(b.changedAt).getTime() - new Date(a.changedAt).getTime());

// Concatenate favorited and unfavorited demands
const sortedDemands = [...favoritedDemands, ...unfavoritedDemands];

if (sortColumn) {
// Sort the concatenated array by the specified column
sortedDemands.sort((a, b) => {
const aValue = a[sortColumn];
const bValue = b[sortColumn];

if (sortColumn === 'changedAt') {
const timestampA = aValue instanceof Date ? aValue.getTime() : typeof aValue === 'string' ? new Date(aValue).getTime() : 0;
const timestampB = bValue instanceof Date ? bValue.getTime() : typeof bValue === 'string' ? new Date(bValue).getTime() : 0;

return sortOrder === 'asc' ? timestampB - timestampA : timestampA - timestampB;
} else {
// For other columns, perform string or numeric comparison
if (typeof aValue === 'string' && typeof bValue === 'string') {
// Sort strings alphabetically
return aValue.localeCompare(bValue, undefined, { sensitivity: 'base' });
} else if (typeof aValue === 'number' && typeof bValue === 'number') {
// Sort numbers numerically
return aValue - bValue;
}

// If the types are not string or number, return 0 (no sorting)
return 0;
// For other columns, perform string or numeric comparison
if (typeof aValue === 'string' && typeof bValue === 'string') {
// Sort strings alphabetically
return aValue.localeCompare(bValue, undefined, { sensitivity: 'base' });
} else if (typeof aValue === 'number' && typeof bValue === 'number') {
// Sort numbers numerically
return aValue - bValue;
}

// If the types are not string or number, return 0 (no sorting)
return 0;

});

if (sortOrder === 'desc') {
Expand All @@ -214,7 +226,7 @@ const DemandList: React.FC<{
}

setFilteredDemands(sortedDemands);
}, [demandprops, searchQuery]);
}, [demandprops, searchQuery, sortColumn, sortOrder]);

const slicedDemands = useMemo(() => {
// Use filteredDemandsByEventTypes instead of filteredDemands for slicing and rendering
Expand Down Expand Up @@ -247,15 +259,15 @@ const DemandList: React.FC<{
);

const toggleFavorite = async (demandId: string) => {
if (favoriteDemands.includes(demandId)) {
await deleteFavorite(demandId)
setFavoriteDemands(prev => prev.filter(id => id !== demandId));
} else {
await addFavorite(demandId, FavoriteType.MATERIAL_DEMAND)
setFavoriteDemands(prev => [...prev, demandId]);
}
fetchFavorites();
fetchDemandProps();
if (favoriteDemands.includes(demandId)) {
await deleteFavorite(demandId)
setFavoriteDemands(prev => prev.filter(id => id !== demandId));
} else {
await addFavorite(demandId, FavoriteType.MATERIAL_DEMAND)
setFavoriteDemands(prev => [...prev, demandId]);
}
fetchFavorites();
fetchDemandProps();
};


Expand All @@ -271,14 +283,16 @@ const DemandList: React.FC<{
checked={selectedDemands.includes(demand)} // Check if the demand is in the selectedDemands array
/>
</td>
<td>
<FaStar
className={favoriteDemands.includes(demand.id) ? "text-warning" : "text-muted"}
opacity={favoriteDemands.includes(demand.id) ? "1" : "0.2"}
onClick={() => toggleFavorite(demand.id)}
size={25}
/>
</td>
<td>
<span className='inlinefav'>
<LuStar
className={favoriteDemands.includes(demand.id) ? "text-warning" : "text-muted"}
opacity={favoriteDemands.includes(demand.id) ? "1" : "0.2"}
onClick={() => toggleFavorite(demand.id)}
size={25}
/>
</span>
</td>
<td>
<Button data-toggle="modal" onClick={() => handleDetails(demand)} variant="outline-primary" >
<div style={{ display: "flex", justifyContent: "center" }}>
Expand Down
Loading

0 comments on commit d91f4f7

Please sign in to comment.