feat: improve kanban

packages/core/client/src/block-provider/KanbanBlockProvider.tsx

@@ -2,6 +2,7 @@ import { ArrayField } from '@formily/core';
 import { useField } from '@formily/react';
 import { Spin } from 'antd';
 import React, { createContext, useContext, useEffect } from 'react';
+import { useACLRoleContext } from '../acl';
 import { useCollection } from '../collection-manager';
 import { toColumns } from '../schema-component/antd/kanban-v2/Kanban';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';
@@ -33,6 +34,9 @@ const InternalKanbanBlockProvider = (props) => {
   return (
     <KanbanBlockContext.Provider
       value={{
+        props: {
+          resource: props.resource,
+        },
         field,
         service,
         resource,
@@ -56,6 +60,16 @@ export const useKanbanBlockContext = () => {
   return useContext(KanbanBlockContext);
 };
 
+const useDisableCardDrag = () => {
+  const ctx = useKanbanBlockContext();
+  const { allowAll, allowConfigure, getActionParams } = useACLRoleContext();
+  if (allowAll || allowConfigure) {
+    return false;
+  }
+  const result = getActionParams(`${ctx?.props?.resource}:update`, { skipOwnCheck: true });
+  return !result;
+}
+
 export const useKanbanBlockProps = () => {
   const field = useField<ArrayField>();
   const ctx = useKanbanBlockContext();
@@ -67,6 +81,7 @@ export const useKanbanBlockProps = () => {
   }, [ctx?.service?.loading]);
   return {
     groupField: ctx.groupField,
+    disableCardDrag: useDisableCardDrag(),
     async onCardDragEnd({ columns, groupField }, { fromColumnId, fromPosition }, { toColumnId, toPosition }) {
       const sourceColumn = columns.find((column) => column.id === fromColumnId);
       const destinationColumn = columns.find((column) => column.id === toColumnId);

packages/core/client/src/schema-component/antd/kanban-v2/Kanban.tsx

@@ -58,7 +58,7 @@ export const Kanban: ComposedKanban = observer((props: any) => {
   const { groupField, onCardDragEnd, ...restProps } = useProps(props);
   const field = useField<ArrayField>();
   const fieldSchema = useFieldSchema();
-  const [disableCardDrag, setDisableCardDrag] = useState(false);
+  const [disableCardDrag, setDisableCardDrag] = useState(!!restProps.disableCardDrag);
   const schemas = useMemo(
     () =>
       fieldSchema.reduceProperties(
@@ -88,7 +88,7 @@ export const Kanban: ComposedKanban = observer((props: any) => {
   return (
     <Spin spinning={field.loading || false}>
       <Board
-        allowAddCard
+        allowAddCard={!!schemas.cardAdder}
         disableColumnDrag
         cardAdderPosition={'bottom'}
         disableCardDrag={disableCardDrag}
@@ -124,6 +124,9 @@ export const Kanban: ComposedKanban = observer((props: any) => {
           );
         }}
         renderCardAdder={({ column }) => {
+          if (!schemas.cardAdder) {
+            return null;
+          }
           return (
             <KanbanColumnContext.Provider value={{ column, groupField }}>
               <SchemaComponentOptions scope={{ useCreateActionProps }}>

packages/core/client/src/schema-initializer/buttons/KanbanActionInitializers.tsx

@@ -0,0 +1,35 @@
+export const KanbanActionInitializers = {
+  title: "{{t('Configure actions')}}",
+  icon: 'SettingOutlined',
+  style: {
+    marginLeft: 8,
+  },
+  items: [
+    {
+      type: 'itemGroup',
+      title: "{{t('Enable actions')}}",
+      children: [
+        {
+          type: 'item',
+          title: "{{t('Filter')}}",
+          component: 'FilterActionInitializer',
+          schema: {
+            'x-align': 'left',
+          },
+        },
+        {
+          type: 'item',
+          title: "{{t('Add new')}}",
+          component: 'CreateActionInitializer',
+          schema: {
+            'x-align': 'right',
+            'x-decorator': 'ACLActionProvider',
+            'x-acl-action-props': {
+              skipScopeCheck: true,
+            },
+          },
+        },
+      ],
+    },
+  ],
+};

packages/core/client/src/schema-initializer/buttons/index.ts

@@ -4,6 +4,7 @@ export * from './CreateFormBlockInitializers';
 export * from './DetailsActionInitializers';
 export * from './FormActionInitializers';
 export * from './FormItemInitializers';
+export * from './KanbanActionInitializers';
 export * from './ReadPrettyFormActionInitializers';
 export * from './ReadPrettyFormItemInitializers';
 export * from './RecordBlockInitializers';

packages/core/client/src/schema-initializer/utils.ts

@@ -701,8 +701,19 @@ export const createKanbanBlockSchema = (options) => {
       ...others,
     },
     'x-designer': 'KanbanV2.Designer',
-    'x-component': 'BlockItem',
+    'x-component': 'CardItem',
     properties: {
+      actions: {
+        type: 'void',
+        'x-initializer': 'KanbanActionInitializers',
+        'x-component': 'ActionBar',
+        'x-component-props': {
+          style: {
+            marginBottom: 16,
+          },
+        },
+        properties: {},
+      },
       [uid()]: {
         type: 'array',
         'x-component': 'KanbanV2',
@@ -724,37 +735,6 @@ export const createKanbanBlockSchema = (options) => {
               },
             },
           },
-          cardAdder: {
-            title: '{{t("Add new")}}',
-            type: 'void',
-            'x-designer': 'Action.Designer',
-            'x-designer-props': {
-              draggable: false,
-            },
-            'x-component': 'KanbanV2.CardAdder',
-            'x-component-props': {
-              type: 'text',
-              openMode: 'drawer',
-            },
-            properties: {
-              drawer: {
-                type: 'void',
-                title: '{{ t("Add record") }}',
-                'x-component': 'Action.Container',
-                'x-component-props': {
-                  className: 'nb-action-popup',
-                },
-                properties: {
-                  grid: {
-                    type: 'void',
-                    'x-component': 'Grid',
-                    'x-initializer': 'CreateFormBlockInitializers',
-                    properties: {},
-                  },
-                },
-              },
-            },
-          },
           cardViewer: {
             type: 'void',
             title: '{{ t("View") }}',