@nocobase/client 0.7.0-alpha.82 → 0.7.1-alpha.4

package/src/workflow/nodes/condition.tsx

@@ -1,226 +0,0 @@
-import React from "react";
-import { css, cx } from "@emotion/css";
-import { Button, Select } from "antd";
-import { CloseCircleOutlined } from '@ant-design/icons';
-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 }) {
-  if (!value) {
-    return null;
-  }
-
-  const { calculator, operands = [] } = value;
-
-  return (
-    <div className={css`
-      display: flex;
-      position: relative;
-      margin: .5em 0;
-    `}>
-      {value.group
-        ? (
-          <CalculationGroup
-            value={value.group}
-            onChange={group => onChange({ ...value, group })}
-          />
-        )
-        : <Calculation operands={operands} calculator={calculator} onChange={onChange} />
-      }
-      <Button onClick={onRemove} type="link" icon={<CloseCircleOutlined />} />
-    </div>
-  );
-}
-
-function CalculationGroup({ value, onChange }) {
-  const { t } = useTranslation();
-  const { type = 'and', calculations = [] } = value;
-
-  function onAddSingle() {
-    onChange({
-      ...value,
-      calculations: [...calculations, { not: false, calculator: 'equal' }]
-    });
-  }
-
-  function onAddGroup() {
-    onChange({
-      ...value,
-      calculations: [...calculations, { not: false, group: { type: 'and', calculations: [] } }]
-    });
-  }
-
-  function onRemove(i: number) {
-    calculations.splice(i, 1);
-    onChange({ ...value, calculations: [...calculations] });
-  }
-
-  function onItemChange(i: number, v) {
-    calculations.splice(i, 1, v);
-
-    onChange({ ...value, calculations: [...calculations] });
-  }
-
-  return (
-    <div className={cx('node-type-condition-group', css`
-      position: relative;
-      width: 100%;
-
-      .node-type-condition-group{
-        padding: .5em 1em;
-        border: 1px dashed #ddd;
-      }
-
-      + button{
-        position: absolute;
-        right: 0;
-      }
-    `)}>
-      <div className={css`
-        display: flex;
-        align-items: center;
-        gap: .5em;
-
-        .ant-select{
-          width: auto;
-        }
-      `}>
-        <Trans>
-          {'Meet '}
-          <Select value={type} onChange={t => onChange({ ...value, type: t })}>
-            <Select.Option value="and">All</Select.Option>
-            <Select.Option value="or">Any</Select.Option>
-          </Select>
-          {' conditions in the group'}
-        </Trans>
-      </div>
-      <div className="calculation-items">
-        {calculations.map((calculation, i) => (
-          <CalculationItem
-            key={`${calculation.calculator}_${i}`}
-            value={calculation}
-            onChange={onItemChange.bind(this, i)}
-            onRemove={() => onRemove(i)}
-          />
-        ))}
-      </div>
-      <div className={css`
-        button{
-          padding: 0;
-
-          &:not(:last-child){
-            margin-right: 1em;
-          }
-        }
-      `} >
-        <Button type="link" onClick={onAddSingle}>{t('Add condition')}</Button>
-        <Button type="link" onClick={onAddGroup}>{t('Add condition group')}</Button>
-      </div>
-    </div>
-  );
-}
-
-function CalculationConfig({ value, onChange }) {
-  const rule = value && Object.keys(value).length
-    ? value
-    : { group: { type: 'and', calculations: [] } };
-  return (
-    <CalculationGroup value={rule.group} onChange={group => onChange({ ...rule, group })} />
-  );
-}
-
-export default {
-  title: '{{t("Condition")}}',
-  type: 'condition',
-  group: 'control',
-  fieldset: {
-    'config.rejectOnFalse': {
-      type: 'boolean',
-      name: 'config.rejectOnFalse',
-      title: '{{t("Mode")}}',
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        disabled: true,
-      },
-      enum: [
-        {
-          value: true,
-          label: i18n.t('Continue when "Yes"')
-        },
-        {
-          value: false,
-          label: i18n.t('Branch into "Yes" and "No"')
-        }
-      ],
-    },
-    'config.calculation': {
-      type: 'string',
-      name: 'config.calculation',
-      title: '{{t("Conditions")}}',
-      'x-decorator': 'FormItem',
-      'x-component': 'CalculationConfig',
-    }
-  },
-  view: {
-
-  },
-  options: [
-    { 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;
-    const { nodes } = useFlowContext();
-    const trueEntry = nodes.find(item => item.upstreamId === id && item.branchIndex === 1);
-    const falseEntry = nodes.find(item => item.upstreamId === id && item.branchIndex === 0);
-    return (
-      <NodeDefaultView data={data}>
-        {rejectOnFalse ? null : (
-          <div className={cx(nodeSubtreeClass)}>
-            <div
-              className={cx(branchBlockClass, css`
-                > * > .workflow-branch-lines{
-                  > button{
-                    display: none;
-                  }
-                }
-              `)}
-            >
-              <Branch from={data} entry={falseEntry} branchIndex={0}/>
-              <Branch from={data} entry={trueEntry} branchIndex={1} />
-            </div>
-            <div
-              className={css`
-                position: relative;
-                height: 2em;
-                overflow: visible;
-
-                > span{
-                  position: absolute;
-                  top: calc(1.5em - 1px);
-                  line-height: 1em;
-                  color: #999;
-                  background-color: #f0f2f5;
-                  padding: 1px;
-                }
-              `}
-            >
-              <span className={css`right: 4em;`}>{i18n.t('No')}</span>
-              <span className={css`left: 4em;`}>{i18n.t('Yes')}</span>
-            </div>
-          </div>
-        )}
-      </NodeDefaultView>
-    )
-  },
-  components: {
-    CalculationConfig
-  }
-};

