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

package/src/workflow/calculators.tsx

@@ -1,13 +1,15 @@
 import React from "react";
-import { observer } from "@formily/react";
-import { FormItem } from "@formily/antd";
-import { Cascader, DatePicker, Input, InputNumber, Select } from "antd";
+import { observer, useForm } from "@formily/react";
+import { Button, Cascader, Dropdown, Input, InputNumber, Menu, Select, Form } 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";
+import { t } from "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,30 +30,30 @@ export const calculators = [
   },
   {
     value: 'number',
-    title: '算术运算',
+    title: '{{t("Arithmetic calculation")}}',
     children: [
       { value: 'add', name: '+' },
       { value: 'minus', name: '-' },
-      { value: 'multipe', name: '*' },
+      { value: 'multiple', name: '*' },
       { value: 'divide', name: '/' },
       { value: 'mod', name: '%' },
     ]
   },
   {
     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,13 +104,14 @@ const ConstantTypes = {
     default: 0
   },
   boolean: {
-    title: '逻辑值',
+    title: '{{t("Boolean")}}',
     value: 'boolean',
     component({ onChange, type, options, value }) {
+      const { t } = useTranslation();
       return (
         <Select value={value} onChange={v => onChange({ value: v, type, options })}>
-          <Select.Option value={true}>真</Select.Option>
-          <Select.Option value={false}>假</Select.Option>
+          <Select.Option value={true}>{t('True')}</Select.Option>
+          <Select.Option value={false}>{t('False')}</Select.Option>
         </Select>
       );
     },
@@ -126,7 +129,7 @@ const ConstantTypes = {
 
 export const VariableTypes = {
   constant: {
-    title: '常量',
+    title: '{{t("Constant")}}',
     value: 'constant',
     options: Object.values(ConstantTypes).map(item => ({
       value: item.value,
@@ -154,7 +157,7 @@ export const VariableTypes = {
     }
   },
   $jobsMapByNodeId: {
-    title: '节点数据',
+    title: '{{t("Node result")}}',
     value: '$jobsMapByNodeId',
     options() {
       const node = useNodeContext();
@@ -209,7 +212,7 @@ export const VariableTypes = {
     }
   },
   $context: {
-    title: '触发数据',
+    title: '{{t("Trigger context")}}',
     value: '$context',
     component() {
       const { workflow } = useFlowContext();
@@ -251,6 +254,7 @@ export function Operand({
   onChange,
   children
 }: OperandProps) {
+  const compile = useCompile();
   const Types = useVariableTypes();
 
   const { type } = operand;
@@ -278,9 +282,9 @@ 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,
+            children: compile(options),
             disabled: options && !options.length,
             isLeaf: !options
           };
@@ -302,6 +306,7 @@ export function Operand({
 }
 
 export function Calculation({ calculator, operands = [], onChange }) {
+  const compile = useCompile();
   return (
     <VariableTypesContext.Provider value={VariableTypes}>
       <div className={css`
@@ -320,9 +325,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={compile(group.title)}>
                     {group.children.map(item => (
-                      <Select.Option key={item.value} value={item.value}>{item.name}</Select.Option>
+                      <Select.Option key={item.value} value={item.value}>{compile(item.name)}</Select.Option>
                     ))}
                   </Select.OptGroup>
                 ))}
@@ -340,7 +345,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 +375,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,37 +408,73 @@ export const CollectionFieldset = observer(({ value, onChange, useProps }: any)
       }
     `}>
       {fields.length
-        ? fields
-          .filter(field => !field.hidden)
-          .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) });
+              // TODO: try to use <ObjectField> to replace this map
+              return (
+                <Form.Item key={field.name} label={compile(field.uiSchema?.title ?? field.name)} labelAlign="left" className={css`
+                  .ant-form-item-control-input-content{
+                    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>
+                </Form.Item>
+              );
+            })}
+            {Object.keys(value).length < fields.length
+              ? (
+                <Dropdown overlay={
+                  <Menu onClick={({ key }) => onChange({ ...value, [key]: null })} className={css`
+                    max-height: 300px;
+                    overflow-y: auto;
+                  `}>
+                    {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('Please select collection first')}</p>
       }
     </fieldset>
   );

package/src/workflow/index.tsx

@@ -3,5 +3,3 @@ export * from './WorkflowLink';
 export * from './WorkflowPage';
 export * from './WorkflowRouteProvider';
 export * from './WorkflowShortcut';
-export * from './WorkflowTable';
-

package/src/workflow/nodes/calculation.tsx

@@ -1,15 +1,17 @@
+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: {
-    calculation: {
+    'config.calculation': {
       type: 'object',
-      title: '配置计算',
-      name: 'calculation',
+      title: '{{t("Configure calculation")}}',
+      name: 'config.calculation',
       required: true,
       'x-decorator': 'FormItem',
       'x-component': 'CalculationConfig',
@@ -26,6 +28,7 @@ export default {
     }
   },
   getter() {
-    return <div>计算值</div>;
+    const { t } = useTranslation();
+    return <div className={css`flex-shrink: 0`}>{t('Calculation result')}</div>;
   }
 };

package/src/workflow/nodes/condition.tsx

@@ -2,12 +2,13 @@ import React from "react";
 import { css, cx } from "@emotion/css";
 import { Button, Select } from "antd";
 import { CloseCircleOutlined } from '@ant-design/icons';
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { NodeDefaultView } from ".";
 import { Branch, useFlowContext } from "../WorkflowCanvas";
 import { branchBlockClass, nodeSubtreeClass } from "../style";
 import { Calculation } from "../calculators";
+import { i18n } from "../../i18n";
 // import { SchemaComponent } from "../../schema-component";
 
 function CalculationItem({ value, onChange, onRemove }) {
@@ -32,12 +33,13 @@ function CalculationItem({ value, onChange, onRemove }) {
         )
         : <Calculation operands={operands} calculator={calculator} onChange={onChange} />
       }
-      <Button onClick={onRemove} type="text" icon={<CloseCircleOutlined />} />
+      <Button onClick={onRemove} type="link" icon={<CloseCircleOutlined />} />
     </div>
   );
 }
 
 function CalculationGroup({ value, onChange }) {
+  const { t } = useTranslation();
   const { type = 'and', calculations = [] } = value;
 
   function onAddSingle() {
@@ -66,17 +68,20 @@ function CalculationGroup({ value, onChange }) {
   }
 
   return (
-    <div className={css`
+    <div className={cx('node-type-condition-group', css`
       position: relative;
       width: 100%;
-      padding: .5em 1em;
-      border: 1px dashed #ddd;
+
+      .node-type-condition-group{
+        padding: .5em 1em;
+        border: 1px dashed #ddd;
+      }
 
       + button{
         position: absolute;
         right: 0;
       }
-    `}>
+    `)}>
       <div className={css`
         display: flex;
         align-items: center;
@@ -106,12 +111,16 @@ function CalculationGroup({ value, onChange }) {
         ))}
       </div>
       <div className={css`
-        a:not(:last-child){
-          margin-right: 1em;
+        button{
+          padding: 0;
+
+          &:not(:last-child){
+            margin-right: 1em;
+          }
         }
       `} >
-        <a onClick={onAddSingle}>添加条件</a>
-        <a onClick={onAddGroup}>添加条件组</a>
+        <Button type="link" onClick={onAddSingle}>{t('Add condition')}</Button>
+        <Button type="link" onClick={onAddGroup}>{t('Add condition group')}</Button>
       </div>
     </div>
   );
@@ -127,28 +136,34 @@ function CalculationConfig({ value, onChange }) {
 }
 
 export default {
-  title: '条件判断',
+  title: '{{t("Condition")}}',
   type: 'condition',
   group: 'control',
   fieldset: {
-    rejectOnFalse: {
+    'config.rejectOnFalse': {
       type: 'boolean',
-      name: 'rejectOnFalse',
-      title: '模式',
+      name: 'config.rejectOnFalse',
+      title: '{{t("Mode")}}',
       'x-decorator': 'FormItem',
       'x-component': 'Radio.Group',
       'x-component-props': {
         disabled: true,
       },
       enum: [
-        { value: true, label: '通行模式' },
-        { value: false, label: '分支模式' },
+        {
+          value: true,
+          label: i18n.t('Continue when "Yes"')
+        },
+        {
+          value: false,
+          label: i18n.t('Branch into "Yes" and "No"')
+        }
       ],
     },
-    calculation: {
+    'config.calculation': {
       type: 'string',
-      name: 'calculation',
-      title: '条件配置',
+      name: 'config.calculation',
+      title: '{{t("Conditions")}}',
       'x-decorator': 'FormItem',
       'x-component': 'CalculationConfig',
     }
@@ -157,8 +172,8 @@ export default {
 
   },
   options: [
-    { label: '通行模式', key: 'rejectOnFalse', value: { rejectOnFalse: true } },
-    { label: '分支模式', key: 'branch', value: { rejectOnFalse: false } }
+    { label: i18n.t('Continue when "Yes"'), key: 'rejectOnFalse', value: { rejectOnFalse: true } },
+    { label: i18n.t('Branch into "Yes" and "No"'), key: 'branch', value: { rejectOnFalse: false } }
   ],
   render(data) {
     const { id, config: { rejectOnFalse } } = data;
@@ -187,7 +202,7 @@ export default {
                 height: 2em;
                 overflow: visible;
 
-                :before,:after{
+                > span{
                   position: absolute;
                   top: calc(1.5em - 1px);
                   line-height: 1em;
@@ -195,18 +210,11 @@ export default {
                   background-color: #f0f2f5;
                   padding: 1px;
                 }
-
-                :before{
-                  content: "否";
-                  right: 4em;
-                }
-
-                :after{
-                  content: "是";
-                  left: 4em;
-                }
               `}
-            />
+            >
+              <span className={css`right: 4em;`}>{i18n.t('No')}</span>
+              <span className={css`left: 4em;`}>{i18n.t('Yes')}</span>
+            </div>
           </div>
         )}
       </NodeDefaultView>

package/src/workflow/nodes/create.tsx

@@ -1,17 +1,21 @@
-import React from 'react';
 import { Select } from 'antd';
-
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useCollectionDataSource, useCollectionManager, useCompile } from '../..';
-import { useFlowContext } from '../WorkflowCanvas';
-import { collection, values } from '../schemas/collection';
 import { BaseTypeSet, CollectionFieldset } from '../calculators';
+import { collection, values } from '../schemas/collection';
+import { useFlowContext } from '../WorkflowCanvas';
+
 
 export default {
-  title: '新增数据',
+  title: '{{t("Create record")}}',
   type: 'create',
-  group: 'model',
+  group: 'collection',
   fieldset: {
-    collection,
+    'config.collection': {
+      ...collection,
+      name: 'config.collection'
+    },
     // multiple: {
     //   type: 'boolean',
     //   title: '多条数据',
@@ -22,15 +26,7 @@ export default {
     //     disabled: true
     //   }
     // },
-    params: {
-      type: 'object',
-      name: 'params',
-      title: '',
-      'x-decorator': 'FormItem',
-      properties: {
-        values
-      }
-    }
+    'config.params.values': values
   },
   view: {
 
@@ -42,6 +38,7 @@ export default {
     CollectionFieldset
   },
   getter({ type, options, onChange }) {
+    const { t } = useTranslation();
     const compile = useCompile();
     const { collections = [] } = useCollectionManager();
     const { nodes } = useFlowContext();
@@ -49,7 +46,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,14 +4,14 @@ import { VariableComponent } from '../calculators';
 import { collection, filter } from '../schemas/collection';
 
 export default {
-  title: '删除数据',
+  title: '{{t("Delete record")}}',
   type: 'destroy',
-  group: 'model',
+  group: 'collection',
   fieldset: {
-    collection,
-    params: {
+    'config.collection': collection,
+    'config.params': {
       type: 'object',
-      name: 'params',
+      name: 'config.params',
       title: '',
       'x-decorator': 'FormItem',
       properties: {