refactor: Revise FilterManager layout to enhance server selection interface with improved button actions and card design, streamlining user interaction and visual presentation.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m58s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m58s
This commit is contained in:
+83
-106
@@ -942,10 +942,10 @@ function FilterManager() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="row g-3">
|
<>
|
||||||
{/* Левая колонка: список серверов */}
|
{/* Тулбар: поиск + действия для выбранного сервера */}
|
||||||
<div className="col-12 col-xl-7">
|
<div className="d-flex flex-column flex-md-row gap-2 align-items-md-center mb-3">
|
||||||
<div className="input-icon mb-2">
|
<div className="input-icon flex-grow-1" style={{ minWidth: '240px' }}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
@@ -957,55 +957,99 @@ function FilterManager() {
|
|||||||
<IconSearch />
|
<IconSearch />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="list-group list-group-flush border rounded">
|
<div className="d-flex flex-wrap gap-2">
|
||||||
{activeServers.length > 0 && (
|
<button
|
||||||
<div className="list-group-header px-3 pt-3 pb-2 text-uppercase text-muted small">Активные</div>
|
className="btn btn-outline-primary"
|
||||||
)}
|
onClick={handlePreviewConfig}
|
||||||
|
disabled={!selectedServer || serverFilters.length === 0}
|
||||||
|
>
|
||||||
|
<IconEye className="icon" />
|
||||||
|
Просмотр
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-outline-primary"
|
||||||
|
onClick={copyConfigToClipboard}
|
||||||
|
disabled={!selectedServer || serverFilters.length === 0}
|
||||||
|
>
|
||||||
|
<IconCopy className="icon" />
|
||||||
|
Копировать
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-success"
|
||||||
|
onClick={() => selectedServer && handleSaveServerConfig(selectedServer.id)}
|
||||||
|
disabled={!selectedServer || loading || serverFilters.length === 0}
|
||||||
|
>
|
||||||
|
<IconDeviceFloppy className="icon" />
|
||||||
|
Сохранить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Горизонтальный список серверов */}
|
||||||
|
<div className="d-flex flex-wrap gap-2 mb-2">
|
||||||
{activeServers.map(server => (
|
{activeServers.map(server => (
|
||||||
<button
|
<div
|
||||||
key={server.id}
|
key={server.id}
|
||||||
className={`list-group-item list-group-item-action d-flex align-items-center ${selectedServer?.id === server.id ? 'active' : ''}`}
|
className={`card card-sm cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
|
||||||
|
style={{ minWidth: '220px', maxWidth: '260px' }}
|
||||||
onClick={() => setSelectedServer(server)}
|
onClick={() => setSelectedServer(server)}
|
||||||
>
|
>
|
||||||
<span className="avatar bg-primary-lt me-3">
|
<div className="card-body d-flex align-items-start gap-2">
|
||||||
|
<span className="avatar bg-primary-lt">
|
||||||
<IconServer size={16} />
|
<IconServer size={16} />
|
||||||
</span>
|
</span>
|
||||||
<div className="flex-grow-1 text-start">
|
<div className="flex-grow-1">
|
||||||
<div className="fw-bold">{server.name}</div>
|
<div className="d-flex align-items-center gap-2">
|
||||||
{server.description && (
|
<div className="fw-bold text-truncate" title={server.name}>{server.name}</div>
|
||||||
<div className="text-muted small text-truncate" style={{ maxWidth: '240px' }}>
|
|
||||||
{server.description}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span className="badge bg-green-lt text-green">Активен</span>
|
<span className="badge bg-green-lt text-green">Активен</span>
|
||||||
</button>
|
</div>
|
||||||
))}
|
|
||||||
{inactiveServers.length > 0 && (
|
|
||||||
<div className="list-group-header px-3 pt-3 pb-2 text-uppercase text-muted small">Неактивные</div>
|
|
||||||
)}
|
|
||||||
{inactiveServers.map(server => (
|
|
||||||
<button
|
|
||||||
key={server.id}
|
|
||||||
className={`list-group-item list-group-item-action d-flex align-items-center ${selectedServer?.id === server.id ? 'active' : ''}`}
|
|
||||||
onClick={() => setSelectedServer(server)}
|
|
||||||
>
|
|
||||||
<span className="avatar bg-secondary-lt me-3">
|
|
||||||
<IconServer size={16} />
|
|
||||||
</span>
|
|
||||||
<div className="flex-grow-1 text-start">
|
|
||||||
<div className="fw-bold">{server.name}</div>
|
|
||||||
{server.description && (
|
{server.description && (
|
||||||
<div className="text-muted small text-truncate" style={{ maxWidth: '240px' }}>
|
<div className="text-muted small text-truncate" title={server.description}>
|
||||||
{server.description}
|
{server.description}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{inactiveServers.map(server => (
|
||||||
|
<div
|
||||||
|
key={server.id}
|
||||||
|
className={`card card-sm cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
|
||||||
|
style={{ minWidth: '220px', maxWidth: '260px' }}
|
||||||
|
onClick={() => setSelectedServer(server)}
|
||||||
|
>
|
||||||
|
<div className="card-body d-flex align-items-start gap-2">
|
||||||
|
<span className="avatar bg-secondary-lt">
|
||||||
|
<IconServer size={16} />
|
||||||
|
</span>
|
||||||
|
<div className="flex-grow-1">
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
|
<div className="fw-bold text-muted text-truncate" title={server.name}>{server.name}</div>
|
||||||
<span className="badge bg-secondary-lt text-secondary">Выкл</span>
|
<span className="badge bg-secondary-lt text-secondary">Выкл</span>
|
||||||
</button>
|
</div>
|
||||||
|
{server.description && (
|
||||||
|
<div className="text-muted small text-truncate" title={server.description}>
|
||||||
|
{server.description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 text-end">
|
|
||||||
|
<div className="d-flex justify-content-between align-items-center mt-2">
|
||||||
|
<div className="text-muted small">
|
||||||
|
{selectedServer ? (
|
||||||
|
<>
|
||||||
|
Текущий сервер: <span className="fw-bold">{selectedServer.name}</span>
|
||||||
|
<span className="badge bg-blue-lt text-blue ms-2">{serverFilters.length} фильтров</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Выберите сервер для работы с фильтрами'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
className="btn btn-link px-0 text-decoration-none"
|
className="btn btn-link px-0 text-decoration-none"
|
||||||
onClick={() => setServerListModalOpen(true)}
|
onClick={() => setServerListModalOpen(true)}
|
||||||
@@ -1014,74 +1058,7 @@ function FilterManager() {
|
|||||||
Управление серверами
|
Управление серверами
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
|
|
||||||
{/* Правая колонка: детали выбранного сервера / подсказка */}
|
|
||||||
<div className="col-12 col-xl-5">
|
|
||||||
{selectedServer ? (
|
|
||||||
<div className="card card-sm">
|
|
||||||
<div className="card-body">
|
|
||||||
<div className="d-flex align-items-start mb-2">
|
|
||||||
<span className="avatar bg-primary-lt me-3">
|
|
||||||
<IconServer size={18} />
|
|
||||||
</span>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<div className="d-flex align-items-center gap-2">
|
|
||||||
<span className="fw-bold">{selectedServer.name}</span>
|
|
||||||
<span className="badge bg-green-lt text-green">Активен</span>
|
|
||||||
</div>
|
|
||||||
{selectedServer.description && (
|
|
||||||
<div className="text-muted small mt-1">{selectedServer.description}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex flex-wrap gap-3 text-muted small mb-2">
|
|
||||||
<span>Фильтров: <span className="badge bg-blue-lt text-blue">{serverFilters.length}</span></span>
|
|
||||||
<span>Поиск: <code className="text-blue">{filterSearch || '—'}</code></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="btn-list">
|
|
||||||
<button
|
|
||||||
className="btn btn-outline-primary"
|
|
||||||
onClick={handlePreviewConfig}
|
|
||||||
disabled={serverFilters.length === 0}
|
|
||||||
>
|
|
||||||
<IconEye className="icon" />
|
|
||||||
Просмотр
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="btn btn-outline-primary"
|
|
||||||
onClick={copyConfigToClipboard}
|
|
||||||
disabled={serverFilters.length === 0}
|
|
||||||
>
|
|
||||||
<IconCopy className="icon" />
|
|
||||||
Копировать
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="btn btn-success"
|
|
||||||
onClick={() => handleSaveServerConfig(selectedServer.id)}
|
|
||||||
disabled={loading || serverFilters.length === 0}
|
|
||||||
>
|
|
||||||
<IconDeviceFloppy className="icon" />
|
|
||||||
Сохранить
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="card card-sm">
|
|
||||||
<div className="card-body d-flex align-items-start">
|
|
||||||
<IconAlertTriangle className="me-3 text-warning" />
|
|
||||||
<div>
|
|
||||||
<div className="fw-bold">Сначала выберите сервер</div>
|
|
||||||
<div className="text-muted">Нажмите на сервер слева, чтобы открыть его фильтры.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user