fix(table): conditional style with case sensitive field name

Author: Cuiyansong

frontend/src/app/components/ChartGraph/BasicTableChart/BasicTableChart.tsx

@@ -162,7 +162,7 @@ class BasicTableChart extends ReactChart {
     return {
       rowKey: 'id',
       pagination: tablePagination,
-      dataSource: chartDataSet.map(row => row.convertToObject()),
+      dataSource: chartDataSet,
       columns: tableColumns,
       summaryFn: this.getTableSummaryFn(
         settingConfigs,
@@ -171,6 +171,17 @@ class BasicTableChart extends ReactChart {
         aggregateConfigs,
         context,
       ),
+      onRow: (_, index) => {
+        const row = chartDataSet?.[index];
+        const rowData = mixedSectionConfigRows?.reduce(
+          (acc, cur, sectionIndex) => {
+            acc[chartDataSet.getFieldOriginKey(cur)] = row?.[sectionIndex];
+            return acc;
+          },
+          {},
+        );
+        return { index, rowData };
+      },
       components: this.getTableComponents(styleConfigs, widgetSpecialConfig),
       ...this.getAntdTableStyleOptions(styleConfigs, settingConfigs, context),
       onChange: (pagination, filters, sorter, extra) => {
@@ -500,29 +511,34 @@ class BasicTableChart extends ReactChart {
       },
       body: {
         cell: props => {
-          const { style, dataIndex, ...rest } = props;
+          const { style, key, rowData, ...rest } = props;
           const uid = props.uid;
           const [conditionStyle] = getStyles(
             getAllColumnListInfo,
             [uid, 'conditionStyle'],
             ['conditionStylePanel'],
           );
           const conditionalCellStyle = getCustomBodyCellStyle(
-            props,
+            props?.cellValue,
             conditionStyle,
           );
+          const sensitiveFieldName = Object.keys(rowData || {})?.[0];
           return (
             <TableComponentsTd
               {...rest}
               style={Object.assign(style || {}, conditionalCellStyle)}
-              isLinkCell={linkFields?.includes(dataIndex)}
-              isJumpCell={jumpField === dataIndex}
+              isLinkCell={linkFields?.includes(sensitiveFieldName)}
+              isJumpCell={jumpField === sensitiveFieldName}
             />
           );
         },
         row: props => {
           const { style, ...rest } = props;
-          const rowStyle = getCustomBodyRowStyle(props, allConditionStyle);
+          // NOTE: rowData is case sensitive row keys object
+          const rowStyle = getCustomBodyRowStyle(
+            props.rowData,
+            allConditionStyle,
+          );
           return <tr {...rest} style={Object.assign(style || {}, rowStyle)} />;
         },
         wrapper: props => {
@@ -633,8 +649,7 @@ class BasicTableChart extends ReactChart {
         return {
           sorter: true,
           title: getColumnRenderName(c),
-          dataIndex: chartDataSet.getFieldKey(c),
-          key: chartDataSet.getFieldKey(c),
+          dataIndex: chartDataSet.getFieldIndex(c),
           aggregate: c?.aggregate,
           colName,
           width: colMaxWidth,
@@ -655,16 +670,17 @@ class BasicTableChart extends ReactChart {
           onCell: (_, rowIndex) => {
             const row = chartDataSet[rowIndex];
             const cellValue = row.getCell(c);
-            const rawData = { [chartDataSet.getFieldOriginKey(c)]: cellValue };
+            const rowData = { [chartDataSet.getFieldOriginKey(c)]: cellValue };
             return {
               uid: c.uid,
               cellValue,
-              dataIndex: row.getFieldKey(c),
+              dataIndex: row.getFieldIndex(c),
+              rowData,
               ...this.registerTableCellEvents(
                 colName,
                 cellValue,
                 rowIndex,
-                rawData,
+                rowData,
                 c.aggregate,
               ),
             };
@@ -906,7 +922,7 @@ class BasicTableChart extends ReactChart {
     seriesName: string,
     value: any,
     dataIndex: number,
-    record: any,
+    rowData: any,
     aggOperator?: string,
   ) {
     const eventParams = this.createrEventParams({
@@ -916,7 +932,7 @@ class BasicTableChart extends ReactChart {
         format: undefined,
         name: seriesName,
         aggOperator,
-        rowData: record,
+        rowData,
         value: value,
       },
       seriesName, // column name/index

frontend/src/app/components/ChartGraph/BasicTableChart/conditionStyle.ts

@@ -1,3 +1,21 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { ConditionStyleFormValues } from 'app/components/FormGenerator/Customize/ConditionStylePanel';
 import { OperatorTypes } from 'app/components/FormGenerator/Customize/ConditionStylePanel/types';
 import { CSSProperties } from 'react';
@@ -17,20 +35,22 @@ const isMatchedTheCondition = (
       matchTheCondition = value !== conditionValues;
       break;
     case OperatorTypes.Contain:
-      matchTheCondition = (value as string).includes(conditionValues as string);
+      matchTheCondition = (value as string)?.includes(
+        conditionValues as string,
+      );
       break;
     case OperatorTypes.NotContain:
-      matchTheCondition = !(value as string).includes(
+      matchTheCondition = !(value as string)?.includes(
         conditionValues as string,
       );
       break;
     case OperatorTypes.In:
-      matchTheCondition = (conditionValues as (string | number)[]).includes(
+      matchTheCondition = (conditionValues as (string | number)[])?.includes(
         value,
       );
       break;
     case OperatorTypes.NotIn:
-      matchTheCondition = !(conditionValues as (string | number)[]).includes(
+      matchTheCondition = !(conditionValues as (string | number)[])?.includes(
         value,
       );
       break;
@@ -70,13 +90,6 @@ const isMatchedTheCondition = (
 const getTheSameRange = (list, type) =>
   list?.filter(item => item?.range === type);
 
-const getRowRecord = row => {
-  if (!row?.length) {
-    return {};
-  }
-  return row?.[0]?.props?.record || {};
-};
-
 const deleteUndefinedProps = props => {
   return Object.keys(props).reduce((acc, cur) => {
     if (props[cur] !== undefined || props[cur] !== null) {
@@ -87,14 +100,14 @@ const deleteUndefinedProps = props => {
 };
 
 export const getCustomBodyCellStyle = (
-  props: any,
+  cellValue: any,
   conditionStyle: ConditionStyleFormValues[],
 ): CSSProperties => {
   const currentConfigs = getTheSameRange(conditionStyle, 'cell');
   if (!currentConfigs?.length) {
     return {};
   }
-  const text = props.cellValue;
+  const text = cellValue;
   let cellStyle: CSSProperties = {};
 
   try {
@@ -112,7 +125,7 @@ export const getCustomBodyCellStyle = (
 };
 
 export const getCustomBodyRowStyle = (
-  props: any,
+  rowRecord: { [k in string]: any },
   conditionStyle: ConditionStyleFormValues[],
 ): CSSProperties => {
   const currentConfigs: ConditionStyleFormValues[] = getTheSameRange(
@@ -122,8 +135,6 @@ export const getCustomBodyRowStyle = (
   if (!currentConfigs?.length) {
     return {};
   }
-
-  const rowRecord = getRowRecord(props.children);
   let rowStyle: CSSProperties = {};
 
   try {
@@ -134,7 +145,7 @@ export const getCustomBodyRowStyle = (
         color: { background, textColor },
         target: { name },
       }) => {
-        rowStyle = isMatchedTheCondition(rowRecord[name], operator, value)
+        rowStyle = isMatchedTheCondition(rowRecord?.[name], operator, value)
           ? { backgroundColor: background, color: textColor }
           : rowStyle;
       },

frontend/src/app/types/ChartDataSet.d.ts

@@ -34,6 +34,8 @@ export interface IChartDataSetRow<T> extends Array<T> {
 export interface IChartDataSet<T> extends Array<IChartDataSetRow<T>> {
   getFieldKey(field: ChartDataSectionField): string;
 
+  getFieldOriginKey(field: ChartDataSectionField): string;
+
   getFieldIndex(field: ChartDataSectionField): number;
 
   sortBy(dataConfigs: ChartDataConfig[]): void;