4001 - Datatable use Datagrid - Headers

src/client/pages/Section/DataTable/Table/GridHead/GridHead.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { Col as TypeCol, Row as TypeRow, RowType, Table } from 'meta/assessment'
+import { RecordAssessmentData } from 'meta/data'
+
+import { useRenderCell } from './hooks/useRenderCell'
+
+type Props = {
+  assessmentName: string
+  data: RecordAssessmentData
+  headers: Array<string>
+  table: Table
+}
+
+const GridHead: React.FC<Props> = (props) => {
+  const { assessmentName, data, headers, table } = props
+
+  const renderCell = useRenderCell({ assessmentName, data, headers, table })
+  const rowsHeader = table.rows.filter((row) => row.props.type === RowType.header)
+
+  return (
+    <>
+      {rowsHeader.map((row: TypeRow, rowIndex: number) =>
+        row.cols.map((col: TypeCol, colIndex: number) => {
+          return renderCell({ col, colIndex, row, rowIndex })
+        })
+      )}
+    </>
+  )
+}
+
+export default GridHead

src/client/pages/Section/DataTable/Table/GridHead/OdpHeaderCell/OdpHeaderCell.scss

@@ -0,0 +1,14 @@
+@import 'src/client/style/partials';
+
+.table-grid__odp-cell.header {
+  font-weight: 700;
+  background-color: rgba($ui-accent, 10%);
+
+  .link {
+    text-decoration: underline;
+  }
+
+  .review-summary-status {
+    margin: 0 $spacing-xxxs;
+  }
+}

src/client/pages/Section/DataTable/Table/GridHead/OdpHeaderCell/OdpHeaderCell.tsx

@@ -0,0 +1,79 @@
+import './OdpHeaderCell.scss'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
+import classNames from 'classnames'
+
+import { Routes } from 'meta/routes'
+import { TooltipId } from 'meta/tooltip'
+
+import { useAssessment, useCycle } from 'client/store/assessment'
+import { useOdpReviewSummary } from 'client/store/ui/review/hooks'
+import { useCountryIso } from 'client/hooks'
+import { useIsPrintRoute } from 'client/hooks/useIsRoute'
+import { DataCell } from 'client/components/DataGrid'
+import ReviewSummaryIndicator from 'client/components/ReviewSummaryIndicator'
+
+type Props = {
+  className: string
+  gridColumn: string
+  gridRow: string
+  lastCol?: boolean
+  odpId: number
+  odpYear: string
+  sectionName: string
+}
+
+const OdpHeaderCell: React.FC<Props> = (props) => {
+  const { className, gridColumn, gridRow, lastCol, odpId, odpYear, sectionName } = props
+
+  const assessment = useAssessment()
+  const countryIso = useCountryIso()
+  const cycle = useCycle()
+
+  const { print } = useIsPrintRoute()
+  const { t } = useTranslation()
+
+  const reviewStatus = useOdpReviewSummary(odpId)
+
+  if (print) {
+    return (
+      <DataCell className={className} gridColumn={gridColumn} gridRow={gridRow}>
+        {odpYear}
+      </DataCell>
+    )
+  }
+
+  return (
+    <DataCell
+      className={classNames(className, 'table-grid__odp-cell')}
+      gridColumn={gridColumn}
+      gridRow={gridRow}
+      header
+      lastCol={lastCol}
+    >
+      <Link
+        className="link"
+        data-tooltip-content={t('nationalDataPoint.clickOnNDP')}
+        data-tooltip-id={TooltipId.info}
+        to={Routes.OriginalDataPoint.generatePath({
+          assessmentName: assessment.props.name,
+          countryIso,
+          cycleName: cycle.name,
+          sectionName,
+          year: odpYear,
+        })}
+      >
+        {odpYear}
+        <ReviewSummaryIndicator status={reviewStatus} />
+      </Link>
+    </DataCell>
+  )
+}
+
+OdpHeaderCell.defaultProps = {
+  lastCol: false,
+}
+
+export default OdpHeaderCell

src/client/pages/Section/DataTable/Table/GridHead/OdpHeaderCell/index.ts

@@ -0,0 +1 @@
+export { default } from './OdpHeaderCell'

