@gadmin2n/schematics 0.0.139 → 0.0.140

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/approval-channels/index.tsx

@@ -0,0 +1,208 @@
+import {
+  EditOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SendOutlined,
+  SwapOutlined,
+} from '@ant-design/icons';
+import {
+  Button,
+  Card,
+  Empty,
+  Input,
+  Space,
+  Spin,
+  Tag,
+  Typography,
+  message,
+} from 'antd';
+import { customRequest } from 'helpers/http';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ApprovalChannelModal } from './ApprovalChannelModal';
+import type { ApprovalChannel } from './approval-channel.types';
+
+export default function ApprovalChannelsPage() {
+  const { t } = useTranslation('workflow');
+  const [channels, setChannels] = useState<ApprovalChannel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState('');
+  const [editing, setEditing] = useState<ApprovalChannel | null | undefined>();
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      setChannels(
+        await customRequest<ApprovalChannel[]>(
+          `approval-channels?q=${encodeURIComponent(query)}`,
+          'GET',
+        ),
+      );
+    } catch (error: any) {
+      message.error(error?.message ?? t('approvalChannel.loadFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }, [query, t]);
+
+  useEffect(() => void load(), [load]);
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Card>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            gap: 16,
+            marginBottom: 20,
+          }}
+        >
+          <div>
+            <Typography.Title level={3} style={{ margin: 0 }}>
+              {t('approvalChannel.title')}
+            </Typography.Title>
+            <Typography.Text type="secondary">
+              {t('approvalChannel.subtitle')}
+            </Typography.Text>
+          </div>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => setEditing(null)}
+          >
+            {t('approvalChannel.newChannel')}
+          </Button>
+        </div>
+
+        <Space style={{ marginBottom: 18 }}>
+          <Input.Search
+            allowClear
+            placeholder={t('approvalChannel.search')}
+            onSearch={setQuery}
+            style={{ width: 300 }}
+          />
+          <Button icon={<ReloadOutlined />} onClick={load}>
+            {t('common.refresh')}
+          </Button>
+        </Space>
+
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: 60 }}>
+            <Spin />
+          </div>
+        ) : channels.length === 0 ? (
+          <Empty description={t('approvalChannel.empty')} />
+        ) : (
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))',
+              gap: 16,
+            }}
+          >
+            {channels.map((channel) => (
+              <Card key={channel.code} size="small" hoverable>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    gap: 12,
+                  }}
+                >
+                  <Space align="start">
+                    <SwapOutlined
+                      style={{ color: '#1677ff', fontSize: 20, marginTop: 3 }}
+                    />
+                    <div>
+                      <Typography.Text strong>{channel.name}</Typography.Text>
+                    </div>
+                  </Space>
+                  <Space>
+                    <Tag color={channel.isEnabled ? 'blue' : 'default'}>
+                      {channel.isEnabled
+                        ? t('common.enabled')
+                        : t('approvalChannel.disabled')}
+                    </Tag>
+                    <Button
+                      type="text"
+                      aria-label={t('common.edit')}
+                      icon={<EditOutlined />}
+                      onClick={() => setEditing(channel)}
+                    />
+                  </Space>
+                </div>
+
+                <div
+                  style={{
+                    padding: '14px 0 8px',
+                  }}
+                >
+                  <WorkflowStep
+                    icon={<SendOutlined />}
+                    label={t('approvalChannel.dispatch')}
+                    name={channel.dispatchWorkflowName}
+                  />
+                </div>
+                {channel.description && (
+                  <Typography.Paragraph
+                    type="secondary"
+                    ellipsis={{ rows: 2 }}
+                    style={{ margin: '8px 0 0' }}
+                  >
+                    {channel.description}
+                  </Typography.Paragraph>
+                )}
+              </Card>
+            ))}
+          </div>
+        )}
+      </Card>
+      <ApprovalChannelModal
+        open={editing !== undefined}
+        channel={editing}
+        onCancel={() => setEditing(undefined)}
+        onSaved={(saved) => {
+          setEditing(undefined);
+          setChannels((current) => [
+            saved,
+            ...current.filter((item) => item.code !== saved.code),
+          ]);
+        }}
+      />
+    </div>
+  );
+}
+
+function WorkflowStep({
+  icon,
+  label,
+  name,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  name: string;
+}) {
+  return (
+    <div
+      style={{
+        minWidth: 0,
+        padding: '10px 12px',
+        border: '1px solid #d9d9d9',
+        borderRadius: 8,
+        background: '#fafafa',
+      }}
+    >
+      <Space size={6}>
+        {icon}
+        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+          {label}
+        </Typography.Text>
+      </Space>
+      <Typography.Text ellipsis style={{ display: 'block', marginTop: 4 }}>
+        {name}
+      </Typography.Text>
+    </div>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/CreateNodeInstanceDrawer.tsx

@@ -0,0 +1,154 @@
+import {
+  Button,
+  Drawer,
+  Form,
+  Input,
+  Space,
+  Switch,
+  Typography,
+  message,
+} from 'antd';
+import { customRequest } from 'helpers/http';
+import React, { useEffect, useState } from 'react';
+import { SchemaForm } from '../node-instances/schema-form/SchemaForm';
+import { schemaConfigDefaults } from '../node-instances/schema-form/schema-defaults';
+import type { WorkflowNodeInstance, WorkflowNodeType } from '../types';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  open: boolean;
+  nodeType?: WorkflowNodeType;
+  onCancel(): void;
+  onCreated(instance: WorkflowNodeInstance): void;
+}
+
+export function CreateNodeInstanceDrawer({
+  open,
+  nodeType,
+  onCancel,
+  onCreated,
+}: Props) {
+  const { t } = useTranslation('workflow');
+  const [form] = Form.useForm();
+  const [submitting, setSubmitting] = useState(false);
+  const [schemaError, setSchemaError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!open || !nodeType) return;
+    form.resetFields();
+    form.setFieldsValue({
+      name: '',
+      description: '',
+      isEnabled: true,
+      config: schemaConfigDefaults(nodeType.configSchema),
+    });
+    setSchemaError(null);
+  }, [form, nodeType, open]);
+
+  async function handleCreate() {
+    if (!nodeType || schemaError) return;
+    try {
+      const values = await form.validateFields();
+      setSubmitting(true);
+      const instance = await customRequest<WorkflowNodeInstance>(
+        'workflowNodeInstance/createOne',
+        'POST',
+        {
+          nodeTypeId: Number(nodeType.id),
+          name: values.name.trim(),
+          description: values.description?.trim() || undefined,
+          isEnabled: values.isEnabled ?? true,
+          config: values.config ?? {},
+        },
+      );
+      message.success(t('nodeInstance.createdAndAdded'));
+      onCreated(instance);
+    } catch (error: any) {
+      if (error?.errorFields) return;
+      message.error(error?.message ?? t('nodeInstance.createFailed'));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const usesCustomEditor = Boolean((nodeType?.uiSchema as any)?.widget);
+
+  return (
+    <Drawer
+      open={open}
+      title={t('nodeInstance.createNamed', {
+        name: nodeType?.label ?? 'Node',
+      })}
+      width={usesCustomEditor ? 880 : 640}
+      onClose={onCancel}
+      destroyOnHidden
+      maskClosable={!submitting}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Space>
+            <Button disabled={submitting} onClick={onCancel}>
+              {t('common.back')}
+            </Button>
+            <Button
+              type="primary"
+              loading={submitting}
+              disabled={Boolean(schemaError)}
+              onClick={() => void handleCreate()}
+            >
+              {t('nodeInstance.createAndUse')}
+            </Button>
+          </Space>
+        </div>
+      }
+      styles={{ body: { paddingBottom: 32 } }}
+    >
+      <Typography.Paragraph type="secondary">
+        {t('nodeInstance.createAndUseDescription')}
+      </Typography.Paragraph>
+      <Form form={form} layout="vertical" disabled={submitting}>
+        <Form.Item
+          name="name"
+          label={t('nodeInstance.instanceName')}
+          rules={[
+            {
+              required: true,
+              whitespace: true,
+              message: t('nodeInstance.nameRequired'),
+            },
+          ]}
+        >
+          <Input
+            placeholder={t('nodeInstance.nameExample', {
+              name: nodeType?.label ?? 'Node',
+            })}
+          />
+        </Form.Item>
+
+        <Form.Item name="description" label={t('common.description')}>
+          <Input.TextArea
+            rows={2}
+            placeholder={t('common.optionalDescription')}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="isEnabled"
+          label={t('common.enabled')}
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
+
+        <Typography.Title level={5}>
+          {t('common.configuration')}
+        </Typography.Title>
+        <SchemaForm
+          schema={nodeType?.configSchema ?? null}
+          uiSchema={nodeType?.uiSchema ?? null}
+          disabled={submitting}
+          onSchemaError={setSchemaError}
+        />
+      </Form>
+    </Drawer>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/CustomNode.tsx

@@ -1,5 +1,7 @@
-import React, { memo } from 'react';
 import { Handle, Position, type NodeProps } from '@xyflow/react';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { LookupPort, RuntimePorts } from '../utils/resolveLookupPorts';
 
 const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
   TRIGGER: { bg: '#e6f7ff', border: '#91caff' },
@@ -15,6 +17,10 @@ export interface CustomNodeData {
   category: string;
   type?: string;
   outputs?: string[];
+  outputLabels?: Record<string, string>;
+  dataInputs?: Array<{ id: string; label: string }>;
+  lookupPorts?: LookupPort[];
+  runtimePorts?: RuntimePorts;
   isSelected: boolean;
   readonly?: boolean;
   [key: string]: unknown;
@@ -45,14 +51,43 @@ const BRANCH_LABEL_STYLE: React.CSSProperties = {
   whiteSpace: 'nowrap',
 };
 
+const ENDPOINT_LABEL_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  fontSize: 10,
+  color: '#8c8c8c',
+  lineHeight: 1,
+  pointerEvents: 'none',
+  whiteSpace: 'nowrap',
+};
+
 export const CustomNode = memo(({ data }: NodeProps) => {
+  const { t } = useTranslation('workflow');
   const nodeData = data as CustomNodeData;
   const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
   const handleStyle = nodeData.readonly
     ? HIDDEN_HANDLE_STYLE
     : VISIBLE_HANDLE_STYLE;
   const outputs = (nodeData.outputs ?? []) as string[];
+  const dataInputs = nodeData.dataInputs ?? [];
+  const lookupPorts = nodeData.lookupPorts ?? [];
+  const lookupInputs = lookupPorts.filter((port) => port.direction === 'input');
+  const lookupOutputs = lookupPorts.filter(
+    (port) => port.direction === 'output',
+  );
+  const lookupRowCount = Math.max(lookupInputs.length, lookupOutputs.length);
   const multiOut = outputs.length > 1;
+  const runtimePorts = nodeData.runtimePorts ?? {
+    inputLabel: 'IN',
+    outputLabel: 'OUT',
+  };
+  const outputLabel = (id: string) => {
+    if (nodeData.outputLabels?.[id]) return nodeData.outputLabels[id];
+    if (nodeData.type === 'approval' || nodeData.type === 'human_approval') {
+      if (id === 'true') return t('approval.approvedBranch');
+      if (id === 'false') return t('approval.rejectedBranch');
+    }
+    return id;
+  };
 
   return (
     <div
@@ -64,7 +99,11 @@ export const CustomNode = memo(({ data }: NodeProps) => {
         borderRadius: 8,
         padding: '8px 16px',
         fontSize: 14,
-        minWidth: 120,
+        minWidth: lookupPorts.length
+          ? 280
+          : runtimePorts.emphasized
+            ? 190
+            : 140,
         textAlign: 'center',
         boxShadow: nodeData.isSelected
           ? '0 0 0 2px rgba(22,119,255,0.2)'
@@ -72,8 +111,134 @@ export const CustomNode = memo(({ data }: NodeProps) => {
         position: 'relative',
       }}
     >
-      <Handle type="target" position={Position.Top} style={handleStyle} />
+      <Handle
+        id={runtimePorts.inputId}
+        type="target"
+        position={Position.Top}
+        style={{
+          ...handleStyle,
+          ...(runtimePorts.emphasized && {
+            background: '#fff7e6',
+            borderColor: '#fa8c16',
+          }),
+        }}
+      />
+      {!nodeData.readonly && (
+        <span
+          style={{
+            ...ENDPOINT_LABEL_STYLE,
+            top: -22,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            color: runtimePorts.emphasized ? '#d46b08' : '#8c8c8c',
+          }}
+        >
+          {runtimePorts.inputLabel}
+        </span>
+      )}
       <div>{nodeData.label}</div>
+      {lookupRowCount > 0 && (
+        <div
+          style={{
+            marginTop: 8,
+            paddingTop: 7,
+            borderTop: '1px solid rgba(22, 119, 255, 0.18)',
+            display: 'grid',
+            gap: 8,
+          }}
+        >
+          {Array.from({ length: lookupRowCount }).map((_, index) => {
+            const input = lookupInputs[index];
+            const output = lookupOutputs[index];
+            const top = 47 + index * 26;
+            return (
+              <div
+                key={input?.id ?? output?.id ?? index}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 1fr',
+                  gap: 20,
+                  minHeight: 18,
+                  fontSize: 10,
+                }}
+              >
+                <span style={{ color: '#1677ff', textAlign: 'left' }}>
+                  {input?.label}
+                </span>
+                <span style={{ color: '#d46b08', textAlign: 'right' }}>
+                  {output?.label}
+                </span>
+                {input && (
+                  <Handle
+                    id={input.id}
+                    type="target"
+                    position={Position.Left}
+                    style={{
+                      ...handleStyle,
+                      top,
+                      left: -8,
+                      background: '#e6f4ff',
+                      borderColor: '#1677ff',
+                    }}
+                  />
+                )}
+                {output && (
+                  <Handle
+                    id={output.id}
+                    type="source"
+                    position={Position.Right}
+                    style={{
+                      ...handleStyle,
+                      top,
+                      right: -8,
+                      background: '#fff7e6',
+                      borderColor: '#fa8c16',
+                    }}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      {dataInputs.length > 0 && (
+        <div
+          style={{
+            marginTop: 7,
+            paddingTop: 6,
+            borderTop: '1px solid rgba(22, 119, 255, 0.18)',
+            textAlign: 'left',
+          }}
+        >
+          {dataInputs.map((input) => (
+            <div
+              key={input.id}
+              style={{
+                position: 'relative',
+                paddingLeft: 8,
+                color: '#1677ff',
+                fontSize: 11,
+                lineHeight: '18px',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              <Handle
+                id={input.id}
+                type="target"
+                position={Position.Left}
+                style={{
+                  ...handleStyle,
+                  top: '50%',
+                  left: -16,
+                  background: '#e6f4ff',
+                  borderColor: '#1677ff',
+                }}
+              />
+              {input.label}
+            </div>
+          ))}
+        </div>
+      )}
       {multiOut ? (
         <>
           {outputs.map((id, idx) => (
@@ -98,14 +263,38 @@ export const CustomNode = memo(({ data }: NodeProps) => {
                     left: `${((idx + 1) / (outputs.length + 1)) * 100 - 5}%`,
                   }}
                 >
-                  {id}
+                  {outputLabel(id)}
                 </span>
               ))}
             </>
           )}
         </>
       ) : (
-        <Handle type="source" position={Position.Bottom} style={handleStyle} />
+        <Handle
+          id={runtimePorts.outputId}
+          type="source"
+          position={Position.Bottom}
+          style={{
+            ...handleStyle,
+            ...(runtimePorts.emphasized && {
+              background: '#e6f4ff',
+              borderColor: '#1677ff',
+            }),
+          }}
+        />
+      )}
+      {!multiOut && !nodeData.readonly && (
+        <span
+          style={{
+            ...ENDPOINT_LABEL_STYLE,
+            bottom: -22,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            color: runtimePorts.emphasized ? '#1677ff' : '#8c8c8c',
+          }}
+        >
+          {runtimePorts.outputLabel}
+        </span>
       )}
     </div>
   );

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/DeletableEdge.tsx

@@ -0,0 +1,76 @@
+import { DeleteOutlined } from '@ant-design/icons';
+import {
+  BaseEdge,
+  EdgeToolbar,
+  getSmoothStepPath,
+  type EdgeProps,
+} from '@xyflow/react';
+import { Button, Tooltip } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type DeletableEdgeData = {
+  onDelete?: (edgeId: string) => void;
+};
+
+export function DeletableEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+  label,
+  selected,
+  data,
+}: EdgeProps) {
+  const { t } = useTranslation('workflow');
+  const [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  });
+  const onDelete = (data as DeletableEdgeData | undefined)?.onDelete;
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={path}
+        markerEnd={markerEnd}
+        style={style}
+        label={label}
+        interactionWidth={28}
+      />
+      <EdgeToolbar
+        edgeId={id}
+        x={labelX}
+        y={labelY}
+        isVisible={Boolean(selected && onDelete)}
+      >
+        <Tooltip title={t('edge.delete')}>
+          <Button
+            className="nodrag nopan"
+            danger
+            type="primary"
+            shape="circle"
+            size="small"
+            aria-label={t('edge.delete')}
+            icon={<DeleteOutlined />}
+            onMouseDown={(event) => event.stopPropagation()}
+            onClick={(event) => {
+              event.stopPropagation();
+              onDelete?.(id);
+            }}
+          />
+        </Tooltip>
+      </EdgeToolbar>
+    </>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/DslView.tsx

@@ -176,7 +176,7 @@ export const DslView = forwardRef<DslViewHandle, DslViewProps>(function DslView(
         display: 'flex',
         flexDirection: 'column',
         minHeight: 0,
-        background: '#fff',
+        background: 'var(--ant-color-bg-container)',
         padding: 16,
       }}
     >