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
This commit is contained in:
@@ -0,0 +1,170 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { scenarios, steps } from '../../api';
|
||||
import type { Scenario, ScenarioStep, StepType } from '../../api';
|
||||
import { Breadcrumbs, Button, Card, Input, Select } from '../../ui';
|
||||
import styles from '../Page.module.css';
|
||||
|
||||
const STEP_TYPES: StepType[] = ['login', 'exec', 'sign'];
|
||||
|
||||
export function EditStepPage() {
|
||||
const { t } = useTranslation();
|
||||
const { id, stepId } = useParams<{ id: string; stepId: string }>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [scenario, setScenario] = useState<Scenario | null>(null);
|
||||
const [step, setStep] = useState<ScenarioStep | null>(null);
|
||||
const [order, setOrder] = useState('');
|
||||
const [type, setType] = useState<StepType>('exec');
|
||||
const [sessionName, setSessionName] = useState('');
|
||||
const [execCode, setExecCode] = useState('');
|
||||
const [validateCode, setValidateCode] = useState('');
|
||||
const [sessionError, setSessionError] = useState('');
|
||||
const [orderError, setOrderError] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id || !stepId) return;
|
||||
Promise.all([scenarios.get(Number(id)), steps.get(Number(id), Number(stepId))])
|
||||
.then(([sc, st]) => {
|
||||
setScenario(sc);
|
||||
setStep(st);
|
||||
setOrder(String(st.order));
|
||||
setType(st.type);
|
||||
setSessionName(st.sessionName);
|
||||
setExecCode(st.execCode ?? '');
|
||||
setValidateCode(st.validateCode ?? '');
|
||||
})
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id, stepId]);
|
||||
|
||||
const validate = (): boolean => {
|
||||
let valid = true;
|
||||
if (!sessionName.trim()) {
|
||||
setSessionError(t('steps.form_session_required'));
|
||||
valid = false;
|
||||
}
|
||||
if (isNaN(Number(order)) || Number(order) < 0) {
|
||||
setOrderError(t('steps.form_order_invalid'));
|
||||
valid = false;
|
||||
}
|
||||
return valid;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
await steps.update(Number(id), Number(stepId), {
|
||||
order: Number(order),
|
||||
type,
|
||||
sessionName: sessionName.trim(),
|
||||
execCode: execCode.trim() || undefined,
|
||||
validateCode: validateCode.trim() || undefined,
|
||||
});
|
||||
navigate(`/scenarios/${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: scenario?.name ?? `#${id}`,
|
||||
onClick: () => navigate(`/scenarios/${id}`),
|
||||
},
|
||||
{ label: t('steps.edit_title', { order: step?.order ?? stepId }) },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
{loading && <p className={styles.muted}>{t('steps.loading')}</p>}
|
||||
|
||||
{!loading && step && (
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<Card className={styles.formCard}>
|
||||
<div className={styles.formFields}>
|
||||
<Input
|
||||
label={t('steps.form_order')}
|
||||
type="number"
|
||||
min={0}
|
||||
value={order}
|
||||
onChange={(e) => {
|
||||
setOrder(e.target.value);
|
||||
setOrderError('');
|
||||
}}
|
||||
error={orderError || undefined}
|
||||
/>
|
||||
<Select
|
||||
label={t('steps.form_type')}
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value as StepType)}
|
||||
options={STEP_TYPES.map((v) => ({ value: v, label: v }))}
|
||||
/>
|
||||
<Input
|
||||
label={t('steps.form_session')}
|
||||
placeholder={t('steps.form_session_placeholder')}
|
||||
value={sessionName}
|
||||
onChange={(e) => {
|
||||
setSessionName(e.target.value);
|
||||
setSessionError('');
|
||||
}}
|
||||
error={sessionError || undefined}
|
||||
required
|
||||
/>
|
||||
<div className={styles.formField}>
|
||||
<label className={styles.fieldLabel}>{t('steps.form_exec_code')}</label>
|
||||
<textarea
|
||||
className={styles.textarea}
|
||||
rows={6}
|
||||
value={execCode}
|
||||
onChange={(e) => setExecCode(e.target.value)}
|
||||
placeholder={t('steps.form_exec_code_placeholder')}
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.formField}>
|
||||
<label className={styles.fieldLabel}>{t('steps.form_validate_code')}</label>
|
||||
<textarea
|
||||
className={styles.textarea}
|
||||
rows={6}
|
||||
value={validateCode}
|
||||
onChange={(e) => setValidateCode(e.target.value)}
|
||||
placeholder={t('steps.form_validate_code_placeholder')}
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.formActions}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => navigate(`/scenarios/${id}`)}
|
||||
>
|
||||
{t('steps.action_cancel')}
|
||||
</Button>
|
||||
<Button type="submit" loading={saving}>
|
||||
{t('steps.action_update')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user