refactor(client): group pages by entity and add scenario/step crud

- move environment, scenario, session pages into entity subdirs - add CreateScenarioPage and EditScenarioPage - add CreateStepPage and EditStepPage with order/type/session/code fields - add per-step edit and delete row actions on ScenarioDetailPage - add step api methods (get, create, update, remove) to api client - add sectionToolbar, formField, fieldLabel, textarea css utilities
2026-04-09 20:45:34 +03:00
parent 6b1307c58a
commit ebcb8b8ff4
16 changed files with 725 additions and 46 deletions
@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Play, Plus, Trash2 } from 'lucide-react';
+import { scenarios } from '../../api';
+import type { Scenario } from '../../api';
+import { Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
+
+export function ScenariosPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [items, setItems] = useState<Scenario[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    scenarios
+      .list()
+      .then((res) => setItems(res.data))
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleRun = async (id: number) => {
+    await scenarios.run(id);
+  };
+
+  const handleDelete = async (id: number) => {
+    await scenarios.remove(id);
+    setLoading(true);
+    load();
+  };
+
+  const columns: TableColumn<Scenario>[] = [
+    { key: 'id', header: t('scenarios.col_id'), render: (s) => s.id, width: 60 },
+    { key: 'name', header: t('scenarios.col_name'), render: (s) => s.name },
+    {
+      key: 'updated',
+      header: t('scenarios.col_updated'),
+      width: 140,
+      render: (s) => <Timestamp value={s.updatedAt} />,
+    },
+    {
+      key: 'actions',
+      header: '',
+      width: 100,
+      align: 'right',
+      render: (s) => (
+        <span style={{ display: 'inline-flex', gap: 6 }}>
+          <Button size="sm" title={t('scenarios.action_run')} onClick={() => handleRun(s.id)}>
+            <Play size={14} />
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            title={t('scenarios.action_delete')}
+            onClick={() => handleDelete(s.id)}
+          >
+            <Trash2 size={14} />
+          </Button>
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs items={[{ label: t('scenarios.title') }]} className={styles.breadcrumbs} />
+        <div className={styles.toolbarActions}>
+          <Button size="sm" onClick={() => navigate('/scenarios/new')}>
+            <Plus size={14} />
+            {t('scenarios.action_add')}
+          </Button>
+        </div>
+      </div>
+      {error && <p className={styles.error}>{error}</p>}
+      <Table
+        columns={columns}
+        data={items}
+        rowKey={(s) => s.id}
+        loading={loading}
+        emptyMessage={t('scenarios.empty')}
+        pageSize={10}
+        pageSizeOptions={[10, 25, 50]}
+        onRowClick={(s) => navigate(`/scenarios/${s.id}`)}
+      />
+    </div>
+  );
+}