@gadmin2n/schematics 0.0.144 → 0.0.145

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

@@ -0,0 +1,100 @@
+import { DatePicker, InputNumber, Radio, Select, Space } from 'antd';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type DelayConfig = {
+  mode: 'DURATION' | 'UNTIL';
+  duration?: {
+    value: number | null;
+    unit: 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS';
+  };
+  untilTime?: string;
+};
+
+export function DelayConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<DelayConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const config: DelayConfig = value ?? {
+    mode: 'DURATION',
+    duration: { value: 5, unit: 'MINUTES' },
+  };
+  const duration = config.duration ?? { value: 5, unit: 'MINUTES' as const };
+
+  return (
+    <Space direction="vertical" size={14} style={{ width: '100%' }}>
+      <Radio.Group
+        value={config.mode}
+        disabled={disabled}
+        onChange={(event) =>
+          onChange(
+            event.target.value === 'UNTIL'
+              ? {
+                  mode: 'UNTIL',
+                  untilTime: dayjs().add(1, 'hour').toISOString(),
+                }
+              : { mode: 'DURATION', duration },
+          )
+        }
+      >
+        <Space direction="vertical">
+          <Radio value="DURATION">{t('nodeEditors.delay.duration')}</Radio>
+          <Radio value="UNTIL">{t('nodeEditors.delay.until')}</Radio>
+        </Space>
+      </Radio.Group>
+
+      {config.mode === 'DURATION' ? (
+        <Space.Compact block>
+          <InputNumber
+            aria-label={t('nodeEditors.delay.amount')}
+            precision={0}
+            value={duration.value}
+            disabled={disabled}
+            onChange={(amount) =>
+              onChange({
+                mode: 'DURATION',
+                duration: { ...duration, value: amount },
+              })
+            }
+            style={{ width: '60%' }}
+          />
+          <Select
+            aria-label={t('nodeEditors.delay.unit')}
+            value={duration.unit}
+            disabled={disabled}
+            options={(['SECONDS', 'MINUTES', 'HOURS', 'DAYS'] as const).map(
+              (unit) => ({
+                value: unit,
+                label: t(`nodeEditors.delay.units.${unit}`),
+              }),
+            )}
+            onChange={(unit) =>
+              onChange({
+                mode: 'DURATION',
+                duration: { ...duration, unit },
+              })
+            }
+            style={{ width: '40%' }}
+          />
+        </Space.Compact>
+      ) : (
+        <DatePicker
+          aria-label={t('nodeEditors.delay.resumeAt')}
+          showTime
+          value={config.untilTime ? dayjs(config.untilTime) : null}
+          disabled={disabled}
+          onChange={(date) =>
+            onChange({
+              mode: 'UNTIL',
+              untilTime: date?.toISOString() ?? '',
+            })
+          }
+          style={{ width: '100%' }}
+        />
+      )}
+    </Space>
+  );
+}