4001 - Datatable use Datagrid - Cell borders (#4199)

* 4001 - Calculate spanning cells borders * 4001 - Fix OdpHeaderCell header style in print view * 4001 - Add CellHeader key props * 4001 - Remove unnecessary col count check
openforis · Jan 7, 2025 · a2f5774 · a2f5774
1 parent 03ff5ac
commit a2f5774
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 24 deletions.
diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.tsx b/src/client/pages/Section/DataTable/Table/GridHeadCell/OdpHeaderCell/OdpHeaderCell.tsx
@@ -38,7 +38,7 @@ const OdpHeaderCell: React.FC<Props> = (props) => {
 
   if (print) {
     return (
-      <DataCell className={className} gridColumn={gridColumn} gridRow={gridRow}>
+      <DataCell className={classNames(className, 'header')} gridColumn={gridColumn} gridRow={gridRow}>
         {odpYear}
       </DataCell>
     )

diff --git a/src/client/pages/Section/DataTable/Table/RowData/CellHeader/CellHeader.tsx b/src/client/pages/Section/DataTable/Table/RowData/CellHeader/CellHeader.tsx
@@ -18,13 +18,15 @@ type Props = {
   firstCol?: boolean
   firstHighlightCol?: boolean
   highlighted?: boolean
+  lastCol?: boolean
   lastHighlightCol?: boolean
   lastRow?: boolean
   row: Row
 }
 
 const CellHeader: React.FC<Props> = (props) => {
-  const { assessmentName, col, firstCol, firstHighlightCol, highlighted, lastHighlightCol, lastRow, row } = props
+  const { assessmentName, col, firstCol, firstHighlightCol, highlighted, lastCol, lastHighlightCol, lastRow, row } =
+    props
 
   const { t } = useTranslation()
   const cycle = useCycle()
@@ -57,6 +59,7 @@ const CellHeader: React.FC<Props> = (props) => {
       gridRow={gridRow}
       header
       highlighted={highlighted}
+      lastCol={lastCol}
       lastHighlightCol={lastHighlightCol}
       lastRow={lastRow}
       style={colHeaderStyle}
@@ -87,6 +90,7 @@ CellHeader.defaultProps = {
   firstCol: false,
   firstHighlightCol: false,
   highlighted: false,
+  lastCol: false,
   lastHighlightCol: false,
   lastRow: false,
 }

diff --git a/src/client/pages/Section/DataTable/Table/RowData/RowData.tsx b/src/client/pages/Section/DataTable/Table/RowData/RowData.tsx
@@ -1,7 +1,10 @@
 import React from 'react'
 
-import { ColType } from 'meta/assessment'
+import { Objects } from 'utils/objects'
 
+import { Cols, ColType } from 'meta/assessment'
+
+import { useCycle } from 'client/store/assessment'
 import { DataRow } from 'client/components/DataGrid'
 import { RowProps } from 'client/pages/Section/DataTable/Table/types'
 
@@ -11,33 +14,51 @@ import Cell from './Cell'
 import CellHeader from './CellHeader'
 
 const RowData: React.FC<RowProps> = (props) => {
-  const { data, assessmentName, lastRow, sectionName, table, row, disabled } = props
+  const { assessmentName, data, disabled, lastRow, row, rowCount, rowIndex, sectionName, table } = props
 
   const { cols } = row
   const colHeader = [ColType.placeholder, ColType.header].includes(cols[0].props.colType) ? cols[0] : undefined
-  const colsData = colHeader ? cols.slice(1, cols.length) : cols
   const actions = useRowActions({ colHeader, row, sectionName, table })
   const highlightRange = useHighlightRange({ cols })
+  const cycle = useCycle()
 
   return (
     <DataRow actions={actions} highlightRange={highlightRange}>
-      {colHeader && <CellHeader assessmentName={assessmentName} col={colHeader} lastRow={lastRow} row={row} />}
-
-      {colsData.map((col, index) => (
-        <Cell
-          key={col.uuid}
-          assessmentName={assessmentName}
-          col={col}
-          data={data}
-          disabled={disabled}
-          lastCol={index === cols.length - 1}
-          lastRow={lastRow}
-          row={row}
-          rowIndex={Number(row.props.index)}
-          sectionName={sectionName}
-          table={table}
-        />
-      ))}
+      {cols.map((col, colIndex) => {
+        const lastCol = colIndex === cols.length - 1
+
+        const { rowSpan = 1 } = Cols.getStyle({ col, cycle })
+        const lastSpanningRow = rowSpan !== 1 && rowSpan + rowIndex === rowCount
+
+        if (!Objects.isEmpty(colHeader) && colIndex === 0) {
+          return (
+            <CellHeader
+              key={col.uuid}
+              assessmentName={assessmentName}
+              col={colHeader}
+              lastCol={lastCol}
+              lastRow={lastRow || lastSpanningRow}
+              row={row}
+            />
+          )
+        }
+
+        return (
+          <Cell
+            key={col.uuid}
+            assessmentName={assessmentName}
+            col={col}
+            data={data}
+            disabled={disabled}
+            lastCol={lastCol}
+            lastRow={lastRow || lastSpanningRow}
+            row={row}
+            rowIndex={Number(row.props.index)}
+            sectionName={sectionName}
+            table={table}
+          />
+        )
+      })}
     </DataRow>
   )
 }

diff --git a/src/client/pages/Section/DataTable/Table/RowNoticeMessage/RowNoticeMessage.tsx b/src/client/pages/Section/DataTable/Table/RowNoticeMessage/RowNoticeMessage.tsx
@@ -8,7 +8,7 @@ import { useCycle } from 'client/store/assessment'
 import { DataCell, DataRow } from 'client/components/DataGrid'
 import { RowProps } from 'client/pages/Section/DataTable/Table/types'
 
-const RowNoticeMessage: React.FC<RowProps> = (props) => {
+const RowNoticeMessage: React.FC<Omit<RowProps, 'rowCount' | 'rowIndex'>> = (props) => {
   const { row } = props
 
   const { t } = useTranslation()
@@ -18,7 +18,7 @@ const RowNoticeMessage: React.FC<RowProps> = (props) => {
   return (
     <DataRow>
       {cols.map((col) => {
-        const message = Cols.getLabel({ cycle, col, t })
+        const message = Cols.getLabel({ col, cycle, t })
 
         if (!message) return null
 

diff --git a/src/client/pages/Section/DataTable/Table/Table.tsx b/src/client/pages/Section/DataTable/Table/Table.tsx
@@ -101,6 +101,8 @@ const Table: React.FC<Props> = (props) => {
               disabled={disabled}
               lastRow={index === rowsData.length - 1}
               row={row}
+              rowCount={rowsHeader.length + rowsData.length}
+              rowIndex={rowsHeader.length + index}
               sectionName={sectionName}
               table={table}
             />

diff --git a/src/client/pages/Section/DataTable/Table/types.ts b/src/client/pages/Section/DataTable/Table/types.ts
@@ -7,6 +7,8 @@ export type RowProps = {
   disabled: boolean
   lastRow?: boolean
   row: Row
+  rowCount: number
+  rowIndex: number
   sectionName: string
   table: Table
 }