refactor(plugin-workflow): change tasks api

packages/core/client/src/schema-component/antd/list/index.ts

@@ -8,3 +8,4 @@
  */
 
 export * from './List';
+export { useListBlockContext } from './List.Decorator';

packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx

@@ -33,9 +33,12 @@ import {
   useActionContext,
   useCurrentUserContext,
   useFormBlockContext,
-  useTableBlockContext,
+  useListBlockContext,
   List,
   OpenModeProvider,
+  ActionContextProvider,
+  useRequest,
+  CollectionRecordProvider,
 } from '@nocobase/client';
 import WorkflowPlugin, {
   DetailsBlockProvider,
@@ -46,12 +49,14 @@ import WorkflowPlugin, {
   EXECUTION_STATUS,
   JOB_STATUS,
   WorkflowTitle,
+  TASK_STATUS,
 } from '@nocobase/plugin-workflow/client';
 
 import { NAMESPACE, useLang } from '../locale';
 import { FormBlockProvider } from './instruction/FormBlockProvider';
 import { ManualFormType, manualFormTypes } from './instruction/SchemaConfig';
 import { TaskStatusOptionsMap } from '../common/constants';
+import { useNavigate, useParams } from 'react-router-dom';
 
 function TaskStatusColumn(props) {
   const recordData = useCollectionRecordData();
@@ -291,11 +296,12 @@ function useSubmit() {
   const { values, submit } = useForm();
   const field = useField();
   const buttonSchema = useFieldSchema();
-  const { service } = useTableBlockContext();
+  const { service } = useListBlockContext();
   const { userJob, execution } = useFlowContext();
   const { name: actionKey } = buttonSchema;
   const { name: formKey } = buttonSchema.parent.parent;
   const { assignedValues = {} } = buttonSchema?.['x-action-settings'] ?? {};
+
   return {
     async run() {
       if (execution.status || userJob.status) {
@@ -611,57 +617,35 @@ function ContentDetailWithTitle(props) {
 
 function TaskItem() {
   const token = useAntdToken();
-  const [visible, setVisible] = useState(false);
   const record = useCollectionRecordData();
-  const { t } = useTranslation();
+  const navigate = useNavigate();
-  // const { defaultOpenMode } = useOpenModeContext();
+  const onOpen = useCallback(
-  // const { openPopup } = usePopupUtils();
+    (e: React.MouseEvent) => {
-  // const { isPopupVisibleControlledByURL } = usePopupSettings();
+      const targetElement = e.target as Element; // 将事件目标转换为Element类型
-  const onOpen = useCallback((e: React.MouseEvent) => {
+      const currentTargetElement = e.currentTarget as Element;
-    const targetElement = e.target as Element; // 将事件目标转换为Element类型
+      if (currentTargetElement.contains(targetElement)) {
-    const currentTargetElement = e.currentTarget as Element;
+        navigate(`./${record.id}`);
-    if (currentTargetElement.contains(targetElement)) {
+      }
-      setVisible(true);
+      e.stopPropagation();
-      // if (!isPopupVisibleControlledByURL()) {
+    },
-      // } else {
+    [navigate, record.id],
-      //   openPopup({
+  );
-      //     // popupUidUsedInURL: 'job',
-      //     customActionSchema: {
-      //       type: 'void',
-      //       'x-uid': 'job-view',
-      //       'x-action-context': {
-      //         dataSource: 'main',
-      //         collection: 'workflowManualTasks',
-      //         doNotUpdateContext: true,
-      //       },
-      //       properties: {},
-      //     },
-      //   });
-      // }
-    }
-    e.stopPropagation();
-  }, []);
 
   return (
-    <>
+    <Card
-      <Card
+      onClick={onOpen}
-        onClick={onOpen}
+      hoverable
-        hoverable
+      size="small"
-        size="small"
+      title={record.title}
-        title={record.title}
+      extra={<WorkflowTitle {...record.workflow} />}
-        extra={<WorkflowTitle {...record.workflow} />}
+      className={css`
-        className={css`
+        .ant-card-extra {
-          .ant-card-extra {
+          color: ${token.colorTextDescription};
-            color: ${token.colorTextDescription};
+        }
-          }
+      `}
-        `}
+    >
-      >
+      <ContentDetail />
-        <ContentDetail />
+    </Card>
-      </Card>
-      <PopupContextProvider visible={visible} setVisible={setVisible} openMode="modal">
-        <Drawer />
-      </PopupContextProvider>
-    </>
   );
 }
 
@@ -734,7 +718,9 @@ function TodoExtraActions() {
 export const manualTodo = {
   title: `{{t("My manual tasks", { ns: "${NAMESPACE}" })}}`,
   collection: 'workflowManualTasks',
+  action: 'listMine',
   useActionParams: useTodoActionParams,
-  component: TaskItem,
+  Actions: TodoExtraActions,
-  extraActions: TodoExtraActions,
+  Item: TaskItem,
+  Detail: Drawer,
 };

packages/plugins/@nocobase/plugin-workflow-manual/src/server/actions.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { Context, utils } from '@nocobase/actions';
+import actions, { Context, utils } from '@nocobase/actions';
 import WorkflowPlugin, { EXECUTION_STATUS, JOB_STATUS } from '@nocobase/plugin-workflow';
 
 import ManualInstruction from './ManualInstruction';
@@ -111,3 +111,24 @@ export async function submit(context: Context, next) {
 
   plugin.resume(task.job);
 }
+
+export async function listMine(context, next) {
+  context.action.mergeParams({
+    filter: {
+      userId: context.state.currentUser.id,
+      $or: [
+        {
+          'workflow.enabled': true,
+        },
+        {
+          'workflow.enabled': false,
+          status: {
+            $ne: JOB_STATUS.PENDING,
+          },
+        },
+      ],
+    },
+  });
+
+  return actions.list(context, next);
+}

packages/plugins/@nocobase/plugin-workflow/src/client/WorkflowTasks.tsx

@@ -14,6 +14,8 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo, useS
 import { Link, Outlet, useNavigate, useParams } from 'react-router-dom';
 
 import {
+  ActionContextProvider,
+  CollectionRecordProvider,
   css,
   PinnedPluginListProvider,
   SchemaComponent,
@@ -58,9 +60,11 @@ const contentClass = css`
 export interface TaskTypeOptions {
   title: string;
   collection: string;
+  action: string;
   useActionParams: Function;
-  component: React.ComponentType;
+  Actions?: React.ComponentType;
-  extraActions?: React.ComponentType;
+  Item: React.ComponentType;
+  Detail: React.ComponentType;
   // children?: TaskTypeOptions[];
 }
 
@@ -79,7 +83,7 @@ function MenuLink({ type }: any) {
 
   return (
     <Link
-      to={`/admin/workflow/tasks/${type}`}
+      to={`/admin/workflow/tasks/${type}/${TASK_STATUS.PENDING}`}
       className={css`
         display: flex;
         align-items: center;
@@ -99,7 +103,7 @@ function MenuLink({ type }: any) {
   );
 }
 
-const TASK_STATUS = {
+export const TASK_STATUS = {
   ALL: 'all',
   PENDING: 'pending',
   COMPLETED: 'completed',
@@ -109,7 +113,7 @@ function StatusTabs() {
   const navigate = useNavigate();
   const { taskType, status = TASK_STATUS.PENDING } = useParams();
   const type = useCurrentTaskType();
-  const { extraActions: ExtraActions } = type;
+  const { Actions } = type;
   return (
     <Tabs
       activeKey={status}
@@ -136,9 +140,9 @@ function StatusTabs() {
         },
       ]}
       tabBarExtraContent={
-        ExtraActions
+        Actions
           ? {
-              right: <ExtraActions />,
+              right: <Actions />,
             }
           : {}
       }
@@ -171,18 +175,36 @@ function useCurrentTaskType() {
   );
 }
 
+function PopupContext(props: any) {
+  const { popupId } = useParams();
+  const navigate = useNavigate();
+  return (
+    <ActionContextProvider
+      visible={Boolean(popupId)}
+      setVisible={(visible) => {
+        if (!visible) {
+          navigate(-1);
+        }
+      }}
+      openMode="modal"
+    >
+      <CollectionRecordProvider record={{ id: popupId }}>{props.children}</CollectionRecordProvider>
+    </ActionContextProvider>
+  );
+}
+
 export function WorkflowTasks() {
   const compile = useCompile();
   const { setTitle } = useDocumentTitle();
   const navigate = useNavigate();
-  const { taskType, status = TASK_STATUS.PENDING } = useParams();
+  const { taskType, status = TASK_STATUS.PENDING, popupId } = useParams();
   const {
     token: { colorBgContainer },
   } = useToken();
 
   const items = useTaskTypeItems();
 
-  const { title, collection, useActionParams, component: Component } = useCurrentTaskType();
+  const { title, collection, action = 'list', useActionParams, Item, Detail } = useCurrentTaskType();
 
   const params = useActionParams(status);
 
@@ -234,7 +256,7 @@ export function WorkflowTasks() {
               'x-decorator': 'List.Decorator',
               'x-decorator-props': {
                 collection,
-                action: 'list',
+                action,
                 params: {
                   pageSize: 20,
                   sort: ['-createdAt'],
@@ -284,17 +306,21 @@ export function WorkflowTasks() {
                         item: {
                           type: 'object',
                           'x-decorator': 'List.Item',
-                          'x-component': Component,
+                          'x-component': Item,
                           'x-read-pretty': true,
                         },
                       },
                     },
                   },
                 },
+                popup: {
+                  type: 'void',
+                  'x-decorator': PopupContext,
+                  'x-component': Detail,
+                },
               },
             }}
           />
-          <Outlet />
         </SchemaComponentContext.Provider>
       </Layout>
     </Layout>
@@ -309,7 +335,7 @@ function WorkflowTasksLink() {
   return types.length ? (
     <Tooltip title={lang('Workflow todos')}>
       <Button>
-        <Link to={`/admin/workflow/tasks/${types[0]}`} onClick={reload}>
+        <Link to={`/admin/workflow/tasks/${types[0]}/${TASK_STATUS.PENDING}`} onClick={reload}>
           <Badge count={total} size="small">
             <CheckCircleOutlined />
           </Badge>
@@ -370,7 +396,7 @@ function TasksCountsProvider(props: any) {
   return <TasksCountsContext.Provider value={{ reload, total, counts }}>{props.children}</TasksCountsContext.Provider>;
 }
 
-export const TasksProvider = (props: any) => {
+export function TasksProvider(props: any) {
   const isLoggedIn = useIsLoggedIn();
 
   const content = (
@@ -390,4 +416,4 @@ export const TasksProvider = (props: any) => {
   );
 
   return isLoggedIn ? <TasksCountsProvider>{content}</TasksCountsProvider> : content;
-};
+}

packages/plugins/@nocobase/plugin-workflow/src/client/index.tsx

@@ -120,15 +120,10 @@ export default class PluginWorkflowClient extends Plugin {
     });
 
     this.router.add('admin.workflow.tasks', {
-      path: '/admin/workflow/tasks/:taskType/:status?',
+      path: '/admin/workflow/tasks/:taskType/:status/:popupId?',
       Component: WorkflowTasks,
     });
 
-    this.router.add('admin.workflow.tasks.popup', {
-      path: '/admin/workflow/tasks/:taskType/:status/popups/*',
-      Component: PagePopups,
-    });
-
     this.app.pluginSettingsManager.add(NAMESPACE, {
       icon: 'PartitionOutlined',
       title: `{{t("Workflow", { ns: "${NAMESPACE}" })}}`,
@@ -193,3 +188,4 @@ export { default as useStyles } from './style';
 export { Trigger, useTrigger } from './triggers';
 export * from './utils';
 export * from './variable';
+export { TASK_STATUS } from './WorkflowTasks';