@nocobase/plugin-workflow 0.11.0-alpha.1 → 0.11.1-alpha.2

package/src/client/nodes/loop.tsx

@@ -5,8 +5,8 @@ import { NodeDefaultView } from '.';
 import { Branch } from '../Branch';
 import { useFlowContext } from '../FlowContext';
 import { NAMESPACE, lang } from '../locale';
-import { addButtonClass, branchBlockClass, branchClass, nodeSubtreeClass } from '../style';
-import { VariableOption, nodesOptions, triggerOptions, useWorkflowVariableOptions } from '../variable';
+import useStyles from '../style';
+import { VariableOption, defaultFieldNames, nodesOptions, triggerOptions, useWorkflowVariableOptions } from '../variable';
 
 function findOption(options: VariableOption[], paths: string[]) {
   let opts = options;
@@ -59,14 +59,15 @@ export default {
   view: {},
   component: function Component({ data }) {
     const { nodes } = useFlowContext();
+    const { styles } = useStyles();
     const entry = nodes.find((node) => node.upstreamId === data.id && node.branchIndex != null);
 
     return (
       <NodeDefaultView data={data}>
-        <div className={cx(nodeSubtreeClass)}>
+        <div className={styles.nodeSubtreeClass}>
           <div
             className={cx(
-              branchBlockClass,
+              styles.branchBlockClass,
               css`
                 padding-left: 20em;
               `,
@@ -74,28 +75,10 @@ export default {
           >
             <Branch from={data} entry={entry} branchIndex={entry?.branchIndex ?? 0} />
 
-            <div className={cx(branchClass)}>
+            <div className={styles.branchClass}>
               <div className="workflow-branch-lines" />
-              <div
-                className={cx(
-                  addButtonClass,
-                  css`
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    width: 2em;
-                    height: 6em;
-                  `,
-                )}
-              >
-                <ArrowUpOutlined
-                  className={css`
-                    background-color: var(--nb-box-bg);
-                  `}
-                />
+              <div className={cx(styles.addButtonClass, styles.loopLineClass)}>
+                <ArrowUpOutlined />
               </div>
             </div>
           </div>
@@ -120,13 +103,15 @@ export default {
       return null;
     }
 
+    const { fieldNames = defaultFieldNames } = options;
+
     // const { workflow } = useFlowContext();
     // const current = useNodeContext();
     // const upstreams = useAvailableUpstreams(current);
     // find target data model by path described in `config.target`
     // 1. get options from $context/$jobsMapByNodeId
     // 2. route to sub-options and use as loop target options
-    let targetOption: VariableOption = { key: 'item', value: 'item', label: lang('Loop target') };
+    let targetOption: VariableOption = { key: 'item', [fieldNames.value]: 'item', [fieldNames.label]: lang('Loop target') };
 
     if (typeof target === 'string' && target.startsWith('{{') && target.endsWith('}}')) {
       const paths = target
@@ -137,10 +122,10 @@ export default {
       const targetOptions = [nodesOptions, triggerOptions].map((item: any) => {
         const opts = item.useOptions(options).filter(Boolean);
         return {
-          label: compile(item.title),
-          value: item.value,
+          [fieldNames.label]: compile(item.title),
+          [fieldNames.value]: item.value,
           key: item.value,
-          children: opts,
+          [fieldNames.children]: opts,
           disabled: opts && !opts.length,
         };
       });
@@ -152,8 +137,8 @@ export default {
 
     return [
       targetOption,
-      { key: 'index', value: 'index', label: lang('Loop index') },
-      { key: 'length', value: 'length', label: lang('Loop length') },
+      { key: 'index', [fieldNames.value]: 'index', [fieldNames.label]: lang('Loop index') },
+      { key: 'length', [fieldNames.value]: 'length', [fieldNames.label]: lang('Loop length') },
     ];
   },
 };

package/src/client/nodes/manual/FormBlockInitializer.tsx

@@ -34,11 +34,8 @@ function InternalFormBlockInitializer({ insert, schema, ...others }) {
             type: 'primary',
             useAction: '{{ useSubmit }}',
           },
-          'x-designer': 'Action.Designer',
-          'x-designer-props': {
-            type: 'record',
-          },
-          'x-action': `${JOB_STATUS.RESOLVED}`,
+          'x-designer': 'ManualActionDesigner',
+          'x-designer-props': {},
         },
       },
       ...schema,
@@ -48,6 +45,10 @@ function InternalFormBlockInitializer({ insert, schema, ...others }) {
     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'];

package/src/client/nodes/manual/SchemaConfig.tsx

@@ -1,8 +1,12 @@
-import React, { useContext, useMemo, useState } from 'react';
-
-import { ISchema, Schema, useFieldSchema, useForm } from '@formily/react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { createForm } from '@formily/core';
+import { FormProvider, ISchema, Schema, useFieldSchema, useForm } from '@formily/react';
+import { FormLayout } from '@formily/antd-v5';
+import { Alert, Button, Modal, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 import {
+  Action,
   ActionContextProvider,
   GeneralSchemaDesigner,
   InitializerWithSwitch,
@@ -12,22 +16,24 @@ import {
   SchemaInitializerItemOptions,
   SchemaInitializerProvider,
   SchemaSettings,
+  VariableScopeProvider,
   gridRowColWrap,
   useCompile,
   useFormBlockContext,
+  useSchemaOptionsContext,
 } from '@nocobase/client';
 import { Registry, lodash } from '@nocobase/utils/client';
-import { Button } from 'antd';
 import { instructions, useAvailableUpstreams, useNodeContext } from '..';
-import { useFlowContext } from '../../FlowContext';
 import { JOB_STATUS } from '../../constants';
+import { useFlowContext } from '../../FlowContext';
 import { NAMESPACE, lang } from '../../locale';
 import { useTrigger } from '../../triggers';
 import { DetailsBlockProvider } from './DetailsBlockProvider';
 import { FormBlockProvider } from './FormBlockProvider';
-import createForm from './forms/create';
-import customForm from './forms/custom';
-import updateForm from './forms/update';
+import createRecordForm from './forms/create';
+import customRecordForm from './forms/custom';
+import updateRecordForm from './forms/update';
+import { useWorkflowVariableOptions } from '../../variable';
 
 type ValueOf<T> = T[keyof T];
 
@@ -68,9 +74,9 @@ export type ManualFormType = {
 
 export const manualFormTypes = new Registry<ManualFormType>();
 
-manualFormTypes.register('customForm', customForm);
-manualFormTypes.register('createForm', createForm);
-manualFormTypes.register('updateForm', updateForm);
+manualFormTypes.register('customForm', customRecordForm);
+manualFormTypes.register('createForm', createRecordForm);
+manualFormTypes.register('updateForm', updateRecordForm);
 
 function useTriggerInitializers(): SchemaInitializerItemOptions | null {
   const { workflow } = useFlowContext();
@@ -79,7 +85,7 @@ function useTriggerInitializers(): SchemaInitializerItemOptions | null {
 }
 
 const blockTypeNames = {
-  customForm: customForm.title,
+  customForm: customRecordForm.title,
   record: `{{t("Data record", { ns: "${NAMESPACE}" })}}`,
 };
 
@@ -138,7 +144,7 @@ function AddBlockButton(props: any) {
     {
       type: 'itemGroup',
       title: '{{t("Form")}}',
-      children: Array.from(manualFormTypes.getValues()).map((item) => {
+      children: Array.from(manualFormTypes.getValues()).map((item: ManualFormType) => {
         const { useInitializer: getInitializer } = item.config;
         return getInitializer();
       }),
@@ -159,6 +165,142 @@ function AddBlockButton(props: any) {
   return <SchemaInitializer.Button {...props} wrap={gridRowColWrap} items={items} title="{{t('Add block')}}" />;
 }
 
+function AssignedFieldValues() {
+  const ctx = useContext(SchemaComponentContext);
+  const { t } = useTranslation();
+  const fieldSchema = useFieldSchema();
+  const scope = useWorkflowVariableOptions({ fieldNames: { label: 'title', value: 'name' } });
+  const [open, setOpen] = useState(false);
+  const [initialSchema, setInitialSchema] = useState(fieldSchema?.['x-action-settings']?.assignedValues?.schema ?? {
+    type: 'void',
+    'x-component': 'Grid',
+    'x-initializer': 'CustomFormItemInitializers',
+    properties: {},
+  });
+  const [schema, setSchema] = useState<Schema>(null);
+  const { components } = useSchemaOptionsContext();
+  useEffect(() => {
+    setSchema(new Schema({
+      properties: {
+        grid: initialSchema
+      },
+    }));
+  }, [initialSchema]);
+  const form = useMemo(
+    () => {
+      const initialValues = fieldSchema?.['x-action-settings']?.assignedValues?.values;
+      return createForm({
+        initialValues: lodash.cloneDeep(initialValues),
+        values: lodash.cloneDeep(initialValues),
+      });
+    },
+    [],
+  );
+
+  const title = t('Assign field values');
+
+  function onCancel() {
+    setOpen(false);
+  }
+
+  function onSubmit() {
+    if (!fieldSchema['x-action-settings']) {
+      fieldSchema['x-action-settings'] = {};
+    }
+    if (!fieldSchema['x-action-settings'].assignedValues) {
+      fieldSchema['x-action-settings'].assignedValues = {};
+    }
+    fieldSchema['x-action-settings'].assignedValues.schema = initialSchema;
+    fieldSchema['x-action-settings'].assignedValues.values = form.values;
+    setOpen(false);
+    setTimeout(() => {
+      ctx.refresh?.();
+    }, 300);
+  }
+
+  return (
+    <>
+      <SchemaSettings.Item onClick={() => setOpen(true)}>
+        {title}
+      </SchemaSettings.Item>
+      <Modal
+        width={'50%'}
+        title={title}
+        open={open}
+        onCancel={onCancel}
+        footer={
+          <Space>
+            <Button onClick={onCancel}>{t('Cancel')}</Button>
+            <Button type="primary" onClick={onSubmit}>{t('Submit')}</Button>
+          </Space>
+        }
+      >
+        <VariableScopeProvider scope={scope}>
+          <FormProvider form={form}>
+            <FormLayout layout={'vertical'}>
+              <Alert message={lang('Values preset in this form will override user submitted ones when continue or reject.')} />
+              <br />
+              {open && schema && (
+                <SchemaComponentContext.Provider
+                  value={{
+                    ...ctx,
+                    refresh() {
+                      setInitialSchema(lodash.get(schema.toJSON(), 'properties.grid'));
+                    }
+                  }}
+                >
+                  <SchemaComponent schema={schema} components={components} />
+                </SchemaComponentContext.Provider>
+              )}
+            </FormLayout>
+          </FormProvider>
+        </VariableScopeProvider>
+      </Modal>
+    </>
+  );
+}
+
+function ManualActionDesigner(props) {
+  return (
+    <GeneralSchemaDesigner {...props} disableInitializer>
+      <Action.Designer.ButtonEditor />
+      <AssignedFieldValues />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'ActionBar',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+}
+
+function ContinueInitializer({ action, actionProps, insert, ...props }) {
+  return (
+    <SchemaInitializer.Item
+      {...props}
+      onClick={() => {
+        insert({
+          type: 'void',
+          title: props.title,
+          'x-decorator': 'ManualActionStatusProvider',
+          'x-decorator-props': {
+            value: action,
+          },
+          'x-component': 'Action',
+          'x-component-props': {
+            ...actionProps,
+            useAction: '{{ useSubmit }}',
+          },
+          'x-designer': 'ManualActionDesigner',
+          'x-action-settings': {},
+        });
+      }}
+    />
+  );
+}
+
 function ActionInitializer({ action, actionProps, ...props }) {
   return (
     <InitializerWithSwitch
@@ -192,7 +334,7 @@ function AddActionButton(props) {
           key: JOB_STATUS.RESOLVED,
           type: 'item',
           title: `{{t("Continue the process", { ns: "${NAMESPACE}" })}}`,
-          component: ActionInitializer,
+          component: ContinueInitializer,
           action: JOB_STATUS.RESOLVED,
           actionProps: {
             type: 'primary',
@@ -205,7 +347,6 @@ function AddActionButton(props) {
           component: ActionInitializer,
           action: JOB_STATUS.REJECTED,
           actionProps: {
-            type: 'primary',
             danger: true,
           },
         },
@@ -301,7 +442,7 @@ export function SchemaConfig({ value, onChange }) {
           ctx.refresh?.();
           const { tabs } = lodash.get(schema.toJSON(), 'properties.drawer.properties') as { tabs: ISchema };
           const forms = Array.from(manualFormTypes.getValues()).reduce(
-            (result, item) => Object.assign(result, item.config.parseFormOptions(tabs)),
+            (result, item: ManualFormType) => Object.assign(result, item.config.parseFormOptions(tabs)),
             {},
           );
           form.setValuesIn('forms', forms);
@@ -316,8 +457,9 @@ export function SchemaConfig({ value, onChange }) {
           AddActionButton,
           ...trigger.initializers,
           ...nodeInitializers,
+          // @ts-ignore
           ...Array.from(manualFormTypes.getValues()).reduce(
-            (result, item) => Object.assign(result, item.config.initializers),
+            (result, item: ManualFormType) => Object.assign(result, item.config.initializers),
             {},
           ),
         }}
@@ -326,8 +468,9 @@ export function SchemaConfig({ value, onChange }) {
           schema={schema}
           components={{
             ...nodeComponents,
+            // @ts-ignore
             ...Array.from(manualFormTypes.getValues()).reduce(
-              (result, item) => Object.assign(result, item.config.components),
+              (result, item: ManualFormType) => Object.assign(result, item.config.components),
               {},
             ),
             FormBlockProvider,
@@ -340,6 +483,7 @@ export function SchemaConfig({ value, onChange }) {
               return props.children;
             },
             SimpleDesigner,
+            ManualActionDesigner,
           }}
           scope={{
             useSubmit,

package/src/client/nodes/manual/WorkflowTodo.tsx

@@ -1,24 +1,23 @@
 import { css } from '@emotion/css';
 import { observer, useField, useFieldSchema, useForm } from '@formily/react';
 import { dayjs } from '@nocobase/utils/client';
-import { Spin, Tag } from 'antd';
+import { Space, Spin, Tag } from 'antd';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
 import {
   CollectionManagerProvider,
-  FormBlockContext,
   SchemaComponent,
   SchemaComponentContext,
   TableBlockProvider,
   useAPIClient,
   useActionContext,
   useCollectionManager,
+  useCompile,
   useCurrentUserContext,
   useFormBlockContext,
   useRecord,
   useTableBlockContext,
 } from '@nocobase/client';
-import { uid } from '@nocobase/utils/client';
 import { instructions, useAvailableUpstreams } from '..';
 import { FlowContext, useFlowContext } from '../../FlowContext';
 import { JobStatusOptions, JobStatusOptionsMap } from '../../constants';
@@ -26,7 +25,7 @@ import { NAMESPACE } from '../../locale';
 import { linkNodes } from '../../utils';
 import { DetailsBlockProvider } from './DetailsBlockProvider';
 import { FormBlockProvider } from './FormBlockProvider';
-import { manualFormTypes } from './SchemaConfig';
+import { ManualFormType, manualFormTypes } from './SchemaConfig';
 
 const nodeCollection = {
   title: `{{t("Task", { ns: "${NAMESPACE}" })}}`,
@@ -177,7 +176,6 @@ const todoCollection = {
         'x-component-props': {
           showTime: true,
         },
-        'x-read-pretty': true,
       },
     },
   ],
@@ -217,8 +215,6 @@ export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC }
       }}
       schema={{
         type: 'void',
-        name: uid(),
-        'x-component': 'div',
         properties: {
           actions: {
             type: 'void',
@@ -293,7 +289,7 @@ export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC }
                 'x-component': 'TableV2.Column',
                 properties: {
                   createdAt: {
-                    type: 'number',
+                    type: 'string',
                     'x-component': 'CollectionField',
                     'x-read-pretty': true,
                   },
@@ -317,7 +313,6 @@ export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC }
                 'x-component': 'TableV2.Column',
                 properties: {
                   status: {
-                    type: 'number',
                     'x-component': 'CollectionField',
                     'x-read-pretty': true,
                   },
@@ -382,13 +377,14 @@ 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;
+      button.visible = userJob.status === value && userJob.result._ === buttonSchema.name;
     }
-  }, [userJob.status, value, button]);
+  }, [userJob, value, button]);
 
   return <ManualActionStatusContext.Provider value={value}>{children}</ManualActionStatusContext.Provider>;
 }
@@ -398,21 +394,21 @@ function useSubmit() {
   const { setVisible } = useActionContext();
   const { values, submit } = useForm();
   const buttonSchema = useFieldSchema();
-  const nextStatus = useContext(ManualActionStatusContext);
   const { service } = useTableBlockContext();
   const { userJob } = useFlowContext();
-  const { updateAssociationValues } = useContext(FormBlockContext);
+  const { name: actionKey } = buttonSchema;
+  const { name: formKey } = buttonSchema.parent.parent;
   return {
     async run() {
+      if (userJob.status) {
+        return;
+      }
       await submit();
-      const { name } = buttonSchema.parent.parent.toJSON();
       await api.resource('users_jobs').submit({
         filterByTk: userJob.id,
         values: {
-          status: nextStatus,
-          result: { [name]: values },
+          result: { [formKey]: values, _: actionKey },
         },
-        updateAssociationValues,
       });
       setVisible(false);
       service.refresh();
@@ -464,8 +460,9 @@ function FlowContextProvider(props) {
           DetailsBlockProvider,
           ActionBarProvider,
           ManualActionStatusProvider,
+          // @ts-ignore
           ...Array.from(manualFormTypes.getValues()).reduce(
-            (result, item) => Object.assign(result, item.block.components),
+            (result, item: ManualFormType) => Object.assign(result, item.block.components),
             {},
           ),
           ...nodeComponents,
@@ -474,8 +471,9 @@ function FlowContextProvider(props) {
           useSubmit,
           useFormBlockProps,
           useDetailsBlockProps,
+          // @ts-ignore
           ...Array.from(manualFormTypes.getValues()).reduce(
-            (result, item) => Object.assign(result, item.block.scope),
+            (result, item: ManualFormType) => Object.assign(result, item.block.scope),
             {},
           ),
         }}
@@ -518,40 +516,33 @@ function useDetailsBlockProps() {
   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, updatedAt } = useRecord();
-
-  const statusOption = JobStatusOptionsMap[status];
-  const footerSchema = status
-    ? {
-        date: {
-          type: 'void',
-          'x-component': 'time',
-          'x-component-props': {
-            className: css`
-              margin-right: 0.5em;
-            `,
-          },
-          'x-content': dayjs(updatedAt).format('YYYY-MM-DD HH:mm:ss'),
-        },
-        status: {
-          type: 'void',
-          'x-component': 'Tag',
-          'x-component-props': {
-            icon: statusOption.icon,
-            color: statusOption.color,
-          },
-          'x-content': statusOption.label,
-        },
-      }
-    : null;
+  const { id, node, workflow, status } = useRecord();
 
   return (
     <SchemaComponentContext.Provider value={{ ...ctx, reset() {}, designable: false }}>
       <SchemaComponent
         components={{
-          Tag,
+          FooterStatus,
           FlowContextProvider,
         }}
         schema={{
@@ -570,7 +561,12 @@ function Drawer() {
             footer: {
               type: 'void',
               'x-component': 'Action.Drawer.Footer',
-              properties: footerSchema,
+              properties: {
+                content: {
+                  type: 'void',
+                  'x-component': 'FooterStatus',
+                }
+              },
             },
           },
         }}

package/src/client/nodes/manual/forms/create.tsx

@@ -71,7 +71,11 @@ export default {
           type: 'create',
           title: formBlock['x-component-props']?.title || formKey,
           actions: findSchema(formSchema.properties.actions, (item) => item['x-component'] === 'Action').map(
-            (item) => item['x-decorator-props'].value,
+            (item) => ({
+              status: item['x-decorator-props'].value,
+              values: item['x-action-settings']?.assignedValues?.values,
+              key: item.name,
+            }),
           ),
           collection: formBlock['x-decorator-props'].collection,
         };

package/src/client/nodes/manual/forms/custom.tsx

@@ -105,6 +105,7 @@ function CustomFormBlockInitializer({ insert, ...props }) {
                     layout: 'one-column',
                     style: {
                       marginTop: '1.5em',
+                      flexWrap: 'wrap',
                     },
                   },
                   'x-initializer': 'AddActionButton',
@@ -121,8 +122,7 @@ function CustomFormBlockInitializer({ insert, ...props }) {
                         type: 'primary',
                         useAction: '{{ useSubmit }}',
                       },
-                      'x-designer': 'Action.Designer',
-                      'x-action': `${JOB_STATUS.RESOLVED}`,
+                      'x-designer': 'ManualActionDesigner',
                     },
                   },
                 },
@@ -371,7 +371,11 @@ export default {
           type: 'custom',
           title: formBlock['x-component-props']?.title || formKey,
           actions: findSchema(formSchema.properties.actions, (item) => item['x-component'] === 'Action').map(
-            (item) => item['x-decorator-props'].value,
+            (item) => ({
+              status: item['x-decorator-props'].value,
+              values: item['x-action-settings']?.assignedValues?.values,
+              key: item.name,
+            }),
           ),
           collection: formBlock['x-decorator-props'].collection,
         };

package/src/client/nodes/manual/forms/update.tsx

@@ -114,7 +114,11 @@ export default {
           type: 'update',
           title: formBlock['x-component-props']?.title || formKey,
           actions: findSchema(formSchema.properties.actions, (item) => item['x-component'] === 'Action').map(
-            (item) => item['x-decorator-props'].value,
+            (item) => ({
+              status: item['x-decorator-props'].value,
+              values: item['x-action-settings']?.assignedValues?.values,
+              key: item.name,
+            }),
           ),
         };
       });