✨ connection to existing table

Author: Clemsazert

src/frontend/apps/impress/src/features/docs/doc-editor/components/DatabaseSourceSelector.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+import { Box, DropdownMenu, Text } from '@/components';
+import { useListGristTables } from '@/features/grist';
+import { Doc, useListGristDocs } from '@/features/grist/useListGristDocs';
+
+type DatabaseSourceSelectorProps = {
+  onSourceSelected: (args: { documentId: string; tableId: string }) => void;
+};
+
+export const DatabaseSourceSelector = ({
+  onSourceSelected,
+}: DatabaseSourceSelectorProps) => {
+  const [selectedDoc, setSelectedDoc] = useState<Doc>();
+  const { docs } = useListGristDocs();
+  const { tables } = useListGristTables(selectedDoc?.id);
+
+  return (
+    <Box>
+      <DropdownMenu
+        options={docs.map((doc) => ({
+          label: doc.name,
+          value: doc.id,
+          callback: () => setSelectedDoc(doc),
+        }))}
+        showArrow
+      >
+        <Text>{selectedDoc?.name ?? 'Sélectionner un document Grist'}</Text>
+      </DropdownMenu>
+      {selectedDoc && tables && (
+        <DropdownMenu
+          options={tables.map(({ id }) => ({
+            label: id,
+            value: id,
+            callback: () =>
+              onSourceSelected({ documentId: selectedDoc.id, tableId: id }),
+          }))}
+          showArrow
+        >
+          <Text>Sélectionner une table Grist existante</Text>
+        </DropdownMenu>
+      )}
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/DatabaseTableDisplay.tsx

@@ -0,0 +1,16 @@
+import { useGristTableData } from '@/features/grist/useGristTableData';
+
+export const DatabaseTableDisplay = ({
+  documentId,
+  tableId,
+}: {
+  documentId: string;
+  tableId: string;
+}) => {
+  const { tableData } = useGristTableData({
+    documentId,
+    tableId,
+  });
+
+  return JSON.stringify(tableData, null, 2);
+};

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

@@ -1,20 +1,19 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { defaultProps, insertOrUpdateBlock } from '@blocknote/core';
+import { insertOrUpdateBlock } from '@blocknote/core';
 import { createReactBlockSpec } from '@blocknote/react';
+import { Button } from '@openfun/cunningham-react';
 import { TFunction } from 'i18next';
-import React, { useEffect } from 'react';
 
-import { Box, Icon } from '@/components';
-import { useGristTable } from '@/features/grist';
+import { Box, Icon, Text } from '@/components';
 
 import { DocsBlockNoteEditor } from '../../types';
+import { DatabaseSourceSelector } from '../DatabaseSourceSelector';
+import { DatabaseTableDisplay } from '../DatabaseTableDisplay';
 
 export const DatabaseBlock = createReactBlockSpec(
   {
     type: 'database',
     propSchema: {
-      textAlignment: defaultProps.textAlignment,
-      backgroundColor: defaultProps.backgroundColor,
       documentId: {
         type: 'string',
         default: '',
@@ -27,23 +26,7 @@ export const DatabaseBlock = createReactBlockSpec(
     content: 'inline',
   },
   {
-    render: ({ block, editor, contentRef }) => {
-      const { tableData } = useGristTable({
-        tableId: block.props.tableId,
-        documentId: block.props.documentId,
-      });
-
-      useEffect(() => {
-        if (
-          !block.content.length &&
-          block.props.backgroundColor === 'default'
-        ) {
-          editor.updateBlock(block, { props: { backgroundColor: 'orange' } });
-        } else {
-          editor.updateBlock(block, { content: JSON.stringify(tableData) });
-        }
-      }, [block, editor, tableData]);
-
+    render: ({ block, editor }) => {
       return (
         <Box
           $padding="1rem"
@@ -53,7 +36,35 @@ export const DatabaseBlock = createReactBlockSpec(
             flexDirection: 'row',
           }}
         >
-          <Box as="p" className="inline-content" ref={contentRef} />
+          <Box as="div" />
+          {block.props.documentId && block.props.tableId ? (
+            <Box>
+              <DatabaseTableDisplay
+                documentId={block.props.documentId}
+                tableId={block.props.tableId}
+              />
+            </Box>
+          ) : (
+            <Box
+              style={{
+                flexDirection: 'column',
+                gap: 10,
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+              }}
+            >
+              <Button>Créer une nouvelle base de données vide</Button>
+              <Text>ou</Text>
+              <DatabaseSourceSelector
+                onSourceSelected={({ documentId, tableId }) => {
+                  editor.updateBlock(block, {
+                    props: { documentId: documentId.toString(), tableId },
+                  });
+                }}
+              />
+            </Box>
+          )}
         </Box>
       );
     },

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

@@ -1 +1,3 @@
 export * from './useGristTable';
+export * from './useListGristDocs';
+export * from './useListGristTables';

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

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+import { APIError, errorCauses, gristFetchApi } from '@/api';
+
+export type UseGristTableDataArguments = {
+  documentId: string;
+  tableId: string;
+};
+
+export const useGristTableData = ({
+  documentId,
+  tableId,
+}: UseGristTableDataArguments) => {
+  const [tableData, setTableData] = useState<unknown[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const url = `docs/${documentId}/tables/${tableId}/data`;
+      const response = await gristFetchApi(url);
+      if (!response.ok) {
+        throw new APIError(
+          'Failed to request ai transform',
+          await errorCauses(response),
+        );
+      }
+      return (await response.json()) as Promise<unknown[]>;
+    };
+
+    fetchData()
+      .then((res) => {
+        setTableData(res);
+      })
+      .catch((error) => {
+        console.error('Error fetching Grist table data:', error);
+      });
+  }, [documentId, tableId]);
+  return {
+    tableData,
+  };
+};

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

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+
+import { APIError, errorCauses, gristFetchApi } from '@/api';
+
+export interface Workspace {
+  id: number;
+  name: string;
+  access: string;
+  docs: Doc[];
+  org: Org;
+}
+
+export interface Doc {
+  id: number;
+  name: string;
+  access: string;
+  isPinned: boolean;
+  urlId: null;
+}
+
+export interface Org {
+  id: number;
+  name: string;
+  domain: string;
+  owner: Owner;
+  access: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface Owner {
+  id: number;
+  name: string;
+  picture: null;
+}
+
+export const useListGristDocs = (): { docs: Doc[] } => {
+  const [docs, setDocs] = useState<Doc[]>([]);
+
+  const fetchDocs = async () => {
+    const DEFAULT_WORKSPACE_ID = 2;
+    const url = `workspaces/${DEFAULT_WORKSPACE_ID}`;
+    const response = await gristFetchApi(url);
+    if (!response.ok) {
+      throw new APIError(
+        'Failed to request ai transform',
+        await errorCauses(response),
+      );
+    }
+    return (await response.json()) as Promise<Workspace>;
+  };
+
+  useEffect(() => {
+    fetchDocs()
+      .then((workspace) => {
+        setDocs(workspace.docs);
+      })
+      .catch((error) => {
+        console.error('Error fetching Grist documents:', error);
+      });
+  }, []);
+
+  return {
+    docs,
+  };
+};

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

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+import { APIError, errorCauses, gristFetchApi } from '@/api';
+
+export interface TableDescription {
+  tables: Table[];
+}
+
+export interface Table {
+  id: string;
+  fields: Fields;
+}
+
+export interface Fields {
+  tableRef: number;
+  onDemand: boolean;
+}
+
+export const useListGristTables = (
+  documentId?: number,
+): { tables: Table[] | null } => {
+  const [tables, setTables] = useState<Table[] | null>(null);
+
+  useEffect(() => {
+    const fetchTables = async () => {
+      if (!documentId) {
+        console.warn('Document ID is required to fetch Grist tables');
+        return;
+      }
+      const url = `docs/${documentId}/tables`;
+      const response = await gristFetchApi(url);
+      if (!response.ok) {
+        throw new APIError(
+          'Failed to fetch Grist tables',
+          await errorCauses(response),
+        );
+      }
+      return (await response.json()) as Promise<TableDescription>;
+    };
+    fetchTables()
+      .then((response) => {
+        if (response) {
+          setTables(response.tables);
+        }
+      })
+      .catch((error) => {
+        console.error('Error fetching Grist documents:', error);
+      });
+  }, [documentId]);
+
+  return {
+    tables,
+  };
+};