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,77 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { scenarios } from '../../api';
+import { Breadcrumbs, Button, Card, Input } from '../../ui';
+import styles from '../Page.module.css';
+
+export function CreateScenarioPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [name, setName] = useState('');
+  const [nameError, setNameError] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setNameError(t('scenarios.form_name_required'));
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const scenario = await scenarios.create(name.trim());
+      navigate(`/scenarios/${scenario.id}`);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('scenarios.title'), onClick: () => navigate('/scenarios') },
+            { label: t('scenarios.create_title') },
+          ]}
+        />
+      </div>
+
+      {error && <p className={styles.error}>{error}</p>}
+
+      <form onSubmit={handleSubmit} noValidate>
+        <Card className={styles.formCard}>
+          <div className={styles.formFields}>
+            <Input
+              label={t('scenarios.form_name')}
+              placeholder={t('scenarios.form_name_placeholder')}
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+                setNameError('');
+              }}
+              error={nameError || undefined}
+              required
+              autoFocus
+            />
+          </div>
+
+          <div className={styles.formActions}>
+            <Button type="button" variant="secondary" onClick={() => navigate('/scenarios')}>
+              {t('scenarios.action_cancel')}
+            </Button>
+            <Button type="submit" loading={saving}>
+              {t('scenarios.action_save')}
+            </Button>
+          </div>
+        </Card>
+      </form>
+    </div>
+  );
+}