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,130 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Settings, ExternalLink, Pencil, Trash2, Plus } from 'lucide-react';
+import { environments } from '../../api';
+import type { Environment } from '../../api';
+import { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
+
+function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: number) => void }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const urlEntries = Object.entries(env.urls).filter(([, v]) => v);
+
+  const header = (
+    <div className={styles.envCardHeader}>
+      <span className={styles.envCardName}>{env.name}</span>
+      <div onClick={(e) => e.stopPropagation()}>
+        <ContextMenu
+          align="right"
+          trigger={
+            <Button variant="ghost" size="sm" aria-label={t('environments.menu_label')}>
+              <Settings size={14} />
+            </Button>
+          }
+          items={[
+            {
+              label: t('environments.action_view'),
+              icon: <ExternalLink size={14} />,
+              onClick: () => navigate(`/environments/${env.id}`),
+            },
+            {
+              label: t('environments.action_edit'),
+              icon: <Pencil size={14} />,
+              onClick: () => navigate(`/environments/${env.id}/edit`),
+            },
+            {
+              label: t('environments.action_delete'),
+              icon: <Trash2 size={14} />,
+              variant: 'danger',
+              onClick: () => onDelete(env.id),
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
+
+  const footer = (
+    <div className={styles.envCardFooter}>
+      <span className={styles.envCardId}>#{env.id}</span>
+      <Timestamp value={env.updatedAt} />
+    </div>
+  );
+
+  return (
+    <Card
+      className={styles.envCard}
+      header={header}
+      headerVariant="primary"
+      footer={footer}
+      onClick={() => navigate(`/environments/${env.id}`)}
+    >
+      {urlEntries.length > 0 && (
+        <DescriptionList
+          layout="compact"
+          truncate
+          items={urlEntries.map(([key, value]) => ({ term: key, detail: value }))}
+        />
+      )}
+      {urlEntries.length === 0 && (
+        <p className={styles.envCardEmpty}>{t('environments.no_urls')}</p>
+      )}
+    </Card>
+  );
+}
+
+function AddEnvironmentCard() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  return (
+    <div className={styles.envCardAdd}>
+      <Button variant="ghost" onClick={() => navigate('/environments/new')}>
+        <Plus size={16} />
+        {t('environments.action_add')}
+      </Button>
+    </div>
+  );
+}
+
+export function EnvironmentsPage() {
+  const { t } = useTranslation();
+  const [items, setItems] = useState<Environment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = () => {
+    environments
+      .list()
+      .then((res) => setItems(res.data))
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const handleDelete = async (id: number) => {
+    await environments.remove(id);
+    setItems((prev) => prev.filter((e) => e.id !== id));
+  };
+
+  return (
+    <div>
+      <Breadcrumbs items={[{ label: t('environments.title') }]} className={styles.breadcrumbs} />
+      {error && <p className={styles.error}>{error}</p>}
+      {loading ? (
+        <p className={styles.muted}>{t('environments.loading')}</p>
+      ) : (
+        <div className={styles.envGrid}>
+          {items.map((env) => (
+            <EnvironmentCard key={env.id} env={env} onDelete={handleDelete} />
+          ))}
+          <AddEnvironmentCard />
+        </div>
+      )}
+    </div>
+  );
+}