✨ add row to table

Author: anaisberg

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/AddRowButton.tsx

@@ -1,19 +1,27 @@
 import { Button } from '@openfun/cunningham-react';
+import { Dispatch, SetStateAction } from 'react';
 
-import { useColumns, useRows } from './hooks';
 import { createNewRow } from './utils';
 
-export const AddRowButton = () => {
-  const { setRowData } = useRows();
-  const { colDefs } = useColumns();
-
+export const AddRowButton = ({
+  columns,
+  setRowData,
+}: {
+  columns: string[];
+  setRowData: Dispatch<
+    SetStateAction<Record<string, string | number | boolean>[] | undefined>
+  >;
+}) => {
   const addRow = () => {
-    const newRow = createNewRow('', colDefs);
+    const newRow = createNewRow('', columns);
     setRowData((prev) => {
       if (prev === undefined) {
         return [newRow];
       }
-      return [...prev, newRow];
+      const updatedRows = [...prev];
+      // Insert at the second-to-last position
+      updatedRows.splice(updatedRows.length - 1, 0, newRow);
+      return updatedRows;
     });
   };
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/DatabaseGrid.tsx

@@ -1,4 +1,4 @@
-import { ColDef, ColSpanParams } from 'ag-grid-community';
+import { ColDef, ColSpanParams, ICellRendererParams } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { useEffect, useRef } from 'react';
 
@@ -80,15 +80,20 @@ export const DatabaseGrid = ({
     const columns: ColDef[] = columnNames.map((key) => ({
       field: key,
       colSpan: newRowColSpan,
-      cellRendererSelector: addRowCellRenderer,
+      cellRendererSelector: (
+        params: ICellRendererParams<Record<string, string>>,
+      ) => addRowCellRenderer(params, columnNames, setRowData),
     }));
 
     setColDefs(columns.concat(addColumnColDef));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableData]);
 
   useEffect(() => {
-    const addNewRow = createNewRow('+ new  row', colDefs ?? []);
+    const columnNames = (colDefs ?? [])
+      .map((col) => col.field)
+      .filter((col) => col !== undefined);
+    const addNewRow = createNewRow('+ new  row', columnNames);
     setRowData((prev) => [...(prev ? prev : []), addNewRow]);
   }, [colDefs, gridRef, setRowData]);
 
@@ -97,7 +102,6 @@ export const DatabaseGrid = ({
     filter: true,
     editable: true,
     unSortIcon: true,
-    spanRows: true,
   };
 
   const addColumn = (columnName: string) => {

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/utils.ts

@@ -1,13 +1,13 @@
-import { ColDef, ICellRendererParams } from 'ag-grid-community';
+import { ICellRendererParams } from 'ag-grid-community';
+import { Dispatch, SetStateAction } from 'react';
 
 import { AddRowButton } from './AddRowButton';
 
 export const createNewRow = (
   value: string | undefined,
-  columns: ColDef[] | undefined,
+  columnNames: string[] | undefined,
 ) => {
   const defaultValue = value ?? '';
-  const columnNames = columns?.map((col) => col.field);
   const addNewRow: Record<string, string> = {};
   columnNames?.forEach((name) => {
     if (name !== undefined) {
@@ -20,10 +20,15 @@ export const createNewRow = (
 
 export const addRowCellRenderer = (
   params: ICellRendererParams<Record<string, string>>,
+  columns: string[] | undefined,
+  setRowData: Dispatch<
+    SetStateAction<Record<string, string | number | boolean>[] | undefined>
+  >,
 ) => {
   if (params.data) {
     const addRowButton = {
       component: AddRowButton,
+      params: { columns, setRowData },
     };
     if (Object.values(params.data)[0]?.includes('new')) {
       return addRowButton;