feat: Integrate ServerAutocompleteInput in BillingManager forms for optional server selection, enhancing user experience with improved search functionality and contextual help.

2025-12-01 16:13:36 +07:00
parent 4655fc67cc
commit b3295ebfae
2 changed files with 218 additions and 14 deletions
@@ -7,6 +7,7 @@ import Pagination from './components/Pagination.jsx';
 import PageHeader from './components/PageHeader.jsx';
 import PageHeaderActions from './components/PageHeaderActions.jsx';
 import FormField from './components/FormField.jsx';
+import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
 import ErrorAlert from './components/ErrorAlert.jsx';
 import { 
  IconPlus, 
@@ -1622,15 +1623,16 @@ function AddBillingForm({ item, onItemChange, servers }) {
        />
      </div>
      <div className="col-md-6">
-        <FormField
-          label="Связанный сервер (опционально)"
-          name="serverId"
-          type="select"
+        <label className="form-label">Связанный сервер (опционально)</label>
+        <ServerAutocompleteInput
          value={item.serverId || ''}
-          onChange={(value) => onItemChange({ ...item, serverId: value })}
-          options={serverOptions}
-          helpText="Используется для связи с разделом «Серверы»"
+          onChange={(value) => onItemChange({ ...item, serverId: value || '' })}
+          servers={servers}
+          placeholder="Поиск по IP, DNS, провайдеру..."
        />
+        <div className="form-hint mt-1">
+          Используется для связи с разделом «Серверы». Можно оставить пустым.
+        </div>
      </div>
      <div className="col-md-6">
        <FormField
@@ -1775,15 +1777,16 @@ function EditBillingForm({ item, onItemChange, servers }) {
        />
      </div>
      <div className="col-md-6">
-        <FormField
-          label="Связанный сервер (опционально)"
-          name="serverId"
-          type="select"
+        <label className="form-label">Связанный сервер (опционально)</label>
+        <ServerAutocompleteInput
          value={item.serverId || ''}
-          onChange={(value) => onItemChange({ ...item, serverId: value })}
-          options={serverOptions}
-          helpText="Используется для связи с разделом «Серверы»"
+          onChange={(value) => onItemChange({ ...item, serverId: value || '' })}
+          servers={servers}
+          placeholder="Поиск по IP, DNS, провайдеру..."
        />
+        <div className="form-hint mt-1">
+          Используется для связи с разделом «Серверы». Можно оставить пустым.
+        </div>
      </div>
      <div className="col-md-6">
        <FormField