Highlight feature (#35)

New prop to highlight certain rows based on conditions.
ex of highlight:
const highlight: HighlightInterface = {
  compareField: "contactPlanningNextDate",
  operation: "!=",
  compareValue: new Date()
}

---------

Co-authored-by: Andrea Aliberti <andrea.aliberti@neolution.ch>

Author: ita-alibb

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- the prop `rowHighlight` to all tables. Check `RowHighlightInterface` for prop definition. Set condition for which a row should be highlighted. Possibility to set custom style for highlights
+
 ## [2.3.2] - 2023-03-08
 
 ### Added

src/lib/DataTable/DataTable.tsx

@@ -25,6 +25,7 @@ export function DataTableStaticRouted<T, TRouteNames>({
   possiblePageItemCounts,
   predefinedItemsPerPage,
   rowStyle,
+  rowHighlight,
   showPaging = false,
   tableTitle,
   hideIfEmpty = false,
@@ -45,6 +46,7 @@ export function DataTableStaticRouted<T, TRouteNames>({
         possiblePageItemCounts={possiblePageItemCounts}
         predefinedItemsPerPage={predefinedItemsPerPage}
         rowStyle={rowStyle}
+        rowHighlight={rowHighlight}
         showPaging={showPaging}
         tableClassName={tableClassName}
         tableStyle={tableStyle}
@@ -62,6 +64,7 @@ export function DataTableStatic<T>({
   possiblePageItemCounts,
   predefinedItemsPerPage,
   rowStyle,
+  rowHighlight,
   showPaging = false,
   tableTitle,
   hideIfEmpty = false,
@@ -82,6 +85,7 @@ export function DataTableStatic<T>({
         possiblePageItemCounts={possiblePageItemCounts}
         predefinedItemsPerPage={predefinedItemsPerPage}
         rowStyle={rowStyle}
+        rowHighlight={rowHighlight}
         showPaging={showPaging}
         tableClassName={tableClassName}
         tableStyle={tableStyle}
@@ -101,6 +105,7 @@ export function DataTable<T, TFilter>({
   predefinedItemsPerPage,
   query,
   rowStyle,
+  rowHighlight,
   showPaging = true,
   predefinedFilter = undefined,
   handlers,
@@ -121,6 +126,7 @@ export function DataTable<T, TFilter>({
       possiblePageItemCounts={possiblePageItemCounts}
       predefinedItemsPerPage={predefinedItemsPerPage}
       rowStyle={rowStyle}
+      rowHighlight={rowHighlight}
       showPaging={showPaging}
       predefinedFilter={predefinedFilter}
       handlers={handlers}

src/lib/DataTable/DataTableInterfaces.ts

@@ -1,13 +1,22 @@
-/* eslint max-lines: ["error", 250]  */ // Increased max-lines due to the addition of definitions going above the predefined limit.
+/* eslint max-lines: ["error", 260]  */ // Increased max-lines due to the addition of definitions going above the predefined limit.
+import { CSSProperties } from "react";
 import { ActionsPosition, CellFunction, ColumnFilterType, ListSortDirection, QueryFunction, RouteParams } from "./DataTableTypes";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 export type RowStyleType<T> = (key: any, record: T) => React.CSSProperties;
 
+export interface RowHighlightInterface<T> {
+  compareField: Extract<keyof T, string>;
+  operation: "<" | ">" | "==" | "!=";
+  compareValue: number | Date;
+  customStyle?: CSSProperties;
+}
+
 export interface CommonDataTableProps<T> {
   rowStyle?: RowStyleType<T>;
   tableClassName?: string;
   tableStyle?: React.CSSProperties;
+  rowHighlight?: RowHighlightInterface<T>;
 }
 
 export interface DataTableRoutedProps<T, TFilter, TRouteName> extends CommonDataTableProps<T> {

src/lib/DataTable/DataTableRouted.tsx

@@ -33,6 +33,7 @@ export function DataTableRouted<T, TFilter, TRouteNames>({
   tableStyle,
   asc = true,
   orderBy,
+  rowHighlight,
 }: DataTableRoutedProps<T, TFilter, TRouteNames>) {
   const [queryResult, setQueryResult] = useState<TableQueryResult<T>>(data);
   const [filterState, setFilterState] = useState<FilterPageState>({
@@ -171,6 +172,7 @@ export function DataTableRouted<T, TFilter, TRouteNames>({
                 actions={actions}
                 key={getDeepValue(record, keyField)}
                 rowStyle={rowStyle}
+                rowHighlight={rowHighlight}
                 actionsPosition={actionsPosition}
               />
             ))

src/lib/DataTableHeader/DataTableRow.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable complexity */
-import React, { useState } from "react";
+import React, { CSSProperties, useState } from "react";
 import { DateHandler } from "@neolution-ch/react-pattern-ui";
-import { DataTableColumnDescription, DataTableRoutedActions, RowStyleType } from "../DataTable/DataTableInterfaces";
+import { DataTableColumnDescription, DataTableRoutedActions, RowHighlightInterface, RowStyleType } from "../DataTable/DataTableInterfaces";
 import { getDeepValue } from "../Utils/DeepValue";
 import { ActionsCell } from "../DataTable/Actions/ActionsCell";
 import { ActionsPosition } from "../DataTable/DataTableTypes";
@@ -12,6 +12,7 @@ interface DataTableRowProps<T, TRouteNames> {
   columns: DataTableColumnDescription<T>[];
   actions?: DataTableRoutedActions<T, TRouteNames>;
   rowStyle?: RowStyleType<T>;
+  rowHighlight?: RowHighlightInterface<T>;
   actionsPosition?: ActionsPosition;
 }
 
@@ -22,14 +23,62 @@ export function DataTableRow<T, TRouteNames>({
   columns,
   actions,
   rowStyle,
+  rowHighlight,
   actionsPosition,
 }: DataTableRowProps<T, TRouteNames>) {
   const keyValue = getDeepValue(record, keyField);
   const [collapsed, setCollapsed] = useState(true);
 
+  const operator_table = {
+    ">": function (a: number | Date, b: number | Date) {
+      return a > b;
+    },
+    "<": function (a: number | Date, b: number | Date) {
+      return a < b;
+    },
+    "==": function (a: number | Date, b: number | Date) {
+      return a == b;
+    },
+    "!=": function (a: number | Date, b: number | Date) {
+      return a != b;
+    },
+  };
+
+  function getStyle(rowObjectT: T, rowHighlight?: RowHighlightInterface<T>): CSSProperties | undefined {
+    const defaultStyle: CSSProperties = {
+      backgroundColor: "rgba(255,0,0,0.7)",
+      color: "white",
+    };
+
+    if (!rowHighlight) {
+      return undefined;
+    }
+
+    let selectedValue: number | Date | undefined;
+    if (typeof rowObjectT[rowHighlight.compareField] == "number") {
+      selectedValue = rowObjectT[rowHighlight.compareField] as unknown as number;
+    } else if (typeof rowObjectT[rowHighlight.compareField] == "string") {
+      selectedValue = new Date(rowObjectT[rowHighlight.compareField] as unknown as string);
+    }
+
+    if (selectedValue == null) {
+      return undefined;
+    }
+
+    if (typeof selectedValue != "number" && isNaN(selectedValue?.getDate())) {
+      return undefined;
+    }
+
+    if (operator_table[rowHighlight.operation](selectedValue, rowHighlight.compareValue)) {
+      return rowHighlight.customStyle ?? defaultStyle;
+    }
+
+    return undefined;
+  }
+
   return (
     <React.Fragment>
-      <tr key={`${keyValue}_row`} style={rowStyle ? rowStyle(keyValue, record) : undefined}>
+      <tr key={`${keyValue}_row`} style={{ ...(rowStyle ? rowStyle(keyValue, record) : undefined) }}>
         {actionsPosition === ActionsPosition.Left && (
           <ActionsCell collapsed={collapsed} setCollapsed={setCollapsed} actions={actions} keyValue={keyValue} record={record} />
         )}
@@ -42,23 +91,23 @@ export function DataTableRow<T, TRouteNames>({
             column.cellStyle instanceof Function
               ? column.cellStyle({ key: keyValue, row: record, value: deepValue })
               : column.cellStyle ?? undefined;
-
+          const cellStyle = { ...getStyle(record, rowHighlight), ...style };
           if (column.enumValues && !Number.isNaN(deepValueInt) && column.enumValues.filter((c) => c.value === deepValueInt).length > 0)
             return (
-              <td key={key} style={style}>
+              <td key={key} style={cellStyle}>
                 {column.enumValues.filter((c) => c.value === deepValueInt)[0].text}
               </td>
             );
 
           if (column.formatter)
             return (
-              <td key={key} style={style}>
+              <td key={key} style={cellStyle}>
                 {column.formatter({ key: keyValue, row: record, value: deepValue })}
               </td>
             );
 
           return (
-            <td key={key} style={style}>
+            <td key={key} style={cellStyle}>
               {column.dateTimeFormat ? DateHandler.getDateFormattedWithDefault(deepValue, column.dateTimeFormat, "-") : deepValue}
             </td>
           );
@@ -74,6 +123,7 @@ export function DataTableRow<T, TRouteNames>({
           <DataTableRow
             key={`${keyValue}_subrow_${getDeepValue(subRow, keyField)}`}
             keyField={keyField}
+            rowHighlight={rowHighlight}
             columns={actions?.collapse?.columns || columns}
             record={subRow}
             actionsPosition={actionsPosition}