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

унификацяи стилей
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m45s
Details

Browse Source
This commit is contained in:
denozord
2025-07-14 08:38:48 +07:00
parent 07ff184ef4
commit 9af7d1081a
1 changed files with 48 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/FilterManager.jsx
+48 -69
View File
@@ -356,80 +356,59 @@ function FilterManager() {
)}
{/* Фильтры и поиск */}
<div className="card mb-4">
<div className="card-body">
<div className="row g-3">
<div className="col-md-4">
<div className="input-group">
<span className="input-group-text">
<IconSearch />
</span>
<input
type="text"
className="form-control"
placeholder="Поиск по community, gateway или описанию..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
<div className="col-md-3">
<select
className="form-select"
value={filterGateway}
onChange={(e) => setFilterGateway(e.target.value)}
>
<option value="">Все gateway</option>
{uniqueGateways.map(gateway => (
<option key={gateway} value={gateway}>{gateway}</option>
))}
</select>
</div>
<div className="col-md-2">
<button
className="btn btn-outline-secondary w-100"
onClick={fetchFilters}
disabled={loading}
>
<IconRefresh className="me-2" />
Обновить
</button>
<div className="card w-100">
<div className="card-header d-flex justify-content-between align-items-center">
<h3 className="card-title mb-0">Список фильтров</h3>
<div className="d-flex gap-2 w-75">
{/* Фильтры и поиск */}
<select className="form-select w-auto" value={filterGateway} onChange={e => setFilterGateway(e.target.value)}>
<option value="">Все gateway</option>
{uniqueGateways.map(gateway => (
<option key={gateway} value={gateway}>{gateway}</option>
))}
</select>
<div className="input-icon flex-grow-1">
<span className="input-icon-addon">
<IconSearch size={18} />
</span>
<input
type="text"
className="form-control"
placeholder="Поиск по фильтрам..."
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
</div>
</div>
</div>
</div>
{/* Таблица фильтров */}
<div className="card">
<div className="card-header">
<h3 className="card-title">Фильтры frouting ({filteredFilters.length})</h3>
</div>
<div className="table-responsive">
<table className="table table-vcenter table-sm card-table align-middle">
<table className="table card-table table-vcenter table-nowrap mb-0">
<thead>
<tr>
<th style={{width: '180px', whiteSpace: 'nowrap', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="cursor-pointer align-middle"
onClick={() => handleSort('community')}>
Community
<th style={{cursor:'pointer'}} onClick={() => handleSort('community')}>
COMMUNITY
{sortField === 'community' && (
<IconChevronDown className={`ms-1 ${sortOrder === 'desc' ? 'rotate-180' : ''}`} />
<span className="ms-1">
{sortOrder === 'asc' ? '▲' : '▼'}
</span>
)}
</th>
<th style={{width: '180px', whiteSpace: 'nowrap', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="cursor-pointer align-middle"
onClick={() => handleSort('gateway')}>
Gateway
<th style={{cursor:'pointer'}} onClick={() => handleSort('gateway')}>
GATEWAY
{sortField === 'gateway' && (
<IconChevronDown className={`ms-1 ${sortOrder === 'desc' ? 'rotate-180' : ''}`} />
<span className="ms-1">
{sortOrder === 'asc' ? '▲' : '▼'}
</span>
)}
</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>
<th style={{minWidth: '180px', maxWidth: '300px'}}>DESCRIPTION</th>
<th className="text-end w-1" style={{ minWidth: 110 }}></th>
</tr>
</thead>
<tbody>
{filteredFilters.map((filter, index) => (
<tr key={index} style={{verticalAlign: 'middle', height: '48px'}}>
<td className="align-middle font-monospace" style={{fontSize: '15px'}}>
<tr key={index}>
<td className="font-monospace align-middle" style={{fontSize: '15px'}}>
{editingFilter === filter.community ? (
<input
ref={editInputRef}
@@ -450,7 +429,7 @@ function FilterManager() {
<span>{filter.community}</span>
)}
</td>
<td className="align-middle" style={{fontSize: '15px'}}>
<td className="align-middle text-center" style={{fontSize: '15px'}}>
{editingFilter === filter.community ? (
<input
type="text"
@@ -490,36 +469,36 @@ function FilterManager() {
<span>{filter.description}</span>
)}
</td>
<td className="align-middle text-end" style={{paddingRight: '0.5rem'}}>
<div className="btn-list mb-0" style={{gap: '0.25rem'}}>
<td className="text-end w-1 align-middle" style={{ minWidth: 110 }}>
<div className="btn-list gap-1 mb-0">
{editingFilter === filter.community ? (
<>
<button
className="btn btn-sm btn-success"
className="btn btn-icon btn-sm btn-success rounded"
onClick={() => handleSaveEdit(filter.community)}
>
<IconCheck />
<IconCheck size={18} />
</button>
<button
className="btn btn-sm btn-secondary"
className="btn btn-icon btn-sm btn-secondary rounded"
onClick={() => handleCancelEdit(filter.community)}
>
<IconX />
<IconX size={18} />
</button>
</>
) : (
<>
<button
className="btn btn-sm btn-outline-primary"
className="btn btn-icon btn-sm btn-outline-primary rounded"
onClick={() => startEdit(filter)}
>
<IconEdit />
<IconEdit size={18} />
</button>
<button
className="btn btn-sm btn-outline-danger"
className="btn btn-icon btn-sm btn-outline-danger rounded"
onClick={() => handleDelete(filter)}
>
<IconTrash />
<IconTrash size={18} />
</button>
</>
)}