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

package/src/client/WorkflowTodoBlockInitializer.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { TableOutlined } from '@ant-design/icons';
+
+import { SchemaInitializerItem, useSchemaInitializer, useSchemaInitializerItem } from '@nocobase/client';
+
+export const WorkflowTodoBlockInitializer: FC<any> = () => {
+  const itemConfig = useSchemaInitializerItem();
+  const { insert } = useSchemaInitializer();
+  return (
+    <SchemaInitializerItem
+      icon={<TableOutlined />}
+      {...itemConfig}
+      onClick={() => {
+        insert({
+          type: 'void',
+          'x-decorator': 'WorkflowTodo.Decorator',
+          'x-decorator-props': {},
+          'x-component': 'CardItem',
+          'x-designer': 'TableBlockDesigner',
+          properties: {
+            todos: {
+              type: 'void',
+              'x-component': 'WorkflowTodo',
+            },
+          },
+        });
+      }}
+    />
+  );
+};

package/src/client/index.ts

@@ -0,0 +1,44 @@
+import { Plugin } from '@nocobase/client';
+import WorkflowPlugin from '@nocobase/plugin-workflow/client';
+
+import Manual from './instruction';
+
+import { WorkflowTodo } from './WorkflowTodo';
+import { WorkflowTodoBlockInitializer } from './WorkflowTodoBlockInitializer';
+import { NAMESPACE } from '../locale';
+import { addActionButton, addBlockButton } from './instruction/SchemaConfig';
+import { addCustomFormField } from './instruction/forms/custom';
+
+export default class extends Plugin {
+  async afterAdd() {
+    // await this.app.pm.add()
+  }
+
+  // You can get and modify the app instance here
+  async load() {
+    this.addComponents();
+
+    // this.app.addProvider(Provider);
+    const workflow = this.app.pm.get('workflow') as WorkflowPlugin;
+    const manualInstruction = new Manual();
+    workflow.instructions.register(manualInstruction.type, manualInstruction);
+
+    this.app.schemaInitializerManager.add(addBlockButton);
+    this.app.schemaInitializerManager.add(addActionButton);
+    this.app.schemaInitializerManager.add(addCustomFormField);
+
+    const blockInitializers = this.app.schemaInitializerManager.get('BlockInitializers');
+    blockInitializers.add('otherBlocks.workflowTodos', {
+      title: `{{t("Workflow todos", { ns: "${NAMESPACE}" })}}`,
+      Component: 'WorkflowTodoBlockInitializer',
+      icon: 'CheckSquareOutlined',
+    });
+  }
+
+  addComponents() {
+    this.app.addComponents({
+      WorkflowTodo,
+      WorkflowTodoBlockInitializer,
+    });
+  }
+}

package/src/client/instruction/AssigneesSelect.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { RemoteSelect, Variable } from '@nocobase/client';
+import { useWorkflowVariableOptions } from '@nocobase/plugin-workflow/client';
+
+function isUserKeyField(field) {
+  if (field.isForeignKey) {
+    return field.target === 'users';
+  }
+  return field.collectionName === 'users' && field.name === 'id';
+}
+
+export function AssigneesSelect({ multiple = false, value = [], onChange }) {
+  const scope = useWorkflowVariableOptions({ types: [isUserKeyField] });
+
+  return (
+    <Variable.Input
+      scope={scope}
+      value={value[0]}
+      onChange={(next) => {
+        onChange([next]);
+      }}
+    >
+      <RemoteSelect
+        fieldNames={{
+          label: 'nickname',
+          value: 'id',
+        }}
+        service={{
+          resource: 'users',
+        }}
+        manual={false}
+        value={value[0]}
+        onChange={(v) => {
+          onChange(v != null ? [v] : []);
+        }}
+      />
+    </Variable.Input>
+  );
+}

package/src/client/instruction/DetailsBlockProvider.tsx

