@gadmin2n/schematics 0.0.139 → 0.0.140

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/widgets/ApprovalRuleEditor.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import { InputNumber, Select, Space } from 'antd';
+import type { WidgetProps } from '../schema-form/widget-registry';
+import { useTranslation } from 'react-i18next';
+
+type Rule = {
+  mode: 'ANY' | 'ALL' | 'COUNT' | 'PERCENTAGE';
+  count?: number;
+  percentage?: number;
+};
+
+export function ApprovalRuleEditor({
+  value,
+  onChange,
+  disabled,
+  schema,
+}: WidgetProps<Rule>) {
+  const { t } = useTranslation('workflow');
+  const schemaDefault = schema.default as Rule | undefined;
+  const defaultRule: Rule = schemaDefault?.mode
+    ? schemaDefault
+    : { mode: 'ANY' };
+  const rule = value ?? defaultRule;
+
+  useEffect(() => {
+    if (value === undefined || value === null) onChange(defaultRule);
+  }, [defaultRule.mode, onChange, value]);
+
+  return (
+    <Space.Compact style={{ width: '100%' }}>
+      <Select
+        aria-label={t('approval.ruleMode')}
+        value={rule.mode}
+        disabled={disabled}
+        options={[
+          { label: t('approval.any'), value: 'ANY' },
+          { label: t('approval.all'), value: 'ALL' },
+          { label: t('approval.people'), value: 'COUNT' },
+          { label: t('approval.percentage'), value: 'PERCENTAGE' },
+        ]}
+        onChange={(mode) => onChange({ mode })}
+        style={{ minWidth: 150 }}
+      />
+      {rule.mode === 'COUNT' && (
+        <InputNumber
+          min={1}
+          precision={0}
+          value={rule.count}
+          disabled={disabled}
+          placeholder={t('approval.people')}
+          onChange={(count) => onChange({ ...rule, count: count ?? undefined })}
+          style={{ width: '100%' }}
+        />
+      )}
+      {rule.mode === 'PERCENTAGE' && (
+        <InputNumber
+          min={1}
+          max={100}
+          precision={0}
+          value={rule.percentage}
+          disabled={disabled}
+          addonAfter="%"
+          placeholder={t('approval.percentage')}
+          onChange={(percentage) =>
+            onChange({ ...rule, percentage: percentage ?? undefined })
+          }
+          style={{ width: '100%' }}
+        />
+      )}
+    </Space.Compact>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/widgets/ApproverSourceEditor.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { customRequest } from 'helpers/http';
+import i18n from '../../../../i18n';
+import { ApproverSourceEditor } from './ApproverSourceEditor';
+
+vi.mock('helpers/http', () => ({ customRequest: vi.fn() }));
+
+describe('ApproverSourceEditor', () => {
+  beforeEach(async () => {
+    await i18n.changeLanguage('en');
+    vi.mocked(customRequest).mockResolvedValue([
+      {
+        id: 'direct-manager',
+        name: 'Direct manager',
+        inputParameters: [
+          { key: 'wecomId', label: 'WeCom ID', required: true },
+        ],
+      },
+    ] as never);
+  });
+
+  it('shows an explicit Workflow-data binding with a readable preview', async () => {
+    render(
+      <ApproverSourceEditor
+        value={[
+          {
+            workflowId: 'direct-manager',
+            inputBindings: {
+              wecomId: { source: 'WORKFLOW', path: 'wecomId' },
+            },
+          },
+        ]}
+        onChange={vi.fn()}
+      />,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText('Direct manager')).toBeInTheDocument(),
+    );
+    expect(
+      screen.getAllByLabelText('WeCom ID value source')[0],
+    ).toHaveTextContent('Workflow start data');
+    expect(screen.getByLabelText('WeCom ID field path')).toHaveValue('wecomId');
+    expect(screen.getByText('workflow.wecomId')).toBeInTheDocument();
+  });
+});

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/widgets/ApproverSourceEditor.tsx

@@ -0,0 +1,185 @@
+import {
+  DeleteOutlined,
+  RobotOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons';
+import { Alert, Button, Card, Empty, Select, Space, Typography } from 'antd';
+import { customRequest } from 'helpers/http';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  addApproverSource,
+  type ApproverSourceConfig,
+  type CallableWorkflowOption,
+} from './approver-source';
+import type { ParameterBinding } from '../../types/parameter-binding';
+import { ParameterBindingEditor } from '../../components/ParameterBindingEditor';
+
+export function ApproverSourceEditor({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: ApproverSourceConfig[];
+  onChange(value: ApproverSourceConfig[]): void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation('workflow');
+  const [workflows, setWorkflows] = useState<CallableWorkflowOption[]>([]);
+  const [loadFailed, setLoadFailed] = useState(false);
+
+  useEffect(() => {
+    customRequest<CallableWorkflowOption[]>(
+      'workflow/callable?resultType=APPROVAL_SUBJECTS',
+      'GET',
+    )
+      .then((items) => {
+        setWorkflows(Array.isArray(items) ? items : []);
+        setLoadFailed(false);
+      })
+      .catch(() => setLoadFailed(true));
+  }, []);
+
+  const byId = useMemo(
+    () => new Map(workflows.map((workflow) => [workflow.id, workflow])),
+    [workflows],
+  );
+
+  function updateBinding(
+    workflowId: string,
+    key: string,
+    binding: ParameterBinding,
+  ) {
+    onChange(
+      value.map((item) =>
+        item.workflowId === workflowId
+          ? {
+              ...item,
+              inputBindings: {
+                ...item.inputBindings,
+                [key]: binding,
+              },
+            }
+          : item,
+      ),
+    );
+  }
+
+  return (
+    <Space direction="vertical" size={10} style={{ width: '100%' }}>
+      <div>
+        <Typography.Text strong>
+          {t('approval.automaticApprovers')}
+        </Typography.Text>
+        <Typography.Text
+          type="secondary"
+          style={{ display: 'block', fontSize: 12 }}
+        >
+          {t('approval.automaticApproversDescription')}
+        </Typography.Text>
+      </div>
+      {loadFailed && (
+        <Alert
+          type="warning"
+          showIcon
+          message={t('approval.sourceLoadFailed')}
+        />
+      )}
+      <Select<string>
+        showSearch
+        optionFilterProp="label"
+        disabled={disabled || loadFailed}
+        value={undefined}
+        placeholder={t('approval.addAutomaticApprover')}
+        suffixIcon={<ThunderboltOutlined />}
+        options={workflows
+          .filter(
+            (workflow) =>
+              !value.some((source) => source.workflowId === workflow.id),
+          )
+          .map((workflow) => ({
+            value: workflow.id,
+            label: workflow.name,
+          }))}
+        onChange={(workflowId) => {
+          const workflow = byId.get(workflowId);
+          if (workflow) onChange(addApproverSource(value, workflow));
+        }}
+        style={{ width: '100%' }}
+      />
+      {value.length === 0 ? (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={t('approval.noAutomaticApprovers')}
+        />
+      ) : (
+        value.map((source) => {
+          const workflow = byId.get(source.workflowId);
+          return (
+            <Card
+              key={source.workflowId}
+              size="small"
+              title={
+                <Space>
+                  <RobotOutlined style={{ color: '#1677ff' }} />
+                  <span>
+                    {workflow?.name ??
+                      t('approval.unknownSource', {
+                        id: source.workflowId,
+                      })}
+                  </span>
+                </Space>
+              }
+              extra={
+                <Button
+                  type="text"
+                  danger
+                  disabled={disabled}
+                  aria-label={t('common.delete')}
+                  icon={<DeleteOutlined />}
+                  onClick={() =>
+                    onChange(
+                      value.filter(
+                        (item) => item.workflowId !== source.workflowId,
+                      ),
+                    )
+                  }
+                />
+              }
+            >
+              {(workflow?.inputParameters ?? []).map((parameter) => (
+                <div key={parameter.key} style={{ marginBottom: 10 }}>
+                  <Typography.Text style={{ fontSize: 12 }}>
+                    {parameter.label ?? parameter.key}
+                    {parameter.required ? ' *' : ''}
+                  </Typography.Text>
+                  <div style={{ marginTop: 6 }}>
+                    <ParameterBindingEditor
+                      name={parameter.label ?? parameter.key}
+                      defaultPath={parameter.key}
+                      value={
+                        source.inputBindings[parameter.key] ?? {
+                          source: 'WORKFLOW',
+                          path: parameter.key,
+                        }
+                      }
+                      disabled={disabled}
+                      onChange={(binding) =>
+                        updateBinding(source.workflowId, parameter.key, binding)
+                      }
+                    />
+                  </div>
+                </div>
+              ))}
+              {workflow?.inputParameters.length === 0 && (
+                <Typography.Text type="secondary">
+                  {t('approval.noSourceParameters')}
+                </Typography.Text>
+              )}
+            </Card>
+          );
+        })
+      )}
+    </Space>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/widgets/CallableInputParametersEditor.test.tsx

@@ -0,0 +1,102 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Form } from 'antd';
+import type { FormInstance } from 'antd';
+import { beforeEach, describe, expect, it } from 'vitest';
+import i18n from '../../../../i18n';
+import { SchemaForm } from '../schema-form/SchemaForm';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: () => ({
+    matches: false,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  }),
+});
+
+const callableTriggerSchema = {
+  type: 'object' as const,
+  properties: {
+    inputParameters: {
+      type: 'array' as const,
+      title: '调用参数',
+      items: {
+        type: 'object' as const,
+        properties: {
+          key: { type: 'string' as const },
+          label: { type: 'string' as const },
+          required: { type: 'boolean' as const },
+        },
+        required: ['key'],
+      },
+    },
+  },
+};
+
+function renderEditor() {
+  let form!: FormInstance;
+
+  function TestForm() {
+    [form] = Form.useForm();
+    return (
+      <Form
+        form={form}
+        initialValues={{
+          config: {
+            inputParameters: [
+              {
+                key: 'employeeId',
+                label: '申请人 ID',
+                required: false,
+              },
+            ],
+          },
+        }}
+      >
+        <SchemaForm
+          schema={callableTriggerSchema}
+          uiSchema={{
+            fields: {
+              inputParameters: { widget: 'callable-input-parameters' },
+            },
+          }}
+        />
+      </Form>
+    );
+  }
+
+  render(<TestForm />);
+  return form;
+}
+
+describe('CallableInputParametersEditor', () => {
+  beforeEach(async () => {
+    await i18n.changeLanguage('en');
+  });
+
+  it('uses a clear required switch and adds required parameters by default', async () => {
+    const form = renderEditor();
+
+    expect(screen.getByText('Parameter name')).toBeInTheDocument();
+    expect(screen.getByText('Display label')).toBeInTheDocument();
+    expect(screen.getByText('Required when called')).toBeInTheDocument();
+    expect(
+      screen.getByRole('switch', {
+        name: '申请人 ID: required when called',
+      }),
+    ).not.toBeChecked();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add parameter' }));
+
+    await waitFor(() =>
+      expect(form.getFieldValue(['config', 'inputParameters'])).toEqual([
+        { key: 'employeeId', label: '申请人 ID', required: false },
+        { key: '', label: '', required: true },
+      ]),
+    );
+    expect(screen.getAllByRole('switch')[1]).toBeChecked();
+  });
+});

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/widgets/CallableInputParametersEditor.tsx

@@ -0,0 +1,150 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Input, Switch, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type CallableInputParameter = {
+  key: string;
+  label?: string;
+  required?: boolean;
+};
+
+export function CallableInputParametersEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<CallableInputParameter[] | undefined>) {
+  const { t } = useTranslation('workflow');
+  const parameters = Array.isArray(value) ? value : [];
+  const normalizedKeys = parameters.map((parameter) => parameter.key?.trim());
+
+  function update(index: number, patch: Partial<CallableInputParameter>): void {
+    onChange(
+      parameters.map((parameter, current) =>
+        current === index ? { ...parameter, ...patch } : parameter,
+      ),
+    );
+  }
+
+  return (
+    <div>
+      <Typography.Paragraph type="secondary" style={{ margin: '0 0 12px' }}>
+        {t('callableInputs.description')}
+      </Typography.Paragraph>
+      {parameters.length === 0 && (
+        <Typography.Paragraph type="secondary" style={{ margin: '0 0 12px' }}>
+          {t('callableInputs.empty')}
+        </Typography.Paragraph>
+      )}
+
+      {parameters.map((parameter, index) => {
+        const key = normalizedKeys[index];
+        const duplicate =
+          Boolean(key) &&
+          normalizedKeys.filter((candidate) => candidate === key).length > 1;
+        const name =
+          parameter.label?.trim() ||
+          key ||
+          t('callableInputs.parameterNumber', { number: index + 1 });
+
+        return (
+          <div
+            key={index}
+            style={{
+              display: 'grid',
+              gridTemplateColumns:
+                'minmax(150px, 1fr) minmax(150px, 1fr) auto auto',
+              alignItems: 'start',
+              gap: 12,
+              marginBottom: 10,
+              padding: 12,
+              border: '1px solid #e8e8e8',
+              borderRadius: 8,
+              background: '#fafafa',
+            }}
+          >
+            <div>
+              <Typography.Text strong style={{ fontSize: 12 }}>
+                {t('callableInputs.key')}
+              </Typography.Text>
+              <Input
+                aria-label={t('callableInputs.key')}
+                value={parameter.key}
+                disabled={disabled}
+                status={!key || duplicate ? 'error' : undefined}
+                placeholder={t('callableInputs.keyPlaceholder')}
+                onChange={(event) => update(index, { key: event.target.value })}
+                style={{ marginTop: 4 }}
+              />
+              {(!key || duplicate) && (
+                <Typography.Text
+                  type="danger"
+                  style={{ display: 'block', marginTop: 4, fontSize: 12 }}
+                >
+                  {duplicate
+                    ? t('callableInputs.duplicateKey')
+                    : t('callableInputs.keyRequired')}
+                </Typography.Text>
+              )}
+            </div>
+
+            <div>
+              <Typography.Text strong style={{ fontSize: 12 }}>
+                {t('callableInputs.label')}
+              </Typography.Text>
+              <Input
+                aria-label={t('callableInputs.label')}
+                value={parameter.label}
+                disabled={disabled}
+                placeholder={t('callableInputs.labelPlaceholder')}
+                onChange={(event) =>
+                  update(index, { label: event.target.value })
+                }
+                style={{ marginTop: 4 }}
+              />
+            </div>
+
+            <div style={{ minWidth: 88 }}>
+              <Typography.Text strong style={{ fontSize: 12 }}>
+                {t('callableInputs.required')}
+              </Typography.Text>
+              <div style={{ marginTop: 8 }}>
+                <Switch
+                  aria-label={t('callableInputs.requiredAria', { name })}
+                  checked={Boolean(parameter.required)}
+                  disabled={disabled}
+                  onChange={(required) => update(index, { required })}
+                />
+              </div>
+            </div>
+
+            <Button
+              type="text"
+              danger
+              aria-label={t('callableInputs.remove', { name })}
+              icon={<DeleteOutlined />}
+              disabled={disabled}
+              onClick={() =>
+                onChange(parameters.filter((_, current) => current !== index))
+              }
+              style={{ marginTop: 20 }}
+            />
+          </div>
+        );
+      })}
+
+      <Button
+        type="dashed"
+        block
+        aria-label={t('callableInputs.add')}
+        icon={<PlusOutlined />}
+        disabled={disabled}
+        onClick={() =>
+          onChange([...parameters, { key: '', label: '', required: true }])
+        }
+      >
+        {t('callableInputs.add')}
+      </Button>
+    </div>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/widgets/CodeConfigEditor.tsx

@@ -0,0 +1,103 @@
+import Editor from '@monaco-editor/react';
+import { Card, InputNumber, Select, Space, Typography } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type CodeConfig = {
+  script?: string;
+  mode?: 'runOnceForAll' | 'runOnceForEach';
+  timeout?: number;
+};
+
+const DEFAULT_SCRIPT = `// input: value returned by the previous node.
+// workflow: original data received when this Workflow started.
+// HTTP Request returns { status, data, headers }.
+return input;`;
+
+export function CodeConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<CodeConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const config: Required<CodeConfig> = {
+    script: value?.script ?? DEFAULT_SCRIPT,
+    mode: value?.mode ?? 'runOnceForAll',
+    timeout: value?.timeout ?? 1000,
+  };
+
+  function update(patch: Partial<CodeConfig>) {
+    onChange({ ...config, ...patch });
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Card size="small" title={t('code.javascript')}>
+        <Typography.Paragraph type="secondary">
+          {t('code.description')}
+        </Typography.Paragraph>
+        <div
+          style={{
+            height: 320,
+            overflow: 'hidden',
+            border: '1px solid #d9d9d9',
+            borderRadius: 6,
+          }}
+        >
+          <Editor
+            height="320px"
+            language="javascript"
+            value={config.script}
+            onChange={(script) => update({ script: script ?? '' })}
+            options={{
+              readOnly: disabled,
+              minimap: { enabled: false },
+              fontSize: 13,
+              lineNumbers: 'on',
+              scrollBeyondLastLine: false,
+              automaticLayout: true,
+              tabSize: 2,
+              wordWrap: 'on',
+            }}
+          />
+        </div>
+      </Card>
+
+      <Card size="small" title={t('code.executionLimits')}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'minmax(220px, 1fr) minmax(180px, 1fr)',
+            gap: 16,
+          }}
+        >
+          <div>
+            <Typography.Text>{t('code.runMode')}</Typography.Text>
+            <Select
+              value={config.mode}
+              disabled={disabled}
+              onChange={(mode) => update({ mode })}
+              options={[
+                { value: 'runOnceForAll', label: t('code.runOnceAll') },
+                { value: 'runOnceForEach', label: t('code.runOnceEach') },
+              ]}
+              style={{ width: '100%', marginTop: 6 }}
+            />
+          </div>
+          <div>
+            <Typography.Text>{t('code.timeoutMilliseconds')}</Typography.Text>
+            <InputNumber
+              min={1}
+              max={5000}
+              value={config.timeout}
+              disabled={disabled}
+              onChange={(timeout) => update({ timeout: timeout ?? 1000 })}
+              style={{ width: '100%', marginTop: 6 }}
+            />
+          </div>
+        </div>
+      </Card>
+    </Space>
+  );
+}