Merge branch 'feat/tauri-kanban' into feat/tauri-edit-kanban-row

frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/loadField.ts

@@ -9,7 +9,7 @@ import {
   NumberFormat,
   SingleSelectTypeOptionPB,
   TimeFormat,
-} from '../../../../services/backend';
+} from '@/services/backend';
 import {
   makeChecklistTypeOptionContext,
   makeDateTypeOptionContext,

frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts

@@ -12,14 +12,13 @@ export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fi
     if (!cellIdentifier || !cellCache || !fieldController) return;
     const builder = new CellControllerBuilder(cellIdentifier, cellCache, fieldController);
     const cellController = builder.build();
-    cellController.subscribeChanged({
-      onCellChanged: (value) => {
-        setData(value.unwrap());
-      },
-    });
 
-    // ignore the return value, because we are using the subscription
-    void cellController.getCellData();
+    void (async () => {
+      const cellData = await cellController.getCellData();
+      if (cellData.some) {
+        setData(cellData.unwrap());
+      }
+    })();
 
     return () => {
       void cellController.dispose();

frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx

@@ -5,9 +5,18 @@ import { NewBoardBlock } from './NewBoardBlock';
 import { useDatabase } from '../_shared/database-hooks/useDatabase';
 import { ViewLayoutTypePB } from '@/services/backend';
 import { DragDropContext } from 'react-beautiful-dnd';
+import { useState } from 'react';
+import { RowInfo } from '$app/stores/effects/database/row/row_cache';
 
 export const Board = ({ viewId }: { viewId: string }) => {
   const { controller, rows, groups, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutTypePB.Board);
+  const [showBoardRow, setShowBoardRow] = useState(false);
+  const [boardRowInfo, setBoardRowInfo] = useState<RowInfo>();
+
+  const onOpenRow = (rowInfo: RowInfo) => {
+    setBoardRowInfo(rowInfo);
+    setShowBoardRow(true);
+  };
 
   return (
     <>
@@ -30,20 +39,20 @@ export const Board = ({ viewId }: { viewId: string }) => {
               groups &&
               groups.map((group, index) => (
                 <BoardBlock
-                  groupId={group.groupId}
                   key={index}
                   viewId={viewId}
                   controller={controller}
-                  rows={group.rows}
-                  title={group.name}
+                  group={group}
                   allRows={rows}
                   onNewRowClick={() => onNewRowClick(index)}
+                  onOpenRow={onOpenRow}
                 />
               ))}
             <NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
           </div>
         </div>
       </DragDropContext>
+
     </>
   );
 };

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx

@@ -3,31 +3,29 @@ import AddSvg from '../_shared/svg/AddSvg';
 import { BoardCard } from './BoardCard';
 import { RowInfo } from '../../stores/effects/database/row/row_cache';
 import { DatabaseController } from '../../stores/effects/database/database_controller';
-import { RowPB } from '@/services/backend';
 import { Droppable } from 'react-beautiful-dnd';
+import { DatabaseGroupController } from '$app/stores/effects/database/group/group_controller';
 
 export const BoardBlock = ({
-  groupId,
   viewId,
   controller,
-  title,
-  rows,
   allRows,
   onNewRowClick,
+  onOpenRow,
+  group,
 }: {
-  groupId: string;
   viewId: string;
   controller: DatabaseController;
-  title: string;
-  rows: RowPB[];
   allRows: readonly RowInfo[];
   onNewRowClick: () => void;
+  onOpenRow: (rowId: RowInfo) => void;
+  group: DatabaseGroupController;
 }) => {
   return (
     <div className={'flex h-full w-[250px] flex-col rounded-lg bg-surface-1'}>
       <div className={'flex items-center justify-between p-4'}>
         <div className={'flex items-center gap-2'}>
-          <span>{title}</span>
+          <span>{group.name}</span>
           <span className={'text-shade-4'}>()</span>
         </div>
         <div className={'flex items-center gap-2'}>
@@ -39,17 +37,24 @@ export const BoardBlock = ({
           </button>
         </div>
       </div>
-      <Droppable droppableId={groupId}>
+      <Droppable droppableId={group.groupId}>
         {(provided) => (
           <div
             className={'flex flex-1 flex-col gap-1 overflow-auto px-2'}
             {...provided.droppableProps}
             ref={provided.innerRef}
           >
-            {rows.map((row_pb, index) => {
+            {group.rows.map((row_pb, index) => {
               const row = allRows.find((r) => r.row.id === row_pb.id);
               return row ? (
-                <BoardCard viewId={viewId} controller={controller} index={index} key={index} rowInfo={row}></BoardCard>
+                <BoardCard
+                  viewId={viewId}
+                  controller={controller}
+                  index={index}
+                  key={index}
+                  rowInfo={row}
+                  onOpenRow={onOpenRow}
+                ></BoardCard>
               ) : (
                 <span key={index}></span>
               );

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx

@@ -10,11 +10,13 @@ export const BoardCard = ({
   viewId,
   controller,
   rowInfo,
+  onOpenRow,
 }: {
   index: number;
   viewId: string;
   controller: DatabaseController;
   rowInfo: RowInfo;
+  onOpenRow: (rowId: RowInfo) => void;
 }) => {
   const { cells } = useRow(viewId, controller, rowInfo);
 
@@ -25,7 +27,7 @@ export const BoardCard = ({
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
-          onClick={() => console.log('on click')}
+          onClick={() => onOpenRow(rowInfo)}
           className={`relative cursor-pointer select-none rounded-lg border border-shade-6 bg-white px-3 py-2 transition-transform duration-100 hover:bg-main-selector `}
         >
           <button className={'absolute right-4 top-2.5 h-5 w-5 rounded hover:bg-surface-2'}>

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx

@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid';
-import { FieldType } from '../../../../services/backend/models/flowy-database/field_entities';
+import { FieldType } from '@/services/backend/models/flowy-database/field_entities';
 import { gridActions } from '../../../stores/reducers/grid/slice';
 import { useAppDispatch, useAppSelector } from '../../../stores/store';
 

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx

@@ -7,7 +7,7 @@ import { SingleSelectTypeSvg } from '../../_shared/svg/SingleSelectTypeSvg';
 import { MultiSelectTypeSvg } from '../../_shared/svg/MultiSelectTypeSvg';
 import { ChecklistTypeSvg } from '../../_shared/svg/ChecklistTypeSvg';
 import { UrlTypeSvg } from '../../_shared/svg/UrlTypeSvg';
-import { FieldType } from '../../../../services/backend/models/flowy-database/field_entities';
+import { FieldType } from '@/services/backend/models/flowy-database/field_entities';
 
 export const GridTableHeader = () => {
   const { fields, onAddField } = useGridTableHeaderHooks();

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/FolderItem.hooks.ts

@@ -2,7 +2,7 @@ import { foldersActions, IFolder } from '../../../stores/reducers/folders/slice'
 import { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../stores/store';
 import { IPage, pagesActions } from '../../../stores/reducers/pages/slice';
-import { AppPB, ViewLayoutTypePB } from '../../../../services/backend';
+import { AppPB, ViewLayoutTypePB } from '@/services/backend';
 import { AppBackendService } from '../../../stores/effects/folder/app/app_bd_svc';
 import { WorkspaceBackendService } from '../../../stores/effects/folder/workspace/workspace_bd_svc';
 import { useError } from '../../error/Error.hooks';

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.hooks.ts

@@ -1,7 +1,7 @@
 import { useAppSelector } from '../../../stores/store';
 import { useNavigate } from 'react-router-dom';
 import { IPage } from '../../../stores/reducers/pages/slice';
-import { ViewLayoutTypePB } from '../../../../services/backend';
+import { ViewLayoutTypePB } from '@/services/backend';
 import { useState } from 'react';
 
 export const useNavigationPanelHooks = function () {

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.tsx

@@ -7,7 +7,7 @@ import { IPage } from '../../../stores/reducers/pages/slice';
 import { Button } from '../../_shared/Button';
 import { usePageEvents } from './PageItem.hooks';
 import { RenamePopup } from './RenamePopup';
-import { ViewLayoutTypePB } from '../../../../services/backend';
+import { ViewLayoutTypePB } from '@/services/backend';
 import { useEffect, useRef, useState } from 'react';
 import { PAGE_ITEM_HEIGHT } from '../../_shared/constants';
 

frontend/appflowy_tauri/src/appflowy_app/components/user/application/notifications/parser.ts

@@ -1,5 +1,5 @@
-import { FlowyError, UserNotification } from '../../../../../services/backend';
-import { NotificationParser, OnNotificationError } from '../../../../../services/backend/notifications';
+import { FlowyError, UserNotification } from '@/services/backend';
+import { NotificationParser, OnNotificationError } from '@/services/backend/notifications';
 import { Result } from 'ts-results';
 
 declare type UserNotificationCallback = (ty: UserNotification, payload: Result<Uint8Array, FlowyError>) => void;

frontend/appflowy_tauri/src/appflowy_app/components/user/application/notifications/user_listener.ts

@@ -1,5 +1,5 @@
-import { FlowyError, UserNotification, UserProfilePB } from '../../../../../services/backend';
-import { AFNotificationObserver, OnNotificationError } from '../../../../../services/backend/notifications';
+import { FlowyError, UserNotification, UserProfilePB } from '@/services/backend';
+import { AFNotificationObserver, OnNotificationError } from '@/services/backend/notifications';
 import { UserNotificationParser } from './parser';
 import { Ok, Result } from 'ts-results';
 

frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/cell_bd_svc.ts

@@ -1,6 +1,5 @@
-import { DatabaseEventGetCell, DatabaseEventUpdateCell } from '../../../../../services/backend/events/flowy-database';
-import { CellChangesetPB, CellIdPB } from '../../../../../services/backend/models/flowy-database/cell_entities';
-import { FieldType } from '../../../../../services/backend/models/flowy-database/field_entities';
+import { DatabaseEventGetCell, DatabaseEventUpdateCell } from '@/services/backend/events/flowy-database';
+import { CellChangesetPB, CellIdPB, FieldType } from '@/services/backend';
 
 class CellIdentifier {
   constructor(

frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/cell_observer.ts

@@ -1,7 +1,7 @@
 import { Ok, Result } from 'ts-results';
-import { ChangeNotifier } from '../../../../utils/change_notifier';
+import { ChangeNotifier } from '$app/utils/change_notifier';
 import { DatabaseNotificationObserver } from '../notifications/observer';
-import { DatabaseNotification, FlowyError } from '../../../../../services/backend';
+import { DatabaseNotification, FlowyError } from '@/services/backend';
 
 type UpdateCellNotifiedValue = Result<void, FlowyError>;
 

frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/controller_builder.ts

@@ -1,4 +1,4 @@
-import { DateCellDataPB, FieldType, SelectOptionCellDataPB, URLCellDataPB } from '../../../../../services/backend';
+import { DateCellDataPB, FieldType, SelectOptionCellDataPB, URLCellDataPB } from '@/services/backend';
 import { CellIdentifier } from './cell_bd_svc';
 import { CellController } from './cell_controller';
 import {

frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/data_parser.ts

@@ -1,10 +1,8 @@
 import utf8 from 'utf8';
 import { CellBackendService, CellIdentifier } from './cell_bd_svc';
-import { DateCellDataPB } from '../../../../../services/backend/models/flowy-database/date_type_option_entities';
-import { SelectOptionCellDataPB } from '../../../../../services/backend/models/flowy-database/select_type_option';
-import { URLCellDataPB } from '../../../../../services/backend/models/flowy-database/url_type_option_entities';
+import { SelectOptionCellDataPB, URLCellDataPB, DateCellDataPB } from '@/services/backend';
 import { Err, None, Ok, Option, Some } from 'ts-results';
-import { Log } from '../../../../utils/log';
+import { Log } from '$app/utils/log';
 
 abstract class CellDataParser<T> {
   abstract parserData(data: Uint8Array): Option<T>;

frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/data_persistence.ts

@@ -1,10 +1,8 @@
 import { Result } from 'ts-results';
-import { FlowyError } from '../../../../../services/backend/models/flowy-error';
 import { CellBackendService, CellIdentifier } from './cell_bd_svc';
 import { CalendarData } from './controller_builder';
-import { DateChangesetPB } from '../../../../../services/backend/models/flowy-database/date_type_option_entities';
-import { CellIdPB } from '../../../../../services/backend/models/flowy-database/cell_entities';
-import { DatabaseEventUpdateDateCell } from '../../../../../services/backend/events/flowy-database';
+import { DateChangesetPB, FlowyError, CellIdPB } from '@/services/backend';
+import { DatabaseEventUpdateDateCell } from '@/services/backend/events/flowy-database';
 
 export abstract class CellDataPersistence<D> {
   abstract save(data: D): Promise<Result<void, FlowyError>>;

frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/select_option_bd_svc.ts

@@ -5,13 +5,13 @@ import {
   SelectOptionCellChangesetPB,
   SelectOptionChangesetPB,
   SelectOptionPB,
-} from '../../../../../services/backend';
+} from '@/services/backend';
 import {
   DatabaseEventCreateSelectOption,
   DatabaseEventGetSelectOptionCellData,
   DatabaseEventUpdateSelectOption,
   DatabaseEventUpdateSelectOptionCell,
-} from '../../../../../services/backend/events/flowy-database';
+} from '@/services/backend/events/flowy-database';
 
 export class SelectOptionBackendService {
   constructor(public readonly viewId: string, public readonly fieldId: string) {}

frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/view/view_row_observer.ts

@@ -6,8 +6,8 @@ import {
   ReorderSingleRowPB,
   RowsChangesetPB,
   RowsVisibilityChangesetPB,
-} from '../../../../../services/backend';
-import { ChangeNotifier } from '../../../../utils/change_notifier';
+} from '@/services/backend';
+import { ChangeNotifier } from '$app/utils/change_notifier';
 import { DatabaseNotificationObserver } from '../notifications/observer';
 
 export type RowsVisibilityNotifyValue = Result<RowsVisibilityChangesetPB, FlowyError>;

frontend/appflowy_tauri/src/appflowy_app/stores/reducers/current-user/slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { nanoid } from 'nanoid';
-import { WorkspaceSettingPB } from '../../../../services/backend/models/flowy-folder/workspace';
+import { WorkspaceSettingPB } from '@/services/backend/models/flowy-folder/workspace';
 
 export interface ICurrentUser {
   id?: string;

frontend/appflowy_tauri/src/appflowy_app/stores/reducers/database/slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { FieldType } from '../../../../services/backend/models/flowy-database/field_entities';
-import { DateFormat, NumberFormat, SelectOptionColorPB, TimeFormat } from '../../../../services/backend';
+import { FieldType } from '@/services/backend/models/flowy-database/field_entities';
+import { DateFormat, NumberFormat, SelectOptionColorPB, TimeFormat } from '@/services/backend';
 
 export interface ISelectOption {
   selectOptionId: string;

frontend/appflowy_tauri/src/appflowy_app/stores/reducers/folders/notifications/parser.ts

@@ -1,5 +1,5 @@
-import { FlowyError, FolderNotification } from '../../../../../services/backend';
-import { NotificationParser, OnNotificationError } from '../../../../../services/backend/notifications';
+import { FlowyError, FolderNotification } from '@/services/backend';
+import { NotificationParser, OnNotificationError } from '@/services/backend/notifications';
 import { Result } from 'ts-results';
 
 declare type FolderNotificationCallback = (ty: FolderNotification, payload: Result<Uint8Array, FlowyError>) => void;

frontend/appflowy_tauri/src/appflowy_app/stores/reducers/grid/slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { nanoid } from 'nanoid';
-import { FieldType } from '../../../../services/backend/models/flowy-database/field_entities';
+import { FieldType } from '@/services/backend/models/flowy-database/field_entities';
 
 const initialState = {
   title: 'My plans on the week',

frontend/appflowy_tauri/src/appflowy_app/stores/reducers/pages/slice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { ViewLayoutTypePB } from '../../../../services/backend';
+import { ViewLayoutTypePB } from '@/services/backend';
 
 export interface IPage {
   id: string;