denozord/vps-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): страна/город в форме и фильтрах VPS — автокомплит + флаг

Browse Source 
- Новый компонент AutoCompleteInput (Popover + Command/cmdk):
  ввод с подсказками, поддержка leading-иконки (эмодзи-флаг).
- Страна: в списке вариантов и в самом инпуте показывается
  эмодзи-флаг через getCountryFlagEmoji.
- Город: автокомплит без флага.
- Источник данных — уникальные значения из snapshot.vps
  (server-side API для стран/городов отсутствует).
- Подключено в форме VPS и в фильтрах страницы.
- Добавлены shadcn-компоненты command, popover, input-group;
  зависимость cmdk в packages/ui.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Denozordec
2026-06-26 22:39:33 +07:00
co-authored by Cursor
parent 6310ed8e02
commit a51b5f3594
9 changed files with 1094 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/package.json
+1
View File
@@ -19,6 +19,7 @@
"@tanstack/react-query-devtools": "^5.90.2",
"@tanstack/react-router": "^1.130.2",
"@tanstack/react-router-devtools": "^1.130.2",
"cmdk": "^1.1.1",
"lucide-react": "^0.468.0",
"next-themes": "^0.4.6",
"react": "^19.2.0",
apps/web/src/components/auto-complete-input.tsx
+135
View File
@@ -0,0 +1,135 @@
import * as React from 'react'
import { CheckIcon, SearchIcon } from 'lucide-react'
import { Input } from '@cfdm/ui/components/input'
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from '@cfdm/ui/components/command'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@cfdm/ui/components/popover'
import { cn } from '@cfdm/ui/lib/utils'
export interface AutoCompleteOption {
value: string
label: string
/** Левый префикс (например эмодзи-флаг). */
leading?: React.ReactNode
}
interface AutoCompleteInputProps {
id?: string
value: string
onChange: (value: string) => void
options: AutoCompleteOption[]
placeholder?: string
searchPlaceholder?: string
emptyText?: string
className?: string
/** Показывать ли выбранный leading в самом Input (например флаг). */
showLeadingInInput?: boolean
}
export function AutoCompleteInput({
id,
value,
onChange,
options,
placeholder,
searchPlaceholder = 'Поиск…',
emptyText = 'Ничего не найдено',
className,
showLeadingInInput = true,
}: AutoCompleteInputProps) {
const [open, setOpen] = React.useState(false)
const [query, setQuery] = React.useState('')
const filtered = React.useMemo(() => {
const q = query.trim().toLowerCase()
if (!q) return options
return options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))
}, [options, query])
const selected = options.find((o) => o.value.toLowerCase() === value.trim().toLowerCase())
const leading = selected?.leading
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger
render={
<div className="relative">
{showLeadingInInput && leading ? (
<span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-base leading-none">
{leading}
</span>
) : null}
<Input
id={id}
role="combobox"
aria-expanded={open}
placeholder={placeholder}
value={value}
onChange={(e) => {
onChange(e.target.value)
setOpen(true)
}}
onFocus={() => setOpen(true)}
onBlur={() => {
// задержка чтобы клик по item успел сработать
setTimeout(() => setOpen(false), 150)
}}
className={cn(
showLeadingInInput && leading ? 'pl-8' : '',
className,
)}
/>
</div>
}
/>
<PopoverContent align="start" className="w-[--anchor-width] p-0">
<Command shouldFilter={false} loop>
<div className="flex items-center gap-2 border-b px-3">
<SearchIcon className="size-4 text-muted-foreground" />
<CommandInput
placeholder={searchPlaceholder}
value={query}
onValueChange={setQuery}
className="h-9"
/>
</div>
<CommandList>
<CommandEmpty>{emptyText}</CommandEmpty>
<CommandGroup>
{filtered.map((opt) => {
const isSelected = opt.value.toLowerCase() === value.trim().toLowerCase()
return (
<CommandItem
key={opt.value}
value={opt.value}
onSelect={() => {
onChange(opt.value)
setQuery('')
setOpen(false)
}}
className="gap-2"
>
{opt.leading ? <span className="text-base leading-none">{opt.leading}</span> : null}
<span className="flex-1">{opt.label}</span>
{isSelected ? <CheckIcon className="size-4 opacity-60" /> : null}
</CommandItem>
)
})}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
}
apps/web/src/components/vps-filters.tsx
+16 -4
View File
@@ -15,6 +15,7 @@ import {
} from '@cfdm/ui/components/dropdown-menu'
import { SelectField } from '@/components/select-field'
import { AutoCompleteInput, type AutoCompleteOption } from '@/components/auto-complete-input'
import { vpsStatusLabel, tariffTypeLabel, environmentLabel } from '@/lib/format'
import type { Provider, ProviderAccount, Vps } from '@/types/entities'
@@ -185,6 +186,8 @@ interface VpsFiltersProps {
providers: Provider[]
providerAccounts: ProviderAccount[]
projectNameOptions: string[]
countryOptions: AutoCompleteOption[]
cityOptions: AutoCompleteOption[]
presets: VpsFilterPreset[]
onPresetsChange: (presets: VpsFilterPreset[]) => void
}
@@ -195,6 +198,8 @@ export function VpsFilters({
providers,
providerAccounts,
projectNameOptions,
countryOptions,
cityOptions,
presets,
onPresetsChange,
}: VpsFiltersProps) {
@@ -333,21 +338,28 @@ export function VpsFilters({
<div className="flex flex-wrap items-end gap-3">
<div className="flex flex-col gap-1">
<Label htmlFor="flt-country" className="text-xs text-muted-foreground">Страна</Label>
<Input
<AutoCompleteInput
id="flt-country"
placeholder="Любая"
value={filters.country}
onChange={(e) => update('country', e.target.value)}
onChange={(v) => update('country', v)}
options={countryOptions}
searchPlaceholder="Поиск страны…"
emptyText="Нет вариантов"
className="w-36"
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="flt-city" className="text-xs text-muted-foreground">Город</Label>
<Input
<AutoCompleteInput
id="flt-city"
placeholder="Любой"
value={filters.city}
onChange={(e) => update('city', e.target.value)}
onChange={(v) => update('city', v)}
options={cityOptions}
searchPlaceholder="Поиск города…"
emptyText="Нет вариантов"
showLeadingInInput={false}
className="w-36"
/>
</div>
apps/web/src/routes/_auth/vps.tsx
+48 -3
View File
@@ -20,6 +20,7 @@ import { FormSheetRhf } from '@/components/form-sheet-rhf'
import { FormField } from '@/components/form-field'
import { Input } from '@cfdm/ui/components/input'
import { SelectField } from '@/components/select-field'
import { AutoCompleteInput } from '@/components/auto-complete-input'
import { Textarea } from '@cfdm/ui/components/textarea'
import {
VpsFilters,
@@ -31,7 +32,7 @@ import {
} from '@/components/vps-filters'
import type { Vps } from '@/types/entities'
import { vpsStatusLabel, tariffTypeLabel } from '@/lib/format'
import { vpsStatusLabel, tariffTypeLabel, getCountryFlagEmoji } from '@/lib/format'
import { providerByIdMap, accountSelectLabel } from '@/lib/billmanager'
export const Route = createFileRoute('/_auth/vps')({
@@ -138,6 +139,31 @@ function VpsPage() {
[snapshot?.vps, filters],
)
const countryOptions = useMemo(() => {
const names = new Set<string>()
for (const v of snapshot?.vps ?? []) {
const c = (v.country || '').trim()
if (c) names.add(c)
}
return [...names].sort((a, b) => a.localeCompare(b, 'ru')).map((name) => ({
value: name,
label: name,
leading: getCountryFlagEmoji(name),
}))
}, [snapshot?.vps])
const cityOptions = useMemo(() => {
const names = new Set<string>()
for (const v of snapshot?.vps ?? []) {
const c = (v.city || '').trim()
if (c) names.add(c)
}
return [...names].sort((a, b) => a.localeCompare(b, 'ru')).map((name) => ({
value: name,
label: name,
}))
}, [snapshot?.vps])
const tableSections = useMemo(() => {
if (!filters.groupByProject) {
return [{ key: '_flat', label: null as string | null, items: filteredVps }]
@@ -278,6 +304,8 @@ function VpsPage() {
providers={snap.providers}
providerAccounts={snap.providerAccounts}
projectNameOptions={projectNameOptions}
countryOptions={countryOptions}
cityOptions={cityOptions}
presets={presets}
onPresetsChange={setPresets}
/>
@@ -341,10 +369,27 @@ function VpsPage() {
</FormField>
<div className="grid grid-cols-3 gap-3">
<FormField label="Страна" htmlFor="vps-country">
<Input id="vps-country" {...register('country')} />
<AutoCompleteInput
id="vps-country"
placeholder="Любая"
value={watch('country') ?? ''}
onChange={(v) => setValue('country', v)}
options={countryOptions}
searchPlaceholder="Поиск страны…"
emptyText="Нет вариантов"
/>
</FormField>
<FormField label="Город" htmlFor="vps-city">
<Input id="vps-city" {...register('city')} />
<AutoCompleteInput
id="vps-city"
placeholder="Любой"
value={watch('city') ?? ''}
onChange={(v) => setValue('city', v)}
options={cityOptions}
searchPlaceholder="Поиск города…"
emptyText="Нет вариантов"
showLeadingInInput={false}
/>
</FormField>
<FormField label="Дата-центр" htmlFor="vps-dc">
<Input id="vps-dc" {...register('datacenter')} />