feat(web): refactor list selection components for improved maintainability
- 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:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user