@nocobase/plugin-workflow 0.7.1-alpha.7 → 0.7.2-alpha.3

package/lib/client/style.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.workflowVersionDropdownClass = exports.workflowPageClass = exports.nodeTitleClass = exports.nodeSubtreeClass = exports.nodeMetaClass = exports.nodeHeaderClass = exports.nodeClass = exports.nodeCardClass = exports.nodeBlockClass = exports.branchClass = exports.branchBlockClass = exports.addButtonClass = void 0;
+
+function _css() {
+  const data = require("@emotion/css");
+
+  _css = function _css() {
+    return data;
+  };
+
+  return data;
+}
+
+const workflowPageClass = (0, _css().css)`
+  height: 100%;
+  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%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2em;
+  }
+`;
+exports.workflowPageClass = workflowPageClass;
+const workflowVersionDropdownClass = (0, _css().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%;
+      }
+    }
+  }
+`;
+exports.workflowVersionDropdownClass = workflowVersionDropdownClass;
+const branchBlockClass = (0, _css().css)`
+  display: flex;
+  position: relative;
+
+  :before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(50% - .5px);
+    width: 1px;
+    background-color: #f0f2f5;
+  }
+`;
+exports.branchBlockClass = branchBlockClass;
+const branchClass = (0, _css().css)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  padding: 0 2em;
+
+  .workflow-node-list{
+    flex-grow: 1;
+    min-width: 20em;
+  }
+
+  .workflow-branch-lines{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: #ddd;
+  }
+
+  :before,:after{
+    content: "";
+    position: absolute;
+    height: 1px;
+    background-color: #ddd;
+  }
+
+  :before{
+    top: 0;
+  }
+
+  :after{
+    bottom: 0;
+  }
+
+  :not(:first-child):not(:last-child){
+    :before,:after{
+      left: 0;
+      width: 100%;
+    }
+  }
+
+  :last-child:not(:first-child){
+    :before,:after{
+      right: 50%;
+      width: 50%;
+    }
+  }
+
+  :first-child:not(:last-child){
+    :before,:after{
+      left: 50%;
+      width: 50%;
+    }
+  }
+`;
+exports.branchClass = branchClass;
+const nodeBlockClass = (0, _css().css)`
+  flex-grow: 1;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+`;
+exports.nodeBlockClass = nodeBlockClass;
+const nodeClass = (0, _css().css)`
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+exports.nodeClass = nodeClass;
+const nodeCardClass = (0, _css().css)`
+  width: 20em;
+  background: #fff;
+  padding: 1em;
+  box-shadow: 0 .25em .5em rgba(0, 0, 0, .1);
+
+  .workflow-node-remove-button{
+    position: absolute;
+    right: -.5em;
+    top: -.5em;
+    color: #999;
+    opacity: 0;
+    transition: opacity .3s ease;
+
+    &[disabled]{
+      display: none;
+    }
+
+    &:hover {
+      color: red;
+    }
+  }
+
+  &:hover{
+    .workflow-node-remove-button{
+      opacity: 1;
+    }
+  }
+`;
+exports.nodeCardClass = nodeCardClass;
+const nodeHeaderClass = (0, _css().css)`
+  position: relative;
+`;
+exports.nodeHeaderClass = nodeHeaderClass;
+const nodeMetaClass = (0, _css().css)`
+  margin-bottom: .5em;
+`;
+exports.nodeMetaClass = nodeMetaClass;
+const nodeTitleClass = (0, _css().css)`
+  font-weight: normal;
+
+  .workflow-node-id{
+    color: #999;
+  }
+`;
+exports.nodeTitleClass = nodeTitleClass;
+const nodeSubtreeClass = (0, _css().css)`
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+`;
+exports.nodeSubtreeClass = nodeSubtreeClass;
+const addButtonClass = (0, _css().css)`
+  flex-shrink: 0;
+  padding: 2em 0;
+`;
+exports.addButtonClass = addButtonClass;

package/lib/client/triggers/collection.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useCollectionDataSource } from '@nocobase/client';
+declare const _default: {
+    title: string;
+    type: string;
+    fieldset: {
+        'config.collection': {
+            "x-reactions": (string | {
+                target: string;
+                fulfill: {
+                    state: {
+                        visible: string;
+                    };
+                };
+            })[];
+            type: string;
+            title: string;
+            name: string;
+            required: boolean;
+            'x-decorator': string;
+            'x-component': string;
+            'x-component-props': {
+                placeholder: string;
+            };
+        };
+        'config.mode': {
+            type: string;
+            title: string;
+            name: string;
+            'x-decorator': string;
+            'x-component': string;
+            'x-component-props': {
+                options: {
+                    value: number;
+                    label: string;
+                }[];
+                placeholder: string;
+            };
+            required: boolean;
+            'x-reactions': {
+                target: string;
+                fulfill: {
+                    state: {
+                        disabled: string;
+                    };
+                };
+            }[];
+        };
+        'config.changed': {
+            type: string;
+            name: string;
+            title: string;
+            description: string;
+            'x-decorator': string;
+            'x-component': string;
+            'x-component-props': {
+                mode: string;
+                placeholder: string;
+            };
+        };
+        'config.condition': {
+            name: string;
+            title: string;
+            type: string;
+            'x-decorator': string;
+            'x-decorator-props': {
+                labelAlign: string;
+                className: string;
+            };
+            'x-component': string;
+            'x-component-props': {
+                useProps(): {
+                    options: any[];
+                    className: string;
+                };
+                dynamicComponent: string;
+            };
+        };
+    };
+    scope: {
+        useCollectionDataSource: typeof useCollectionDataSource;
+    };
+    components: {
+        FieldsSelect: React.MemoExoticComponent<React.FunctionComponent<unknown>>;
+    };
+    getter(props: any): JSX.Element;
+};
+export default _default;

package/lib/client/triggers/collection.js

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+
+  _react = function _react() {
+    return data;
+  };
+
+  return data;
+}
+
+function _antd() {
+  const data = require("antd");
+
+  _antd = function _antd() {
+    return data;
+  };
+
+  return data;
+}
+
+function _react2() {
+  const data = require("@formily/react");
+
+  _react2 = function _react2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _client() {
+  const data = require("@nocobase/client");
+
+  _client = function _client() {
+    return data;
+  };
+
+  return data;
+}
+
+var _WorkflowCanvas = require("../WorkflowCanvas");
+
+var _collection = require("../schemas/collection");
+
+function _css() {
+  const data = require("@emotion/css");
+
+  _css = function _css() {
+    return data;
+  };
+
+  return data;
+}
+
+function _core() {
+  const data = require("@formily/core");
+
+  _core = function _core() {
+    return data;
+  };
+
+  return data;
+}
+
+var _CollectionFieldSelect = _interopRequireDefault(require("../components/CollectionFieldSelect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const FieldsSelect = (0, _react2().observer)(props => {
+  var _values$config;
+
+  const compile = (0, _client().useCompile)();
+
+  const _useCollectionManager = (0, _client().useCollectionManager)(),
+        getCollectionFields = _useCollectionManager.getCollectionFields;
+
+  const _useForm = (0, _react2().useForm)(),
+        values = _useForm.values,
+        clearFormGraph = _useForm.clearFormGraph,
+        setValuesIn = _useForm.setValuesIn;
+
+  const fields = getCollectionFields(values === null || values === void 0 ? void 0 : (_values$config = values.config) === null || _values$config === void 0 ? void 0 : _values$config.collection);
+  (0, _react2().useFormEffects)(() => {
+    (0, _core().onFieldValueChange)('config.collection', field => {
+      clearFormGraph('config.changed');
+      setValuesIn('config.condition', null);
+    });
+  });
+  return _react().default.createElement(_antd().Select, _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _css().css)`
+        min-width: 6em;
+      `
+  }), fields.filter(field => !field.hidden && (field.uiSchema ? !field.uiSchema['x-read-pretty'] : true)).map(field => {
+    var _field$uiSchema;
+
+    return _react().default.createElement(_antd().Select.Option, {
+      key: field.name,
+      value: field.name
+    }, compile((_field$uiSchema = field.uiSchema) === null || _field$uiSchema === void 0 ? void 0 : _field$uiSchema.title));
+  }));
+});
+var _default = {
+  title: '{{t("Collection event")}}',
+  type: 'collection',
+  fieldset: {
+    'config.collection': _objectSpread(_objectSpread({}, _collection.collection), {}, {
+      ['x-reactions']: [..._collection.collection['x-reactions'], {
+        target: 'config.mode',
+        fulfill: {
+          state: {
+            visible: '{{!!$self.value}}'
+          }
+        }
+      }, {
+        target: 'config.changed',
+        fulfill: {
+          state: {
+            visible: '{{!!$self.value}}'
+          }
+        }
+      }, {
+        target: 'config.condition',
+        fulfill: {
+          state: {
+            visible: '{{!!$self.value}}'
+          }
+        }
+      }]
+    }),
+    '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")}}'
+        }],
+        placeholder: '{{t("Trigger on")}}'
+      },
+      required: true,
+      'x-reactions': [{
+        target: 'config.changed',
+        fulfill: {
+          state: {
+            disabled: '{{!($self.value & 0b010)}}'
+          }
+        }
+      }]
+    },
+    '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',
+        placeholder: '{{t("Select Field")}}'
+      }
+    },
+    'config.condition': _objectSpread(_objectSpread({}, _collection.filter), {}, {
+      name: 'config.condition',
+      title: '{{t("Only triggers when match conditions")}}'
+    })
+  },
+  scope: {
+    useCollectionDataSource: _client().useCollectionDataSource
+  },
+  components: {
+    FieldsSelect
+  },
+
+  getter(props) {
+    var _options$path;
+
+    const type = props.type,
+          options = props.options,
+          _onChange = props.onChange;
+
+    const _useFlowContext = (0, _WorkflowCanvas.useFlowContext)(),
+          workflow = _useFlowContext.workflow;
+
+    const value = options === null || options === void 0 ? void 0 : (_options$path = options.path) === null || _options$path === void 0 ? void 0 : _options$path.replace(/^data\./, '');
+    return _react().default.createElement(_CollectionFieldSelect.default, {
+      collection: workflow.config.collection,
+      value: value,
+      onChange: value => {
+        _onChange({
+          type,
+          options: _objectSpread(_objectSpread({}, options), {}, {
+            path: `data.${value}`
+          })
+        });
+      }
+    });
+  }
+
+};
+exports.default = _default;

package/lib/client/triggers/index.d.ts

@@ -0,0 +1,26 @@
+import { ISchema } from "@formily/react";
+import { Registry } from "@nocobase/utils/client";
+import React from "react";
+export interface Trigger {
+    title: string;
+    type: string;
+    options?: {
+        label: string;
+        value: any;
+        key: string;
+    }[];
+    fieldset: {
+        [key: string]: ISchema;
+    };
+    view?: ISchema;
+    scope?: {
+        [key: string]: any;
+    };
+    components?: {
+        [key: string]: any;
+    };
+    render?(props: any): React.ReactElement;
+    getter?(node: any): React.ReactElement;
+}
+export declare const triggers: Registry<Trigger>;
+export declare const TriggerConfig: () => JSX.Element;