fix(web): селекты показывают label вместо технического значения; редактирование VPS подтягивает данные

- SelectField: обёртка над base-ui Select с items prop (Select.Value рендерит label выбранного элемента, а не raw value) - все Select в forms (vps/providers/accounts/payments/balance/settings) переписаны на SelectField - FormSheetRhf: useEffect reset(defaultValues) при открытии sheet — теперь форма редактирования заполняется текущими данными Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-26 15:54:35 +07:00
parent 3e57728ddc
commit b2611d951b
8 changed files with 226 additions and 124 deletions
@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import type { ReactNode } from 'react'
 import {
  useForm,
@@ -42,6 +43,14 @@ export function FormSheetRhf<TField extends FieldValues>({
    mode: 'onBlur',
  })

+  // Re-sync form values when the sheet opens or defaultValues change (e.g. edit vs create).
+  useEffect(() => {
+    if (open) {
+      form.reset(defaultValues as DefaultValues<TField>)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, defaultValues])
+
  const submit: SubmitHandler<TField> = (values) => onSubmit(values)

  return (
@@ -0,0 +1,107 @@
+import * as React from 'react'
+import {
+  Select as SelectPrimitive,
+  type SelectRootProps,
+} from '@base-ui/react/select'
+
+import { cn } from '@cfdm/ui/lib/utils'
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react'
+
+export interface SelectOption {
+  value: string
+  label: React.ReactNode
+}
+
+interface SelectFieldProps extends Omit<SelectRootProps<string>, 'items' | 'value' | 'onValueChange'> {
+  options: SelectOption[]
+  placeholder?: string
+  triggerClassName?: string
+  triggerId?: string
+  size?: 'sm' | 'default'
+  value?: string | null
+  onValueChange?: (value: string | null) => void
+}
+
+export function SelectField({
+  options,
+  placeholder,
+  triggerClassName,
+  triggerId,
+  size = 'default',
+  value,
+  onValueChange,
+  ...props
+}: SelectFieldProps) {
+  const items = React.useMemo(() => options.map((o) => ({ value: o.value, label: o.label })), [options])
+
+  return (
+    <SelectPrimitive.Root
+      items={items}
+      value={value}
+      onValueChange={onValueChange}
+      {...props}
+    >
+      <SelectPrimitive.Trigger
+        id={triggerId}
+        data-slot="select-trigger"
+        data-size={size}
+        className={cn(
+          'flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+          triggerClassName,
+        )}
+      >
+        <SelectPrimitive.Value
+          data-slot="select-value"
+          placeholder={placeholder}
+          className="flex flex-1 text-left"
+        />
+        <SelectPrimitive.Icon
+          render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />}
+        />
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Positioner
+          side="bottom"
+          sideOffset={4}
+          align="center"
+          alignOffset={0}
+          alignItemWithTrigger
+          className="isolate z-50"
+        >
+          <SelectPrimitive.Popup
+            data-slot="select-content"
+            className="relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95"
+          >
+            <SelectPrimitive.ScrollUpArrow className="top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4">
+              <ChevronUpIcon />
+            </SelectPrimitive.ScrollUpArrow>
+            <SelectPrimitive.List>
+              {options.map((opt) => (
+                <SelectPrimitive.Item
+                  key={opt.value}
+                  value={opt.value}
+                  data-slot="select-item"
+                  className="relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2"
+                >
+                  <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+                    {opt.label}
+                  </SelectPrimitive.ItemText>
+                  <SelectPrimitive.ItemIndicator
+                    render={
+                      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+                    }
+                  >
+                    <CheckIcon className="pointer-events-none" />
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.List>
+            <SelectPrimitive.ScrollDownArrow className="bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4">
+              <ChevronDownIcon />
+            </SelectPrimitive.ScrollDownArrow>
+          </SelectPrimitive.Popup>
+        </SelectPrimitive.Positioner>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  )
+}
@@ -18,7 +18,7 @@ import { FormSheet } from '@/components/form-sheet'
 import { FormField } from '@/components/form-field'
 import { Input } from '@cfdm/ui/components/input'
 import { Textarea } from '@cfdm/ui/components/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cfdm/ui/components/select'
+import { SelectField } from '@/components/select-field'
 import { LoadingButton } from '@/components/loading-button'

 import type { ProviderAccount, BillingMode } from '@/types/entities'
@@ -191,12 +191,13 @@ function AccountsPage() {
        submitting={saveMut.isPending}
      >
        <FormField label="Хостер" htmlFor="acc-provider">
-          <Select value={form.providerId} onValueChange={(v) => setForm({ ...form, providerId: v ?? '' })}>
-            <SelectTrigger id="acc-provider"><SelectValue placeholder="Выберите хостера" /></SelectTrigger>
-            <SelectContent>
-              {snapshot?.providers.map((p) => <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>)}
-            </SelectContent>
-          </Select>
+          <SelectField
+            triggerId="acc-provider"
+            placeholder="Выберите хостера"
+            value={form.providerId}
+            onValueChange={(v) => setForm({ ...form, providerId: v ?? '' })}
+            options={(snapshot?.providers ?? []).map((p) => ({ value: p.id, label: p.name }))}
+          />
        </FormField>
        <FormField label="Название" htmlFor="acc-name">
          <Input id="acc-name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
@@ -212,13 +213,15 @@ function AccountsPage() {
          <Input id="acc-creds" type="password" value={form.apiCredentials} onChange={(e) => setForm({ ...form, apiCredentials: e.target.value })} />
        </FormField>
        <FormField label="Режим биллинга" htmlFor="acc-mode">
-          <Select value={form.billingMode} onValueChange={(v) => setForm({ ...form, billingMode: (v ?? 'monthly') as BillingMode })}>
-            <SelectTrigger id="acc-mode"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="monthly">{billingModeLabel('monthly')}</SelectItem>
-              <SelectItem value="daily">{billingModeLabel('daily')}</SelectItem>
-            </SelectContent>
-          </Select>
+          <SelectField
+            triggerId="acc-mode"
+            value={form.billingMode}
+            onValueChange={(v) => setForm({ ...form, billingMode: (v ?? 'monthly') as BillingMode })}
+            options={[
+              { value: 'monthly', label: billingModeLabel('monthly') },
+              { value: 'daily', label: billingModeLabel('daily') },
+            ]}
+          />
        </FormField>
        <FormField label="Заметки" htmlFor="acc-notes">
          <Textarea id="acc-notes" value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} />
@@ -18,7 +18,7 @@ import { ConfirmDialog } from '@/components/confirm-dialog'
 import { FormSheet } from '@/components/form-sheet'
 import { FormField } from '@/components/form-field'
 import { Input } from '@cfdm/ui/components/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cfdm/ui/components/select'
+import { SelectField } from '@/components/select-field'
 import { Textarea } from '@cfdm/ui/components/textarea'

 import type { BalanceLedgerRow, LedgerDirection } from '@/types/entities'
@@ -166,23 +166,27 @@ function BalancePage() {
        submitting={addMut.isPending}
      >
        <FormField label="Аккаунт" htmlFor="bl-acc">
-          <Select value={form.providerAccountId} onValueChange={(v) => setForm({ ...form, providerAccountId: v ?? '' })}>
-            <SelectTrigger id="bl-acc"><SelectValue placeholder="Выберите аккаунт" /></SelectTrigger>
-            <SelectContent>
-              {snapshot?.providerAccounts.map((a) => (
-                <SelectItem key={a.id} value={a.id}>{accountSelectLabel(a, providerById)}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <SelectField
+            triggerId="bl-acc"
+            placeholder="Выберите аккаунт"
+            value={form.providerAccountId}
+            onValueChange={(v) => setForm({ ...form, providerAccountId: v ?? '' })}
+            options={(snapshot?.providerAccounts ?? []).map((a) => ({
+              value: a.id,
+              label: accountSelectLabel(a, providerById),
+            }))}
+          />
        </FormField>
        <FormField label="Движение" htmlFor="bl-dir">
-          <Select value={form.direction} onValueChange={(v) => setForm({ ...form, direction: (v ?? 'credit') as LedgerDirection })}>
-            <SelectTrigger id="bl-dir"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="credit">Приход</SelectItem>
-              <SelectItem value="debit">Списание</SelectItem>
-            </SelectContent>
-          </Select>
+          <SelectField
+            triggerId="bl-dir"
+            value={form.direction}
+            onValueChange={(v) => setForm({ ...form, direction: (v ?? 'credit') as LedgerDirection })}
+            options={[
+              { value: 'credit', label: 'Приход' },
+              { value: 'debit', label: 'Списание' },
+            ]}
+          />
        </FormField>
        <div className="grid grid-cols-3 gap-3">
          <FormField label="Дата" htmlFor="bl-date">
@@ -17,7 +17,7 @@ import { FormSheet } from '@/components/form-sheet'
 import { FormField } from '@/components/form-field'
 import { Input } from '@cfdm/ui/components/input'
 import { Textarea } from '@cfdm/ui/components/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cfdm/ui/components/select'
+import { SelectField } from '@/components/select-field'

 import type { Payment, PaymentType } from '@/types/entities'
 import { paymentTypeLabel, formatCurrency } from '@/lib/format'
@@ -153,25 +153,29 @@ function PaymentsPage() {
        submitting={saveMut.isPending}
      >
        <FormField label="Тип" htmlFor="pay-type">
-          <Select value={form.type} onValueChange={(v) => setForm({ ...form, type: (v ?? 'provider_balance_topup') as PaymentType })}>
-            <SelectTrigger id="pay-type"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="provider_balance_topup">{paymentTypeLabel('provider_balance_topup')}</SelectItem>
-              <SelectItem value="direct_vps_payment">{paymentTypeLabel('direct_vps_payment')}</SelectItem>
-              <SelectItem value="daily_debit">{paymentTypeLabel('daily_debit')}</SelectItem>
-              <SelectItem value="monthly_debit">{paymentTypeLabel('monthly_debit')}</SelectItem>
-            </SelectContent>
-          </Select>
+          <SelectField
+            triggerId="pay-type"
+            value={form.type}
+            onValueChange={(v) => setForm({ ...form, type: (v ?? 'provider_balance_topup') as PaymentType })}
+            options={[
+              { value: 'provider_balance_topup', label: paymentTypeLabel('provider_balance_topup') },
+              { value: 'direct_vps_payment', label: paymentTypeLabel('direct_vps_payment') },
+              { value: 'daily_debit', label: paymentTypeLabel('daily_debit') },
+              { value: 'monthly_debit', label: paymentTypeLabel('monthly_debit') },
+            ]}
+          />
        </FormField>
        <FormField label="Аккаунт" htmlFor="pay-acc">
-          <Select value={form.providerAccountId} onValueChange={(v) => setForm({ ...form, providerAccountId: v ?? '' })}>
-            <SelectTrigger id="pay-acc"><SelectValue placeholder="Выберите аккаунт" /></SelectTrigger>
-            <SelectContent>
-              {snapshot?.providerAccounts.map((a) => (
-                <SelectItem key={a.id} value={a.id}>{accountSelectLabel(a, providerById)}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <SelectField
+            triggerId="pay-acc"
+            placeholder="Выберите аккаунт"
+            value={form.providerAccountId}
+            onValueChange={(v) => setForm({ ...form, providerAccountId: v ?? '' })}
+            options={(snapshot?.providerAccounts ?? []).map((a) => ({
+              value: a.id,
+              label: accountSelectLabel(a, providerById),
+            }))}
+          />
        </FormField>
        <div className="grid grid-cols-3 gap-3">
          <FormField label="Дата" htmlFor="pay-date">
@@ -18,7 +18,7 @@ import { FormSheet } from '@/components/form-sheet'
 import { FormField } from '@/components/form-field'
 import { Input } from '@cfdm/ui/components/input'
 import { Textarea } from '@cfdm/ui/components/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cfdm/ui/components/select'
+import { SelectField } from '@/components/select-field'
 import { faviconUrlFromWebsite } from '@/lib/format'
 import type { Provider, ApiType } from '@/types/entities'

@@ -156,13 +156,15 @@ function ProvidersPage() {
          <Input id="pr-site" value={form.website} onChange={(e) => setForm({ ...form, website: e.target.value })} />
        </FormField>
        <FormField label="Тип API" htmlFor="pr-api">
-          <Select value={form.apiType} onValueChange={(v) => setForm({ ...form, apiType: (v ?? 'none') as ApiType })}>
-            <SelectTrigger id="pr-api"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="billmanager">BILLmanager</SelectItem>
-              <SelectItem value="none">Нет</SelectItem>
-            </SelectContent>
-          </Select>
+          <SelectField
+            triggerId="pr-api"
+            value={form.apiType}
+            onValueChange={(v) => setForm({ ...form, apiType: (v ?? 'none') as ApiType })}
+            options={[
+              { value: 'billmanager', label: 'BILLmanager' },
+              { value: 'none', label: 'Нет' },
+            ]}
+          />
        </FormField>
        <FormField label="API URL" htmlFor="pr-apiurl" description="Один URL на хостера для BILLmanager">
          <Input id="pr-apiurl" value={form.apiBaseUrl} onChange={(e) => setForm({ ...form, apiBaseUrl: e.target.value })} />
@@ -12,7 +12,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@cfdm
 import { Field, FieldGroup, FieldLabel } from '@cfdm/ui/components/field'
 import { Input } from '@cfdm/ui/components/input'
 import { LoadingButton } from '@/components/loading-button'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cfdm/ui/components/select'
+import { SelectField } from '@/components/select-field'

 import type { Settings } from '@/types/entities'
 import { useState } from 'react'
@@ -79,19 +79,12 @@ function SettingsPage() {
                <FieldGroup>
                  <Field>
                    <FieldLabel htmlFor="set-cur">Базовая валюта</FieldLabel>
-                    <Select
+                    <SelectField
+                      triggerId="set-cur"
                      value={draft.baseCurrency ?? 'RUB'}
                      onValueChange={(v) => setForm({ ...draft, baseCurrency: v ?? 'RUB' })}
-                    >
-                      <SelectTrigger id="set-cur">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {CURRENCIES.map((c) => (
-                          <SelectItem key={c} value={c}>{c}</SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                      options={CURRENCIES.map((c) => ({ value: c, label: c }))}
+                    />
                  </Field>
                  <Field>
                    <FieldLabel htmlFor="set-rates">URL курсов (JSON)</FieldLabel>
@@ -104,18 +97,16 @@ function SettingsPage() {
                  </Field>
                  <Field orientation="horizontal">
                    <FieldLabel htmlFor="set-auto">Автоконвертация</FieldLabel>
-                    <Select
+                    <SelectField
+                      triggerId="set-auto"
+                      triggerClassName="w-32"
                      value={draft.autoConvert === false ? 'off' : 'on'}
                      onValueChange={(v) => setForm({ ...draft, autoConvert: (v ?? 'on') === 'on' })}
-                    >
-                      <SelectTrigger id="set-auto" className="w-32">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="on">Включена</SelectItem>
-                        <SelectItem value="off">Выключена</SelectItem>
-                      </SelectContent>
-                    </Select>
+                      options={[
+                        { value: 'on', label: 'Включена' },
+                        { value: 'off', label: 'Выключена' },
+                      ]}
+                    />
                  </Field>
                  <LoadingButton
                    className="w-fit"
@@ -18,7 +18,7 @@ import { ConfirmDialog } from '@/components/confirm-dialog'
 import { FormSheetRhf } from '@/components/form-sheet-rhf'
 import { FormField } from '@/components/form-field'
 import { Input } from '@cfdm/ui/components/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cfdm/ui/components/select'
+import { SelectField } from '@/components/select-field'
 import { Textarea } from '@cfdm/ui/components/textarea'

 import type { Vps } from '@/types/entities'
@@ -244,36 +244,24 @@ function VpsPage() {
                <Input id="vps-dns" {...register('dns')} />
              </FormField>
              <FormField label="Хостер" htmlFor="vps-provider" error={errors.providerId?.message}>
-                <Select
+                <SelectField
+                  triggerId="vps-provider"
+                  placeholder="Выберите хостера"
                  value={providerId}
                  onValueChange={(v) => setValue('providerId', v ?? '', { shouldValidate: true })}
-                >
-                  <SelectTrigger id="vps-provider">
-                    <SelectValue placeholder="Выберите хостера" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {snapshot?.providers.map((p) => (
-                      <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  options={(snapshot?.providers ?? []).map((p) => ({ value: p.id, label: p.name }))}
+                />
              </FormField>
              <FormField label="Аккаунт" htmlFor="vps-account" error={errors.providerAccountId?.message}>
-                <Select
+                <SelectField
+                  triggerId="vps-account"
+                  placeholder="Выберите аккаунт"
                  value={watch('providerAccountId')}
                  onValueChange={(v) => setValue('providerAccountId', v ?? '', { shouldValidate: true })}
-                >
-                  <SelectTrigger id="vps-account">
-                    <SelectValue placeholder="Выберите аккаунт" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {snapshot?.providerAccounts
-                      .filter((a) => !providerId || a.providerId === providerId)
-                      .map((a) => (
-                        <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>
-                      ))}
-                  </SelectContent>
-                </Select>
+                  options={(snapshot?.providerAccounts ?? [])
+                    .filter((a) => !providerId || a.providerId === providerId)
+                    .map((a) => ({ value: a.id, label: a.name }))}
+                />
              </FormField>
              <FormField label="Проект" htmlFor="vps-project">
                <Input id="vps-project" {...register('project')} />
@@ -291,33 +279,27 @@ function VpsPage() {
              </div>
              <div className="grid grid-cols-2 gap-3">
                <FormField label="Статус" htmlFor="vps-status">
-                  <Select
+                  <SelectField
+                    triggerId="vps-status"
                    value={watch('status')}
                    onValueChange={(v) => setValue('status', (v ?? 'active') as 'active' | 'paused' | 'archived')}
-                  >
-                    <SelectTrigger id="vps-status">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="active">{vpsStatusLabel('active')}</SelectItem>
-                      <SelectItem value="paused">{vpsStatusLabel('paused')}</SelectItem>
-                      <SelectItem value="archived">{vpsStatusLabel('archived')}</SelectItem>
-                    </SelectContent>
-                  </Select>
+                    options={[
+                      { value: 'active', label: vpsStatusLabel('active') },
+                      { value: 'paused', label: vpsStatusLabel('paused') },
+                      { value: 'archived', label: vpsStatusLabel('archived') },
+                    ]}
+                  />
                </FormField>
                <FormField label="Тип тарифа" htmlFor="vps-tariff">
-                  <Select
+                  <SelectField
+                    triggerId="vps-tariff"
                    value={watch('tariffType')}
                    onValueChange={(v) => setValue('tariffType', (v ?? 'monthly') as 'daily' | 'monthly')}
-                  >
-                    <SelectTrigger id="vps-tariff">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="monthly">{tariffTypeLabel('monthly')}</SelectItem>
-                      <SelectItem value="daily">{tariffTypeLabel('daily')}</SelectItem>
-                    </SelectContent>
-                  </Select>
+                    options={[
+                      { value: 'monthly', label: tariffTypeLabel('monthly') },
+                      { value: 'daily', label: tariffTypeLabel('daily') },
+                    ]}
+                  />
                </FormField>
              </div>
              <div className="grid grid-cols-3 gap-3">