fix(modules): enhance ModuleDetailComponent with additional queries and UI updates

Updated the ModuleDetailComponent to include new queries for communities and DoH profiles, improving data handling. Added a module type alert function for better user guidance and refined the UI to display module type in a more user-friendly manner. Removed unused components and streamlined the refresh functionality for better performance.
2026-07-03 16:50:21 +07:00
parent 0af37d55c4
commit 144d342c16
12 changed files with 1388 additions and 143 deletions
@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+
+import { Label } from '@evobgp/ui/components/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@evobgp/ui/components/select'
+
+import {
+  NONE_OPTION,
+  communityOptionLabel,
+  fromNullableSelect,
+  nullableSelectValue,
+} from '@/lib/modules/helpers'
+import type { BgpCommunity } from '@/types/api'
+
+interface CommunitySelectProps {
+  id?: string
+  label?: string
+  value: string | null
+  onValueChange: (value: string | null) => void
+  communities: BgpCommunity[]
+  nullable?: boolean
+  placeholder?: string
+}
+
+export function CommunitySelect({
+  id,
+  label,
+  value,
+  onValueChange,
+  communities,
+  nullable = false,
+  placeholder = 'Выберите community',
+}: CommunitySelectProps) {
+  const items = useMemo(() => {
+    const communityItems = communities.map((c) => ({
+      value: c.id,
+      label: communityOptionLabel(c),
+    }))
+    if (nullable) {
+      return [{ value: NONE_OPTION, label: 'Не выбрано' }, ...communityItems]
+    }
+    return communityItems
+  }, [communities, nullable])
+
+  const selectValue = nullable ? nullableSelectValue(value) : (value ?? '')
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {label ? <Label htmlFor={id}>{label}</Label> : null}
+      <Select
+        items={items}
+        value={selectValue}
+        onValueChange={(v) => {
+          if (!v) return
+          onValueChange(nullable ? fromNullableSelect(v) : v)
+        }}
+      >
+        <SelectTrigger id={id} className="w-full">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}