@nocobase/plugin-workflow 0.10.1-alpha.1 → 0.11.0-alpha.1

package/src/client/style.tsx

@@ -0,0 +1,312 @@
+import { css } from '@nocobase/client';
+
+export const workflowPageClass = css`
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .workflow-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    padding: 0.5rem 1rem;
+    background: #fff;
+    border-bottom: 1px solid #e7e7e7;
+
+    header {
+      display: flex;
+      align-items: center;
+      min-height: 2rem;
+    }
+
+    aside {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+    }
+
+    .workflow-versions {
+      label {
+        margin-right: 0.5em;
+      }
+    }
+  }
+
+  .workflow-canvas {
+    flex-grow: 1;
+    overflow: auto;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2em;
+
+    .end {
+      cursor: default;
+
+      &:hover {
+        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+`;
+
+export const workflowVersionDropdownClass = css`
+  .ant-dropdown-menu-item {
+    .ant-dropdown-menu-title-content {
+      text-align: right;
+
+      time {
+        margin-left: 0.5rem;
+        color: #999;
+        font-size: 80%;
+      }
+
+      strong {
+        font-weight: normal;
+      }
+
+      > .enabled {
+        strong {
+          font-weight: bold;
+        }
+      }
+
+      > .unexecuted {
+        strong {
+          font-style: italic;
+        }
+      }
+    }
+  }
+`;
+
+export const branchBlockClass = css`
+  display: flex;
+  position: relative;
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(50% - 0.5px);
+    width: 1px;
+    background-color: var(--nb-box-bg);
+  }
+`;
+
+export const branchClass = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  min-width: 20em;
+  padding: 0 2em;
+
+  .workflow-node-list {
+    flex-grow: 1;
+  }
+
+  .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%;
+    }
+  }
+`;
+
+export const nodeBlockClass = css`
+  flex-grow: 1;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+`;
+
+export const nodeClass = css`
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const nodeCardClass = css`
+  position: relative;
+  width: 20em;
+  background: #fff;
+  padding: 1em;
+  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+  border-radius: 0.5em;
+  cursor: pointer;
+  transition: box-shadow 0.3s ease;
+
+  &.configuring {
+    box-shadow: 0 0.25em 1em rgba(0, 100, 200, 0.25);
+  }
+
+  .workflow-node-remove-button {
+    position: absolute;
+    right: 0.5em;
+    top: 0.5em;
+    color: #999;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+
+    &[disabled] {
+      display: none;
+    }
+
+    &:hover {
+      color: red;
+    }
+  }
+
+  .ant-input {
+    font-weight: bold;
+
+    &:not(:focus) {
+      transition: background-color 0.3s ease, border-color 0.3s ease;
+      border-color: #f7f7f7;
+      background-color: #f7f7f7;
+
+      &:not(:disabled):hover {
+        border-color: #eee;
+        background-color: #eee;
+      }
+
+      &:disabled:hover {
+        border-color: #f7f7f7;
+      }
+    }
+  }
+
+  .workflow-node-config-button {
+    padding: 0;
+  }
+
+  &:hover {
+    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
+
+    .workflow-node-remove-button {
+      opacity: 1;
+    }
+  }
+`;
+
+export const nodeJobButtonClass = css`
+  display: flex;
+  position: absolute;
+  top: 1.25em;
+  right: 1.25em;
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.8em;
+  color: #fff;
+
+  &[type='button'] {
+    border: none;
+  }
+
+  &.inner {
+    position: static;
+  }
+
+  .ant-tag {
+    padding: 0;
+    width: 100%;
+    line-height: 18px;
+    margin-right: 0;
+    border-radius: 50%;
+    text-align: center;
+  }
+`;
+
+export const nodeHeaderClass = css`
+  position: relative;
+`;
+
+export const nodeMetaClass = css`
+  margin-bottom: 0.5em;
+
+  .workflow-node-id {
+    color: #999;
+
+    &:before {
+      content: '#';
+    }
+  }
+`;
+
+export const nodeTitleClass = css`
+  display: flex;
+  align-items: center;
+  font-weight: normal;
+  .workflow-node-id {
+    color: #999;
+  }
+`;
+
+export const nodeSubtreeClass = css`
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+`;
+
+export const addButtonClass = css`
+  flex-shrink: 0;
+  padding: 2em 0;
+
+  > .ant-btn {
+    &:disabled {
+      visibility: hidden;
+    }
+  }
+`;

package/src/client/triggers/collection.tsx

