diff --git a/frontend/src/pages/SettingsSequences.tsx b/frontend/src/pages/SettingsSequences.tsx new file mode 100644 index 0000000..6dcb7c2 --- /dev/null +++ b/frontend/src/pages/SettingsSequences.tsx @@ -0,0 +1,138 @@ +import React, { useState, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { apiGet, apiPost, apiPatch, apiDelete } from '@/api/client'; + +interface Sequence { + id: string; + name: string; + prefix: string; + next_number: number; + padding: number; +} + +export function SettingsSequencesPage() { + const { t } = useTranslation(); + const [sequences, setSequences] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [showForm, setShowForm] = useState(false); + const [editing, setEditing] = useState(null); + const [formData, setFormData] = useState({ name: '', prefix: '', padding: 4 }); + + const fetchSequences = useCallback(async () => { + setLoading(true); + setError(null); + try { + const data = await apiGet<{ items: Sequence[]; total: number }>('/sequences'); + setSequences(data.items); + } catch (err: any) { + setError(err.message || t('common.error')); + } finally { + setLoading(false); + } + }, [t]); + + React.useEffect(() => { fetchSequences(); }, [fetchSequences]); + + const handleSave = async (e: React.FormEvent) => { + e.preventDefault(); + try { + if (editing) { + await apiPatch(`/sequences/${editing.id}`, formData); + } else { + await apiPost('/sequences', formData); + } + setShowForm(false); + setEditing(null); + setFormData({ name: '', prefix: '', padding: 4 }); + await fetchSequences(); + } catch (err: any) { + setError(err.message || t('common.error')); + } + }; + + const handleDelete = async (id: string) => { + if (!window.confirm(t('sequences.confirmDelete'))) return; + try { + await apiDelete(`/sequences/${id}`); + await fetchSequences(); + } catch (err: any) { + setError(err.message || t('common.error')); + } + }; + + const handleEdit = (seq: Sequence) => { + setEditing(seq); + setFormData({ name: seq.name, prefix: seq.prefix, padding: seq.padding }); + setShowForm(true); + }; + + if (loading) return
{t('common.loading')}
; + + return ( +
+
+

{t('sequences.title')}

+ +
+ + {error &&
{error}
} + + {showForm && ( +
+
+ + setFormData({ ...formData, name: e.target.value })} required className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" /> +
+
+
+ + setFormData({ ...formData, prefix: e.target.value })} placeholder="RE-" className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" /> +
+
+ + setFormData({ ...formData, padding: parseInt(e.target.value) || 4 })} required className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" /> +
+
+
+ + +
+
+ )} + +
+ + + + + + + + + + + + {sequences.map((seq) => ( + + + + + + + + ))} + +
{t('sequences.name')}{t('sequences.prefix')}{t('sequences.nextNumber')}{t('sequences.padding')}
{seq.name}{seq.prefix}{seq.next_number}{seq.padding} + + +
+
+
+ ); +}