feat: support add table

apps/nestjs-backend/src/features/table/table.service.ts

@@ -3,7 +3,6 @@ import type {
   ISetTableNameOpContext,
   ISnapshotBase,
   ITableSnapshot,
-  ITableSnapshotQuery,
   ITableVo,
 } from '@teable-group/core';
 import { OpName, generateTableId } from '@teable-group/core';
@@ -74,7 +73,9 @@ export class TableService implements AdapterService {
   }
 
   async getTables(): Promise<ITableVo[]> {
-    const tablesMeta = await this.prismaService.tableMeta.findMany();
+    const tablesMeta = await this.prismaService.tableMeta.findMany({
+      orderBy: { order: 'asc' },
+    });
 
     return tablesMeta.map((tableMeta) => ({
       ...tableMeta,
@@ -222,11 +223,7 @@ export class TableService implements AdapterService {
       .sort((a, b) => ids.indexOf(a.id) - ids.indexOf(b.id));
   }
 
-  async getDocIdsByQuery(
-    prisma: Prisma.TransactionClient,
-    _collection: string,
-    _query: ITableSnapshotQuery
-  ) {
+  async getDocIdsByQuery(prisma: Prisma.TransactionClient, _collection: string, _query: unknown) {
     const tables = await prisma.tableMeta.findMany({
       select: { id: true },
       orderBy: { order: 'asc' },

apps/nestjs-backend/src/features/view/view.service.ts

@@ -4,7 +4,6 @@ import type {
   ISetViewNameOpContext,
   ISnapshotBase,
   IViewSnapshot,
-  IViewSnapshotQuery,
   ViewType,
 } from '@teable-group/core';
 import { OpName, generateViewId } from '@teable-group/core';
@@ -51,11 +50,11 @@ export class ViewService implements AdapterService {
   async createViewTransaction(
     prisma: Prisma.TransactionClient,
     tableId: string,
-    createViewRo: CreateViewRo,
+    createViewRo: CreateViewRo & { id?: string },
     order?: number
   ) {
-    const { name, description, type, options, sort, filter, group } = createViewRo;
-    const viewId = generateViewId();
+    const { id, name, description, type, options, sort, filter, group } = createViewRo;
+    const viewId = id || generateViewId();
 
     if (!order) {
       const viewAggregate = await prisma.view.aggregate({
@@ -197,11 +196,7 @@ export class ViewService implements AdapterService {
       .sort((a, b) => ids.indexOf(a.id) - ids.indexOf(b.id));
   }
 
-  async getDocIdsByQuery(
-    prisma: Prisma.TransactionClient,
-    tableId: string,
-    _query: IViewSnapshotQuery
-  ) {
+  async getDocIdsByQuery(prisma: Prisma.TransactionClient, tableId: string, _query: unknown) {
     const views = await prisma.view.findMany({
       where: { tableId },
       select: { id: true },

apps/nextjs-app/src/backend/api/rest/table.ssr.ts

@@ -3,12 +3,13 @@ import { isJsonApiSuccessResponse } from '@teable-group/core';
 import axios from 'axios';
 
 export class SsrApi {
+  axios = axios.create({
+    baseURL: `http://localhost:${process.env.PORT}/api`,
+  });
+
   async getFullSnapshot(tableId: string, viewId = ''): Promise<IFullSsrSnapshot> {
-    console.log(`http://localhost:${process.env.PORT}/api/table/ssr/${tableId}/${viewId}`);
-    return axios
-      .get<IJsonApiResponse<IFullSsrSnapshot>>(
-        `http://localhost:${process.env.PORT}/api/table/ssr/${tableId}/${viewId}`
-      )
+    return this.axios
+      .get<IJsonApiResponse<IFullSsrSnapshot>>(`/table/ssr/${tableId}/${viewId}`)
       .then(({ data: resp }) => {
         if (isJsonApiSuccessResponse(resp)) {
           return resp.data;
@@ -18,10 +19,8 @@ export class SsrApi {
   }
 
   async getTableSnapshot() {
-    return axios
-      .get<IJsonApiResponse<Pick<IFullSsrSnapshot, 'tables'>>>(
-        `http://localhost:${process.env.PORT}/api/table/ssr`
-      )
+    return this.axios
+      .get<IJsonApiResponse<Pick<IFullSsrSnapshot, 'tables'>>>(`/table/ssr`)
       .then(({ data: resp }) => {
         if (isJsonApiSuccessResponse(resp)) {
           return resp.data;
@@ -31,10 +30,8 @@ export class SsrApi {
   }
 
   async getDefaultViewId(tableId: string) {
-    return axios
-      .get<IJsonApiResponse<{ id: string }>>(
-        `http://localhost:${process.env.PORT}/api/table/ssr/${tableId}/view-id`
-      )
+    return this.axios
+      .get<IJsonApiResponse<{ id: string }>>(`/table/ssr/${tableId}/view-id`)
       .then(({ data: resp }) => {
         if (isJsonApiSuccessResponse(resp)) {
           return resp.data;

apps/nextjs-app/src/features/app/blocks/table/TableList.tsx

@@ -1,15 +1,17 @@
 import { useTableId, useTables } from '@teable-group/sdk';
 import AddBoldIcon from '@teable-group/ui-lib/icons/app/add-bold.svg';
 import { TableListItem } from './TableListItem';
+import { useAddTable } from './useAddTable';
 
 export const TableList: React.FC = () => {
   const tables = useTables();
   const tableId = useTableId();
+  const addTable = useAddTable();
 
   return (
     <div className="py-2">
       <div className="mx-2">
-        <button className="btn btn-xs btn-ghost btn-block">
+        <button className="btn btn-xs btn-ghost btn-block" onClick={addTable}>
           <AddBoldIcon />
           <span className="ml-1">Table</span>
         </button>

apps/nextjs-app/src/features/app/blocks/table/useAddTable.ts

@@ -0,0 +1,19 @@
+import { useSpace, useTables } from '@teable-group/sdk/hooks';
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
+
+export function useAddTable() {
+  const space = useSpace();
+  const tables = useTables();
+  const tableName = tables[tables.length - 1].name + ' ' + tables.length;
+  const router = useRouter();
+
+  return useCallback(async () => {
+    const tableDoc = await space.createTable(tableName);
+    const tableId = tableDoc.data.table.id;
+    router.push({
+      pathname: '/space/[tableId]',
+      query: { tableId: tableId },
+    });
+  }, [router, space, tableName]);
+}

apps/nextjs-app/src/features/app/blocks/view/list/useAddView.ts

@@ -1,11 +1,24 @@
 import { ViewType } from '@teable-group/core';
 import { useTable, useViews } from '@teable-group/sdk/hooks';
+import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 
 export function useAddView() {
   const table = useTable();
   const views = useViews();
+  const router = useRouter();
   const viewName = views[views.length - 1].name + ' ' + views.length;
 
-  return useCallback(() => table?.createView(viewName, ViewType.Grid), [table, viewName]);
+  return useCallback(async () => {
+    if (!table) {
+      return;
+    }
+
+    const viewDoc = await table.createView(viewName, ViewType.Grid);
+    const viewId = viewDoc.data.view.id;
+    router.push({
+      pathname: '/space/[tableId]/[viewId]',
+      query: { tableId: table.id, viewId },
+    });
+  }, [router, table, viewName]);
 }

monorepo.code-workspace

@@ -58,7 +58,7 @@
     // https://github.com/Microsoft/vscode-eslint#mono-repository-setup
     "eslint.workingDirectories": [
       "./apps/nextjs-app",
-      "./apps/nesjs-backend",
+      "./apps/nestjs-backend",
       "./packages/common-i18n",
       "./packages/sdk",
       "./packages/core",

packages/sdk/src/context/app/AppContext.ts

@@ -1,3 +1,4 @@
+import { Space } from '../../model/space';
 import React from 'react';
 import { Connection } from 'sharedb/lib/client';
 
@@ -10,6 +11,7 @@ export interface IAppContext {
   connection?: Connection;
   connected: boolean;
   theme: ThemeKey;
+  space?: Space;
   isAutoTheme: boolean;
   setTheme: (theme: ThemeKey | null) => void;
 }

packages/sdk/src/context/app/AppProvider.tsx

@@ -4,6 +4,7 @@ import ReconnectingWebSocket from 'reconnecting-websocket';
 import { Connection } from 'sharedb/lib/client';
 import type { Socket } from 'sharedb/lib/sharedb';
 import { useTheme } from './useTheme';
+import { Space } from '../../model/space';
 
 export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [connection, setConnection] = useState(() => {
@@ -13,6 +14,7 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   });
   const [connected, setConnected] = useState(false);
+  const [space, setSpace] = useState<Space>();
   const themeProps = useTheme();
 
   useEffect(() => {
@@ -26,6 +28,7 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
     if (!connection) {
       return;
     }
+    setSpace(new Space(connection));
     const onConnected = () => setConnected(true);
     const onDisconnected = () => setConnected(false);
     connection.on('connected', onConnected);
@@ -39,8 +42,8 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
   }, [connection]);
 
   const value = useMemo(() => {
-    return { connection, connected, ...themeProps };
-  }, [connection, connected, themeProps]);
+    return { connection, connected, space, ...themeProps };
+  }, [connection, connected, space, themeProps]);
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 };

packages/sdk/src/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './use-ssr-records';
 export * from './use-theme';
 export * from './use-tables';
 export * from './use-table';
+export * from './use-space';

packages/sdk/src/hooks/use-space.ts

@@ -0,0 +1,7 @@
+import { AppContext } from '../context';
+import { useContext } from 'react';
+
+export function useSpace() {
+  const { space } = useContext(AppContext);
+  return space!;
+}

packages/sdk/src/index.ts

@@ -2,6 +2,5 @@ export * from './api';
 export * from './components';
 export * from './config';
 export * from './context';
-export * from './engine';
 export * from './hooks';
 export * from './model';

packages/sdk/src/model/space.ts

@@ -0,0 +1,24 @@
+import { ITableSnapshot, ITableVo, IdPrefix, OpBuilder, generateTableId } from '@teable-group/core';
+import { Connection, Doc } from 'sharedb/lib/client';
+
+export class Space {
+  constructor(private connection: Connection) {}
+
+  async createTable(name: string, description?: string) {
+    const tableData: ITableVo = {
+      id: generateTableId(),
+      name,
+      description,
+    };
+
+    const createSnapshot = OpBuilder.creator.addTable.build(tableData);
+    const doc = this.connection.get(`${IdPrefix.Table}_node`, tableData.id);
+    return new Promise<Doc<ITableSnapshot>>((resolve, reject) => {
+      doc.create(createSnapshot, (error) => {
+        if (error) return reject(error);
+        console.log(`create table succeed!`, tableData);
+        resolve(doc);
+      });
+    });
+  }
+}

packages/sdk/src/model/table/table.ts

@@ -2,6 +2,7 @@ import {
   generateViewId,
   IdPrefix,
   ITableSnapshot,
+  IViewSnapshot,
   IViewVo,
   OpBuilder,
   TableCore,
@@ -35,7 +36,7 @@ export class Table extends TableCore {
 
     const createSnapshot = OpBuilder.creator.addView.build(viewData);
     const doc = this.connection.get(`${IdPrefix.View}_${this.id}`, viewData.id);
-    return new Promise<Doc>((resolve, reject) => {
+    return new Promise<Doc<IViewSnapshot>>((resolve, reject) => {
       doc.create(createSnapshot, (error) => {
         if (error) return reject(error);
         console.log(`create view succeed!`, viewData);