@@ -0,0 +1,186 @@
+import { SchemaInitializerItemOptions, useCollectionDataSource, useCollectionManager, useCompile } from '@nocobase/client';
+import { CollectionBlockInitializer } from '../components/CollectionBlockInitializer';
+import { FieldsSelect } from '../components/FieldsSelect';
+import { NAMESPACE, lang } from '../locale';
+import { appends, collection, filter } from '../schemas/collection';
+import { getCollectionFieldOptions } from '../variable';
+
+const COLLECTION_TRIGGER_MODE = {
+  CREATED: 1,
+  UPDATED: 2,
+  SAVED: 3,
+  DELETED: 4,
+};
+
+const collectionModeOptions = [
+  { label: `{{t("After record added", { ns: "${NAMESPACE}" })}}`, value: COLLECTION_TRIGGER_MODE.CREATED },
+  { label: `{{t("After record updated", { ns: "${NAMESPACE}" })}}`, value: COLLECTION_TRIGGER_MODE.UPDATED },
+  { label: `{{t("After record added or updated", { ns: "${NAMESPACE}" })}}`, value: COLLECTION_TRIGGER_MODE.SAVED },
+  { label: `{{t("After record deleted", { ns: "${NAMESPACE}" })}}`, value: COLLECTION_TRIGGER_MODE.DELETED },
+];
+
+export default {
+  title: `{{t("Collection event", { ns: "${NAMESPACE}" })}}`,
+  type: 'collection',
+  fieldset: {
+    collection: {
+      ...collection,
+      ['x-reactions']: [
+        ...collection['x-reactions'],
+        {
+          target: 'changed',
+          effects: ['onFieldValueChange'],
+          fulfill: {
+            state: {
+              value: [],
+            },
+          },
+        },
+        {
+          target: 'condition',
+          effects: ['onFieldValueChange'],
+          fulfill: {
+            state: {
+              value: null,
+            },
+          },
+        },
+        {
+          target: 'appends',
+          effects: ['onFieldValueChange'],
+          fulfill: {
+            state: {
+              value: [],
+            },
+          },
+        },
+      ],
+    },
+    mode: {
+      type: 'number',
+      title: `{{t("Trigger on", { ns: "${NAMESPACE}" })}}`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-component-props': {
+        popupMatchSelectWidth: false,
+        options: collectionModeOptions,
+        placeholder: `{{t("Trigger on", { ns: "${NAMESPACE}" })}}`,
+      },
+      required: true,
+      'x-reactions': [
+        {
+          dependencies: ['collection'],
+          fulfill: {
+            state: {
+              visible: '{{!!$deps[0]}}',
+            },
+          },
+        },
+      ],
+    },
+    changed: {
+      type: 'array',
+      title: `{{t("Changed fields", { ns: "${NAMESPACE}" })}}`,
+      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.", { ns: "${NAMESPACE}" })}}`,
+      'x-decorator': 'FormItem',
+      'x-component': 'FieldsSelect',
+      'x-component-props': {
+        mode: 'multiple',
+        placeholder: '{{t("Select field")}}',
+        filter(field) {
+          return (
+            !field.hidden &&
+            (field.uiSchema ? !field.uiSchema['x-read-pretty'] : true) &&
+            !['linkTo', 'hasOne', 'hasMany', 'belongsToMany'].includes(field.type)
+          );
+        },
+      },
+      'x-reactions': [
+        {
+          dependencies: ['collection', 'mode'],
+          fulfill: {
+            state: {
+              visible: `{{!!$deps[0] && ($deps[1] & ${COLLECTION_TRIGGER_MODE.UPDATED})}}`,
+            },
+          },
+        },
+      ],
+    },
+    condition: {
+      ...filter,
+      title: `{{t("Only triggers when match conditions", { ns: "${NAMESPACE}" })}}`,
+      'x-reactions': [
+        {
+          dependencies: ['collection'],
+          fulfill: {
+            state: {
+              visible: '{{!!$deps[0]}}',
+            },
+          },
+        },
+      ],
+    },
+    appends: {
+      ...appends,
+      'x-reactions': [
+        ...appends['x-reactions'],
+        {
+          dependencies: ['mode'],
+          fulfill: {
+            state: {
+              visible: `{{!($deps[0] & ${COLLECTION_TRIGGER_MODE.DELETED})}}`,
+            },
+          },
+        },
+      ],
+    },
+  },
+  scope: {
+    useCollectionDataSource,
+  },
+  components: {
+    FieldsSelect,
+  },
+  useVariables(config, options) {
+    const compile = useCompile();
+    const { getCollectionFields } = useCollectionManager();
+    const rootFields = [
+      {
+        collectionName: config.collection,
+        name: 'data',
+        type: 'hasOne',
+        target: config.collection,
+        uiSchema: {
+          title: lang('Trigger data'),
+        },
+      },
+    ];
+    // const depth = config.appends?.length
+    //   ? config.appends.reduce((max, item) => Math.max(max, item.split('.').length), 1) + 1
+    //   : 1;
+    const result = getCollectionFieldOptions({
+      // depth,
+      ...options,
+      fields: rootFields,
+      appends: ['data', ...(config.appends?.map((item) => `data.${item}`) || [])],
+      compile,
+      getCollectionFields,
+    });
+    return result;
+  },
+  useInitializers(config): SchemaInitializerItemOptions | null {
+    if (!config.collection) {
+      return null;
+    }
+
+    return {
+      type: 'item',
+      key: 'triggerData',
+      title: `{{t("Trigger data", { ns: "${NAMESPACE}" })}}`,
+      component: CollectionBlockInitializer,
+      collection: config.collection,
+      dataSource: '{{$context.data}}',
+    };
+  },
+  initializers: {},
+};