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

refactor: Update filter configuration generation and improve UI layout in FilterManager for better readability and consistency
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m15s
Details

Browse Source
This commit is contained in:
denozord
2025-07-14 08:27:18 +07:00
parent 93ace3c619
commit 07ff184ef4
2 changed files with 84 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/FilterManager.jsx
+18 -19
View File
@@ -405,35 +405,31 @@ function FilterManager() {
<h3 className="card-title">Фильтры frouting ({filteredFilters.length})</h3>
</div>
<div className="table-responsive">
<table className="table table-vcenter card-table">
<table className="table table-vcenter table-sm card-table align-middle">
<thead>
<tr>
<th
className="cursor-pointer"
onClick={() => handleSort('community')}
>
<th style={{width: '180px', whiteSpace: 'nowrap', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="cursor-pointer align-middle"
onClick={() => handleSort('community')}>
Community
{sortField === 'community' && (
<IconChevronDown className={`ms-1 ${sortOrder === 'desc' ? 'rotate-180' : ''}`} />
)}
</th>
<th
className="cursor-pointer"
onClick={() => handleSort('gateway')}
>
<th style={{width: '180px', whiteSpace: 'nowrap', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="cursor-pointer align-middle"
onClick={() => handleSort('gateway')}>
Gateway
{sortField === 'gateway' && (
<IconChevronDown className={`ms-1 ${sortOrder === 'desc' ? 'rotate-180' : ''}`} />
)}
</th>
<th>Описание</th>
<th className="w-1">Действия</th>
<th style={{minWidth: '180px', maxWidth: '300px', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="align-middle">Описание</th>
<th className="w-1 align-middle text-end" style={{width: '110px'}}></th>
</tr>
</thead>
<tbody>
{filteredFilters.map((filter, index) => (
<tr key={index}>
<td>
<tr key={index} style={{verticalAlign: 'middle', height: '48px'}}>
<td className="align-middle font-monospace" style={{fontSize: '15px'}}>
{editingFilter === filter.community ? (
<input
ref={editInputRef}
@@ -448,12 +444,13 @@ function FilterManager() {
}
})}
onKeyDown={(e) => handleEditKeyDown(e, filter.community)}
style={{minWidth: '120px'}}
/>
) : (
<span className="font-monospace">{filter.community}</span>
<span>{filter.community}</span>
)}
</td>
<td>
<td className="align-middle" style={{fontSize: '15px'}}>
{editingFilter === filter.community ? (
<input
type="text"
@@ -467,12 +464,13 @@ function FilterManager() {
}
})}
onKeyDown={(e) => handleEditKeyDown(e, filter.community)}
style={{minWidth: '120px'}}
/>
) : (
<span className="badge bg-primary">{filter.gateway}</span>
<span className="badge bg-blue-lt text-blue" style={{fontSize: '15px', letterSpacing: '0.5px'}}>{filter.gateway}</span>
)}
</td>
<td>
<td className="align-middle text-muted" style={{fontSize: '14px', maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>
{editingFilter === filter.community ? (
<input
type="text"
@@ -486,13 +484,14 @@ function FilterManager() {
}
})}
onKeyDown={(e) => handleEditKeyDown(e, filter.community)}
style={{minWidth: '120px'}}
/>
) : (
<span>{filter.description}</span>
)}
</td>
<td>
<div className="btn-list">
<td className="align-middle text-end" style={{paddingRight: '0.5rem'}}>
<div className="btn-list mb-0" style={{gap: '0.25rem'}}>
{editingFilter === filter.community ? (
<>
<button