@@ -0,0 +1,85 @@
+import React, { useRef, useMemo, useContext } from 'react';
+import { createForm } from '@formily/core';
+import { useField } from '@formily/react';
+import {
+  BlockRequestContext,
+  CollectionProvider,
+  FormBlockContext,
+  RecordProvider,
+  useAPIClient,
+  useAssociationNames,
+} from '@nocobase/client';
+import { parse } from '@nocobase/utils/client';
+import { useFlowContext } from '@nocobase/plugin-workflow/client';
+
+function useFlowContextData(dataSource) {
+  const { execution, nodes } = useFlowContext();
+
+  const nodesKeyMap = useMemo(() => {
+    return nodes.reduce((map, node) => Object.assign(map, { [node.id]: node.key }), {});
+  }, [nodes]);
+
+  const data = useMemo(
+    () => ({
+      $context: execution?.context,
+      $jobsMapByNodeKey: (execution?.jobs ?? []).reduce(
+        (map, job) => Object.assign(map, { [nodesKeyMap[job.nodeId]]: job.result }),
+        {},
+      ),
+    }),
+    [execution?.context, execution?.jobs, nodesKeyMap],
+  );
+
+  const result = useMemo(() => parse(dataSource)(data), [data, dataSource]);
+  return result;
+}
+
+export function DetailsBlockProvider(props) {
+  const field = useField();
+  const formBlockRef = useRef(null);
+  const { appends, updateAssociationValues } = useAssociationNames();
+  const values = useFlowContextData(props.dataSource);
+
+  const form = useMemo(
+    () =>
+      createForm({
+        values,
+        readPretty: true,
+      }),
+    [values],
+  );
+
+  const params = {
+    appends,
+  };
+  const service = {
+    loading: false,
+    data: {
+      data: values,
+    },
+  };
+  const api = useAPIClient();
+  const resource = api.resource(props.collection);
+  const __parent = useContext(BlockRequestContext);
+
+  return (
+    <CollectionProvider collection={props.collection}>
+      <RecordProvider record={values} parent={false}>
+        <BlockRequestContext.Provider value={{ block: 'form', field, service, resource, __parent }}>
+          <FormBlockContext.Provider
+            value={{
+              params,
+              form,
+              field,
+              service,
+              updateAssociationValues,
+              formBlockRef,
+            }}
+          >
+            {props.children}
+          </FormBlockContext.Provider>
+        </BlockRequestContext.Provider>
+      </RecordProvider>
+    </CollectionProvider>
+  );
+}

package/src/client/instruction/FormBlockInitializer.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import {
+  CollectionProvider,
+  SchemaInitializerItem,
+  SchemaInitializerItemType,
+  createFormBlockSchema,
+  useRecordCollectionDataSourceItems,
+  useSchemaInitializer,
+  useSchemaInitializerItem,
+  useSchemaTemplateManager,
+} from '@nocobase/client';
+
+import { JOB_STATUS, traverseSchema } from '@nocobase/plugin-workflow/client';
+
+import { NAMESPACE } from '../../locale';
+
+function InternalFormBlockInitializer({ schema, ...others }) {
+  const { getTemplateSchemaByMode } = useSchemaTemplateManager();
+  const { insert } = useSchemaInitializer();
+  const items = useRecordCollectionDataSourceItems('FormItem') as SchemaInitializerItemType[];
+  async function onConfirm({ item }) {
+    const template = item.template ? await getTemplateSchemaByMode(item) : null;
+    const result = createFormBlockSchema({
+      actionInitializers: 'AddActionButton',
+      actions: {
+        resolve: {
+          type: 'void',
+          title: `{{t("Continue the process", { ns: "${NAMESPACE}" })}}`,
+          'x-decorator': 'ManualActionStatusProvider',
+          'x-decorator-props': {
+            value: JOB_STATUS.RESOLVED,
+          },
+          'x-component': 'Action',
+          'x-component-props': {
+            type: 'primary',
+            useAction: '{{ useSubmit }}',
+          },
+          'x-designer': 'ManualActionDesigner',
+          'x-designer-props': {},
+        },
+      },
+      ...schema,
+      template,
+    });
+    delete result['x-acl-action-props'];
+    delete result['x-acl-action'];
+    const [formKey] = Object.keys(result.properties);
+    result.properties[formKey].properties.actions['x-decorator'] = 'ActionBarProvider';
+    result.properties[formKey].properties.actions['x-component-props'].style = {
+      marginTop: '1.5em',
+      flexWrap: 'wrap',
+    };
+    traverseSchema(result, (node) => {
+      if (node['x-uid']) {
+        delete node['x-uid'];
+      }
+    });
+    insert(result);
+  }
+
+  return <SchemaInitializerItem {...others} onClick={onConfirm} items={items} />;
+}
+
+export function FormBlockInitializer() {
+  const itemConfig = useSchemaInitializerItem();
+  return (
+    <CollectionProvider collection={itemConfig.schema?.collection}>
+      <InternalFormBlockInitializer {...itemConfig} />
+    </CollectionProvider>
+  );
+}

package/src/client/instruction/FormBlockProvider.tsx

