@nocobase/plugin-workflow-manual 0.17.0-alpha.4

package/dist/server/index.js

@@ -0,0 +1,33 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var server_exports = {};
+__export(server_exports, {
+  default: () => import_Plugin.default
+});
+module.exports = __toCommonJS(server_exports);
+var import_Plugin = __toESM(require("./Plugin"));

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@nocobase/plugin-workflow-manual",
+  "displayName": "Workflow: Manual node",
+  "displayName.zh-CN": "工作流：人工处理节点",
+  "description": "Could be used for workflows which some of decisions are made by users.",
+  "description.zh-CN": "用于人工控制部分决策的流程。",
+  "version": "0.17.0-alpha.4",
+  "license": "AGPL-3.0",
+  "main": "./dist/server/index.js",
+  "devDependencies": {
+    "@ant-design/icons": "5.x",
+    "@formily/antd-v5": "1.x",
+    "@formily/core": "2.x",
+    "@formily/react": "2.x",
+    "antd": "5.x",
+    "lodash": "4.17.21",
+    "react": "18.x",
+    "react-i18next": "^11.15.1",
+    "react-router-dom": "^6.11.2"
+  },
+  "peerDependencies": {
+    "@nocobase/client": "0.x",
+    "@nocobase/database": "0.x",
+    "@nocobase/plugin-collection-manager": "0.x",
+    "@nocobase/plugin-users": "0.x",
+    "@nocobase/plugin-workflow": ">=0.17.0-alpha.3",
+    "@nocobase/plugin-workflow-test": ">=0.17.0-alpha.3",
+    "@nocobase/server": "0.x",
+    "@nocobase/test": "0.x",
+    "@nocobase/utils": "0.x"
+  },
+  "gitHead": "663b03a3799a70ba1a2bc6a0d686e679331a50ad"
+}

package/server.d.ts

@@ -0,0 +1,2 @@
+export * from './dist/server';
+export { default } from './dist/server';

package/server.js

@@ -0,0 +1 @@
+module.exports = require('./dist/server/index.js');

package/src/client/WorkflowTodo.tsx

