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

feat: Replace status selection in BillingManager forms with button group for improved user interaction and visual clarity, enhancing the overall UI experience.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m35s
Details

Browse Source
This commit is contained in:
denozord
2025-12-01 16:28:40 +07:00
parent ded3d8c618
commit e73d5e2721
1 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/BillingManager.jsx
+38 -26
View File
@@ -1578,11 +1578,6 @@ function BillingManager() {
// Компоненты форм для модальных окон // Компоненты форм для модальных окон
function AddBillingForm({ item, onItemChange, servers }) { function AddBillingForm({ item, onItemChange, servers }) {
const statusOptions = [
{ value: 'active', label: 'Активен' },
{ value: 'inactive', label: 'Неактивен' }
];
const currencyOptions = [ const currencyOptions = [
{ value: 'USD', label: 'USD' }, { value: 'USD', label: 'USD' },
{ value: 'EUR', label: 'EUR' }, { value: 'EUR', label: 'EUR' },
@@ -1659,14 +1654,25 @@ function AddBillingForm({ item, onItemChange, servers }) {
/> />
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<FormField <div className="mb-1 d-flex justify-content-between align-items-center">
label="Статус" <label className="form-label mb-0">Статус</label>
name="status" </div>
type="select" <div className="btn-group w-100" role="group" aria-label="Статус ноды">
value={item.status} <button
onChange={(value) => onItemChange({ ...item, status: value })} type="button"
options={statusOptions} className={`btn ${item.status === 'active' ? 'btn-success' : 'btn-outline-success'}`}
/> onClick={() => onItemChange({ ...item, status: 'active' })}
>
Активен
</button>
<button
type="button"
className={`btn ${item.status === 'inactive' ? 'btn-danger' : 'btn-outline-danger'}`}
onClick={() => onItemChange({ ...item, status: 'inactive' })}
>
Неактивен
</button>
</div>
</div> </div>
{/* Текущие платежи */} {/* Текущие платежи */}
@@ -1718,11 +1724,6 @@ function AddBillingForm({ item, onItemChange, servers }) {
} }
function EditBillingForm({ item, onItemChange, servers }) { function EditBillingForm({ item, onItemChange, servers }) {
const statusOptions = [
{ value: 'active', label: 'Активен' },
{ value: 'inactive', label: 'Неактивен' }
];
const currencyOptions = [ const currencyOptions = [
{ value: 'USD', label: 'USD' }, { value: 'USD', label: 'USD' },
{ value: 'EUR', label: 'EUR' }, { value: 'EUR', label: 'EUR' },
@@ -1799,14 +1800,25 @@ function EditBillingForm({ item, onItemChange, servers }) {
/> />
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<FormField <div className="mb-1 d-flex justify-content-between align-items-center">
label="Статус" <label className="form-label mb-0">Статус</label>
name="status" </div>
type="select" <div className="btn-group w-100" role="group" aria-label="Статус ноды">
value={item.status || 'active'} <button
onChange={(value) => onItemChange({ ...item, status: value })} type="button"
options={statusOptions} className={`btn ${item.status === 'active' || !item.status ? 'btn-success' : 'btn-outline-success'}`}
/> onClick={() => onItemChange({ ...item, status: 'active' })}
>
Активен
</button>
<button
type="button"
className={`btn ${item.status === 'inactive' ? 'btn-danger' : 'btn-outline-danger'}`}
onClick={() => onItemChange({ ...item, status: 'inactive' })}
>
Неактивен
</button>
</div>
</div> </div>
{/* Текущие платежи */} {/* Текущие платежи */}