@nocobase/client 0.7.0-alpha.23 → 0.7.0-alpha.26

package/src/workflow/WorkflowCanvas.tsx

@@ -6,9 +6,12 @@ import { addButtonClass, branchBlockClass, branchClass, nodeBlockClass, nodeCard
 
 import {
   useCollection,
+  useCompile,
   useResourceActionContext
 } from '..';
 import { Instruction, instructions, Node } from './nodes';
+import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 
 
@@ -34,10 +37,11 @@ export function useFlowContext() {
 }
 
 export function WorkflowCanvas() {
+  const { t } = useTranslation();
   const { data, refresh, loading } = useResourceActionContext();
 
   if (!data?.data && !loading) {
-    return <div>加载失败</div>;
+    return <div>{t('Load failed')}</div>;
   }
 
   const { nodes = [], ...workflow } = data?.data ?? {};
@@ -56,7 +60,7 @@ export function WorkflowCanvas() {
       <div className={branchBlockClass}>
         <Branch entry={entry} />
       </div>
-      <div className={cx(nodeCardClass)}>结束</div>
+      <div className={cx(nodeCardClass)}>{t('End')}</div>
     </FlowContext.Provider>
   );
 }
@@ -93,6 +97,7 @@ interface AddButtonProps {
 };
 
 export function AddButton({ upstream, branchIndex = null }: AddButtonProps) {
+  const compile = useCompile();
   const { resource } = useCollection();
   const { data } = useResourceActionContext();
   const { onNodeAdded } = useFlowContext();
@@ -120,8 +125,8 @@ export function AddButton({ upstream, branchIndex = null }: AddButtonProps) {
   }
 
   const groups = [
-    { value: 'control', name: '流程控制' },
-    { value: 'model', name: '数据表操作' },
+    { value: 'control', name: '{{t("Control")}}' },
+    { value: 'collection', name: '{{t("Collection operations")}}' },
   ];
   const instructionList = (Array.from(instructions.getValues()) as Instruction[]);
 
@@ -130,17 +135,17 @@ export function AddButton({ upstream, branchIndex = null }: AddButtonProps) {
       <Dropdown trigger={['click']} overlay={
         <Menu onClick={ev => onCreate(ev)}>
           {groups.map(group => (
-            <Menu.ItemGroup key={group.value} title={group.name}>
+            <Menu.ItemGroup key={group.value} title={compile(group.name)}>
               {instructionList.filter(item => item.group === group.value).map(item => item.options
               ? (
-                <Menu.SubMenu key={item.type} title={item.title}>
+                <Menu.SubMenu key={item.type} title={compile(item.title)}>
                   {item.options.map(option => (
-                    <Menu.Item key={option.key}>{option.label}</Menu.Item>
+                    <Menu.Item key={option.key}>{compile(option.label)}</Menu.Item>
                   ))}
                 </Menu.SubMenu>
               )
               : (
-                <Menu.Item key={item.type}>{item.title}</Menu.Item>
+                <Menu.Item key={item.type}>{compile(item.title)}</Menu.Item>
               ))}
             </Menu.ItemGroup>
           ))}

package/src/workflow/WorkflowLink.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { useActionContext, useRecord } from '..';
 
 
 export const WorkflowLink = () => {
+  const { t } = useTranslation();
   const { id } = useRecord();
   const { setVisible } = useActionContext();
   return (
-    <Link to={`/admin/plugins/workflows/${id}`} onClick={() => setVisible(false)}>流程配置</Link>
+    <Link to={`/admin/plugins/workflows/${id}`} onClick={() => setVisible(false)}>{t('Configure workflow')}</Link>
   );
 }

package/src/workflow/WorkflowPage.tsx

@@ -15,7 +15,7 @@ const workflowCollection = {
       name: 'title',
       interface: 'input',
       uiSchema: {
-        title: '流程名称',
+        title: '{{t("Name")}}',
         type: 'string',
         'x-component': 'Input',
         required: true,
@@ -66,7 +66,7 @@ export const WorkflowPage = () => {
                             name: 'title',
                             interface: 'input',
                             uiSchema: {
-                              title: '节点名称',
+                              title: '{{t("Name")}}',
                               type: 'string',
                               'x-component': 'Input',
                             },
@@ -76,7 +76,7 @@ export const WorkflowPage = () => {
                             name: 'type',
                             interface: 'select',
                             uiSchema: {
-                              title: '节点类型',
+                              title: '{{t("Node type")}}',
                               type: 'string',
                               'x-component': 'Select',
                               required: true,

package/src/workflow/WorkflowShortcut.tsx

@@ -5,6 +5,7 @@ import { uid } from '@formily/shared';
 import { PluginManager } from '../plugin-manager';
 import { ActionContext, SchemaComponent, useActionContext } from '../schema-component';
 import { WorkflowTable } from './WorkflowTable';
+import { useTranslation } from 'react-i18next';
 
 const useCloseAction = () => {
   const { setVisible } = useActionContext();
@@ -25,7 +26,7 @@ const schema: ISchema = {
     [uid()]: {
       'x-component': 'Action.Drawer',
       type: 'void',
-      title: '工作流',
+      title: '{{t("Workflow")}}',
       properties: {
         main: {
           type: 'void',
@@ -37,12 +38,13 @@ const schema: ISchema = {
 };
 
 export const WorkflowShortcut = () => {
+  const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
   return (
     <ActionContext.Provider value={{ visible, setVisible }}>
       <PluginManager.Toolbar.Item
         icon={<PartitionOutlined />}
-        title={'工作流'}
+        title={t('Workflow')}
         onClick={() => {
           setVisible(true);
         }}

package/src/workflow/calculators.tsx

@@ -1,13 +1,15 @@
 import React from "react";
-import { observer } from "@formily/react";
+import { observer, useForm } from "@formily/react";
 import { FormItem } from "@formily/antd";
-import { Cascader, DatePicker, Input, InputNumber, Select } from "antd";
+import { Button, Cascader, Dropdown, Input, InputNumber, Menu, Select } from "antd";
 import { css } from "@emotion/css";
+import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';
 
 import { instructions, useNodeContext } from "./nodes";
 import { useFlowContext } from "./WorkflowCanvas";
 import { triggers } from "./triggers";
-import { SchemaComponent, useCompile } from "..";
+import { SchemaComponent, useCollectionManager, useCompile } from "..";
+import { useTranslation } from "react-i18next";
 
 function NullRender() {
   return null;
@@ -16,7 +18,7 @@ function NullRender() {
 export const calculators = [
   {
     value: 'boolean',
-    title: '值比较',
+    title: '{{t("Comparison")}}',
     children: [
       { value: 'equal', name: '=' },
       { value: 'notEqual', name: '≠' },
@@ -28,7 +30,7 @@ export const calculators = [
   },
   {
     value: 'number',
-    title: '算术运算',
+    title: '{{t("Arithmetic calculation")}}',
     children: [
       { value: 'add', name: '+' },
       { value: 'minus', name: '-' },
@@ -39,19 +41,19 @@ export const calculators = [
   },
   {
     value: 'string',
-    title: '字符串',
+    title: '{{t("String operation")}}',
     children: [
-      { value: 'includes', name: '包含' },
-      { value: 'notIncludes', name: '不包含' },
-      { value: 'startsWith', name: '开头是' },
-      { value: 'notStartsWith', name: '开头不是' },
-      { value: 'endsWith', name: '结尾是' },
-      { value: 'notEndsWith', name: '结尾不是' }
+      { value: 'includes', name: '{{t("contains")}}' },
+      { value: 'notIncludes', name: '{{t("does not contain")}}' },
+      { value: 'startsWith', name: '{{t("starts with")}}' },
+      { value: 'notStartsWith', name: '{{t("not starts with")}}' },
+      { value: 'endsWith', name: '{{t("ends with")}}' },
+      { value: 'notEndsWith', name: '{{t("not ends with")}}' }
     ]
   },
   {
     value: 'date',
-    title: '日期',
+    title: '{{t("Date")}}',
     children: []
   }
 ];
@@ -76,7 +78,7 @@ export const BaseTypeSet = new Set(['boolean', 'number', 'string', 'date']);
 
 const ConstantTypes = {
   string: {
-    title: '字符串',
+    title: '{{t("String")}}',
     value: 'string',
     component({ onChange, type, options, value }) {
       return (
@@ -89,7 +91,7 @@ const ConstantTypes = {
     default: ''
   },
   number: {
-    title: '数字',
+    title: '{{t("Number")}}',
     value: 'number',
     component({ onChange, type, options, value }) {
       return (
@@ -102,7 +104,7 @@ const ConstantTypes = {
     default: 0
   },
   boolean: {
-    title: '逻辑值',
+    title: '{{t("Boolean")}}',
     value: 'boolean',
     component({ onChange, type, options, value }) {
       return (
@@ -126,7 +128,7 @@ const ConstantTypes = {
 
 export const VariableTypes = {
   constant: {
-    title: '常量',
+    title: '{{t("Constant")}}',
     value: 'constant',
     options: Object.values(ConstantTypes).map(item => ({
       value: item.value,
@@ -154,7 +156,7 @@ export const VariableTypes = {
     }
   },
   $jobsMapByNodeId: {
-    title: '节点数据',
+    title: '{{t("Node result")}}',
     value: '$jobsMapByNodeId',
     options() {
       const node = useNodeContext();
@@ -209,7 +211,7 @@ export const VariableTypes = {
     }
   },
   $context: {
-    title: '触发数据',
+    title: '{{t("Trigger context")}}',
     value: '$context',
     component() {
       const { workflow } = useFlowContext();
@@ -251,6 +253,7 @@ export function Operand({
   onChange,
   children
 }: OperandProps) {
+  const compile = useCompile();
   const Types = useVariableTypes();
 
   const { type } = operand;
@@ -278,7 +281,7 @@ export function Operand({
         options={Object.values(Types).map((item: any) => {
           const options = typeof item.options === 'function' ? item.options() : item.options;
           return {
-            label: item.title,
+            label: compile(item.title),
             value: item.value,
             children: options,
             disabled: options && !options.length,
@@ -302,6 +305,7 @@ export function Operand({
 }
 
 export function Calculation({ calculator, operands = [], onChange }) {
+  const { t } = useTranslation();
   return (
     <VariableTypesContext.Provider value={VariableTypes}>
       <div className={css`
@@ -320,9 +324,9 @@ export function Calculation({ calculator, operands = [], onChange }) {
             <>
               <Select value={calculator} onChange={v => onChange({ operands, calculator: v })}>
                 {calculators.map(group => (
-                  <Select.OptGroup key={group.value} label={group.title}>
+                  <Select.OptGroup key={group.value} label={t(group.title)}>
                     {group.children.map(item => (
-                      <Select.Option key={item.value} value={item.value}>{item.name}</Select.Option>
+                      <Select.Option key={item.value} value={t(item.value)}>{item.name}</Select.Option>
                     ))}
                   </Select.OptGroup>
                 ))}
@@ -340,7 +344,7 @@ export function Calculation({ calculator, operands = [], onChange }) {
 export function VariableComponent({ value, onChange, renderSchemaComponent }) {
   const VTypes = { ...VariableTypes,
     constant: {
-      title: '常量',
+      title: '{{t("Constant")}}',
       value: 'constant',
       options: undefined
     }
@@ -370,13 +374,21 @@ export function VariableComponent({ value, onChange, renderSchemaComponent }) {
 }
 
 // NOTE: observer for watching useProps
-export const CollectionFieldset = observer(({ value, onChange, useProps }: any) => {
-  const { fields } = useProps();
+export const CollectionFieldset = observer(({ value, onChange }: any) => {
+  const { t } = useTranslation();
   const compile = useCompile();
+  const { getCollectionFields } = useCollectionManager();
+  const { values: data } = useForm();
+  const fields = getCollectionFields(data?.config?.collection)
+    .filter(field => (
+      !field.hidden
+      && (field.uiSchema ? !field.uiSchema['x-read-pretty'] : false)
+    ));
 
-  const VTypes = { ...VariableTypes,
+  const VTypes = {
+    ...VariableTypes,
     constant: {
-      title: '常量',
+      title: '{{t("Constant")}}',
       value: 'constant',
       options: undefined
     }
@@ -395,35 +407,69 @@ export const CollectionFieldset = observer(({ value, onChange, useProps }: any)
       }
     `}>
       {fields.length
-        ? fields.map(field => {
-            const operand = typeof value[field.name] === 'string'
-              ? parseStringValue(value[field.name], VTypes)
-              : { type: 'constant', value: value[field.name] };
+        ? (
+          <>
+          {fields
+            .filter(field => field.name in value)
+            .map(field => {
+              const operand = typeof value[field.name] === 'string'
+                ? parseStringValue(value[field.name], VTypes)
+                : { type: 'constant', value: value[field.name] };
 
-            return (
-              <FormItem label={compile(field.uiSchema?.title ?? field.name)} labelAlign="left">
-                <VariableTypesContext.Provider value={VTypes}>
-                  <Operand
-                    value={operand}
-                    onChange={(next) => {
-                      if (next.type !== operand.type && next.type === 'constant') {
-                        onChange({ ...value, [field.name]: null });
-                      } else {
-                        const { stringify } = VTypes[next.type];
-                        onChange({ ...value, [field.name]: stringify(next) });
+              return (
+                <FormItem key={field.name} label={compile(field.uiSchema?.title ?? field.name)} labelAlign="left" className={css`
+                  .ant-formily-item-control-content-component{
+                    display: flex;
+                  }
+                `}>
+                  <VariableTypesContext.Provider value={VTypes}>
+                    <Operand
+                      value={operand}
+                      onChange={(next) => {
+                        if (next.type !== operand.type && next.type === 'constant') {
+                          onChange({ ...value, [field.name]: null });
+                        } else {
+                          const { stringify } = VTypes[next.type];
+                          onChange({ ...value, [field.name]: stringify(next) });
+                        }
+                      }}
+                    >
+                      {operand.type === 'constant'
+                        ? <SchemaComponent schema={{ ...field.uiSchema, name: field.name }} />
+                        : null
                       }
-                    }}
-                  >
-                    {operand.type === 'constant'
-                      ? <SchemaComponent schema={{ ...field.uiSchema, name: field.name }} />
-                      : null
-                    }
-                  </Operand>
-                </VariableTypesContext.Provider>
-              </FormItem>
-            );
-          })
-        : <p>请先选择数据表</p>
+                    </Operand>
+                    <Button
+                      type="link"
+                      icon={<CloseCircleOutlined />}
+                      onClick={() => {
+                        const { [field.name]: _, ...rest } = value;
+                        onChange(rest);
+                      }}
+                    />
+                  </VariableTypesContext.Provider>
+                </FormItem>
+              );
+            })}
+            {Object.keys(value).length < fields.length
+              ? (
+                <Dropdown overlay={
+                  <Menu onClick={({ key }) => onChange({ ...value, [key]: null })}>
+                    {fields
+                      .filter(field => !(field.name in value))
+                      .map(field => (
+                        <Menu.Item key={field.name}>{compile(field.uiSchema?.title ?? field.name)}</Menu.Item>
+                      ))}
+                  </Menu>
+                }>
+                  <Button icon={<PlusOutlined />}>{t('Add field')}</Button>
+                </Dropdown>
+              )
+              : null
+            }
+          </>
+        )
+        : <p>{t('Select collection')}</p>
       }
     </fieldset>
   );

package/src/workflow/nodes/calculation.tsx

@@ -1,15 +1,16 @@
 import { css } from '@emotion/css';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Calculation } from '../calculators';
 
 export default {
-  title: '运算',
+  title: '{{t("Calculation")}}',
   type: 'calculation',
   group: 'control',
   fieldset: {
     'config.calculation': {
       type: 'object',
-      title: '配置计算',
+      title: '{{t("Configure calculation")}}',
       name: 'config.calculation',
       required: true,
       'x-decorator': 'FormItem',
@@ -27,6 +28,7 @@ export default {
     }
   },
   getter() {
-    return <div className={css`flex-shrink: 0`}>计算值</div>;
+    const { t } = useTranslation();
+    return <div className={css`flex-shrink: 0`}>{t('Calculation result')}</div>;
   }
 };

package/src/workflow/nodes/create.tsx

@@ -1,5 +1,6 @@
 import { Select } from 'antd';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useCollectionDataSource, useCollectionManager, useCompile } from '../..';
 import { BaseTypeSet, CollectionFieldset } from '../calculators';
 import { collection, values } from '../schemas/collection';
@@ -7,9 +8,9 @@ import { useFlowContext } from '../WorkflowCanvas';
 
 
 export default {
-  title: '新增数据',
+  title: '{{t("Create record")}}',
   type: 'create',
-  group: 'model',
+  group: 'collection',
   fieldset: {
     'config.collection': {
       ...collection,
@@ -45,6 +46,7 @@ export default {
     CollectionFieldset
   },
   getter({ type, options, onChange }) {
+    const { t } = useTranslation();
     const compile = useCompile();
     const { collections = [] } = useCollectionManager();
     const { nodes } = useFlowContext();
@@ -52,7 +54,7 @@ export default {
     const collection = collections.find(item => item.name === config.collection) ?? { fields: [] };
 
     return (
-      <Select value={options.path} placeholder="选择字段" onChange={path => {
+      <Select value={options.path} placeholder={t('Fields')} onChange={path => {
         onChange({ type, options: { ...options, path } });
       }}>
         {collection.fields

package/src/workflow/nodes/destroy.tsx

@@ -4,9 +4,9 @@ import { VariableComponent } from '../calculators';
 import { collection, filter } from '../schemas/collection';
 
 export default {
-  title: '删除数据',
+  title: '{{t("Delete record")}}',
   type: 'destroy',
-  group: 'model',
+  group: 'collection',
   fieldset: {
     'config.collection': collection,
     'config.params': {

package/src/workflow/nodes/index.tsx

@@ -4,7 +4,8 @@ import { ISchema, useForm } from '@formily/react';
 import { Registry } from '@nocobase/utils';
 import { Button, Modal, Tag } from 'antd';
 import React, { useContext } from 'react';
-import { SchemaComponent, useActionContext, useAPIClient, useCollection, useRequest, useResourceActionContext } from '../..';
+import { useTranslation } from 'react-i18next';
+import { SchemaComponent, useActionContext, useAPIClient, useCollection, useCompile, useRequest, useResourceActionContext } from '../..';
 import { nodeBlockClass, nodeCardClass, nodeClass, nodeHeaderClass, nodeTitleClass } from '../style';
 import { AddButton, useFlowContext } from '../WorkflowCanvas';
 
@@ -109,6 +110,7 @@ export function Node({ data }) {
 }
 
 export function RemoveButton() {
+  const { t } = useTranslation();
   const { resource } = useCollection();
   const current = useNodeContext();
   const { nodes, onNodeRemoved } = useFlowContext();
@@ -123,11 +125,11 @@ export function RemoveButton() {
 
     const hasBranches = !nodes.find(item => item.upstream === current && item.branchIndex != null);
     const message = hasBranches
-      ? '确定删除该节点吗？'
-      : '节点包含分支，将同时删除其所有分支下的子节点，确定继续？';
+      ? t('Are you sure you want to delete it?')
+      : t('This node contains branches, deleting will also be preformed to them, are you sure?');
 
     Modal.confirm({
-      title: '删除节点',
+      title: t('Delete'),
       content: message,
       onOk
     });
@@ -146,6 +148,7 @@ export function RemoveButton() {
 
 export function NodeDefaultView(props) {
   const { data, children } = props;
+  const compile = useCompile();
   const instruction = instructions.get(data.type);
 
   return (
@@ -154,7 +157,7 @@ export function NodeDefaultView(props) {
         <div className={cx(nodeCardClass)}>
           <div className={cx(nodeHeaderClass)}>
             <h4 className={cx(nodeTitleClass)}>
-              <Tag>{instruction.title}</Tag>
+              <Tag>{compile(instruction.title)}</Tag>
               <strong>{data.title}</strong>
               <span className="workflow-node-id">#{data.id}</span>
             </h4>
@@ -169,7 +172,7 @@ export function NodeDefaultView(props) {
                 view: instruction.view,
                 config: {
                   type: 'void',
-                  title: '配置节点',
+                  title: '{{t("Node configuration")}}',
                   'x-component': 'Action.Link',
                   'x-component-props': {
                     type: 'primary',
@@ -177,7 +180,7 @@ export function NodeDefaultView(props) {
                   properties: {
                     drawer: {
                       type: 'void',
-                      title: '配置节点',
+                      title: '{{t("Node configuration")}}',
                       'x-component': 'Action.Drawer',
                       'x-decorator': 'Form',
                       'x-decorator-props': {
@@ -192,7 +195,7 @@ export function NodeDefaultView(props) {
                         title: {
                           type: 'string',
                           name: 'title',
-                          title: '节点名称',
+                          title: '{{t("Name")}}',
                           'x-decorator': 'FormItem',
                           'x-component': 'Input',
                         },

package/src/workflow/nodes/query.tsx

@@ -6,11 +6,12 @@ import { useCollectionDataSource, useCollectionManager, useCompile } from '../..
 import { useFlowContext } from '../WorkflowCanvas';
 import { BaseTypeSet, VariableComponent } from '../calculators';
 import { collection, filter } from '../schemas/collection';
+import { useTranslation } from 'react-i18next';
 
 export default {
-  title: '查询数据',
+  title: '{{t("Query record")}}',
   type: 'query',
-  group: 'model',
+  group: 'collection',
   fieldset: {
     'config.collection': collection,
     'config.multiple': {
@@ -43,6 +44,7 @@ export default {
     VariableComponent
   },
   getter({ type, options, onChange }) {
+    const { t } = useTranslation();
     const compile = useCompile();
     const { collections = [] } = useCollectionManager();
     const { nodes } = useFlowContext();
@@ -50,7 +52,7 @@ export default {
     const collection = collections.find(item => item.name === config.collection) ?? { fields: [] };
 
     return (
-      <Select value={options.path} placeholder="选择字段" onChange={path => {
+      <Select value={options.path} placeholder={t('Fields')} onChange={path => {
         onChange({ type, options: { ...options, path } });
       }}>
         {collection.fields

package/src/workflow/nodes/update.tsx

@@ -3,9 +3,9 @@ import { CollectionFieldset, VariableComponent } from '../calculators';
 import { collection, filter, values } from '../schemas/collection';
 
 export default {
-  title: '更新数据',
+  title: '{{t("Update record")}}',
   type: 'update',
-  group: 'model',
+  group: 'collection',
   fieldset: {
     'config.collection': collection,
     'config.params': {