Merge pull request #325 from toeverything/feat/kanban-editable

Feat/kanban editable

libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx

@@ -1,12 +1,12 @@
-import { useCallback } from 'react';
-import { CardItem } from './CardItem';
-import { styled } from '@toeverything/components/ui';
-import { useKanban } from '@toeverything/components/editor-core';
-import { CardItemPanelWrapper } from './dndable/wrapper/CardItemPanelWrapper';
 import type {
     KanbanCard,
     KanbanGroup,
 } from '@toeverything/components/editor-core';
+import { useKanban } from '@toeverything/components/editor-core';
+import { styled } from '@toeverything/components/ui';
+import { useCallback } from 'react';
+import { CardItem } from './CardItem';
+import { CardItemPanelWrapper } from './dndable/wrapper/CardItemPanelWrapper';
 
 const AddCardWrapper = styled('div')({
     display: 'flex',
@@ -48,7 +48,7 @@ export const CardContext = (props: Props) => {
                             item={item}
                             active={activeId === id}
                         >
-                            <CardItem id={id} block={block} />
+                            <CardItem block={block} />
                         </CardItemPanelWrapper>
                     </StyledCardContainer>
                 );

libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx

@@ -1,6 +1,6 @@
 import {
+    KanbanBlockRender,
     KanbanCard,
-    useBlockRender,
     useEditor,
     useKanban,
 } from '@toeverything/components/editor-core';
@@ -10,7 +10,6 @@ import {
     MuiClickAwayListener,
     styled,
 } from '@toeverything/components/ui';
-import { useFlag } from '@toeverything/datasource/feature-flags';
 import { useState, type MouseEvent } from 'react';
 import { useRefPage } from './RefPage';
 
@@ -82,42 +81,37 @@ const Overlay = styled('div')({
     },
 });
 
-export const CardItem = ({
-    id,
-    block,
-}: {
-    id: KanbanCard['id'];
-    block: KanbanCard['block'];
-}) => {
+export const CardItem = ({ block }: { block: KanbanCard['block'] }) => {
     const { addSubItem } = useKanban();
     const { openSubPage } = useRefPage();
-    const [editable, setEditable] = useState(false);
-    const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false);
+    const [editableBlock, setEditableBlock] = useState<string | null>(null);
     const { editor } = useEditor();
-    const { BlockRender } = useBlockRender();
 
     const onAddItem = async () => {
-        setEditable(true);
-        await addSubItem(block);
+        const newItem = await addSubItem(block);
+        setEditableBlock(newItem.id);
     };
 
     const onClickCard = async () => {
-        openSubPage(id);
+        openSubPage(block.id);
     };
 
     const onClickPen = (e: MouseEvent<Element>) => {
         e.stopPropagation();
-        setEditable(true);
+        setEditableBlock(block.id);
         editor.selectionManager.activeNodeByNodeId(block.id);
     };
 
     return (
-        <MuiClickAwayListener onClickAway={() => setEditable(false)}>
+        <MuiClickAwayListener onClickAway={() => setEditableBlock(null)}>
             <CardContainer>
                 <CardContent>
-                    <BlockRender blockId={id} />
+                    <KanbanBlockRender
+                        blockId={block.id}
+                        activeBlock={editableBlock}
+                    />
                 </CardContent>
-                {showKanbanRefPageFlag && !editable && (
+                {!editableBlock && (
                     <Overlay onClick={onClickCard}>
                         <IconButton backgroundColor="#fff" onClick={onClickPen}>
                             <PenIcon />

libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/renderContainerDragOverlay.tsx

@@ -1,7 +1,6 @@
-import { CardItemWrapper } from '../wrapper/CardItemWrapper';
 import { CardItem } from '../../CardItem';
-import type { KanbanCard } from '@toeverything/components/editor-core';
 import type { DndableItems } from '../type';
+import { CardItemWrapper } from '../wrapper/CardItemWrapper';
 
 export function renderContainerDragOverlay({
     containerId,
@@ -18,7 +17,7 @@ export function renderContainerDragOverlay({
                 return (
                     <CardItemWrapper
                         key={id}
-                        card={<CardItem key={id} id={id} block={block} />}
+                        card={<CardItem key={id} block={block} />}
                         index={index}
                     />
                 );

libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx

@@ -1,10 +1,10 @@
-import type { PropsWithChildren } from 'react';
 import { styled } from '@toeverything/components/ui';
+import type { PropsWithChildren } from 'react';
+import { useRef } from 'react';
 import type { AsyncBlock } from '../editor';
+import { getRecastItemValue, useRecastBlockMeta } from '../recast-block';
 import { PendantPopover } from './pendant-popover';
 import { PendantRender } from './pendant-render';
-import { useRef } from 'react';
-import { getRecastItemValue, useRecastBlockMeta } from '../recast-block';
 /**
  * @deprecated
  */

libs/components/editor-core/src/editor/views/base-view.ts

@@ -1,15 +1,15 @@
-import { ComponentType, ReactElement } from 'react';
 import type { Column } from '@toeverything/datasource/db-service';
 import {
     ArrayOperation,
     BlockDecoration,
     MapOperation,
 } from '@toeverything/datasource/jwt';
+import type { ComponentType, ReactElement } from 'react';
 import type { EventData } from '../block';
 import { AsyncBlock } from '../block';
+import { HTML2BlockResult } from '../clipboard';
 import type { Editor } from '../editor';
 import { SelectBlock } from '../selection';
-import { HTML2BlockResult } from '../clipboard';
 export interface CreateView {
     block: AsyncBlock;
     editor: Editor;

libs/components/editor-core/src/index.ts

@@ -6,11 +6,6 @@ export * from './kanban';
 export * from './kanban/types';
 export * from './recast-block';
 export * from './recast-block/types';
-export {
-    BlockRenderProvider,
-    RenderBlockChildren,
-    useBlockRender,
-    withTreeViewChildren,
-} from './render-block';
+export * from './render-block';
 export { MIN_PAGE_WIDTH, RenderRoot } from './RenderRoot';
 export * from './utils';

libs/components/editor-core/src/kanban/Context.tsx

@@ -10,8 +10,6 @@ import {
     RecastMetaProperty,
     RecastPropertyId,
 } from '../recast-block/types';
-import { BlockRenderProvider } from '../render-block';
-import { KanbanBlockRender } from '../render-block/RenderKanbanBlock';
 import { useInitKanbanEffect, useRecastKanban } from './kanban';
 import { KanbanGroup } from './types';
 
@@ -56,11 +54,9 @@ export const KanbanProvider = ({
     };
 
     return (
-        <BlockRenderProvider blockRender={KanbanBlockRender}>
-            <KanbanContext.Provider value={value}>
-                {children}
-            </KanbanContext.Provider>
-        </BlockRenderProvider>
+        <KanbanContext.Provider value={value}>
+            {children}
+        </KanbanContext.Provider>
     );
 };
 

libs/components/editor-core/src/kanban/kanban.ts

@@ -358,6 +358,7 @@ export const useKanban = () => {
             }
             card.append(newBlock);
             editor.selectionManager.activeNodeByNodeId(newBlock.id);
+            return newBlock;
         },
         [editor]
     );

libs/components/editor-core/src/recast-block/group.ts

@@ -1,7 +1,7 @@
 import { Protocol } from '@toeverything/datasource/db-service';
 import type { AsyncBlock, BlockEditor } from '../editor';
-import type { RecastBlock } from '.';
 import { cloneRecastMetaTo, mergeRecastMeta } from './property';
+import type { RecastBlock } from './types';
 
 const mergeGroupProperties = async (...groups: RecastBlock[]) => {
     const [headGroup, ...restGroups] = groups;

libs/components/editor-core/src/recast-block/property.ts

@@ -2,6 +2,7 @@ import { nanoid } from 'nanoid';
 import { useCallback } from 'react';
 import { AsyncBlock } from '../editor';
 import { useRecastBlock } from './Context';
+import { getHistory, removeHistory, setHistory } from './history';
 import type { RecastBlock, RecastItem, StatusProperty } from './types';
 import {
     META_PROPERTIES_KEY,
@@ -15,7 +16,6 @@ import {
     SelectProperty,
     TABLE_VALUES_KEY,
 } from './types';
-import { getHistory, removeHistory, setHistory } from './history';
 
 /**
  * Generate a unique id for a property
@@ -275,7 +275,7 @@ const isSelectLikeProperty = (
     metaProperty?: RecastMetaProperty
 ): metaProperty is SelectProperty | MultiSelectProperty | StatusProperty => {
     return (
-        metaProperty &&
+        !!metaProperty &&
         (metaProperty.type === PropertyType.Status ||
             metaProperty.type === PropertyType.Select ||
             metaProperty.type === PropertyType.MultiSelect)

libs/components/editor-core/src/render-block/RenderKanbanBlock.tsx

@@ -1,4 +1,7 @@
 import { styled } from '@toeverything/components/ui';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { useEffect, useState } from 'react';
+import { AsyncBlock } from '../editor';
 import { useBlock } from '../hooks';
 import { BlockRenderProvider } from './Context';
 import { NullBlockRender, RenderBlock, RenderBlockProps } from './RenderBlock';
@@ -25,32 +28,140 @@ const OneLevelBlockRender = ({ blockId }: RenderBlockProps) => {
     );
 };
 
-export const KanbanBlockRender = ({ blockId }: RenderBlockProps) => {
-    const { block } = useBlock(blockId);
+export const KanbanParentBlockRender = ({
+    blockId,
+    active,
+}: RenderBlockProps & { active?: boolean }) => {
+    return (
+        <BlockBorder active={active}>
+            <BlockWithoutChildrenRender blockId={blockId} />
+        </BlockBorder>
+    );
+};
 
-    if (!block) {
-        return (
-            <BlockRenderProvider blockRender={NullBlockRender}>
-                <RenderBlock blockId={blockId} />
-            </BlockRenderProvider>
-        );
+const useBlockProgress = (block?: AsyncBlock) => {
+    const [progress, setProgress] = useState(1);
+
+    useEffect(() => {
+        if (!block) {
+            return;
+        }
+        const updateProgress = async () => {
+            const children = await block.children();
+            const todoChildren = children.filter(
+                child => child.type === Protocol.Block.Type.todo
+            );
+            const checkedTodoChildren = todoChildren.filter(
+                child => child.getProperty('checked')?.value === true
+            );
+            setProgress(checkedTodoChildren.length / todoChildren.length);
+        };
+
+        let childrenQueue: (() => void)[] = [];
+        const childrenUnobserve = () => {
+            childrenQueue.forEach(fn => fn());
+            childrenQueue = [];
+        };
+
+        const observeChildren = async () => {
+            const children = await block.children();
+
+            childrenUnobserve();
+            children.forEach(child => {
+                const unobserve = child.onUpdate(() => {
+                    updateProgress();
+                });
+                childrenQueue.push(unobserve);
+            });
+        };
+
+        observeChildren();
+        updateProgress();
+
+        const unobserve = block.onUpdate(() => {
+            observeChildren();
+            updateProgress();
+        });
+
+        return () => {
+            unobserve();
+            childrenUnobserve();
+        };
+    }, [block]);
+
+    return progress;
+};
+
+const KanbanChildrenRender = ({
+    blockId,
+    activeBlock,
+}: RenderBlockProps & { activeBlock?: string | null }) => {
+    const { block } = useBlock(blockId);
+    const progress = useBlockProgress(block);
+
+    if (!block || !block?.childrenIds.length) {
+        return null;
     }
 
     return (
         <BlockRenderProvider blockRender={NullBlockRender}>
-            <RenderBlock blockId={blockId} />
+            <ProgressBar progress={progress} />
             {block?.childrenIds.map(childId => (
-                <StyledBorder key={childId}>
+                <ChildBorder key={childId} active={activeBlock === childId}>
                     <RenderBlock blockId={childId} />
-                </StyledBorder>
+                </ChildBorder>
             ))}
         </BlockRenderProvider>
     );
 };
 
-const StyledBorder = styled('div')({
-    border: '1px solid #E0E6EB',
-    borderRadius: '5px',
-    margin: '4px',
-    padding: '0 4px',
-});
+export const KanbanBlockRender = ({
+    blockId,
+    activeBlock,
+}: RenderBlockProps & { activeBlock?: string | null }) => {
+    return (
+        <BlockRenderProvider blockRender={NullBlockRender}>
+            <KanbanParentBlockRender
+                blockId={blockId}
+                active={activeBlock === blockId}
+            />
+            <KanbanChildrenRender blockId={blockId} activeBlock={activeBlock} />
+        </BlockRenderProvider>
+    );
+};
+
+const BlockBorder = styled('div')<{ active?: boolean }>(
+    ({ theme, active }) => ({
+        borderRadius: '5px',
+        padding: '0 4px',
+        border: `1px solid ${
+            active ? theme.affine.palette.primary : 'transparent'
+        }`,
+    })
+);
+
+const ProgressBar = styled('div')<{ progress?: number }>(
+    ({ progress = 1 }) => ({
+        height: '3px',
+        width: '100%',
+        background: '#CFE5FF',
+        borderRadius: '5px',
+        overflow: 'hidden',
+        margin: '12px 0',
+
+        '::after': {
+            content: '""',
+            position: 'relative',
+            display: 'flex',
+            background: '#60A5FA',
+            height: '100%',
+            width: `${(progress * 100).toFixed(2)}%`,
+            transition: 'ease 0.5s all',
+        },
+    })
+);
+
+const ChildBorder = styled(BlockBorder)(({ active, theme }) => ({
+    border: `1px solid  ${active ? theme.affine.palette.primary : '#E0E6EB'}`,
+    margin: '4px 0',
+}));

libs/components/editor-core/src/render-block/index.ts

@@ -1,4 +1,5 @@
 export { BlockRenderProvider, useBlockRender } from './Context';
-export * from './RenderBlock';
-export * from './RenderBlockChildren';
+export { NullBlockRender, RenderBlock } from './RenderBlock';
+export { RenderBlockChildren } from './RenderBlockChildren';
+export { KanbanBlockRender } from './RenderKanbanBlock';
 export { withTreeViewChildren } from './WithTreeViewChildren';