refactor: Update simplified filter management UI in FilterManager to use card layout, enhancing visual consistency and user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m10s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m10s
This commit is contained in:
+106
-107
@@ -1157,120 +1157,119 @@ function FilterManager() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Модальное окно упрощённого режима */}
|
{/* Модальное окно упрощённого режима */}
|
||||||
{mode === 'simple' && (
|
{mode === 'simple' ? (
|
||||||
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
<div className="card mb-4">
|
||||||
<div className="modal-dialog modal-lg">
|
<div className="card-header">
|
||||||
<div className="modal-content">
|
<h3 className="card-title">
|
||||||
<div className="modal-header">
|
<IconFilter className="me-2" /> Фильтры (упрощённый режим)
|
||||||
<h5 className="modal-title">Упрощённый режим управления фильтрами</h5>
|
</h3>
|
||||||
<button type="button" className="btn-close" onClick={() => setMode('advanced')}></button>
|
</div>
|
||||||
</div>
|
<div className="card-body">
|
||||||
<div className="modal-body">
|
{simpleError && (
|
||||||
{simpleError && (
|
<div className="alert alert-danger py-2" role="alert">{simpleError}</div>
|
||||||
<div className="alert alert-danger py-2" role="alert">{simpleError}</div>
|
)}
|
||||||
)}
|
{simpleSuccess && (
|
||||||
{simpleSuccess && (
|
<div className="alert alert-success py-2" role="alert">{simpleSuccess}</div>
|
||||||
<div className="alert alert-success py-2" role="alert">{simpleSuccess}</div>
|
)}
|
||||||
)}
|
<div className="table-responsive mb-3">
|
||||||
<div className="table-responsive mb-3">
|
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
<thead>
|
||||||
<thead>
|
<tr>
|
||||||
<tr>
|
<th style={{ width: '25%' }}>COMMUNITY</th>
|
||||||
<th style={{ width: '25%' }}>COMMUNITY</th>
|
<th style={{ width: '25%' }}>GATEWAY</th>
|
||||||
<th style={{ width: '25%' }}>GATEWAY</th>
|
<th style={{ width: '35%' }}>ОПИСАНИЕ</th>
|
||||||
<th style={{ width: '35%' }}>ОПИСАНИЕ</th>
|
<th style={{ width: '15%' }} className="text-end">ДЕЙСТВИЯ</th>
|
||||||
<th style={{ width: '15%' }} className="text-end">ДЕЙСТВИЯ</th>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{simpleFilters.length === 0 ? (
|
||||||
|
<tr><td colSpan={4} className="text-center text-muted">Нет фильтров</td></tr>
|
||||||
|
) : (
|
||||||
|
simpleFilters.map((filter, idx) => (
|
||||||
|
<tr key={idx}>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
value={filter.community}
|
||||||
|
onChange={e => handleSimpleEditFilter(idx, 'community', e.target.value)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
value={filter.gateway}
|
||||||
|
onChange={e => handleSimpleEditFilter(idx, 'gateway', e.target.value)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
value={filter.description || ''}
|
||||||
|
onChange={e => handleSimpleEditFilter(idx, 'description', e.target.value)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="text-end">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-danger btn-icon btn-sm"
|
||||||
|
onClick={() => handleSimpleDeleteFilter(filter)}
|
||||||
|
title="Удалить фильтр"
|
||||||
|
>
|
||||||
|
<IconTrash size={16} />
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
))
|
||||||
<tbody>
|
)}
|
||||||
{simpleFilters.length === 0 ? (
|
</tbody>
|
||||||
<tr><td colSpan={4} className="text-center text-muted">Нет фильтров</td></tr>
|
</table>
|
||||||
) : (
|
</div>
|
||||||
simpleFilters.map((filter, idx) => (
|
<div className="row g-2 align-items-end mb-3">
|
||||||
<tr key={idx}>
|
<div className="col-md-4">
|
||||||
<td>
|
<input
|
||||||
<input
|
className="form-control"
|
||||||
className="form-control form-control-sm"
|
placeholder="Community"
|
||||||
value={filter.community}
|
value={simpleAddFilter.community}
|
||||||
onChange={e => handleSimpleEditFilter(idx, 'community', e.target.value)}
|
onChange={e => setSimpleAddFilter({ ...simpleAddFilter, community: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
value={filter.gateway}
|
|
||||||
onChange={e => handleSimpleEditFilter(idx, 'gateway', e.target.value)}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
value={filter.description || ''}
|
|
||||||
onChange={e => handleSimpleEditFilter(idx, 'description', e.target.value)}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td className="text-end">
|
|
||||||
<button
|
|
||||||
className="btn btn-outline-danger btn-icon btn-sm"
|
|
||||||
onClick={() => handleSimpleDeleteFilter(filter)}
|
|
||||||
title="Удалить фильтр"
|
|
||||||
>
|
|
||||||
<IconTrash size={16} />
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div className="row g-2 align-items-end mb-3">
|
|
||||||
<div className="col-md-4">
|
|
||||||
<input
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Community"
|
|
||||||
value={simpleAddFilter.community}
|
|
||||||
onChange={e => setSimpleAddFilter({ ...simpleAddFilter, community: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-4">
|
|
||||||
<input
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Gateway"
|
|
||||||
value={simpleAddFilter.gateway}
|
|
||||||
onChange={e => setSimpleAddFilter({ ...simpleAddFilter, gateway: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-3">
|
|
||||||
<input
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Описание (необязательно)"
|
|
||||||
value={simpleAddFilter.description}
|
|
||||||
onChange={e => setSimpleAddFilter({ ...simpleAddFilter, description: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-1">
|
|
||||||
<button className="btn btn-primary w-100" onClick={handleSimpleAddFilter}>
|
|
||||||
<IconPlus />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="btn btn-outline-success"
|
|
||||||
onClick={handleDeploySimpleFiltersToAll}
|
|
||||||
disabled={simpleFilters.length === 0 || simpleLoading}
|
|
||||||
>
|
|
||||||
<IconRocket className="me-2" /> Раскатать фильтры на все серверы
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer">
|
<div className="col-md-4">
|
||||||
<button type="button" className="btn btn-secondary" onClick={() => setMode('advanced')}>
|
<input
|
||||||
Закрыть
|
className="form-control"
|
||||||
|
placeholder="Gateway"
|
||||||
|
value={simpleAddFilter.gateway}
|
||||||
|
onChange={e => setSimpleAddFilter({ ...simpleAddFilter, gateway: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3">
|
||||||
|
<input
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Описание (необязательно)"
|
||||||
|
value={simpleAddFilter.description}
|
||||||
|
onChange={e => setSimpleAddFilter({ ...simpleAddFilter, description: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-1">
|
||||||
|
<button className="btn btn-primary w-100" onClick={handleSimpleAddFilter}>
|
||||||
|
<IconPlus />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-success"
|
||||||
|
onClick={handleDeploySimpleFiltersToAll}
|
||||||
|
disabled={simpleFilters.length === 0 || simpleLoading}
|
||||||
|
>
|
||||||
|
<IconRocket className="me-2" /> Раскатать фильтры на все серверы
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
// ... существующий расширенный режим ...
|
||||||
|
<>
|
||||||
|
{/* Панель статистики */}
|
||||||
|
{/* Секция управления серверами */}
|
||||||
|
{/* ... всё как было ... */}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user