Ability to see and remove extra cells (#549)

* Fixed React rule of hooks violation

* Bootstrapped extra columns

* Added typing note

* Added extra fields rendering

* Use proper datagrid types

* Show extra cell value

* Skip virtual extra cells on the server

* Don't allow deleting row number

* Removed non needed change

client/components/Editors/Table/columns.tsx

@@ -1,10 +1,9 @@
 import LightTooltip from '../../Parts/Tooltips/Light'
+import type { TypeColumn } from '@inovua/reactdatagrid-community/types'
 import * as helpers from '../../../helpers'
 import * as types from '../../../types'
-import { useTheme } from '@mui/material/styles'
 
-// TODO: remove colors hard-coding
-// TODO: use proper InovuaDatagrid types
+// TODO: remove colors hard-coding (declare them in settings.ts and use in theme/here)
 
 export function createColumns(
   schema: types.ISchema,
@@ -15,32 +14,32 @@ export function createColumns(
   const errorIndex = helpers.createErrorIndex(report)
   const changeIndex = helpers.createChangeIndex(history)
 
-  const rowNumberColumn = {
+  // Row number column
+
+  const rowNumberColumn: IColumn = {
     name: '_rowNumber',
     showColumnMenuTool: false,
     sortable: false,
     header: '',
     type: 'number',
     width: 60,
     editable: false,
-    textAlign: 'center' as any,
-    headerAlign: 'center' as any,
+    textAlign: 'center',
+    headerAlign: 'center',
     headerProps: { style: { backgroundColor: '#c5cae0' } },
-    onRender: (cellProps: any) => {
+    onRender: (cellProps) => {
       cellProps.style.background = '#EBEDF7'
       // cellProps.style.fontWeight = 'bold'
       cellProps.style.color = '#aaa'
     },
   }
 
-  const theme = useTheme()
+  // Data columns
 
-  const dataColumns = []
-  for (const field of schema.fields) {
-    // TODO: fix this on ther server side -- schema should not have hidden fields
-    // Otherwise the _rowNumber and _rowValid are displayed on the table
-    if (field.name === '_rowNumber' || field.name === '_rowValid') continue
-    let header = field.title || field.name
+  const dataColumns: IColumn[] = []
+  const dataFields = getDataFields({ schema, report })
+  for (const field of dataFields) {
+    let header = field.title ?? field.name
     const errors = errorIndex.label[field.name]
     if (errors) {
       const error = errors[0]
@@ -51,13 +50,15 @@ export function createColumns(
       name: field.name,
       header,
       type: ['integer', 'number'].includes(field.type) ? 'number' : 'string',
+      editable: !field.isExtra,
       headerProps:
         field.name in errorIndex.label
-          ? { style: { color: 'white', background: theme.palette.OKFNRed400.main } }
+          ? // It's not possible to use `useTheme` inside useMemo so we hard-code the color for now
+            { style: { color: 'white', background: '#FF7170' } }
           : field.name === selection?.columnName
           ? { style: { color: '#ed6c02' } }
           : undefined,
-      render: (context: any) => {
+      render: (context) => {
         const { cellProps, data } = context
         let { value } = context
         const rowNumber = data._rowNumber
@@ -108,5 +109,49 @@ export function createColumns(
       },
     })
   }
+
   return [rowNumberColumn, ...dataColumns]
 }
+
+export function getDataFields(props: { schema: types.ISchema; report?: types.IReport }) {
+  const task = props.report?.tasks[0]
+  const fields: IDataField[] = []
+
+  for (const field of props.schema.fields) {
+    // TODO: fix this on ther server side -- schema should not have hidden fields
+    // Otherwise the _rowNumber and _rowValid are displayed on the table
+    if (field.name === '_rowNumber' || field.name === '_rowValid') continue
+    fields.push({
+      name: field.name,
+      type: field.type,
+      title: field.title,
+    })
+  }
+
+  const extraCellErrors = task?.errors.filter((e) => e.type === 'extra-cell')
+  const extraFieldNumbers = new Set(extraCellErrors?.map((e) => e.fieldNumber))
+  for (const fieldNumber of extraFieldNumbers) {
+    if (!fieldNumber || fields[fieldNumber]) continue
+    fields.push({
+      name: `_fieldNumber${fieldNumber}`,
+      type: 'string',
+      title: '',
+      isExtra: true,
+    })
+  }
+
+  return fields
+}
+
+type IDataField = {
+  name: string
+  type: string
+  title?: string
+  isExtra?: boolean
+}
+
+// It fixes the native TypeColumn type to match the docs and actual behavior
+type IColumn = TypeColumn & {
+  showColumnMenuTool?: boolean
+  onRender?: (cellProps: any) => void
+}

client/helpers/report.ts

@@ -19,7 +19,8 @@ export function createErrorIndex(report?: types.IReport) {
       errorIndex.row[rowKey] = errorIndex.row[rowKey] || []
       errorIndex.row[rowKey].push(error)
     } else {
-      const cellKey = `${error.rowNumber},${error.fieldName}`
+      const fieldName = error.fieldName || `_fieldNumber${error.fieldNumber}`
+      const cellKey = `${error.rowNumber},${fieldName}`
       errorIndex.cell[cellKey] = errorIndex.cell[cellKey] || []
       errorIndex.cell[cellKey].push(error)
     }

client/store/actions/table.ts

@@ -238,7 +238,9 @@ export async function deleteMultipleCells(cells: types.ICellSelection) {
   if (!table || !grid) return
 
   // Don't add multiple cells update if no cells are selected
-  if (!cells || !Object.keys(cells).length) return
+  if (!cells || !Object.keys(cells).length) {
+    return
+  }
 
   const cellChanges = []
 
@@ -247,9 +249,19 @@ export async function deleteMultipleCells(cells: types.ICellSelection) {
     const rowNumber = parseInt(row)
     const column = key.substring(key.indexOf(',') + 1, key.length)
 
+    // Don't allow deleting row number
+    if (column === '_rowNumber') {
+      continue
+    }
+
     cellChanges.push({ rowNumber, fieldName: column, value: '' })
   }
 
+  // Exit if no changes
+  if (!cellChanges.length) {
+    return
+  }
+
   const change: types.IChange = {
     type: 'multiple-cells-update',
     cells: cellChanges,

server/endpoints/table/patch.py

@@ -63,6 +63,10 @@ def action(project: Project, props: Props) -> Result:
         with db.engine.begin() as conn:
             for change in props.history.changes:
                 if change.type == "cell-update":
+                    # Skip virtual extra cells
+                    if change.fieldName.startswith("_"):
+                        continue
+
                     # Prepare value
                     value = change.value
                     if schema.has_field(change.fieldName):
@@ -77,6 +81,10 @@ def action(project: Project, props: Props) -> Result:
                     )
                 elif change.type == "multiple-cells-update":
                     for cell in change.cells:
+                        # Skip virtual extra cells
+                        if cell.fieldName.startswith("_"):
+                            continue
+
                         # Prepare value
                         value = cell.value
                         if schema.has_field(cell.fieldName):