✨ edit cell in grist

Author: anaisberg

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

@@ -1,11 +1,17 @@
-import { ColDef, ColSpanParams, ICellRendererParams } from 'ag-grid-community';
+import {
+  CellEditingStoppedEvent,
+  ColDef,
+  ColSpanParams,
+  ICellRendererParams,
+} from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { Box } from '@/components';
 import {
   ColumnType,
   useGristCrudColumns,
+  useGristCrudRecords,
   useGristTableData,
 } from '@/features/grist';
 
@@ -34,6 +40,7 @@ export const DatabaseGrid = ({
   });
 
   const { createColumns } = useGristCrudColumns();
+  const { updateRecords } = useGristCrudRecords();
 
   const { rowData, setRowData } = useRows();
   const { colDefs, setColDefs } = useColumns();
@@ -128,6 +135,28 @@ export const DatabaseGrid = ({
     ]);
   };
 
+  const onCellEditingStopped = useCallback(
+    (event: CellEditingStoppedEvent<DatabaseRow, DatabaseRow>) => {
+      const { oldValue, newValue, data } = event;
+
+      if (data === undefined) {
+        return;
+      }
+      const { id: rowId, ...updatedRow } = data;
+
+      if (!(typeof rowId === 'number') || oldValue === newValue) {
+        return;
+      }
+
+      void updateRecords(documentId, tableId, [
+        { id: rowId, fields: updatedRow },
+      ]);
+    },
+    // disable updateRecords
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [documentId, tableId],
+  );
+
   return (
     <>
       <Box style={{ height: '100%', width: '100%' }}>
@@ -137,6 +166,7 @@ export const DatabaseGrid = ({
           defaultColDef={defaultColDef}
           domLayout="autoHeight"
           enableCellSpan={true}
+          onCellEditingStopped={onCellEditingStopped}
         />
       </Box>
       <AddButtonComponent addColumn={addColumn} />

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

@@ -1 +1,6 @@
-export type DatabaseRow = Record<string, string | number | boolean | undefined>;
+type IdColumn = {
+  id: number;
+};
+export type DatabaseRow =
+  | Record<string, string | number | boolean | undefined>
+  | IdColumn;

src/frontend/apps/impress/src/features/grist/useGristCrudRecords.ts

@@ -69,7 +69,7 @@ export const useGristCrudRecords = () => {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(records),
+        body: JSON.stringify({ records }),
       });
 
       if (!response.ok) {