feat: add edit drawer functionality for each record

apps/web/app/table/[id]/table.tsx

@@ -4,6 +4,7 @@ import type { Table as CoreTable, QueryRecords } from '@egodb/core'
 import { EGOTable } from '@egodb/table-ui'
 import { Box, Space } from '@egodb/ui'
 import { useUpdateAtom } from 'jotai/utils'
+import { useState } from 'react'
 import { CreateRecordFormDrawer } from '../../../components/create-record-form/create-record-form-drawer'
 import { editRecordFormDrawerOpened } from '../../../components/edit-record-form/drawer-opened.atom'
 import { EditRecordFormDrawer } from '../../../components/edit-record-form/edit-record-form-drawer'
@@ -17,10 +18,10 @@ interface IProps {
 
 export default function Table({ table, records }: IProps) {
   const setOpened = useUpdateAtom(editRecordFormDrawerOpened)
+  const [rowId, setRowId] = useState<string>()
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const rowClick = (row: any) => {
-    console.log({ row })
+  const onRowClick = (id: string) => {
+    setRowId(id)
     setOpened(true)
   }
 
@@ -31,9 +32,9 @@ export default function Table({ table, records }: IProps) {
         <TableToolbar table={table} />
       </Box>
       <Space h="md" />
-      <EGOTable rowClick={rowClick} records={records} table={table} />
+      <EGOTable onRowClick={onRowClick} records={records} table={table} />
       <CreateRecordFormDrawer table={table} />
-      <EditRecordFormDrawer table={table} />
+      <EditRecordFormDrawer table={table} rowId={rowId} />
     </Box>
   )
 }

apps/web/components/edit-record-form/edit-record-form-drawer.tsx

@@ -3,15 +3,16 @@ import { createRecordCommandInput } from '@egodb/core'
 import { Drawer, useEgoUITheme, zodResolver } from '@egodb/ui'
 import { useAtom } from 'jotai'
 import { useConfirmModal } from '../../hooks'
-import { CreateRecordForm } from '../create-record-form/create-record-form'
 import { CreateRecordFormProvider, useCreateRecord } from '../create-record-form/create-record-form-context'
 import { editRecordFormDrawerOpened } from './drawer-opened.atom'
+import { EditRecordForm } from './edit-record-form'
 
 interface IProps {
   table: CoreTable
+  rowId?: string
 }
 
-export const EditRecordFormDrawer: React.FC<IProps> = ({ table }) => {
+export const EditRecordFormDrawer: React.FC<IProps> = ({ table, rowId }) => {
   const [opened, setOpened] = useAtom(editRecordFormDrawerOpened)
   const theme = useEgoUITheme()
 
@@ -55,7 +56,7 @@ export const EditRecordFormDrawer: React.FC<IProps> = ({ table }) => {
         overlayOpacity={0.55}
         overlayBlur={3}
       >
-        <CreateRecordForm table={table} onCancel={reset} />
+        <EditRecordForm table={table} onCancel={reset} rowId={rowId} />
       </Drawer>
     </CreateRecordFormProvider>
   )

apps/web/components/edit-record-form/edit-record-form.tsx

@@ -0,0 +1,68 @@
+import type { Table } from '@egodb/core'
+import { Alert, Button, Divider, Group, IconAlertCircle, NumberInput, TextInput } from '@egodb/ui'
+import { trpc } from '../../trpc'
+import { FieldInputLabel } from '../fields/field-input-label'
+import { useCreateRecordFormContext } from '../create-record-form/create-record-form-context'
+
+interface IProps {
+  table: Table
+  onCancel: () => void
+  onSuccess?: () => void
+  rowId?: string
+}
+
+export const EditRecordForm: React.FC<IProps> = ({ table, onCancel, onSuccess, rowId }) => {
+  const form = useCreateRecordFormContext()
+  const utils = trpc.useContext()
+
+  const createRecord = trpc.record.create.useMutation({
+    onSuccess: () => {
+      reset()
+      utils.record.list.refetch()
+      onSuccess?.()
+    },
+  })
+
+  const onSubmit = form.onSubmit((values) => {
+    createRecord.mutate(values)
+  })
+
+  const reset = () => {
+    onCancel()
+    createRecord.reset()
+    form.reset()
+    form.resetDirty()
+    form.resetTouched()
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      {table.schema.fields.map((field, index) => {
+        const props = form.getInputProps(`value.${index}.value`)
+        const label = <FieldInputLabel>{field.name.value}</FieldInputLabel>
+        if (field.type === 'number') {
+          return <NumberInput {...props} label={label} />
+        }
+        return <TextInput {...props} label={label} />
+      })}
+
+      <Divider my="lg" />
+
+      <Group position="right">
+        <Button variant="subtle" onClick={() => onCancel()}>
+          Cancel
+        </Button>
+
+        <Button loading={createRecord.isLoading} miw={200} disabled={!form.isValid()} type="submit">
+          Confirm
+        </Button>
+      </Group>
+
+      {createRecord.isError && (
+        <Alert color="red" icon={<IconAlertCircle size={16} />} title="Oops! Create Record Error!" mt="lg">
+          {createRecord.error.message}
+        </Alert>
+      )}
+    </form>
+  )
+}

packages/table-ui/src/table.tsx

@@ -6,10 +6,10 @@ interface IProps {
   table: CoreTable
   records: QueryRecords
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rowClick: (row: any) => void
+  onRowClick: (row: any) => void
 }
 
-export const EGOTable: React.FC<IProps> = ({ table, records, rowClick }) => {
+export const EGOTable: React.FC<IProps> = ({ table, records, onRowClick }) => {
   // TODO: helper types should infered by type
   const fieldHelper = createColumnHelper<Record<string, IFieldValue>>()
   const columns = table.schema.fields.map((c) =>
@@ -55,7 +55,7 @@ export const EGOTable: React.FC<IProps> = ({ table, records, rowClick }) => {
               key={row.id}
               onClick={() => {
                 console.log('rowClick')
-                rowClick(row.original)
+                onRowClick(row.id)
               }}
             >
               {row.getVisibleCells().map((cell) => (