src/client/pages/Section/DataTable/Table/GridHead/hooks/useRenderCell.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Col, Cols, Row, Table } from 'meta/assessment'
+import { RecordAssessmentData } from 'meta/data'
+
+import { useAssessmentCountry } from 'client/store/area'
+import { useCycle } from 'client/store/assessment'
+import { useOriginalDataPointYears } from 'client/store/data'
+import { useShowOriginalDatapoints } from 'client/store/ui/assessmentSection'
+import { DataCell } from 'client/components/DataGrid'
+import OdpHeaderCell from 'client/pages/Section/DataTable/Table/GridHead/OdpHeaderCell'
+import { getODPColSpan } from 'client/pages/Section/DataTable/Table/utils/getODPColSpan'
+import { getODPHeader } from 'client/pages/Section/DataTable/Table/utils/getODPHeader'
+
+type Props = {
+  assessmentName: string
+  data: RecordAssessmentData
+  headers: Array<string>
+  table: Table
+}
+
+type RenderCellProps = {
+  col: Col
+  colIndex: number
+  row: Row
+  rowIndex: number
+}
+
+type Returned = (props: RenderCellProps) => React.ReactNode
+
+export const useRenderCell = (props: Props): Returned => {
+  const { assessmentName, data, headers, table } = props
+
+  const country = useAssessmentCountry()
+  const cycle = useCycle()
+  const odpYears = useOriginalDataPointYears()
+  const showOdp = useShowOriginalDatapoints()
+
+  const { odp: isOdpTable } = table.props
+  const { t } = useTranslation()
+
+  return useCallback<Returned>(
+    (props: RenderCellProps) => {
+      const { col, colIndex, row, rowIndex } = props
+      const { index } = col.props
+      const { colSpan: defaultColSpan, rowSpan } = Cols.getStyle({ col, cycle })
+      const columnName = headers[colIndex]
+
+      const odpHeader = getODPHeader({ col, columnName, country, odpYears, showOdp, table })
+
+      let colSpan = defaultColSpan
+      if (isOdpTable && !defaultColSpan) {
+        colSpan = getODPColSpan({ assessmentName, cycleName: cycle.name, data, headers, table })
+      }
+
+      const isHeaderLeft = (index === 0 && rowIndex === 0) || row.props?.readonly
+      const className = `table-grid__data-cell ${isHeaderLeft ? 'left' : ''}`
+
+      const gridColumn = `span ${colSpan}`
+      const gridRow = `span ${rowSpan}`
+      const lastCol = colIndex === row.cols.length - 1
+
+      if (odpHeader) {
+        return (
+          <OdpHeaderCell
+            key={col.uuid}
+            className={className}
+            gridColumn={gridColumn}
+            gridRow={gridRow}
+            lastCol={lastCol}
+            odpId={odpHeader.id}
+            odpYear={odpHeader.year}
+            sectionName={table.props.name}
+          />
+        )
+      }
+      return (
+        <DataCell
+          key={col.uuid}
+          className={className}
+          gridColumn={gridColumn}
+          gridRow={gridRow}
+          header
+          lastCol={lastCol}
+        >
+          {Cols.getLabel({ cycle, col, t })}
+        </DataCell>
+      )
+    },
+    [assessmentName, country, cycle, data, headers, isOdpTable, odpYears, showOdp, t, table]
+  )
+}

src/client/pages/Section/DataTable/Table/GridHead/index.ts

@@ -0,0 +1 @@
+export { default } from './GridHead'

src/client/pages/Section/DataTable/Table/GridRow/RowData/Cell/Cell.scss

@@ -18,6 +18,9 @@
 //}
 
 .table-grid__data-cell {
+  align-items: center;
+  display: flex;
+  justify-content: end;
   padding: 10px;
   text-align: right;
 

src/client/pages/Section/DataTable/Table/GridRow/RowData/CellHeader/CellHeader.scss

@@ -1,10 +1,10 @@
 @import 'src/client/style/partials';
 
 .table-grid__data-cell.header {
-  text-align: center;
+  justify-content: space-around;
 
   &.left {
-    text-align: left;
+    justify-content: start;
   }
 
   &.category {
@@ -25,6 +25,6 @@
   &.subcategory1,
   &.subcategory2 {
     font-weight: 400;
-    text-align: left;
+    justify-content: start;
   }
 }

src/client/pages/Section/DataTable/Table/Table.tsx

@@ -16,6 +16,7 @@ import ButtonTableExport from 'client/components/ButtonTableExport'
 import { DataGrid } from 'client/components/DataGrid'
 import ButtonCopyValues from 'client/pages/Section/DataTable/Table/ButtonCopyValues'
 import ButtonTableClear from 'client/pages/Section/DataTable/Table/ButtonTableClear'
+import GridHead from 'client/pages/Section/DataTable/Table/GridHead'
 import GridRow from 'client/pages/Section/DataTable/Table/GridRow'
 import TableBody from 'client/pages/Section/DataTable/Table/TableBody'
 import TableHead from 'client/pages/Section/DataTable/Table/TableHead'
@@ -64,6 +65,8 @@ const Table: React.FC<Props> = (props) => {
         </div>
 
         <DataGrid className="table-grid" gridTemplateColumns={`minmax(auto, 400px) repeat(${headers.length},1fr)`}>
+          <GridHead assessmentName={assessmentName} data={data} headers={headers} table={table} />
+
           {rowsData.map((row, index) => (
             <GridRow
               key={row.uuid}

src/client/pages/Section/DataTable/Table/utils/getODPHeader.ts

@@ -0,0 +1,33 @@
+import { Country } from 'meta/area'
+import { Col, Table } from 'meta/assessment'
+
+type OdpYear = {
+  id: number
+  year: string
+}
+
+type Props = {
+  col: Col
+  columnName: string
+  country: Country
+  odpYears: Array<OdpYear>
+  showOdp: boolean
+  table: Table
+}
+
+type Returned = OdpYear | undefined
+
+export const getODPHeader = (props: Props): Returned => {
+  const { col, columnName, country, odpYears, showOdp, table } = props
+
+  let odpHeader: Returned
+  const isODPVisible = showOdp && table.props.odp && !col.props.labels
+  if (isODPVisible) {
+    odpHeader = odpYears?.find((odp) => odp.year === columnName)
+  }
+  if (table.props.name === 'forestCharacteristics' && !country.props.forestCharacteristics.useOriginalDataPoint) {
+    odpHeader = undefined
+  }
+
+  return odpHeader
+}