@@ -0,0 +1,84 @@
+import { createForm } from '@formily/core';
+import { RecursionField, useField, useFieldSchema } from '@formily/react';
+import {
+  BlockRequestContext,
+  CollectionProvider,
+  FormActiveFieldsProvider,
+  FormBlockContext,
+  FormV2,
+  RecordProvider,
+  useAPIClient,
+  useAssociationNames,
+  useDesignable,
+  useRecord,
+} from '@nocobase/client';
+import React, { useContext, useMemo, useRef } from 'react';
+
+export function FormBlockProvider(props) {
+  const userJob = useRecord();
+  const fieldSchema = useFieldSchema();
+  const field = useField();
+  const formBlockRef = useRef(null);
+  const { appends, updateAssociationValues } = useAssociationNames();
+  const [formKey] = Object.keys(fieldSchema.toJSON().properties ?? {});
+  const values = userJob?.result?.[formKey];
+
+  const { findComponent } = useDesignable();
+  const Component = findComponent(field.component?.[0]) || React.Fragment;
+
+  const form = useMemo(
+    () =>
+      createForm({
+        initialValues: values,
+      }),
+    [values],
+  );
+
+  const params = useMemo(() => {
+    return {
+      appends,
+      ...props.params,
+    };
+  }, [appends, props.params]);
+  const service = useMemo(() => {
+    return {
+      loading: false,
+      data: {
+        data: values,
+      },
+    };
+  }, [values]);
+  const api = useAPIClient();
+  const resource = api.resource(props.collection);
+  const __parent = useContext(BlockRequestContext);
+
+  const formBlockValue = useMemo(() => {
+    return {
+      params,
+      form,
+      field,
+      service,
+      updateAssociationValues,
+      formBlockRef,
+    };
+  }, [field, form, params, service, updateAssociationValues]);
+
+  return !userJob.status || values ? (
+    <CollectionProvider collection={props.collection}>
+      <RecordProvider record={values} parent={false}>
+        <FormActiveFieldsProvider name="form">
+          <BlockRequestContext.Provider value={{ block: 'form', props, field, service, resource, __parent }}>
+            <FormBlockContext.Provider value={formBlockValue}>
+              <Component {...field.componentProps}>
+                <FormV2.Templates style={{ marginBottom: 18 }} form={form} />
+                <div ref={formBlockRef}>
+                  <RecursionField schema={fieldSchema} onlyRenderProperties />
+                </div>
+              </Component>
+            </FormBlockContext.Provider>
+          </BlockRequestContext.Provider>
+        </FormActiveFieldsProvider>
+      </RecordProvider>
+    </CollectionProvider>
+  ) : null;
+}

package/src/client/instruction/ModeConfig.tsx

@@ -0,0 +1,85 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { FormLayout } from '@formily/antd-v5';
+import { Form, Radio, Tooltip } from 'antd';
+import React from 'react';
+
+import { css, FormItem } from '@nocobase/client';
+import { useLang } from '../../locale';
+
+function parseMode(v) {
+  if (!v) {
+    return 'single';
+  }
+  if (v >= 1) {
+    return 'all';
+  }
+  if (v <= -1) {
+    return 'any';
+  }
+
+  const dir = Math.sign(v);
+  if (dir > 0) {
+    return '';
+  }
+}
+
+export function ModeConfig({ value, onChange }) {
+  const mode = parseMode(value);
+  const negotiationFieldset = (
+    <fieldset>
+      <FormLayout layout="vertical">
+        <FormItem label={useLang('Negotiation')}>
+          <Radio.Group value={value} onChange={onChange}>
+            <Radio value={1}>
+              <Tooltip title={useLang('Everyone should pass')} placement="bottom">
+                <span>{useLang('All pass')}</span>
+                <QuestionCircleOutlined style={{ color: '#999' }} />
+              </Tooltip>
+            </Radio>
+            <Radio value={-1}>
+              <Tooltip title={useLang('Anyone pass')} placement="bottom">
+                <span>{useLang('Any pass')}</span>
+                <QuestionCircleOutlined style={{ color: '#999' }} />
+              </Tooltip>
+            </Radio>
+          </Radio.Group>
+        </FormItem>
+      </FormLayout>
+    </fieldset>
+  );
+  return (
+    <fieldset
+      className={css`
+        .ant-radio-group {
+          .anticon {
+            margin-left: 0.5em;
+          }
+        }
+      `}
+    >
+      <Form.Item>
+        <Radio.Group
+          value={Boolean(value)}
+          onChange={({ target: { value: v } }) => {
+            console.log(v);
+            onChange(Number(v));
+          }}
+        >
+          <Radio value={true}>
+            <Tooltip title={useLang('Each user has own task')} placement="bottom">
+              <span>{useLang('Separately')}</span>
+              <QuestionCircleOutlined style={{ color: '#999' }} />
+            </Tooltip>
+          </Radio>
+          <Radio value={false}>
+            <Tooltip title={useLang('Everyone shares one task')} placement="bottom">
+              <span>{useLang('Collaboratively')}</span>
+              <QuestionCircleOutlined style={{ color: '#999' }} />
+            </Tooltip>
+          </Radio>
+        </Radio.Group>
+      </Form.Item>
+      {value ? negotiationFieldset : null}
+    </fieldset>
+  );
+}