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' && (
|
||||
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||
<div className="modal-dialog modal-lg">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Упрощённый режим управления фильтрами</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setMode('advanced')}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{simpleError && (
|
||||
<div className="alert alert-danger py-2" role="alert">{simpleError}</div>
|
||||
)}
|
||||
{simpleSuccess && (
|
||||
<div className="alert alert-success py-2" role="alert">{simpleSuccess}</div>
|
||||
)}
|
||||
<div className="table-responsive mb-3">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '25%' }}>COMMUNITY</th>
|
||||
<th style={{ width: '25%' }}>GATEWAY</th>
|
||||
<th style={{ width: '35%' }}>ОПИСАНИЕ</th>
|
||||
<th style={{ width: '15%' }} className="text-end">ДЕЙСТВИЯ</th>
|
||||
{mode === 'simple' ? (
|
||||
<div className="card mb-4">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
<IconFilter className="me-2" /> Фильтры (упрощённый режим)
|
||||
</h3>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
{simpleError && (
|
||||
<div className="alert alert-danger py-2" role="alert">{simpleError}</div>
|
||||
)}
|
||||
{simpleSuccess && (
|
||||
<div className="alert alert-success py-2" role="alert">{simpleSuccess}</div>
|
||||
)}
|
||||
<div className="table-responsive mb-3">
|
||||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '25%' }}>COMMUNITY</th>
|
||||
<th style={{ width: '25%' }}>GATEWAY</th>
|
||||
<th style={{ width: '35%' }}>ОПИСАНИЕ</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>
|
||||
</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>
|
||||
))
|
||||
)}
|
||||
</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>
|
||||
))
|
||||
)}
|
||||
</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="modal-footer">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => setMode('advanced')}>
|
||||
Закрыть
|
||||
<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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user