4001 - Add first col sticky

openforis · Jan 9, 2025 · c605cee · c605cee
1 parent 0842f6d
commit c605cee
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 18 deletions.
diff --git a/src/client/pages/Print/Header/Header.scss b/src/client/pages/Print/Header/Header.scss
@@ -22,7 +22,7 @@ $toolbarHeight: $spacing-l;
   position: fixed;
   top: 0;
   width: 100dvw;
-  z-index: 1;
+  z-index: 2;
 }
 
 @media print {

diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/GridHeadCell.tsx b/src/client/pages/Section/DataTable/Table/GridHeadCell/GridHeadCell.tsx
@@ -11,7 +11,7 @@ import { useGridHeadCellProps } from './hooks/useGridHeadCellProps'
 import { GridHeadCellProps } from './types'
 
 const GridHeadCell: React.FC<GridHeadCellProps> = (props) => {
-  const { col, table } = props
+  const { col, firstCol, table } = props
 
   const cycle = useCycle()
   const { className, gridColumn, gridRow, lastCol, odpHeader } = useGridHeadCellProps(props)
@@ -34,7 +34,15 @@ const GridHeadCell: React.FC<GridHeadCellProps> = (props) => {
   }
 
   return (
-    <DataCell key={col.uuid} className={className} gridColumn={gridColumn} gridRow={gridRow} header lastCol={lastCol}>
+    <DataCell
+      key={col.uuid}
+      className={className}
+      firstCol={firstCol}
+      gridColumn={gridColumn}
+      gridRow={gridRow}
+      header
+      lastCol={lastCol}
+    >
       {Cols.getLabel({ cycle, col, t })}
     </DataCell>
   )

diff --git a/src/client/pages/Section/DataTable/Table/GridHeadCell/types.ts b/src/client/pages/Section/DataTable/Table/GridHeadCell/types.ts
@@ -6,6 +6,7 @@ export type GridHeadCellProps = {
   col: Col
   colIndex: number
   data: RecordAssessmentData
+  firstCol: boolean
   headers: Array<string>
   row: Row
   rowIndex: number

diff --git a/src/client/pages/Section/DataTable/Table/Table.scss b/src/client/pages/Section/DataTable/Table/Table.scss
@@ -5,6 +5,12 @@
   line-height: 19px;
   overflow-x: auto;
   width: 100%;
+
+  .data-cell.firstCol {
+    left: 0;
+    position: sticky;
+    z-index: 1;
+  }
 }
 
 .table-grid-actions {
@@ -14,6 +20,7 @@
 
 .table-grid-container {
   margin-bottom: 28px;
+  overflow-x: auto;
 
   &.secondary-table {
     margin-top: $spacing-xs;

diff --git a/src/client/pages/Section/DataTable/Table/Table.tsx b/src/client/pages/Section/DataTable/Table/Table.tsx
@@ -39,7 +39,7 @@ const Table: React.FC<Props> = (props) => {
 
   const gridRef = useRef<HTMLDivElement>(null)
 
-  const { headers, noticeMessages, rowsData, rowsHeader, table, withReview } = useParsedTable({
+  const { firstHeaderRowSpan, headers, noticeMessages, rowsData, rowsHeader, table, withReview } = useParsedTable({
     assessmentName,
     data,
     table: tableProps,
@@ -73,19 +73,23 @@ const Table: React.FC<Props> = (props) => {
       >
         {rowsHeader.map((row, rowIndex) => (
           <React.Fragment key={row.uuid}>
-            {row.cols.map((col, colIndex) => (
-              <GridHeadCell
-                key={col.uuid}
-                assessmentName={assessmentName}
-                col={col}
-                colIndex={colIndex}
-                data={data}
-                headers={headers}
-                row={row}
-                rowIndex={rowIndex}
-                table={table}
-              />
-            ))}
+            {row.cols.map((col, colIndex) => {
+              const firstCol = colIndex === 0 && (rowIndex === 0 || rowIndex >= firstHeaderRowSpan)
+              return (
+                <GridHeadCell
+                  key={col.uuid}
+                  assessmentName={assessmentName}
+                  col={col}
+                  colIndex={colIndex}
+                  data={data}
+                  firstCol={firstCol}
+                  headers={headers}
+                  row={row}
+                  rowIndex={rowIndex}
+                  table={table}
+                />
+              )
+            })}
             {withActions && <div />}
           </React.Fragment>
         ))}

diff --git a/src/client/pages/Section/DataTable/Table/hooks/useParsedTable.ts b/src/client/pages/Section/DataTable/Table/hooks/useParsedTable.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 
-import { AssessmentName, Row, RowType, Table } from 'meta/assessment'
+import { AssessmentName, Cols, Row, RowType, Table } from 'meta/assessment'
 import { RecordAssessmentData } from 'meta/data'
 
 import { useCycle } from 'client/store/assessment'
@@ -16,6 +16,7 @@ type Props = {
 }
 
 type Returned = {
+  firstHeaderRowSpan: number
   headers: Array<string>
   noticeMessages: Array<Row>
   rowsData: Array<Row>
@@ -57,7 +58,11 @@ export const useParsedTable = (props: Props): Returned => {
       withReview = withReview || row.props.withReview?.[cycle.uuid]
     })
 
+    const firstColHeader = rowsHeader[0]?.cols[0]
+    const { rowSpan: firstHeaderRowSpan } = Cols.getStyle({ col: firstColHeader, cycle })
+
     return {
+      firstHeaderRowSpan,
       headers,
       noticeMessages,
       rowsData,