package/src/workflow/nodes/create.tsx

@@ -1,60 +0,0 @@
-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';
-import { useFlowContext } from '../WorkflowCanvas';
-
-
-export default {
-  title: '{{t("Create record")}}',
-  type: 'create',
-  group: 'collection',
-  fieldset: {
-    'config.collection': {
-      ...collection,
-      name: 'config.collection'
-    },
-    // multiple: {
-    //   type: 'boolean',
-    //   title: '多条数据',
-    //   name: 'multiple',
-    //   'x-decorator': 'FormItem',
-    //   'x-component': 'Checkbox',
-    //   'x-component-props': {
-    //     disabled: true
-    //   }
-    // },
-    'config.params.values': values
-  },
-  view: {
-
-  },
-  scope: {
-    useCollectionDataSource
-  },
-  components: {
-    CollectionFieldset
-  },
-  getter({ type, options, onChange }) {
-    const { t } = useTranslation();
-    const compile = useCompile();
-    const { collections = [] } = useCollectionManager();
-    const { nodes } = useFlowContext();
-    const { config } = nodes.find(n => n.id == options.nodeId);
-    const collection = collections.find(item => item.name === config.collection) ?? { fields: [] };
-
-    return (
-      <Select value={options.path} placeholder={t('Fields')} onChange={path => {
-        onChange({ type, options: { ...options, 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/nodes/destroy.tsx

@@ -1,31 +0,0 @@
-import { useCollectionDataSource } from '../..';
-
-import { VariableComponent } from '../calculators';
-import { collection, filter } from '../schemas/collection';
-
-export default {
-  title: '{{t("Delete record")}}',
-  type: 'destroy',
-  group: 'collection',
-  fieldset: {
-    'config.collection': collection,
-    'config.params': {
-      type: 'object',
-      name: 'config.params',
-      title: '',
-      'x-decorator': 'FormItem',
-      properties: {
-        filter
-      }
-    }
-  },
-  view: {
-
-  },
-  scope: {
-    useCollectionDataSource
-  },
-  components: {
-    VariableComponent
-  }
-};

package/src/workflow/nodes/index.tsx

@@ -1,269 +0,0 @@
-import { CloseOutlined, DeleteOutlined } from '@ant-design/icons';
-import { css, cx } from '@emotion/css';
-import { ISchema, useForm } from '@formily/react';
-import { Registry } from '@nocobase/utils';
-import { Button, message, Modal, Tag } from 'antd';
-import React, { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import { SchemaComponent, useActionContext, useAPIClient, useCollection, useCompile, useRecord, useRequest, useResourceActionContext } from '../..';
-import { nodeBlockClass, nodeCardClass, nodeClass, nodeHeaderClass, nodeMetaClass, nodeTitleClass } from '../style';
-import { AddButton, useFlowContext } from '../WorkflowCanvas';
-
-import calculation from './calculation';
-import condition from './condition';
-import create from './create';
-import destroy from './destroy';
-import parallel from './parallel';
-import query from './query';
-import update from './update';
-
-
-
-export interface Instruction {
-  title: string;
-  type: string;
-  group: string;
-  options?: { label: string; value: any; key: string }[];
-  fieldset: { [key: string]: ISchema };
-  view?: ISchema;
-  scope?: { [key: string]: any };
-  components?: { [key: string]: any };
-  render?(props): React.ReactElement;
-  endding?: boolean;
-  getter?(node: any): React.ReactElement;
-};
-
-export const instructions = new Registry<Instruction>();
-
-instructions.register('query', query);
-instructions.register('create', create);
-instructions.register('update', update);
-instructions.register('destroy', destroy);
-instructions.register('condition', condition);
-instructions.register('parallel', parallel);
-instructions.register('calculation', calculation);
-
-function useUpdateAction() {
-  const { t } = useTranslation();
-  const form = useForm();
-  const api = useAPIClient();
-  const ctx = useActionContext();
-  const { refresh } = useResourceActionContext();
-  const data = useNodeContext();
-  const { workflow } = useFlowContext();
-  return {
-    async run() {
-      if (workflow.executed) {
-        message.error(t('Node in executed workflow cannot be modified'));
-        return;
-      }
-      await form.submit();
-      await api.resource('flow_nodes', data.id).update({
-        filterByTk: data.id,
-        values: {
-          title: form.values.title,
-          config: form.values.config
-        }
-      });
-      ctx.setVisible(false);
-      refresh();
-    },
-  };
-};
-
-const NodeContext = React.createContext(null);
-
-export function useNodeContext() {
-  return useContext(NodeContext);
-}
-
-export function Node({ data }) {
-
-  const instruction = instructions.get(data.type);
-
-  return (
-    <NodeContext.Provider value={data}>
-      <div className={cx(nodeBlockClass)}>
-        {instruction.render
-          ? instruction.render(data)
-          : <NodeDefaultView data={data} />
-        }
-        {!instruction.endding
-          ? <AddButton upstream={data} />
-          : (
-            <div
-              className={css`
-                flex-grow: 1;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                width: 1px;
-                height: 6em;
-                padding: 2em 0;
-                background-color: #f0f2f5;
-
-                .anticon{
-                  font-size: 1.5em;
-                  line-height: 100%;
-                }
-              `}
-            >
-              <CloseOutlined />
-            </div>
-          )
-        }
-      </div>
-    </NodeContext.Provider>
-  );
-}
-
-export function RemoveButton() {
-  const { t } = useTranslation();
-  const api = useAPIClient();
-  const { workflow } = useFlowContext();
-  const resource = api.resource('workflows.nodes', workflow.id);
-  const current = useNodeContext();
-  const { nodes, onNodeRemoved } = useFlowContext();
-
-  async function onRemove() {
-    async function onOk() {
-      const { data: { data: node } } = await resource.destroy({
-        filterByTk: current.id
-      });
-      onNodeRemoved(node);
-    }
-
-    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: t('Delete'),
-      content: message,
-      onOk
-    });
-  }
-
-  return workflow.executed
-  ? null
-  : (
-    <Button
-      type="text"
-      shape="circle"
-      icon={<DeleteOutlined />}
-      onClick={onRemove}
-      className="workflow-node-remove-button"
-    />
-  );
-}
-
-export function NodeDefaultView(props) {
-  const compile = useCompile();
-  const { workflow } = useFlowContext();
-  const { data, children } = props;
-  const instruction = instructions.get(data.type);
-  const detailText = workflow.executed ? '{{t("View")}}' : '{{t("Configure")}}';
-
-  return (
-    <div className={cx(nodeClass, `workflow-node-type-${data.type}`)}>
-      <div className={cx(nodeCardClass)}>
-        <div className={cx(nodeHeaderClass)}>
-          <div className={cx(nodeMetaClass)}>
-            <Tag>{compile(instruction.title)}</Tag>
-          </div>
-          <h4 className={cx(nodeTitleClass)}>
-            <strong>{data.title}</strong>
-            <span className="workflow-node-id">#{data.id}</span>
-          </h4>
-          <RemoveButton />
-        </div>
-        <SchemaComponent
-          scope={instruction.scope}
-          components={instruction.components}
-          schema={{
-            type: 'void',
-            properties: {
-              view: instruction.view,
-              config: {
-                type: 'void',
-                title: detailText,
-                'x-component': 'Action.Link',
-                'x-component-props': {
-                  type: 'primary',
-                },
-                properties: {
-                  [instruction.type]: {
-                    type: 'void',
-                    title: instruction.title,
-                    'x-component': 'Action.Drawer',
-                    'x-decorator': 'Form',
-                    'x-decorator-props': {
-                      useValues(options) {
-                        const d = useNodeContext();
-                        return useRequest(() => {
-                          return Promise.resolve({ data: d });
-                        }, options);
-                      }
-                    },
-                    properties: {
-                      title: {
-                        type: 'string',
-                        name: 'title',
-                        title: '{{t("Name")}}',
-                        'x-decorator': 'FormItem',
-                        'x-component': 'Input',
-                      },
-                      config: {
-                        type: 'void',
-                        name: 'config',
-                        'x-component': 'fieldset',
-                        'x-component-props': {
-                          disabled: workflow.executed
-                        },
-                        properties: instruction.fieldset
-                      },
-                      actions: {
-                        type: 'void',
-                        'x-component': 'Action.Drawer.Footer',
-                        properties: workflow.executed
-                        ? {
-                          close: {
-                            title: '{{t("Close")}}',
-                            'x-component': 'Action',
-                            'x-component-props': {
-                              useAction: '{{ cm.useCancelAction }}',
-                            },
-                          }
-                        }
-                        : {
-                          cancel: {
-                            title: '{{t("Cancel")}}',
-                            'x-component': 'Action',
-                            'x-component-props': {
-                              useAction: '{{ cm.useCancelAction }}',
-                            },
-                          },
-                          submit: {
-                            title: '{{t("Submit")}}',
-                            'x-component': 'Action',
-                            'x-component-props': {
-                              type: 'primary',
-                              useAction: useUpdateAction,
-                            },
-                          },
-                        },
-                      } as ISchema
-                    }
-                  }
-                }
-              }
-            }
-          }}
-        />
-      </div>
-      {children}
-    </div>
-  );
-}