feat(web): refactor list selection components for improved maintainability
Build and Push EvoFirewall Docker Image / build-and-push (push) Successful in 1m53s
Build and Push EvoFirewall Docker Image / create-release (push) Skipped

- Introduced constants for selection items in both list detail and lists pages to enhance code readability and maintainability.
- Updated the Select components to utilize the new constants, streamlining the rendering of options for 'add mode' and 'create source'.
- Improved user experience by ensuring consistent labeling and structure across selection interfaces.
This commit is contained in:
Denozordec
2026-07-21 01:06:59 +07:00
parent 70bee59fc6
commit 14f516d5cc
2 changed files with 30 additions and 12 deletions
+17 -6
View File
@@ -77,6 +77,11 @@ type ListItem = {
resolved_cidrs: string[] resolved_cidrs: string[]
} }
const ADD_MODE_ITEMS = [
{ value: 'plaintext', label: 'Значения (автоопределение)' },
{ value: 'nested', label: 'Вложенный список' },
] as const
/** /**
* List detail — DetailPanel + KpiStatGrid + entries ResourcePage. * List detail — DetailPanel + KpiStatGrid + entries ResourcePage.
* KPI: https://reui.io/preview/base/stats-12 * KPI: https://reui.io/preview/base/stats-12
@@ -513,19 +518,21 @@ function ListDetailPage() {
<Field> <Field>
<FieldLabel>Режим</FieldLabel> <FieldLabel>Режим</FieldLabel>
<Select <Select
items={[...ADD_MODE_ITEMS]}
value={addMode} value={addMode}
onValueChange={(v) => { onValueChange={(v) => {
if (v === 'plaintext' || v === 'nested') setAddMode(v) if (v === 'plaintext' || v === 'nested') setAddMode(v)
}} }}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="plaintext"> {ADD_MODE_ITEMS.map((item) => (
Значения (автоопределение) <SelectItem key={item.value} value={item.value}>
</SelectItem> {item.label}
<SelectItem value="nested">Вложенный список</SelectItem> </SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>
</Field> </Field>
@@ -533,12 +540,16 @@ function ListDetailPage() {
<Field> <Field>
<FieldLabel>Список</FieldLabel> <FieldLabel>Список</FieldLabel>
<Select <Select
items={nestedCandidates.map((l) => ({
value: l.id,
label: l.name,
}))}
value={addListRef || null} value={addListRef || null}
onValueChange={(v) => { onValueChange={(v) => {
if (v) setAddListRef(v) if (v) setAddListRef(v)
}} }}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="Выберите список" /> <SelectValue placeholder="Выберите список" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
+13 -6
View File
@@ -42,6 +42,12 @@ export const Route = createFileRoute('/_auth/lists/')({
type CreateSource = 'static' | 'json_url' | 'evobgp_community' type CreateSource = 'static' | 'json_url' | 'evobgp_community'
const CREATE_SOURCE_ITEMS = [
{ value: 'static', label: 'Ручной' },
{ value: 'json_url', label: 'JSON по URL' },
{ value: 'evobgp_community', label: 'EvoBGP community' },
] as const
/** /**
* Lists catalog — ResourcePage (Frame + tabs + Filters + DataGrid). * Lists catalog — ResourcePage (Frame + tabs + Filters + DataGrid).
* Preview: https://reui.io/preview/base/data-grid-filtering-2 * Preview: https://reui.io/preview/base/data-grid-filtering-2
@@ -219,20 +225,21 @@ function ListsPage() {
<Field> <Field>
<FieldLabel>Источник</FieldLabel> <FieldLabel>Источник</FieldLabel>
<Select <Select
items={[...CREATE_SOURCE_ITEMS]}
value={source} value={source}
onValueChange={(v) => { onValueChange={(v) => {
if (v) setSource(v as CreateSource) if (v) setSource(v as CreateSource)
}} }}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="static">Ручной</SelectItem> {CREATE_SOURCE_ITEMS.map((item) => (
<SelectItem value="json_url">JSON по URL</SelectItem> <SelectItem key={item.value} value={item.value}>
<SelectItem value="evobgp_community"> {item.label}
EvoBGP community </SelectItem>
</SelectItem> ))}
</SelectContent> </SelectContent>
</Select> </Select>
</Field> </Field>