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

- Новый компонент 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]>
2026-06-26 22:39:33 +07:00
parent 6310ed8e02
commit a51b5f3594
9 changed files with 1094 additions and 7 deletions
@@ -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>
+  )
+}
@@ -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>
@@ -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')} />