Merge pull request #426 from akaene/fix/typescript-error-2

Fix/typescript error 2
kbss-cvut · Jun 19, 2024 · 0e7f2dd · 0e7f2dd
2 parents 3ef836c + d79263d
commit 0e7f2dd
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 25 deletions.
diff --git a/src/components/dashboard/content/list/FaultTreeAndSystemOverviewCardsList.tsx b/src/components/dashboard/content/list/FaultTreeAndSystemOverviewCardsList.tsx
@@ -8,7 +8,7 @@ import { ROUTES } from "@utils/constants";
 import { extractFragment } from "@services/utils/uriIdentifierUtils";
 import { useNavigate } from "react-router-dom";
 import { System } from "@models/systemModel";
-import { getModifiedSystemsList } from "@utils/utils";
+import { getReorderedSystemsListbySystem } from "@utils/utils";
 
 const borderDefault = "1px solid #E0E0E0";
 const borderHover = "1px solid #60A3D9";
@@ -18,7 +18,7 @@ interface FaultTreeOverviewCardsListProps {
   systems?: System[];
   handleFaultTreeContextMenu?: (evt: any, faultTree: FaultTree) => void;
   handleSystemContextMenu?: (evt: any, system: System) => void;
-  selectedSystem: string | null;
+  selectedSystem: System | null;
 }
 
 interface CardProps {
@@ -27,6 +27,7 @@ interface CardProps {
   onOpenMenu: (e: any) => void;
   border: string;
   index: number;
+  systemIri?: string;
 }
 
 const FaultTreeAndSystemOverviewCardsList: FC<FaultTreeOverviewCardsListProps> = ({
@@ -43,10 +44,10 @@ const FaultTreeAndSystemOverviewCardsList: FC<FaultTreeOverviewCardsListProps> =
 
   const [hoveredIndex, setHoveredIndex] = useState(null);
 
-  const modifiedSystemsList = getModifiedSystemsList(systems, selectedSystem);
+  const modifiedSystemsList = getReorderedSystemsListbySystem(systems, selectedSystem);
 
-  const Card: FC<CardProps> = ({ name, onRedirect, onOpenMenu, border, index }) => {
-    const bgColor = name === selectedSystem ? theme.sidePanel.colors.hover : "transparent";
+  const Card: FC<CardProps> = ({ name, onRedirect, onOpenMenu, border, index, systemIri }) => {
+    const bgColor = systemIri === selectedSystem.iri ? theme.sidePanel.colors.hover : "transparent";
     return (
       <Grid item xs={12} sm={12} md={6} lg={4}>
         <Box
@@ -81,6 +82,7 @@ const FaultTreeAndSystemOverviewCardsList: FC<FaultTreeOverviewCardsListProps> =
                 key={`faultTree-card-${index}`}
                 index={index}
                 name={faultTree.name}
+                systemIri={faultTree?.system?.iri}
                 onRedirect={() => navigate(routePath)}
                 onOpenMenu={(e: any) => handleFaultTreeContextMenu(e, faultTree)}
                 border={border}
@@ -96,6 +98,7 @@ const FaultTreeAndSystemOverviewCardsList: FC<FaultTreeOverviewCardsListProps> =
                 key={`system-card-${index}`}
                 index={index}
                 name={system.name}
+                systemIri={system.iri}
                 onRedirect={() => navigate(routePath)}
                 onOpenMenu={(e: any) => handleSystemContextMenu(e, system)}
                 border={border}

diff --git a/src/components/dashboard/content/list/FaultTreeAndSystemOverviewTable.tsx b/src/components/dashboard/content/list/FaultTreeAndSystemOverviewTable.tsx
@@ -8,7 +8,7 @@ import { useNavigate } from "react-router-dom";
 import { ROUTES } from "@utils/constants";
 import { extractFragment } from "@services/utils/uriIdentifierUtils";
 import { System } from "@models/systemModel";
-import { getModifiedSystemsList, getModifiedFaultTreesList, formatDate } from "@utils/utils";
+import { getFilteredFaultTreesBySystem, getReorderedSystemsListbySystem, formatDate } from "@utils/utils";
 import { useSelectedSystem } from "@hooks/useSelectedSystem";
 
 const faultTreeTableHeadCells = [
@@ -45,11 +45,11 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
   const theme = useTheme();
 
   const [selectedSystem, setSelectedSystem] = useSelectedSystem();
-  const modifiedSystemsList = getModifiedSystemsList(systems, selectedSystem);
-  const modifiedFaultTreesList = getModifiedFaultTreesList(faultTrees, selectedSystem);
+  const modifiedSystemsList = getReorderedSystemsListbySystem(systems, selectedSystem);
+  const modifiedFaultTreesList = getFilteredFaultTreesBySystem(faultTrees, selectedSystem);
 
   const redirectToPath = (routePath: string, system) => {
-    setSelectedSystem(selectedSystem);
+    setSelectedSystem(system);
     navigate(routePath);
   };
 
@@ -116,7 +116,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
             {systems &&
               modifiedSystemsList.map((system, rowIndex) => {
                 const routePath = ROUTES.SYSTEMS + `/${extractFragment(system.iri)}`;
-                const bgColor = system.name === selectedSystem?.name ? theme.sidePanel.colors.hover : "transparent";
+                const bgColor = system?.iri === selectedSystem?.iri ? theme.sidePanel.colors.hover : "transparent";
                 return (
                   <TableRow key={rowIndex} className={classes.noBorder} style={{ backgroundColor: bgColor }}>
                     <TableCell className={classes.systemFirstColumn}>{system.name}</TableCell>

diff --git a/src/components/dashboard/content/list/FaultTreeOverview.tsx b/src/components/dashboard/content/list/FaultTreeOverview.tsx
@@ -13,7 +13,7 @@ import FaultTreeDialog from "@components/dialog/faultTree/FaultTreeDialog";
 import { Box, Button } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { SELECTED_VIEW } from "@utils/constants";
-import {useSelectedSystem} from "@hooks/useSelectedSystem";
+import { useSelectedSystem } from "@hooks/useSelectedSystem";
 
 const FaultTreeOverview = () => {
   const { t } = useTranslation();
@@ -71,13 +71,13 @@ const FaultTreeOverview = () => {
 
       {selectedView === "table" ? (
         <FaultTreeAndSystemOverviewTable
-          selectedSystem={selectedSystem?.iri}
+          selectedSystem={selectedSystem}
           faultTrees={faultTrees}
           handleFaultTreeContextMenu={handleContextMenu}
         />
       ) : (
         <FaultTreeAndSystemOverviewCardsList
-          selectedSystem={selectedSystem?.iri}
+          selectedSystem={selectedSystem}
           faultTrees={faultTrees}
           handleFaultTreeContextMenu={handleContextMenu}
         />
@@ -94,10 +94,7 @@ const FaultTreeOverview = () => {
         handleCloseDialog={() => setEditDialogOpen(false)}
         faultTree={contextMenuSelectedTree}
       />
-      <FaultTreeDialog
-        open={createFaultTreeDialogOpen}
-        handleCloseDialog={() => setCreateFaultTreeDialogOpen(false)}
-      />
+      <FaultTreeDialog open={createFaultTreeDialogOpen} handleCloseDialog={() => setCreateFaultTreeDialogOpen(false)} />
     </Box>
   );
 };

diff --git a/src/components/dashboard/content/list/SystemOverview.tsx b/src/components/dashboard/content/list/SystemOverview.tsx
@@ -73,7 +73,7 @@ const SystemOverview = () => {
         <FaultTreeAndSystemOverviewTable systems={systems} handleSystemContextMenu={handleContextMenu} />
       ) : (
         <FaultTreeAndSystemOverviewCardsList
-          selectedSystem={selectedSystem?.iri}
+          selectedSystem={selectedSystem}
           systems={systems}
           handleSystemContextMenu={handleContextMenu}
         />

diff --git a/src/models/systemModel.tsx b/src/models/systemModel.tsx
@@ -14,6 +14,7 @@ export const CONTEXT = Object.assign({}, ctx, COMPONENT_CONTEXT, ABSTRACT_CONTEX
 
 export interface System extends AbstractModel {
   name: string;
+  iri?: string;
   components?: Component[];
   globalOperationalDataFilter: OperationalDataFilter;
   operationalDataFilter: OperationalDataFilter;

diff --git a/src/utils/utils.tsx b/src/utils/utils.tsx
@@ -61,10 +61,19 @@ export const asArray = (objectOrArray) => {
   return [objectOrArray];
 };
 
-const getModifiedList = <T extends { name: string }>(items: T[], selected: System): T[] => {
+/**
+ * Return reordered list of entities so that selected entity will become first,
+ * while order of the remaining entities won't change.
+ * In case there is no selected entity specified, return the original list.
+ * Entities are identified by attribute `iri`.
+ *
+ * @param items List of items.
+ * @param selected Selected item or null.
+ */
+const getReorderedEntities = <E extends { iri?: string }>(items: E[], selected: E | null): E[] => {
   if (!items) return [];
 
-  const selectedIndex = items.findIndex((item) => item.iri === selected);
+  const selectedIndex = items.findIndex((item) => item?.iri && item.iri === selected?.iri);
 
   if (selectedIndex !== -1) {
     const selectedItem = items[selectedIndex];
@@ -74,12 +83,23 @@ const getModifiedList = <T extends { name: string }>(items: T[], selected: Syste
   }
 };
 
-export const getModifiedSystemsList = (systems: System[], selected: System) => getModifiedList(systems, selected);
+/**
+ * Reorders a list of systems so that the selected system becomes first.
+ *
+ * @param systems List of systems.
+ * @param selected Selected system.
+ */
+export const getReorderedSystemsListbySystem = (systems: System[], selected: System): System[] =>
+  getReorderedEntities(systems, selected);
 
-export const getModifiedFaultTreesList = (faultTrees: FaultTree[], selected: System) => {
-  if (!faultTrees || !selected) return faultTrees;
-  return faultTrees.filter((f) => f?.system?.iri == selected.iri);
-};
+/**
+ * Filters a list of fault trees to include only those associated with the selected system.
+ *
+ * @param faultTrees List of fault trees.
+ * @param selected Selected system.
+ */
+export const getFilteredFaultTreesBySystem = (faultTrees: FaultTree[], selected: System): FaultTree[] =>
+  faultTrees?.filter((faultTree) => faultTree?.system?.iri === selected.iri) || [];
 
 export const formatDate = (dateString: string) => {
   if (!dateString) return "-";