@nocobase/client 0.7.0-alpha.4 → 0.7.0-alpha.56

package/src/workflow/schemas/executions.ts

@@ -4,12 +4,16 @@ const collection = {
   name: 'executions',
   fields: [
     {
-      type: 'number',
-      name: 'workflow',
-      interface: 'linkTo',
+      interface: 'createdAt',
+      type: 'datetime',
+      // field: 'createdAt',
+      name: 'createdAt',
       uiSchema: {
-        title: '所属工作流',
-        type: 'string',
+        type: 'datetime',
+        title: '{{t("Created at")}}',
+        'x-component': 'DatePicker',
+        'x-component-props': {},
+        'x-read-pretty': true,
       } as ISchema,
     },
     {
@@ -17,15 +21,15 @@ const collection = {
       name: 'status',
       interface: 'select',
       uiSchema: {
-        title: '执行状态',
+        title: '{{t("Status")}}',
         type: 'string',
         'x-component': 'Select',
         'x-decorator': 'FormItem',
         enum: [
-          { value: 0, label: '进行中' },
-          { value: 1, label: '已完成' },
-          { value: -1, label: '已失败' },
-          { value: -2, label: '已取消' },
+          { value: 0, label: '{{t("On going")}}' },
+          { value: 1, label: '{{t("Success")}}' },
+          { value: -1, label: '{{t("Failed")}}' },
+          { value: -2, label: '{{t("Canceled")}}' },
         ],
       } as ISchema,
     }
@@ -76,13 +80,13 @@ export const executionSchema = {
           useDataSource: '{{ cm.useDataSourceFromRAC }}',
         },
         properties: {
-          workflow: {
+          createdAt: {
             type: 'void',
             'x-decorator': 'Table.Column.Decorator',
             'x-component': 'Table.Column',
             properties: {
-              workflow: {
-                type: 'string',
+              createdAt: {
+                type: 'datetime',
                 'x-component': 'CollectionField',
                 'x-read-pretty': true,
               },
@@ -100,27 +104,27 @@ export const executionSchema = {
               },
             }
           },
-          actions: {
-            type: 'void',
-            title: '{{ t("Actions") }}',
-            'x-component': 'Table.Column',
-            properties: {
-              actions: {
-                type: 'void',
-                'x-component': 'Space',
-                'x-component-props': {
-                  split: '|',
-                },
-                properties: {
-                  config: {
-                    type: 'void',
-                    title: '查看',
-                    'x-component': 'ExecutionLink'
-                  },
-                }
-              }
-            }
-          }
+          // actions: {
+          //   type: 'void',
+          //   title: '{{ t("Actions") }}',
+          //   'x-component': 'Table.Column',
+          //   properties: {
+          //     actions: {
+          //       type: 'void',
+          //       'x-component': 'Space',
+          //       'x-component-props': {
+          //         split: '|',
+          //       },
+          //       properties: {
+          //         config: {
+          //           type: 'void',
+          //           title: '查看',
+          //           'x-component': 'ExecutionLink'
+          //         },
+          //       }
+          //     }
+          //   }
+          // }
         }
       }
     }

package/src/workflow/schemas/workflows.ts

@@ -1,6 +1,9 @@
 import { ISchema } from '@formily/react';
+import { triggers } from '../triggers';
 import { executionSchema } from './executions';
 
+
+
 const collection = {
   name: 'workflows',
   fields: [
@@ -9,34 +12,36 @@ const collection = {
       name: 'title',
       interface: 'input',
       uiSchema: {
-        title: '流程名称',
+        title: '{{t("Name")}}',
         type: 'string',
         'x-component': 'Input',
         required: true,
       } as ISchema,
     },
-    // {
-    //   type: 'string',
-    //   name: 'description',
-    //   interface: 'textarea',
-    //   uiSchema: {
-    //     title: '描述',
-    //     type: 'string',
-    //     'x-component': 'TextArea',
-    //   } as ISchema,
-    // },
     {
       type: 'string',
       name: 'type',
       interface: 'select',
       uiSchema: {
-        title: '触发方式',
+        title: '{{t("Trigger type")}}',
         type: 'string',
         'x-component': 'Select',
         'x-decorator': 'FormItem',
-        enum: [
-          { value: 'model', label: '数据变动' }
-        ],
+        enum: Array.from(triggers.getEntities()).map(([value, { title }]) => ({
+          value,
+          label: title,
+        })),
+        required: true,
+      } as ISchema,
+    },
+    {
+      type: 'string',
+      name: 'description',
+      interface: 'textarea',
+      uiSchema: {
+        title: '{{t("Description")}}',
+        type: 'string',
+        'x-component': 'Input.TextArea',
       } as ISchema,
     },
     {
@@ -44,14 +49,15 @@ const collection = {
       name: 'enabled',
       interface: 'radio',
       uiSchema: {
-        title: '状态',
+        title: '{{t("Status")}}',
         type: 'string',
         enum: [
-          { label: '启用', value: true },
-          { label: '禁用', value: false },
+          { label: '{{t("Started")}}', value: true },
+          { label: '{{t("Stopped")}}', value: false },
         ],
         'x-component': 'Radio.Group',
         'x-decorator': 'FormItem',
+        default: false
       } as ISchema
     }
   ],
@@ -71,7 +77,9 @@ export const workflowSchema: ISchema = {
           action: 'list',
           params: {
             pageSize: 50,
-            filter: {},
+            filter: {
+              current: true
+            },
             sort: ['createdAt'],
             except: ['config'],
           },
@@ -93,12 +101,19 @@ export const workflowSchema: ISchema = {
           properties: {
             delete: {
               type: 'void',
-              title: '删除',
+              title: '{{t("Delete")}}',
               'x-component': 'Action',
+              'x-component-props': {
+                useAction: '{{ cm.useBulkDestroyAction }}',
+                confirm: {
+                  title: "{{t('Delete record')}}",
+                  content: "{{t('Are you sure you want to delete it?')}}",
+                },
+              },
             },
             create: {
               type: 'void',
-              title: '添加工作流',
+              title: '{{t("Add new")}}',
               'x-component': 'Action',
               'x-component-props': {
                 type: 'primary',
@@ -108,17 +123,22 @@ export const workflowSchema: ISchema = {
                   type: 'void',
                   'x-component': 'Action.Drawer',
                   'x-decorator': 'Form',
-                  title: '添加工作流',
+                  'x-decorator-props': {
+                    initialValue: {
+                      current: true
+                    }
+                  },
+                  title: '{{t("Add new")}}',
                   properties: {
                     title: {
                       'x-component': 'CollectionField',
                       'x-decorator': 'FormItem',
                     },
-                    description: {
+                    type: {
                       'x-component': 'CollectionField',
                       'x-decorator': 'FormItem',
                     },
-                    type: {
+                    description: {
                       'x-component': 'CollectionField',
                       'x-decorator': 'FormItem',
                     },
@@ -127,14 +147,14 @@ export const workflowSchema: ISchema = {
                       'x-component': 'Action.Drawer.Footer',
                       properties: {
                         cancel: {
-                          title: 'Cancel',
+                          title: '{{ t("Cancel") }}',
                           'x-component': 'Action',
                           'x-component-props': {
                             useAction: '{{ cm.useCancelAction }}',
                           },
                         },
                         submit: {
-                          title: 'Submit',
+                          title: '{{ t("Submit") }}',
                           'x-component': 'Action',
                           'x-component-props': {
                             type: 'primary',
@@ -211,25 +231,24 @@ export const workflowSchema: ISchema = {
                   properties: {
                     config: {
                       type: 'void',
-                      title: '配置流程',
                       'x-component': 'WorkflowLink'
                     },
-                    // executions: {
-                    //   type: 'void',
-                    //   title: '执行历史',
-                    //   'x-component': 'Action.Link',
-                    //   'x-component-props': {
-                    //     type: 'primary',
-                    //   },
-                    //   properties: {
-                    //     drawer: {
-                    //       type: 'void',
-                    //       title: '执行历史',
-                    //       'x-component': 'Action.Drawer',
-                    //       properties: executionSchema
-                    //     }
-                    //   }
-                    // },
+                    executions: {
+                      type: 'void',
+                      title: '{{t("Execution History")}}',
+                      'x-component': 'Action.Link',
+                      'x-component-props': {
+                        type: 'primary',
+                      },
+                      properties: {
+                        drawer: {
+                          type: 'void',
+                          title: '{{t("Execution History")}}',
+                          'x-component': 'Action.Drawer',
+                          properties: executionSchema
+                        }
+                      }
+                    },
                     update: {
                       type: 'void',
                       title: '{{ t("Edit") }}',
@@ -245,7 +264,7 @@ export const workflowSchema: ISchema = {
                           'x-decorator-props': {
                             useValues: '{{ cm.useValuesFromRecord }}',
                           },
-                          title: '编辑工作流',
+                          title: '{{ t("Edit") }}',
                           properties: {
                             title: {
                               'x-component': 'CollectionField',

package/src/workflow/style.tsx

@@ -5,6 +5,26 @@ export const workflowPageClass = css`
   width: 100%;
   overflow: auto;
 
+  .workflow-toolbar{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    background: #fff;
+
+    header{
+      display: flex;
+      align-items: center;
+      gap: .5em;
+    }
+
+    aside{
+      display: flex;
+      align-items: center;
+      gap: .5em;
+    }
+  }
+
   .workflow-canvas{
     width: min-content;
     min-width: 100%;
@@ -15,6 +35,25 @@ export const workflowPageClass = css`
   }
 `;
 
+export const workflowVersionDropdownClass = css`
+  .ant-dropdown-menu-item{
+
+    &.unexecuted{
+      font-style: italic;
+    }
+
+    .ant-dropdown-menu-title-content{
+      text-align: right;
+
+      time{
+        margin-left: 0.5rem;
+        color: #999;
+        font-size: 80%;
+      }
+    }
+  }
+`;
+
 export const branchBlockClass = css`
   display: flex;
   position: relative;
@@ -117,6 +156,10 @@ export const nodeCardClass = css`
     opacity: 0;
     transition: opacity .3s ease;
 
+    &[disabled]{
+      display: none;
+    }
+
     &:hover {
       color: red;
     }
@@ -133,6 +176,10 @@ export const nodeHeaderClass = css`
   position: relative;
 `;
 
+export const nodeMetaClass = css`
+  margin-bottom: .5em;
+`;
+
 export const nodeTitleClass = css`
   font-weight: normal;
 

package/src/workflow/triggers/collection.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Select } from 'antd';
+import { observer, useForm } from '@formily/react';
+
+import { useCollectionDataSource, useCollectionManager } from '../../collection-manager';
+import { useCompile } from '../../schema-component';
+
+import { useFlowContext } from '../WorkflowCanvas';
+import { BaseTypeSet } from '../calculators';
+import { collection, filter } from '../schemas/collection';
+import { useTranslation } from 'react-i18next';
+
+const FieldsSelect = observer((props) => {
+  const compile = useCompile();
+  const { getCollectionFields } = useCollectionManager();
+  const { values } = useForm();
+  const fields = getCollectionFields(values?.config?.collection);
+
+  return (
+    <Select
+      {...props}
+    >
+      {fields
+        .filter(field => (
+          !field.hidden
+          && (field.uiSchema ? !field.uiSchema['x-read-pretty'] : true)
+        ))
+        .map(field => (
+          <Select.Option value={field.name}>{compile(field.uiSchema?.title)}</Select.Option>
+        ))}
+    </Select>
+  );
+});
+
+export default {
+  title: '{{t("Collection event")}}',
+  type: 'collection',
+  fieldset: {
+    'config.collection': collection,
+    'config.mode': {
+      type: 'number',
+      title: '{{t("Trigger on")}}',
+      name: 'config.mode',
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-component-props': {
+        options: [
+          { value: 1, label: '{{t("After record added")}}' },
+          { value: 2, label: '{{t("After record updated")}}' },
+          { value: 3, label: '{{t("After record added or updated")}}' },
+          { value: 4, label: '{{t("After record deleted")}}' }
+        ]
+      },
+      required: true
+    },
+    'config.changed': {
+      type: 'array',
+      name: 'changed',
+      title: '{{t("Changed fields")}}',
+      description: '{{t("Triggered only if one of the selected fields changes. If unselected, it means that it will be triggered when any field changes. When record is added or deleted, any field is considered to have been changed.")}}',
+      'x-decorator': 'FormItem',
+      'x-component': 'FieldsSelect',
+      'x-component-props': {
+        mode: 'multiple',
+      }
+    },
+    'config.condition': {
+      ...filter,
+      name: 'config.condition',
+      title: '{{t("Only triggers when match conditions")}}'
+    }
+  },
+  scope: {
+    useCollectionDataSource
+  },
+  components: {
+    FieldsSelect
+  },
+  getter({ type, options, onChange }) {
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const { collections = [] } = useCollectionManager();
+    const { workflow } = useFlowContext();
+    const collection = collections.find(item => item.name === workflow.config.collection) ?? { fields: [] };
+
+    return (
+      <Select
+        placeholder={t('Fields')}
+        value={options?.path?.replace(/^data\./, '')}
+        onChange={(path) => {
+          onChange({ type, options: { ...options, path: `data.${path}` } });
+        }}
+      >
+        {collection.fields
+          .filter(field => BaseTypeSet.has(field?.uiSchema?.type))
+          .map(field => (
+          <Select.Option key={field.name} value={field.name}>{compile(field.uiSchema.title)}</Select.Option>
+        ))}
+      </Select>
+    );
+  }
+};

package/src/workflow/triggers/index.tsx

@@ -2,13 +2,16 @@ import React from "react";
 import { ISchema, useForm } from "@formily/react";
 import { cx } from "@emotion/css";
 import { Registry } from "@nocobase/utils";
+import { useTranslation } from "react-i18next";
+import { message, Tag } from "antd";
 
-import { SchemaComponent, useActionContext, useAPIClient, useRecord, useResourceActionContext } from '../../';
-import model from './model';
-import { nodeCardClass } from "../style";
+import { SchemaComponent, useActionContext, useAPIClient, useCompile, useRecord, useRequest, useResourceActionContext } from '../../';
+import collection from './collection';
+import { nodeCardClass, nodeMetaClass } from "../style";
 
 
 function useUpdateConfigAction() {
+  const { t } = useTranslation();
   const form = useForm();
   const api = useAPIClient();
   const record = useRecord();
@@ -16,14 +19,14 @@ function useUpdateConfigAction() {
   const { refresh } = useResourceActionContext();
   return {
     async run() {
+      if (record.executed) {
+        message.error(t('Trigger in executed workflow cannot be modified'));
+        return;
+      }
+      await form.submit();
       await api.resource('workflows', record.id).update({
         filterByTk: record.id,
-        values: {
-          config: {
-            ...record.config,
-            ...form.values
-          }
-        },
+        values: form.values
       });
       ctx.setVisible(false);
       refresh();
@@ -46,39 +49,63 @@ export interface Trigger {
 
 export const triggers = new Registry<Trigger>();
 
-triggers.register('model', model);
+triggers.register(collection.type, collection);
 
 export const TriggerConfig = () => {
+  const { t } = useTranslation();
+  const compile = useCompile();
   const { data } = useResourceActionContext();
   if (!data) {
     return null;
   }
-  const { type, config } = data.data;
-  const { title, fieldset, scope } = triggers.get(type);
+  const { type, config, executed } = data.data;
+  const { title, fieldset, scope, components } = triggers.get(type);
+  const detailText = executed ? '{{t("View")}}' : '{{t("Configure")}}';
+  const titleText = `${t('Trigger')}: ${compile(title)}`;
+
   return (
     <div className={cx(nodeCardClass)}>
-      <h4>{title}</h4>
+      <div className={cx(nodeMetaClass)}>
+        <Tag color="gold">{t('Trigger')}</Tag>
+      </div>
+      <h4>{compile(title)}</h4>
       <SchemaComponent
         schema={{
           type: 'void',
-          title: '触发器配置',
+          title: detailText,
           'x-component': 'Action.Link',
           name: 'drawer',
           properties: {
             drawer: {
               type: 'void',
-              title: '触发器配置',
+              title: titleText,
               'x-component': 'Action.Drawer',
               'x-decorator': 'Form',
               'x-decorator-props': {
-                initialValue: config
+                initialValue: { config }
               },
               properties: {
-                ...fieldset,
+                config: {
+                  type: 'void',
+                  name: 'config',
+                  'x-component': 'fieldset',
+                  'x-component-props': {},
+                  properties: fieldset
+                },
                 actions: {
                   type: 'void',
                   'x-component': 'Action.Drawer.Footer',
-                  properties: {
+                  properties: executed
+                  ? {
+                    close: {
+                      title: '{{t("Close")}}',
+                      'x-component': 'Action',
+                      'x-component-props': {
+                        useAction: '{{ cm.useCancelAction }}',
+                      },
+                    }
+                  }
+                  : {
                     cancel: {
                       title: '{{t("Cancel")}}',
                       'x-component': 'Action',
@@ -101,6 +128,7 @@ export const TriggerConfig = () => {
           }
         }}
         scope={scope}
+        components={components}
       />
     </div>
   );