denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Replace purpose selection in BillingManager forms with PurposeSelectInput component, streamlining the UI and improving code maintainability by removing hardcoded options.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m38s
Details

Browse Source
This commit is contained in:
denozord
2025-12-01 16:20:37 +07:00
parent b3295ebfae
commit ded3d8c618
2 changed files with 155 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/BillingManager.jsx
+5 -32
View File
@@ -8,6 +8,7 @@ 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 PurposeSelectInput, { PURPOSES as PURPOSE_OPTIONS } from './components/PurposeSelectInput.jsx';
import ErrorAlert from './components/ErrorAlert.jsx';
import {
IconPlus,
@@ -1577,17 +1578,6 @@ function BillingManager() {
// Компоненты форм для модальных окон
function AddBillingForm({ item, onItemChange, servers }) {
const purposeOptions = [
{ value: '', label: 'Выберите назначение' },
{ value: 'relay', label: 'Relay VPS' },
{ value: 'bgp', label: 'BGP сервер' },
{ value: 'monitoring', label: 'Мониторинг' },
{ value: 'dns', label: 'DNS сервер' },
{ value: 'proxy', label: 'Прокси сервер' },
{ value: 'backup', label: 'Backup сервер' },
{ value: 'other', label: 'Другое' }
];
const statusOptions = [
{ value: 'active', label: 'Активен' },
{ value: 'inactive', label: 'Неактивен' }
@@ -1635,13 +1625,10 @@ function AddBillingForm({ item, onItemChange, servers }) {
</div>
</div>
<div className="col-md-6">
<FormField
label="Назначение"
name="purpose"
type="select"
<label className="form-label">Назначение</label>
<PurposeSelectInput
value={item.purpose}
onChange={(value) => onItemChange({ ...item, purpose: value })}
options={purposeOptions}
/>
</div>
<div className="col-md-6">
@@ -1731,17 +1718,6 @@ function AddBillingForm({ item, onItemChange, servers }) {
}
function EditBillingForm({ item, onItemChange, servers }) {
const purposeOptions = [
{ value: '', label: 'Выберите назначение' },
{ value: 'relay', label: 'Relay VPS' },
{ value: 'bgp', label: 'BGP сервер' },
{ value: 'monitoring', label: 'Мониторинг' },
{ value: 'dns', label: 'DNS сервер' },
{ value: 'proxy', label: 'Прокси сервер' },
{ value: 'backup', label: 'Backup сервер' },
{ value: 'other', label: 'Другое' }
];
const statusOptions = [
{ value: 'active', label: 'Активен' },
{ value: 'inactive', label: 'Неактивен' }
@@ -1789,13 +1765,10 @@ function EditBillingForm({ item, onItemChange, servers }) {
</div>
</div>
<div className="col-md-6">
<FormField
label="Назначение"
name="purpose"
type="select"
<label className="form-label">Назначение</label>
<PurposeSelectInput
value={item.purpose || ''}
onChange={(value) => onItemChange({ ...item, purpose: value })}
options={purposeOptions}
/>
</div>
<div className="col-md-6">