refactor color naming

EyeSeeTea · Jul 8, 2024 · de6212c · de6212c
1 parent 2dd88a3
commit de6212c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 22 deletions.
diff --git a/src/webapp/components/table/statistic-table/ColoredCell.tsx b/src/webapp/components/table/statistic-table/ColoredCell.tsx
@@ -1,25 +1,30 @@
 import React from "react";
 import styled from "styled-components";
 import { TableCell } from "@material-ui/core";
+import { CellStatus, CellStatusValues } from "../../../hooks/useTableCell";
 
 type ColoredCellProps = {
     value: string;
-    color?: string;
-    boldUnderline?: boolean;
+    color?: CellStatusValues;
 };
 
-const StyledTableCell = styled(TableCell)<{ color?: string; boldUnderline?: boolean }>`
-    background-color: ${props =>
-        props.color ? props.theme.palette.common[props.color] : "initial"};
-    color: ${props => (props.color ? props.theme.palette.common.white : "initial")};
-    text-decoration: ${props => (props.boldUnderline ? "underline" : "none")};
-    font-weight: ${props => (props.boldUnderline || props.color ? "600" : "initial")};
-`;
+const cellStatusColor = {
+    [CellStatus.Valid]: "green",
+    [CellStatus.Alert]: "red",
+    [CellStatus.Warning]: "orange",
+};
 
-export const ColoredCell: React.FC<ColoredCellProps> = ({ value, color, boldUnderline }) => {
+export const ColoredCell: React.FC<ColoredCellProps> = ({ value, color }) => {
     return (
-        <StyledTableCell color={color} boldUnderline={boldUnderline}>
+        <StyledTableCell color={color ? cellStatusColor[color] : undefined}>
             {value}
         </StyledTableCell>
     );
 };
+
+const StyledTableCell = styled(TableCell)<{ color?: string }>`
+    background-color: ${props =>
+        props.color ? props.theme.palette.common[props.color] : "initial"};
+    color: ${props => (props.color ? props.theme.palette.common.white : "initial")};
+    font-weight: ${props => (props.color ? "600" : "initial")};
+`;
diff --git a/src/webapp/components/table/statistic-table/StatisticTable.tsx b/src/webapp/components/table/statistic-table/StatisticTable.tsx
@@ -106,14 +106,25 @@ export const StatisticTable: React.FC<StatisticTableProps> = React.memo(
                         <TableBody>
                             {filteredRows.map((row, rowIndex) => (
                                 <TableRow key={rowIndex}>
-                                    {columns.map((column, columnIndex) => (
-                                        <ColoredCell
-                                            key={`${rowIndex}-${column.value}`}
-                                            value={row[column.value] || ""}
-                                            color={getCellColor(row[column.value], column.value)}
-                                            boldUnderline={columnIndex === 0}
-                                        />
-                                    ))}
+                                    {columns.map((column, columnIndex) =>
+                                        calculateColumns.includes(column.value) ? (
+                                            <ColoredCell
+                                                key={`${rowIndex}-${column.value}`}
+                                                value={row[column.value] || ""}
+                                                color={getCellColor(
+                                                    row[column.value],
+                                                    column.value
+                                                )}
+                                            />
+                                        ) : (
+                                            <StyledTableCell
+                                                key={`${rowIndex}-${column.value}`}
+                                                boldUnderline={columnIndex === 0}
+                                            >
+                                                {row[column.value] || ""}
+                                            </StyledTableCell>
+                                        )
+                                    )}
                                 </TableRow>
                             ))}
                             <MedianRow
@@ -166,6 +177,11 @@ const HeadTableCell = styled(TableCell)<{ $dark?: boolean }>`
     font-weight: 600;
 `;
 
+const StyledTableCell = styled(TableCell)<{ boldUnderline?: boolean }>`
+    text-decoration: ${props => (props.boldUnderline ? "underline" : "none")};
+    font-weight: ${props => (props.boldUnderline ? "600" : "initial")};
+`;
+
 const Container = styled.div`
     display: flex;
     justify-content: space-between;

diff --git a/src/webapp/hooks/useTableCell.ts b/src/webapp/hooks/useTableCell.ts
@@ -2,20 +2,29 @@ import { useCallback } from "react";
 import { Maybe } from "../../utils/ts-utils";
 import _ from "../../domain/entities/generic/Collection";
 
+export const enum CellStatus {
+    Valid = "valid",
+    Alert = "alert",
+    Warning = "warning",
+}
+export type CellStatusValues = `${CellStatus}`;
+
 export const useTableCell = (
     editRiskAssessmentColumns: string[],
     columnRules: { [key: string]: number }
 ) => {
     const getCellColor = useCallback(
         (cellValue: Maybe<string>, column: string) => {
             if (!cellValue) {
-                return editRiskAssessmentColumns.includes(column) ? "orange" : undefined;
+                return editRiskAssessmentColumns.includes(column) ? CellStatus.Warning : undefined;
             }
 
             const value = Number(cellValue);
 
             if (editRiskAssessmentColumns.includes(column)) {
-                return columnRules.respond7d && value > columnRules.respond7d ? "red" : undefined;
+                return columnRules.respond7d && value > columnRules.respond7d
+                    ? CellStatus.Alert
+                    : undefined;
             }
 
             const rule = columnRules[column];
@@ -24,7 +33,7 @@ export const useTableCell = (
                 return undefined;
             }
 
-            return value <= rule ? "green" : "red";
+            return value <= rule ? CellStatus.Valid : CellStatus.Alert;
         },
         [editRiskAssessmentColumns, columnRules]
     );