@@ -0,0 +1,618 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { observer, useField, useFieldSchema, useForm } from '@formily/react';
+import { Space, Spin, Tag } from 'antd';
+import dayjs from 'dayjs';
+
+import { css, usePlugin } from '@nocobase/client';
+
+import {
+  CollectionManagerProvider,
+  SchemaComponent,
+  SchemaComponentContext,
+  TableBlockProvider,
+  useAPIClient,
+  useActionContext,
+  useCollectionManager,
+  useCompile,
+  useCurrentUserContext,
+  useFormBlockContext,
+  useRecord,
+  useTableBlockContext,
+} from '@nocobase/client';
+import WorkflowPlugin, {
+  useAvailableUpstreams,
+  FlowContext,
+  useFlowContext,
+  JobStatusOptions,
+  JobStatusOptionsMap,
+  linkNodes,
+} from '@nocobase/plugin-workflow/client';
+
+import { DetailsBlockProvider } from './instruction/DetailsBlockProvider';
+import { FormBlockProvider } from './instruction/FormBlockProvider';
+import { ManualFormType, manualFormTypes } from './instruction/SchemaConfig';
+import { NAMESPACE } from '../locale';
+
+const nodeCollection = {
+  title: `{{t("Task", { ns: "${NAMESPACE}" })}}`,
+  name: 'flow_nodes',
+  fields: [
+    {
+      type: 'bigInt',
+      name: 'id',
+      interface: 'm2o',
+      uiSchema: {
+        type: 'number',
+        title: 'ID',
+        'x-component': 'RemoteSelect',
+        'x-component-props': {
+          fieldNames: {
+            label: 'title',
+            value: 'id',
+          },
+          service: {
+            resource: 'flow_nodes',
+            params: {
+              filter: {
+                type: 'manual',
+              },
+            },
+          },
+        },
+      },
+    },
+    {
+      type: 'string',
+      name: 'title',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: '{{t("Title")}}',
+        'x-component': 'Input',
+      },
+    },
+  ],
+};
+
+const workflowCollection = {
+  title: `{{t("Workflow", { ns: "${NAMESPACE}" })}}`,
+  name: 'workflows',
+  fields: [
+    {
+      type: 'string',
+      name: 'title',
+      interface: 'input',
+      uiSchema: {
+        title: '{{t("Name")}}',
+        type: 'string',
+        'x-component': 'Input',
+        required: true,
+      },
+    },
+  ],
+};
+
+const todoCollection = {
+  title: `{{t("Workflow todos", { ns: "${NAMESPACE}" })}}`,
+  name: 'users_jobs',
+  fields: [
+    {
+      type: 'belongsTo',
+      name: 'user',
+      target: 'users',
+      foreignKey: 'userId',
+      interface: 'm2o',
+      uiSchema: {
+        type: 'number',
+        title: '{{t("User")}}',
+        'x-component': 'RemoteSelect',
+        'x-component-props': {
+          fieldNames: {
+            label: 'nickname',
+            value: 'id',
+          },
+          service: {
+            resource: 'users',
+          },
+        },
+      },
+    },
+    {
+      type: 'belongsTo',
+      name: 'node',
+      target: 'flow_nodes',
+      foreignKey: 'nodeId',
+      interface: 'm2o',
+      isAssociation: true,
+      uiSchema: {
+        type: 'number',
+        title: `{{t("Task", { ns: "${NAMESPACE}" })}}`,
+        'x-component': 'RemoteSelect',
+        'x-component-props': {
+          fieldNames: {
+            label: 'title',
+            value: 'id',
+          },
+          service: {
+            resource: 'flow_nodes',
+          },
+        },
+      },
+    },
+    {
+      type: 'belongsTo',
+      name: 'workflow',
+      target: 'workflows',
+      foreignKey: 'workflowId',
+      interface: 'm2o',
+      uiSchema: {
+        type: 'number',
+        title: `{{t("Workflow", { ns: "${NAMESPACE}" })}}`,
+        'x-component': 'RemoteSelect',
+        'x-component-props': {
+          fieldNames: {
+            label: 'title',
+            value: 'id',
+          },
+          service: {
+            resource: 'workflows',
+          },
+        },
+      },
+    },
+    {
+      type: 'integer',
+      name: 'status',
+      interface: 'select',
+      uiSchema: {
+        type: 'number',
+        title: `{{t("Status", { ns: "${NAMESPACE}" })}}`,
+        'x-component': 'Select',
+        enum: JobStatusOptions,
+      },
+    },
+    {
+      name: 'createdAt',
+      type: 'date',
+      interface: 'createdAt',
+      uiSchema: {
+        type: 'datetime',
+        title: '{{t("Created at")}}',
+        'x-component': 'DatePicker',
+        'x-component-props': {
+          showTime: true,
+        },
+      },
+    },
+  ],
+};
+
+const NodeColumn = observer(
+  () => {
+    const field = useField<any>();
+    return field?.value?.title ?? `#${field.value?.id}`;
+  },
+  { displayName: 'NodeColumn' },
+);
+
+const WorkflowColumn = observer(
+  () => {
+    const field = useField<any>();
+    return field?.value?.title ?? `#${field.value?.id}`;
+  },
+  { displayName: 'WorkflowColumn' },
+);
+
+const UserColumn = observer(
+  () => {
+    const field = useField<any>();
+    return field?.value?.nickname ?? field.value?.id;
+  },
+  { displayName: 'UserColumn' },
+);
+
+export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC } = () => {
+  return (
+    <SchemaComponent
+      components={{
+        NodeColumn,
+        WorkflowColumn,
+        UserColumn,
+      }}
+      schema={{
+        type: 'void',
+        properties: {
+          actions: {
+            type: 'void',
+            'x-component': 'ActionBar',
+            'x-component-props': {
+              style: {
+                marginBottom: 16,
+              },
+            },
+            properties: {
+              filter: {
+                type: 'void',
+                title: '{{ t("Filter") }}',
+                'x-action': 'filter',
+                'x-designer': 'Filter.Action.Designer',
+                'x-component': 'Filter.Action',
+                'x-component-props': {
+                  icon: 'FilterOutlined',
+                  useProps: '{{ useFilterActionProps }}',
+                },
+                'x-align': 'left',
+              },
+              refresher: {
+                type: 'void',
+                title: '{{ t("Refresh") }}',
+                'x-action': 'refresh',
+                'x-component': 'Action',
+                'x-designer': 'Action.Designer',
+                'x-component-props': {
+                  icon: 'ReloadOutlined',
+                  useProps: '{{ useRefreshActionProps }}',
+                },
+                'x-align': 'right',
+              },
+            },
+          },
+          table: {
+            type: 'array',
+            'x-component': 'TableV2',
+            'x-component-props': {
+              rowKey: 'id',
+              useProps: '{{ useTableBlockProps }}',
+            },
+            properties: {
+              node: {
+                type: 'void',
+                'x-decorator': 'TableV2.Column.Decorator',
+                'x-component': 'TableV2.Column',
+                title: `{{t("Task", { ns: "${NAMESPACE}" })}}`,
+                properties: {
+                  node: {
+                    'x-component': 'NodeColumn',
+                    'x-read-pretty': true,
+                  },
+                },
+              },
+              workflow: {
+                type: 'void',
+                'x-decorator': 'TableV2.Column.Decorator',
+                'x-component': 'TableV2.Column',
+                title: `{{t("Workflow", { ns: "${NAMESPACE}" })}}`,
+                properties: {
+                  workflow: {
+                    'x-component': 'WorkflowColumn',
+                    'x-read-pretty': true,
+                  },
+                },
+              },
+              createdAt: {
+                type: 'void',
+                'x-decorator': 'TableV2.Column.Decorator',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  createdAt: {
+                    type: 'string',
+                    'x-component': 'CollectionField',
+                    'x-read-pretty': true,
+                  },
+                },
+              },
+              user: {
+                type: 'void',
+                'x-decorator': 'TableV2.Column.Decorator',
+                'x-component': 'TableV2.Column',
+                title: `{{t("Assignee", { ns: "${NAMESPACE}" })}}`,
+                properties: {
+                  user: {
+                    'x-component': 'UserColumn',
+                    'x-read-pretty': true,
+                  },
+                },
+              },
+              status: {
+                type: 'void',
+                'x-decorator': 'TableV2.Column.Decorator',
+                'x-component': 'TableV2.Column',
+                properties: {
+                  status: {
+                    'x-component': 'CollectionField',
+                    'x-read-pretty': true,
+                  },
+                },
+              },
+              actions: {
+                type: 'void',
+                'x-decorator': 'TableV2.Column.Decorator',
+                'x-component': 'TableV2.Column',
+                title: '{{t("Actions")}}',
+                properties: {
+                  view: {
+                    type: 'void',
+                    'x-component': 'Action.Link',
+                    title: '{{t("View")}}',
+                    properties: {
+                      drawer: {
+                        'x-component': 'WorkflowTodo.Drawer',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      }}
+    />
+  );
+};
+
+function ActionBarProvider(props) {
+  // * status is done:
+  //   1. form is this form: show action button, and emphasis used status button
+  //   2. form is not this form: hide action bar
+  // * status is not done:
+  //   1. current user: show action bar
+  //   2. not current user: disabled action bar
+
+  const { data: user } = useCurrentUserContext();
+  const { userJob } = useFlowContext();
+  const { status, result, userId } = userJob;
+  const buttonSchema = useFieldSchema();
+  const { name } = buttonSchema.parent.toJSON();
+
+  let { children: content } = props;
+  if (status) {
+    if (!result[name]) {
+      content = null;
+    }
+  } else {
+    if (user?.data?.id !== userId) {
+      content = null;
+    }
+  }
+
+  return content;
+}
+
+const ManualActionStatusContext = createContext<number | null>(null);
+
+function ManualActionStatusProvider({ value, children }) {
+  const { userJob } = useFlowContext();
+  const button = useField();
+  const buttonSchema = useFieldSchema();
+
+  useEffect(() => {
+    if (userJob.status) {
+      button.disabled = true;
+      button.visible = userJob.status === value && userJob.result._ === buttonSchema.name;
+    }
+  }, [userJob, value, button, buttonSchema.name]);
+
+  return <ManualActionStatusContext.Provider value={value}>{children}</ManualActionStatusContext.Provider>;
+}
+
+function useSubmit() {
+  const api = useAPIClient();
+  const { setVisible } = useActionContext();
+  const { values, submit } = useForm();
+  const buttonSchema = useFieldSchema();
+  const { service } = useTableBlockContext();
+  const { userJob } = useFlowContext();
+  const { name: actionKey } = buttonSchema;
+  const { name: formKey } = buttonSchema.parent.parent;
+  return {
+    async run() {
+      if (userJob.status) {
+        return;
+      }
+      await submit();
+      await api.resource('users_jobs').submit({
+        filterByTk: userJob.id,
+        values: {
+          result: { [formKey]: values, _: actionKey },
+        },
+      });
+      setVisible(false);
+      service.refresh();
+    },
+  };
+}
+
+function FlowContextProvider(props) {
+  const workflowPlugin = usePlugin(WorkflowPlugin);
+  const api = useAPIClient();
+  const { id } = useRecord();
+  const [flowContext, setFlowContext] = useState<any>(null);
+  const [node, setNode] = useState<any>(null);
+
+  useEffect(() => {
+    if (!id) {
+      return;
+    }
+    api
+      .resource('users_jobs')
+      .get?.({
+        filterByTk: id,
+        appends: ['node', 'workflow', 'workflow.nodes', 'execution', 'execution.jobs'],
+      })
+      .then(({ data }) => {
+        const { node, workflow: { nodes = [], ...workflow } = {}, execution, ...userJob } = data?.data ?? {};
+        linkNodes(nodes);
+        setNode(node);
+        setFlowContext({
+          userJob,
+          workflow,
+          nodes,
+          execution,
+        });
+        return;
+      });
+  }, [api, id]);
+
+  const upstreams = useAvailableUpstreams(flowContext?.nodes.find((item) => item.id === node.id));
+  const nodeComponents = upstreams.reduce(
+    (components, { type }) => Object.assign(components, workflowPlugin.instructions.get(type).components),
+    {},
+  );
+
+  return node && flowContext ? (
+    <FlowContext.Provider value={flowContext}>
+      <SchemaComponent
+        components={{
+          FormBlockProvider,
+          DetailsBlockProvider,
+          ActionBarProvider,
+          ManualActionStatusProvider,
+          // @ts-ignore
+          ...Array.from(manualFormTypes.getValues()).reduce(
+            (result, item: ManualFormType) => Object.assign(result, item.block.components),
+            {},
+          ),
+          ...nodeComponents,
+        }}
+        scope={{
+          useSubmit,
+          useFormBlockProps,
+          useDetailsBlockProps,
+          // @ts-ignore
+          ...Array.from(manualFormTypes.getValues()).reduce(
+            (result, item: ManualFormType) => Object.assign(result, item.block.scope),
+            {},
+          ),
+        }}
+        schema={{
+          type: 'void',
+          name: 'tabs',
+          'x-component': 'Tabs',
+          properties: node.config?.schema,
+        }}
+      />
+    </FlowContext.Provider>
+  ) : (
+    <Spin />
+  );
+}
+
+function useFormBlockProps() {
+  const { userJob } = useFlowContext();
+  const record = useRecord();
+  const { data: user } = useCurrentUserContext();
+  const { form } = useFormBlockContext();
+
+  const pattern = userJob.status
+    ? record
+      ? 'readPretty'
+      : 'disabled'
+    : user?.data?.id !== userJob.userId
+    ? 'disabled'
+    : 'editable';
+
+  useEffect(() => {
+    form?.setPattern(pattern);
+  }, [pattern, form]);
+
+  return { form };
+}
+
+function useDetailsBlockProps() {
+  const { form } = useFormBlockContext();
+  return { form };
+}
+
+function FooterStatus() {
+  const compile = useCompile();
+  const { status, updatedAt } = useRecord();
+  const statusOption = JobStatusOptionsMap[status];
+  return status ? (
+    <Space>
+      <time
+        className={css`
+          margin-right: 0.5em;
+        `}
+      >
+        {dayjs(updatedAt).format('YYYY-MM-DD HH:mm:ss')}
+      </time>
+      <Tag icon={statusOption.icon} color={statusOption.color}>
+        {compile(statusOption.label)}
+      </Tag>
+    </Space>
+  ) : null;
+}
+
+function Drawer() {
+  const ctx = useContext(SchemaComponentContext);
+  const { id, node, workflow, status } = useRecord();
+
+  return (
+    <SchemaComponentContext.Provider value={{ ...ctx, reset() {}, designable: false }}>
+      <SchemaComponent
+        components={{
+          FooterStatus,
+          FlowContextProvider,
+        }}
+        schema={{
+          type: 'void',
+          name: `drawer-${id}-${status}`,
+          'x-component': 'Action.Drawer',
+          'x-component-props': {
+            className: 'nb-action-popup',
+          },
+          title: `${workflow.title} - ${node.title ?? `#${node.id}`}`,
+          properties: {
+            tabs: {
+              type: 'void',
+              'x-component': 'FlowContextProvider',
+            },
+            footer: {
+              type: 'void',
+              'x-component': 'Action.Drawer.Footer',
+              properties: {
+                content: {
+                  type: 'void',
+                  'x-component': 'FooterStatus',
+                },
+              },
+            },
+          },
+        }}
+      />
+    </SchemaComponentContext.Provider>
+  );
+}
+
+function Decorator({ params = {}, children }) {
+  const { collections, ...cm } = useCollectionManager();
+  const blockProps = {
+    collection: 'users_jobs',
+    resource: 'users_jobs',
+    action: 'list',
+    params: {
+      pageSize: 20,
+      sort: ['-createdAt'],
+      ...params,
+      appends: ['user', 'node', 'workflow'],
+      except: ['node.config', 'workflow.config', 'workflow.options'],
+    },
+    rowKey: 'id',
+    showIndex: true,
+    dragSort: false,
+  };
+
+  return (
+    <CollectionManagerProvider
+      {...cm}
+      collections={[...collections, nodeCollection, workflowCollection, todoCollection]}
+    >
+      <TableBlockProvider name="workflow-todo" {...blockProps}>
+        {children}
+      </TableBlockProvider>
+    </CollectionManagerProvider>
+  );
+}
+
+WorkflowTodo.Drawer = Drawer;
+WorkflowTodo.Decorator = Decorator;