@gadmin2n/schematics 0.0.143 → 0.0.145

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

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import {
   Button,
   Card,
+  Empty,
   Form,
   Input,
   Modal,
@@ -11,6 +12,12 @@ import {
 } from 'antd';
 import { ArrowLeftOutlined, RobotOutlined } from '@ant-design/icons';
 import type { FormInstance } from 'antd';
+import {
+  CARD_GAP_STYLE,
+  HEADER_CARD_PROPS,
+  PAGE_WRAPPER_STYLE,
+} from 'constants/layout';
+import { useIsAgentAllowed } from 'config/agentAllowed';
 import { SchemaForm } from '../schema-form/SchemaForm';
 import {
   CreateNodeInstanceModal,
@@ -19,9 +26,11 @@ import {
 import type { WorkflowNodeType } from '../../types';
 import { useTranslation } from 'react-i18next';
 import '../node-config.css';
+import '../../workflow-ui.css';
+import './node-instance-form.css';
+import { useWorkflowFormValidation } from '../../useWorkflowFormValidation';
 
-const { Title } = Typography;
-import { useIsAgentAllowed } from 'config/agentAllowed';
+const { Text, Title } = Typography;
 
 interface NodeInstanceFormProps {
   form: FormInstance;
@@ -47,6 +56,7 @@ export function NodeInstanceForm({
   const [aiModalOpen, setAiModalOpen] = useState(false);
   const [schemaError, setSchemaError] = useState<Error | null>(null);
   const { t } = useTranslation('workflow');
+  const formValidation = useWorkflowFormValidation();
   const isDev = useIsAgentAllowed();
   const allowAiGeneration = isDev && !disableNodeType;
 
@@ -59,6 +69,17 @@ export function NodeInstanceForm({
     );
   }, [selectedNodeTypeId, nodeTypes]);
 
+  const selectedNodeTypeLabel = selectedNodeType
+    ? t(`nodeTypes.${selectedNodeType.type}`, {
+        defaultValue: selectedNodeType.label,
+      })
+    : '';
+  const hasConfiguration = Boolean(
+    selectedNodeType &&
+    ((selectedNodeType.uiSchema as any)?.widget ||
+      Object.keys(selectedNodeType.configSchema?.properties ?? {}).length > 0),
+  );
+
   const handleSchemaError = useCallback((error: Error | null) => {
     setSchemaError(error);
   }, []);
@@ -97,33 +118,33 @@ export function NodeInstanceForm({
 
   return (
     <div
-      className="workflow-node-config"
-      style={{
-        background: 'var(--ant-color-bg-layout)',
-        minHeight: 'calc(100vh - 64px)',
-      }}
+      className="workflow-node-config node-instance-form"
+      style={PAGE_WRAPPER_STYLE}
     >
-      <Card style={{ marginBottom: 12 }}>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+      <Card {...HEADER_CARD_PROPS}>
+        <div className="node-instance-form__header">
+          <div className="node-instance-form__header-main">
             <Button
               type="text"
               icon={<ArrowLeftOutlined />}
+              aria-label={t('common.back')}
               onClick={onBack}
-            ></Button>
-            <Title level={4} style={{ margin: 0 }}>
-              {title}
-            </Title>
+            />
+            <div>
+              <Title level={4} style={{ margin: 0 }}>
+                {title}
+              </Title>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                {t(
+                  disableNodeType
+                    ? 'nodeInstance.editDescription'
+                    : 'nodeInstance.createDescription',
+                )}
+              </Text>
+            </div>
           </div>
           {allowAiGeneration && (
             <Button
-              type="primary"
               icon={<RobotOutlined />}
               onClick={() => setAiModalOpen(true)}
             >
@@ -133,96 +154,146 @@ export function NodeInstanceForm({
         </div>
       </Card>
 
-      <Card styles={{ body: { padding: '20px 24px' } }}>
-        <Form form={form} layout="vertical" style={{ maxWidth: 720 }}>
-          <Form.Item
-            name="nodeTypeId"
-            label={t('nodeInstance.nodeType')}
-            rules={[
-              {
-                required: true,
-                message: t('nodeInstance.nodeTypeRequired'),
-              },
-            ]}
-          >
-            <Select
-              placeholder={t('nodeInstance.selectNodeType')}
-              disabled={disableNodeType}
-              showSearch
-              optionFilterProp="label"
-              options={nodeTypes.map((nt) => ({
-                label: `${nt.label} (${nt.category})`,
-                value: String(nt.id),
-              }))}
-            />
-          </Form.Item>
+      <Form
+        form={form}
+        layout="vertical"
+        className="node-instance-form__content"
+        onFinish={onSubmit}
+        {...formValidation}
+      >
+        <Card style={CARD_GAP_STYLE}>
+          <div className="node-instance-form__section-heading">
+            <Title level={5}>{t('nodeInstance.basicInfo')}</Title>
+            <Text type="secondary">
+              {t('nodeInstance.basicInfoDescription')}
+            </Text>
+          </div>
 
-          {disableNodeType && (
-            <Typography.Paragraph
-              type="secondary"
-              style={{ marginTop: -16, marginBottom: 24 }}
+          <div className="node-instance-form__node-type">
+            <Form.Item
+              name="nodeTypeId"
+              label={t('nodeInstance.nodeType')}
+              rules={[
+                {
+                  required: true,
+                  message: t('nodeInstance.nodeTypeRequired'),
+                },
+              ]}
             >
-              {t('nodeInstance.typeImmutable')}
-            </Typography.Paragraph>
-          )}
+              <Select
+                size="large"
+                placeholder={t('nodeInstance.selectNodeType')}
+                disabled={disableNodeType}
+                showSearch
+                optionFilterProp="label"
+                options={nodeTypes.map((nt) => ({
+                  label: `${t(`nodeTypes.${nt.type}`, {
+                    defaultValue: nt.label,
+                  })} · ${t(`nodeCategories.${nt.category}`, {
+                    defaultValue: nt.category,
+                  })}`,
+                  value: String(nt.id),
+                }))}
+              />
+            </Form.Item>
+            {disableNodeType && (
+              <Text type="secondary" className="node-instance-form__field-hint">
+                {t('nodeInstance.typeImmutable')}
+              </Text>
+            )}
+          </div>
+
+          <div className="node-instance-form__fields">
+            <Form.Item
+              name="name"
+              label={t('nodeInstance.instanceNameLabel')}
+              rules={[
+                {
+                  required: true,
+                  whitespace: true,
+                  message: t('nodeInstance.nameRequired'),
+                },
+              ]}
+            >
+              <Input placeholder={t('nodeInstance.instanceNameExample')} />
+            </Form.Item>
+
+            <Form.Item
+              name="isEnabled"
+              label={t('common.enabled')}
+              valuePropName="checked"
+              initialValue
+            >
+              <Switch
+                checkedChildren={t('common.enabled')}
+                unCheckedChildren={t('common.disabled')}
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="description"
+              label={t('common.description')}
+              className="node-instance-form__description"
+            >
+              <Input.TextArea
+                autoSize={{ minRows: 3, maxRows: 5 }}
+                placeholder={t('common.optionalDescription')}
+              />
+            </Form.Item>
+          </div>
+        </Card>
 
-          <Form.Item
-            name="name"
-            label={t('nodeInstance.instanceNameLabel')}
-            rules={[
-              { required: true, message: t('nodeInstance.nameRequired') },
-            ]}
-          >
-            <Input placeholder={t('nodeInstance.instanceNameExample')} />
-          </Form.Item>
-
-          <Form.Item name="description" label={t('common.description')}>
-            <Input.TextArea
-              autoSize={{ minRows: 2, maxRows: 4 }}
-              placeholder={t('common.optionalDescription')}
+        <Card style={CARD_GAP_STYLE}>
+          <div className="node-instance-form__section-heading">
+            <Title level={5}>{t('editor.parameters')}</Title>
+            <Text type="secondary">
+              {selectedNodeType
+                ? t('nodeInstance.parametersDescription', {
+                    name: selectedNodeTypeLabel,
+                  })
+                : t('nodeInstance.parametersPendingDescription')}
+            </Text>
+          </div>
+
+          {!selectedNodeType ? (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              className="node-instance-form__empty"
+              description={t('nodeInstance.parametersPending')}
+            />
+          ) : hasConfiguration ? (
+            <div className="node-instance-form__configuration">
+              <SchemaForm
+                schema={selectedNodeType.configSchema ?? null}
+                uiSchema={selectedNodeType.uiSchema ?? null}
+                disabled={submitting}
+                validate={false}
+                onSchemaError={handleSchemaError}
+              />
+            </div>
+          ) : (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              className="node-instance-form__empty"
+              description={t('nodeInstance.noConfiguration')}
             />
-          </Form.Item>
-
-          <Form.Item
-            name="isEnabled"
-            label={t('common.enabled')}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-
-          {selectedNodeType?.configSchema && (
-            <Title level={5} style={{ margin: '4px 0 12px', fontSize: 14 }}>
-              {t('editor.parameters')}
-            </Title>
           )}
-          <SchemaForm
-            schema={selectedNodeType?.configSchema ?? null}
-            uiSchema={selectedNodeType?.uiSchema ?? null}
-            disabled={submitting}
-            onSchemaError={handleSchemaError}
-          />
-
-          <div
-            style={{
-              marginTop: 20,
-              display: 'flex',
-              justifyContent: 'flex-end',
-              gap: 8,
-            }}
-          >
-            <Button onClick={onBack}>{t('common.cancel')}</Button>
+
+          <div className="node-instance-form__actions">
+            <Button disabled={submitting} onClick={onBack}>
+              {t('common.cancel')}
+            </Button>
             <Button
               type="primary"
+              htmlType="submit"
               loading={submitting}
               disabled={Boolean(schemaError)}
-              onClick={onSubmit}
             >
               {submitText}
             </Button>
           </div>
-        </Form>
-      </Card>
+        </Card>
+      </Form>
 
       {!disableNodeType && (
         <CreateNodeInstanceModal

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/components/node-instance-form.css

@@ -0,0 +1,91 @@
+.node-instance-form__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.node-instance-form__header-main {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.node-instance-form__content {
+  width: 100%;
+}
+
+.node-instance-form__section-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 20px;
+}
+
+.node-instance-form__section-heading .ant-typography {
+  margin: 0;
+}
+
+.node-instance-form__section-heading > .ant-typography:first-child {
+  font-size: var(--workflow-content-title-size, 18px);
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.node-instance-form__node-type {
+  max-width: 720px;
+  margin-bottom: 20px;
+}
+
+.node-instance-form__field-hint {
+  display: block;
+  margin-top: -4px;
+  font-size: 12px;
+}
+
+.node-instance-form__fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 180px;
+  column-gap: 16px;
+}
+
+.node-instance-form__description {
+  grid-column: 1 / -1;
+}
+
+.node-instance-form__configuration {
+  padding-top: 4px;
+}
+
+.node-instance-form__empty {
+  margin: 8px 0 24px;
+  padding: 24px 0;
+  border: 1px dashed var(--ant-color-border-secondary);
+  border-radius: 8px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.node-instance-form__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 20px;
+  border-top: 1px solid var(--ant-color-border-secondary);
+}
+
+@media (max-width: 767px) {
+  .node-instance-form__fields {
+    grid-template-columns: 1fr;
+  }
+
+  .node-instance-form__description {
+    grid-column: auto;
+  }
+
+  .node-instance-form__header {
+    align-items: flex-start;
+  }
+}

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

@@ -24,6 +24,12 @@ import { customRequest } from 'helpers/http';
 import { PageHeader } from 'components';
 import { PAGE_WRAPPER_STYLE, SEARCH_CARD_PROPS } from 'constants/layout';
 import type { WorkflowNodeType } from '../types';
+import { useTranslation } from 'react-i18next';
+import {
+  formatWorkflowUtcDate,
+  formatWorkflowUtcDateTime,
+} from '../utils/workflowDateTime';
+import '../workflow-ui.css';
 
 const PAGE_SIZE = 20;
 
@@ -41,6 +47,7 @@ interface NodeInstance {
 }
 
 export default function NodeInstanceListPage() {
+  const { t } = useTranslation('workflow');
   const navigate = useNavigate();
   const [data, setData] = useState<NodeInstance[]>([]);
   const [total, setTotal] = useState(0);
@@ -91,11 +98,11 @@ export default function NodeInstanceListPage() {
       setData(res.data);
       setTotal(res.meta.itemCount);
     } catch (e: any) {
-      message.error(e?.message ?? 'Failed to fetch data');
+      message.error(e?.message ?? t('nodeInstance.loadFailed'));
     } finally {
       setLoading(false);
     }
-  }, [page, filterNodeType, filterName]);
+  }, [page, filterNodeType, filterName, t]);
 
   useEffect(() => {
     fetchData();
@@ -105,8 +112,8 @@ export default function NodeInstanceListPage() {
   useEffect(() => {
     customRequest<WorkflowNodeType[]>('workflow-node-types', 'GET')
       .then(setNodeTypes)
-      .catch(() => {});
-  }, []);
+      .catch(() => message.error(t('editor.nodeTypesLoadFailed')));
+  }, [t]);
 
   async function handleToggleEnabled(record: NodeInstance) {
     try {
@@ -117,20 +124,24 @@ export default function NodeInstanceListPage() {
           isEnabled: !record.isEnabled,
         },
       );
-      message.success(record.isEnabled ? 'Disabled' : 'Enabled');
+      message.success(
+        record.isEnabled
+          ? t('nodeInstance.disabled')
+          : t('nodeInstance.enabled'),
+      );
       fetchData();
     } catch (e: any) {
-      message.error(e?.message ?? 'Update failed');
+      message.error(e?.message ?? t('nodeInstance.updateFailed'));
     }
   }
 
   async function handleDelete(id: string) {
     try {
       await customRequest(`workflowNodeInstance/deleteUnique/${id}`, 'DELETE');
-      message.success('Deleted');
+      message.success(t('nodeInstance.deleted'));
       fetchData();
     } catch (e: any) {
-      message.error(e?.message ?? 'Delete failed');
+      message.error(e?.message ?? t('nodeInstance.deleteFailed'));
     }
   }
 
@@ -143,18 +154,20 @@ export default function NodeInstanceListPage() {
       render: (val: boolean, record: NodeInstance) => (
         <Popconfirm
           title={
-            val ? 'Disable this node instance?' : 'Enable this node instance?'
+            val
+              ? t('nodeInstance.disableConfirm')
+              : t('nodeInstance.enableConfirm')
           }
           onConfirm={() => handleToggleEnabled(record)}
-          okText="Confirm"
-          cancelText="Cancel"
+          okText={t('common.confirm')}
+          cancelText={t('common.cancel')}
         >
           <Switch size="small" checked={val} />
         </Popconfirm>
       ),
     },
     {
-      title: 'Name',
+      title: t('common.name'),
       dataIndex: 'name',
       key: 'name',
       render: (name: string, record: NodeInstance) => (
@@ -168,30 +181,30 @@ export default function NodeInstanceListPage() {
       ),
     },
     {
-      title: 'Node Type',
+      title: t('nodeInstance.nodeType'),
       key: 'nodeType',
       render: (_: any, record: NodeInstance) => (
         <Tag>{record.nodeType?.label ?? '—'}</Tag>
       ),
     },
     {
-      title: 'Updated',
+      title: t('list.updatedAt'),
       dataIndex: 'updatedAt',
       key: 'updatedAt',
       width: 150,
       render: (v: string) => (
-        <Tooltip title={new Date(v).toLocaleString()}>
-          <span>{new Date(v).toLocaleDateString()}</span>
+        <Tooltip title={formatWorkflowUtcDateTime(v)}>
+          <span>{formatWorkflowUtcDate(v)}</span>
         </Tooltip>
       ),
     },
     {
-      title: 'Actions',
+      title: t('list.actions'),
       key: 'actions',
       width: 120,
       render: (_: any, record: NodeInstance) => (
         <Space>
-          <Tooltip title="View">
+          <Tooltip title={t('common.view')}>
             <Button
               size="small"
               icon={<EyeOutlined />}
@@ -200,7 +213,7 @@ export default function NodeInstanceListPage() {
               }
             />
           </Tooltip>
-          <Tooltip title="Edit">
+          <Tooltip title={t('common.edit')}>
             <Button
               size="small"
               icon={<EditOutlined />}
@@ -210,14 +223,19 @@ export default function NodeInstanceListPage() {
             />
           </Tooltip>
           <Popconfirm
-            title="Delete this instance?"
-            okText="Delete"
-            cancelText="Cancel"
+            title={t('nodeInstance.deleteConfirm')}
+            okText={t('common.delete')}
+            cancelText={t('common.cancel')}
             okButtonProps={{ danger: true }}
             onConfirm={() => handleDelete(record.id)}
           >
-            <Tooltip title="Delete">
-              <Button size="small" danger icon={<DeleteOutlined />} />
+            <Tooltip title={t('common.delete')}>
+              <Button
+                type="primary"
+                size="small"
+                danger
+                icon={<DeleteOutlined />}
+              />
             </Tooltip>
           </Popconfirm>
         </Space>
@@ -226,9 +244,10 @@ export default function NodeInstanceListPage() {
   ];
 
   return (
-    <div style={PAGE_WRAPPER_STYLE}>
+    <div className="workflow-page-stack" style={PAGE_WRAPPER_STYLE}>
       <PageHeader
-        title="Node instance mgnts"
+        title={t('nodeInstance.management')}
+        subtitle={t('nodeInstance.managementDescription')}
         extra={
           <Space>
             <Button
@@ -236,7 +255,7 @@ export default function NodeInstanceListPage() {
               icon={<PlusOutlined />}
               onClick={() => navigate('/admin/workflow/node-instances/create')}
             >
-              New Instance
+              {t('nodeInstance.new')}
             </Button>
             <Button icon={<ReloadOutlined />} onClick={fetchData} />
           </Space>
@@ -246,7 +265,7 @@ export default function NodeInstanceListPage() {
       <Card {...SEARCH_CARD_PROPS}>
         <Space wrap>
           <Select
-            placeholder="Node Type"
+            placeholder={t('nodeInstance.nodeType')}
             allowClear
             value={filterNodeType}
             onChange={(v) => updateParams({ nodeTypeId: v, page: undefined })}
@@ -254,12 +273,16 @@ export default function NodeInstanceListPage() {
             showSearch
             optionFilterProp="label"
             options={nodeTypes.map((nt) => ({
-              label: `${nt.label} (${nt.category})`,
+              label: `${t(`nodeTypes.${nt.type}`, {
+                defaultValue: nt.label,
+              })} (${t(`nodeCategories.${nt.category}`, {
+                defaultValue: nt.category,
+              })})`,
               value: String(nt.id),
             }))}
           />
           <Input
-            placeholder="Search by name"
+            placeholder={t('nodeInstance.searchPlaceholder')}
             allowClear
             defaultValue={filterName}
             onChange={(e) => {
@@ -287,7 +310,7 @@ export default function NodeInstanceListPage() {
             total,
             onChange: (p) =>
               updateParams({ page: p > 1 ? String(p) : undefined }),
-            showTotal: (t) => `Total ${t}`,
+            showTotal: (count) => t('list.total', { count }),
           }}
           size="small"
         />