Finish DataGrid CRUD delete/update and create rows (#1027)

Author: andresgutgon

apps/web/src/actions/datasetRows/create.ts

@@ -0,0 +1,21 @@
+'use server'
+
+import { z } from 'zod'
+import { createDatasetEmptyRow } from '@latitude-data/core/services/datasetRows/createEmptyRow'
+import { DatasetsV2Repository } from '@latitude-data/core/repositories'
+import { authProcedure } from '$/actions/procedures'
+
+export const createDatasetRowAction = authProcedure
+  .createServerAction()
+  .input(z.object({ datasetId: z.number() }), { type: 'json' })
+  .handler(async ({ ctx, input }) => {
+    const datasetRepo = new DatasetsV2Repository(ctx.workspace.id)
+    const dataset = await datasetRepo
+      .find(input.datasetId)
+      .then((r) => r.unwrap())
+
+    return createDatasetEmptyRow({
+      workspace: ctx.workspace,
+      dataset,
+    }).then((r) => r.unwrap())
+  })

apps/web/src/actions/datasetRows/delete.ts

@@ -0,0 +1,35 @@
+'use server'
+
+import { z } from 'zod'
+import { deleteManyRows } from '@latitude-data/core/services/datasetRows/deleteManyRows'
+import {
+  DatasetRowsRepository,
+  DatasetsV2Repository,
+} from '@latitude-data/core/repositories'
+import { authProcedure } from '$/actions/procedures'
+
+export const deleteRowsAction = authProcedure
+  .createServerAction()
+  .input(
+    z.object({
+      datasetId: z.number(),
+      rowIds: z.array(z.number()),
+    }),
+    { type: 'json' },
+  )
+  .handler(async ({ ctx, input }) => {
+    const datasetRepo = new DatasetsV2Repository(ctx.workspace.id)
+    const dataset = await datasetRepo
+      .find(input.datasetId)
+      .then((r) => r.unwrap())
+    const scope = new DatasetRowsRepository(ctx.workspace.id)
+    const rows = await scope.findManyByDataset({
+      dataset,
+      rowIds: input.rowIds,
+    })
+
+    return deleteManyRows({
+      dataset,
+      rows,
+    }).then((r) => r.unwrap())
+  })

apps/web/src/actions/datasetRows/update.ts

@@ -12,7 +12,7 @@ import { DatasetRowDataContent } from '@latitude-data/core/schema'
 const rowDataSchema = z.record(
   z.custom<DatasetRowDataContent>((val) => {
     return (
-      ['string', 'number', 'boolean'].includes(typeof val) ||
+      ['string', 'number', 'boolean', 'object'].includes(typeof val) ||
       val === null ||
       val === undefined
     )

apps/web/src/app/(private)/datasets/[datasetId]/DatasetDetailTable/DataGrid/EditCell/index.tsx

@@ -7,13 +7,13 @@ import type {
   CellClickArgs,
   CellMouseEvent,
 } from '@latitude-data/web-ui/data-grid'
-import { Text } from '@latitude-data/web-ui'
+import { DataGridCellEditor, type EditorCellProps } from '@latitude-data/web-ui'
+import { Text, FloatingPanel, Button } from '@latitude-data/web-ui'
 import { DatasetRoleStyle } from '$/hooks/useDatasetRoles'
 import { DatasetV2 } from '@latitude-data/core/browser'
 import { ClientPagination } from '@latitude-data/core/lib/pagination/buildPagination'
 import { useCallback, useMemo, useState } from 'react'
 import { LinkableTablePaginationFooter } from '$/components/TablePaginationFooter'
-import { EditCell } from '$/app/(private)/datasets/[datasetId]/DatasetDetailTable/DataGrid/EditCell'
 import { ClientDatasetRow } from '$/stores/datasetRows/rowSerializationHelpers'
 import useDatasetRows from '$/stores/datasetRows'
 
@@ -38,18 +38,55 @@ function renderCell(props: RenderCellProps<ClientDatasetRow, unknown>) {
   )
 }
 
+function tryToParseJSON(value: string) {
+  try {
+    return JSON.parse(value)
+  } catch {
+    return value
+  }
+}
+
 function renderEditCell(props: RenderEditCellProps<ClientDatasetRow, unknown>) {
-  return <EditCell {...props} />
+  const row = props.row
+  const column = props.column
+  const onRowChange = props.onRowChange
+  const onChange = useCallback(
+    ({ value, commitChanges }: Parameters<EditorCellProps['onChange']>[0]) => {
+      const prevData = row.rowData
+      const newRow = {
+        ...row,
+        rowData: { ...prevData, [column.key]: tryToParseJSON(value) },
+      }
+      onRowChange(newRow, commitChanges)
+    },
+    [row, column.key, onRowChange],
+  )
+  const storedRowValue = row.rowData[column.key]
+  const rawValue = row.processedRowData[column.key]
+  const initialValue = rawValue === undefined ? '' : String(rawValue)
+  const valueType = typeof storedRowValue === 'object' ? 'json' : 'text'
+  return (
+    <DataGridCellEditor
+      valueType={valueType}
+      value={initialValue}
+      onChange={onChange}
+    />
+  )
 }
 
 type Props = DatasetRowsTableProps & {
   updateRows: ReturnType<typeof useDatasetRows>['updateRows']
+  deleteRows: ReturnType<typeof useDatasetRows>['deleteRows']
+  isDeleting: boolean
 }
 
+const countLabel = (count: number) => `${count} rows`
 export default function DataGrid({
   dataset,
   rows,
   updateRows,
+  deleteRows,
+  isDeleting,
   pagination,
 }: Props) {
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>())
@@ -88,16 +125,53 @@ export default function DataGrid({
     },
     [updateRows],
   )
+  const onClickDelete = useCallback(async () => {
+    const rowIdsToDelete = Array.from(selectedRows)
+    await deleteRows({
+      datasetId: dataset.id,
+      rowIds: rowIdsToDelete,
+    })
+    setSelectedRows(new Set<number>())
+  }, [deleteRows, selectedRows, dataset.id, setSelectedRows])
+
   return (
-    <BaseDataGrid<ClientDatasetRow, unknown, number>
-      rowKeyGetter={rowKeyGetter}
-      rows={rows}
-      columns={columns}
-      onRowsChange={onRowsChange}
-      onCellClick={onCellClick}
-      selectedRows={selectedRows}
-      onSelectedRowsChange={setSelectedRows}
-      footer={<LinkableTablePaginationFooter pagination={pagination} />}
-    />
+    <>
+      <BaseDataGrid<ClientDatasetRow, unknown, number>
+        rowKeyGetter={rowKeyGetter}
+        rows={rows}
+        columns={columns}
+        onRowsChange={onRowsChange}
+        onCellClick={onCellClick}
+        selectedRows={selectedRows}
+        onSelectedRowsChange={setSelectedRows}
+        footer={
+          <LinkableTablePaginationFooter
+            pagination={pagination}
+            countLabel={countLabel}
+          />
+        }
+      />
+      <div className='z-40 flex justify-center absolute left-0 right-0 bottom-4 pointer-events-none'>
+        <FloatingPanel visible={selectedRows.size > 0}>
+          <div className='flex flex-row justify-between gap-x-4'>
+            <Button
+              fancy
+              variant='destructive'
+              disabled={isDeleting || selectedRows.size === 0}
+              onClick={onClickDelete}
+            >
+              {isDeleting ? 'Deleting rows...' : 'Delete rows'}
+            </Button>
+            <Button
+              fancy
+              variant='outline'
+              onClick={() => setSelectedRows(new Set<number>())}
+            >
+              Clear selection
+            </Button>
+          </div>
+        </FloatingPanel>
+      </div>
+    </>
   )
 }

apps/web/src/app/(private)/datasets/[datasetId]/DatasetDetailTable/DataGrid/index.tsx

@@ -51,7 +51,7 @@ export function SimpleTable({
                   className={backgroundCssClasses[role]}
                 >
                   <Text.H5 wordBreak='breakAll' ellipsis lineClamp={1}>
-                    {cell}
+                    {String(cell)}
                   </Text.H5>
                 </TableCell>
               )