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 <[email protected]>
2026-06-26 15:54:35 +07:00
1 parent 3e57728ddc
commit b2611d951b
@@ -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">