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

feat: Добавление функциональности массового выбора и действий в компоненты ASNsNewManager, DomainsNewManager и IPRangesManager. Реализованы функции для выбора всех элементов, удаления и экспорта выбранных записей, а также добавлены новые иконки и улучшены стили для повышения удобства использования.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m45s
Details

Browse Source
This commit is contained in:
denozord
2025-11-12 10:40:31 +07:00
parent ae88a3a46a
commit 2160e58166
4 changed files with 410 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ASNsNewManager.jsx
+134 -73
View File
@@ -19,7 +19,8 @@ import {
IconFileText,
IconFilter,
IconArrowUp,
IconArrowDown
IconArrowDown,
IconCopy
} from '@tabler/icons-react';
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
import S3MetaBar from './components/S3MetaBar.jsx';
@@ -37,6 +38,8 @@ import ImportModal from './components/ImportModal.jsx';
import QuickAddBar from './components/QuickAddBar.jsx';
import AccordionCard from './components/AccordionCard.jsx';
import SavedFilters from './components/SavedFilters.jsx';
import BulkActionsBar from './components/BulkActionsBar.jsx';
import Tooltip from './components/Tooltip.jsx';
import { getAsnName, getAsnNameSync } from './lib/asn.js';
const API_URL = '/api';
@@ -67,6 +70,7 @@ function ASNsNewManager() {
const editInputRef = useRef(null);
const pageSize = 10;
const [asnNameMap, setAsnNameMap] = useState({});
const [selectedItems, setSelectedItems] = useState(new Set());
// Справочник community для подсказок
const [communities, setCommunities] = useState([]);
@@ -161,6 +165,65 @@ function ASNsNewManager() {
const handleDeleteItem = (asnToDelete) => {
setItems(items.filter(i => i.asn !== asnToDelete));
setSelectedItems(prev => {
const next = new Set(prev);
next.delete(asnToDelete);
return next;
});
};
// Функции для работы с выбранными элементами
const toggleSelectItem = (asn) => {
setSelectedItems(prev => {
const next = new Set(prev);
if (next.has(asn)) {
next.delete(asn);
} else {
next.add(asn);
}
return next;
});
};
const selectAll = () => {
setSelectedItems(new Set(paginatedItems.map(i => i.asn)));
};
const deselectAll = () => {
setSelectedItems(new Set());
};
const handleBulkDelete = () => {
if (selectedItems.size === 0) return;
const count = selectedItems.size;
setItems(items.filter(i => !selectedItems.has(i.asn)));
setSelectedItems(new Set());
window.notify?.success?.(`Удалено ${count} записей`);
};
const handleBulkExport = () => {
if (selectedItems.size === 0) return;
const selected = items.filter(i => selectedItems.has(i.asn));
const header = ['asn', 'community'];
const csv = [header, ...selected.map(i => [i.asn, i.community])]
.map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(','))
.join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `asns_selected_${new Date().toISOString().split('T')[0]}.csv`;
a.click();
URL.revokeObjectURL(url);
window.notify?.success?.(`Экспортировано ${selectedItems.size} записей`);
};
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text).then(() => {
window.notify?.success?.('Скопировано в буфер обмена');
}).catch(() => {
window.notify?.error?.('Не удалось скопировать');
});
};
const confirmDelete = (item) => {
@@ -491,66 +554,6 @@ function ASNsNewManager() {
/>
)}
/>
{/* Статистические карточки */}
<div className="row g-3 mb-4">
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in">
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-blue text-white avatar">
<IconHash size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Всего ASN</div>
<div className="text-muted">
<span className="h2 m-0">{items.length}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in" style={{animationDelay: '0.1s'}}>
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-green text-white avatar">
<IconFilter size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Отфильтровано</div>
<div className="text-muted">
<span className="h2 m-0">{filtered.length}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in" style={{animationDelay: '0.2s'}}>
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-purple text-white avatar">
<IconHash size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Уникальных Community</div>
<div className="text-muted">
<span className="h2 m-0">{allCommunities.length}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-3">
{/* Classic Add New ASN Card (improved) */}
@@ -666,18 +669,32 @@ function ASNsNewManager() {
</div>
<div className="col-lg-9">
{/* BulkActionsBar */}
<BulkActionsBar
selectedCount={selectedItems.size}
totalCount={paginatedItems.length}
onSelectAll={selectAll}
onDeselectAll={deselectAll}
onDelete={selectedItems.size > 0 ? () => {
if (confirm(`Удалить ${selectedItems.size} записей?`)) {
handleBulkDelete();
}
} : null}
onExport={selectedItems.size > 0 ? handleBulkExport : null}
/>
<div className="card">
<div className="card-header d-flex justify-content-between align-items-center">
<div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
<h3 className="card-title mb-0">Список ASN <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
<div className="d-flex gap-2 w-50 flex-wrap">
<div className="d-flex gap-2 flex-wrap">
<SavedFilters
pageKey="asns"
currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
onApplyFilter={(filters) => {
if (filters.searchTerm !== undefined) setSearchTerm(filters.searchTerm);
if (filters.filterCommunity !== undefined) setFilterCommunity(filters.filterCommunity);
if (filters.sortField !== undefined) setSortField(filters.sortField);
if (filters.sortOrder !== undefined) setSortOrder(filters.sortOrder);
setSearchTerm(filters.searchTerm || '');
setFilterCommunity(filters.filterCommunity || '');
setSortField(filters.sortField || 'asn');
setSortOrder(filters.sortOrder || 'asc');
setCurrentPage(1);
}}
/>
@@ -763,6 +780,21 @@ function ASNsNewManager() {
<table className="table card-table table-vcenter table-nowrap mb-0">
<thead>
<tr>
<th style={{width: '40px'}}>
<input
type="checkbox"
className="form-check-input"
checked={paginatedItems.length > 0 && paginatedItems.every(i => selectedItems.has(i.asn))}
onChange={(e) => {
if (e.target.checked) {
selectAll();
} else {
deselectAll();
}
}}
title="Выбрать все на странице"
/>
</th>
<th className="cursor-pointer user-select-none" onClick={() => handleSort('asn')}>
<div className="d-flex align-items-center">
<IconHash size={16} className="me-1 text-muted" />
@@ -788,16 +820,34 @@ function ASNsNewManager() {
)}
</div>
</th>
<th className="text-end"> </th>
<th className="text-end">Действия</th>
</tr>
</thead>
<tbody>
{paginatedItems.map((item, idx) => (
<tr key={item.asn} className={editingAsn === item.asn ? 'table-active' : ''} style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}>
<tr key={item.asn} className={editingAsn === item.asn ? 'table-active' : (selectedItems.has(item.asn) ? 'table-selected' : '')} style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}>
<td>
<input
type="checkbox"
className="form-check-input"
checked={selectedItems.has(item.asn)}
onChange={() => toggleSelectItem(item.asn)}
onClick={(e) => e.stopPropagation()}
/>
</td>
<td className="font-monospace" title="ASN">
<div className="d-flex align-items-center">
<IconHash size={16} className="me-2 text-muted" />
<span>{item.asn}</span>
<Tooltip content="Копировать ASN">
<button
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
onClick={() => copyToClipboard(item.asn)}
aria-label="Копировать"
>
<IconCopy size={14} />
</button>
</Tooltip>
</div>
</td>
<td title={asnNameMap[item.asn] || ''}>
@@ -819,13 +869,24 @@ function ASNsNewManager() {
className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
style={{ width: '150px' }}
/>
<button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.asn)} disabled={!isValidCommunity(editingValue)} title="Сохранить (Enter)"><IconCheck size={16} /></button>
<button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit} title="Отмена (Esc)"><IconX size={16} /></button>
<Tooltip content="Сохранить (Enter)">
<button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.asn)} disabled={!isValidCommunity(editingValue)}><IconCheck size={16} /></button>
</Tooltip>
<Tooltip content="Отмена (Esc)">
<button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit}><IconX size={16} /></button>
</Tooltip>
</>
) : (
<>
<button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)}><IconEdit size={16} /></button>
<button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)}><IconTrash size={16} /></button>
<Tooltip content="Редактировать">
<button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)}><IconEdit size={16} /></button>
</Tooltip>
<Tooltip content="Копировать">
<button className="btn btn-outline-secondary btn-icon btn-sm me-1" aria-label="Копировать" onClick={() => copyToClipboard(`${item.asn} ${item.community}`)}><IconCopy size={16} /></button>
</Tooltip>
<Tooltip content="Удалить">
<button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)}><IconTrash size={16} /></button>
</Tooltip>
</>
)}
</td>
frontend/src/DomainsNewManager.jsx
+76 -127
View File
@@ -23,7 +23,8 @@ import {
IconTrendingUp,
IconUsers,
IconArrowUp,
IconArrowDown
IconArrowDown,
IconCopy
} from '@tabler/icons-react';
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
import PageHeader from './components/PageHeader.jsx';
@@ -44,6 +45,7 @@ import AccordionCard from './components/AccordionCard.jsx';
import SavedFilters from './components/SavedFilters.jsx';
import BulkActionsBar from './components/BulkActionsBar.jsx';
import FormField from './components/FormField.jsx';
import Tooltip from './components/Tooltip.jsx';
import { useToast } from './components/ToastContainer.jsx';
const API_URL = '/api';
@@ -171,6 +173,19 @@ function DomainsNewManager() {
const handleDeleteItem = (domainNameToDelete) => {
setItems(items.filter(i => i.domain !== domainNameToDelete));
setSelectedDomains(prev => {
const next = new Set(prev);
next.delete(domainNameToDelete);
return next;
});
};
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text).then(() => {
toast.success('Скопировано в буфер обмена');
}).catch(() => {
toast.error('Не удалось скопировать');
});
};
const confirmDelete = (item) => {
@@ -448,10 +463,11 @@ function DomainsNewManager() {
const handleBulkDelete = () => {
if (selectedDomains.size === 0) return;
const count = selectedDomains.size;
const newItems = items.filter(i => !selectedDomains.has(i.domain));
setItems(newItems);
setSelectedDomains(new Set());
toast.success(`Удалено ${selectedDomains.size} доменов`);
toast.success(`Удалено ${count} доменов`);
};
const handleBulkExport = () => {
@@ -536,96 +552,6 @@ function DomainsNewManager() {
)}
/>
{/* Статистические карточки */}
<div className="row g-3 mb-4">
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in">
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-blue text-white avatar">
<IconWorld size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Всего доменов</div>
<div className="text-muted">
<span className="h2 mb-0">{items.length}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in" style={{animationDelay: '0.1s'}}>
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-green text-white avatar">
<IconFilter size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Отфильтровано</div>
<div className="text-muted">
<span className="h2 mb-0">{filtered.length}</span>
{filtered.length !== items.length && (
<span className="text-muted small ms-1">
({items.length - filtered.length} скрыто)
</span>
)}
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in" style={{animationDelay: '0.2s'}}>
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-purple text-white avatar">
<IconUsers size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Уникальных Community</div>
<div className="text-muted">
<span className="h2 mb-0">{allCommunities.length}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in" style={{animationDelay: '0.3s'}}>
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-orange text-white avatar">
<IconTrendingUp size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Выбрано</div>
<div className="text-muted">
<span className="h2 mb-0">{selectedDomains.size}</span>
{selectedDomains.size > 0 && (
<span className="text-muted small ms-1">
({Math.round((selectedDomains.size / filtered.length) * 100)}%)
</span>
)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-3">
{/* Classic Add New Domain Card (improved) */}
@@ -908,14 +834,14 @@ function DomainsNewManager() {
)}
</div>
</th>
<th className="text-end"> </th>
<th className="text-end">Действия</th>
</tr>
</thead>
<tbody>
{paginatedItems.map((item, idx) => (
<tr
key={item.domain}
className={editingDomain === item.domain ? 'table-active' : ''}
className={editingDomain === item.domain ? 'table-active' : (selectedDomains.has(item.domain) ? 'table-selected' : '')}
style={{
animation: `fadeIn 0.3s ease ${idx * 0.02}s both`
}}
@@ -927,12 +853,22 @@ function DomainsNewManager() {
checked={selectedDomains.has(item.domain)}
onChange={() => handleToggleSelect(item.domain)}
aria-label={`Выбрать ${item.domain}`}
onClick={(e) => e.stopPropagation()}
/>
</td>
<td>
<div className="d-flex align-items-center">
<IconWorld size={16} className="me-2 text-muted" />
<span className="font-monospace">{item.domain}</span>
<Tooltip content="Копировать домен">
<button
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
onClick={() => copyToClipboard(item.domain)}
aria-label="Копировать"
>
<IconCopy size={14} />
</button>
</Tooltip>
</div>
</td>
<td>
@@ -952,42 +888,55 @@ function DomainsNewManager() {
className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
style={{ width: '150px' }}
/>
<button
className="btn btn-success btn-icon btn-sm"
onClick={() => handleSaveEdit(item.domain)}
disabled={!isValidCommunity(editingValue)}
aria-label="Сохранить"
title="Сохранить (Enter)"
>
<IconCheck size={16} />
</button>
<button
className="btn btn-secondary btn-icon btn-sm"
onClick={handleCancelEdit}
aria-label="Отмена"
title="Отмена (Esc)"
>
<IconX size={16} />
</button>
<Tooltip content="Сохранить (Enter)">
<button
className="btn btn-success btn-icon btn-sm"
onClick={() => handleSaveEdit(item.domain)}
disabled={!isValidCommunity(editingValue)}
aria-label="Сохранить"
>
<IconCheck size={16} />
</button>
</Tooltip>
<Tooltip content="Отмена (Esc)">
<button
className="btn btn-secondary btn-icon btn-sm"
onClick={handleCancelEdit}
aria-label="Отмена"
>
<IconX size={16} />
</button>
</Tooltip>
</>
) : (
<>
<button
className="btn btn-outline-primary btn-icon btn-sm"
aria-label="Редактировать"
onClick={() => handleEdit(item)}
title="Редактировать community"
>
<IconEdit size={16} />
</button>
<button
className="btn btn-outline-danger btn-icon btn-sm"
aria-label="Удалить"
onClick={() => confirmDelete(item)}
title="Удалить домен"
>
<IconTrash size={16} />
</button>
<Tooltip content="Редактировать">
<button
className="btn btn-outline-primary btn-icon btn-sm"
aria-label="Редактировать"
onClick={() => handleEdit(item)}
>
<IconEdit size={16} />
</button>
</Tooltip>
<Tooltip content="Копировать">
<button
className="btn btn-outline-secondary btn-icon btn-sm"
aria-label="Копировать"
onClick={() => copyToClipboard(`${item.domain} ${item.community}`)}
>
<IconCopy size={16} />
</button>
</Tooltip>
<Tooltip content="Удалить">
<button
className="btn btn-outline-danger btn-icon btn-sm"
aria-label="Удалить"
onClick={() => confirmDelete(item)}
>
<IconTrash size={16} />
</button>
</Tooltip>
</>
)}
</div>
frontend/src/IPRangesManager.jsx
+192 -112
View File
@@ -20,7 +20,9 @@ import {
IconFilter,
IconArrowUp,
IconArrowDown,
IconNetwork
IconNetwork,
IconCopy,
IconCopyCheck
} from '@tabler/icons-react';
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
import S3MetaBar from './components/S3MetaBar.jsx';
@@ -38,6 +40,8 @@ import ImportModal from './components/ImportModal.jsx';
import QuickAddBar from './components/QuickAddBar.jsx';
import AccordionCard from './components/AccordionCard.jsx';
import SavedFilters from './components/SavedFilters.jsx';
import BulkActionsBar from './components/BulkActionsBar.jsx';
import Tooltip from './components/Tooltip.jsx';
const API_URL = '/api';
@@ -66,6 +70,7 @@ function IPRangesManager() {
const [filterCommunity, setFilterCommunity] = useState('');
const editInputRef = useRef(null);
const pageSize = 10;
const [selectedItems, setSelectedItems] = useState(new Set());
// Справочник community для подсказок
const [communities, setCommunities] = useState([]);
@@ -170,6 +175,70 @@ function IPRangesManager() {
const handleDeleteItem = (ipRangeToDelete) => {
setItems(items.filter(i => i.ipRange !== ipRangeToDelete));
setSelectedItems(prev => {
const next = new Set(prev);
next.delete(ipRangeToDelete);
return next;
});
};
// Функции для работы с выбранными элементами
const toggleSelectItem = (ipRange) => {
setSelectedItems(prev => {
const next = new Set(prev);
if (next.has(ipRange)) {
next.delete(ipRange);
} else {
next.add(ipRange);
}
return next;
});
};
const selectAll = () => {
setSelectedItems(new Set(paginatedItems.map(i => i.ipRange)));
};
const deselectAll = () => {
setSelectedItems(new Set());
};
const handleBulkDelete = () => {
if (selectedItems.size === 0) return;
const count = selectedItems.size;
setItems(items.filter(i => !selectedItems.has(i.ipRange)));
setSelectedItems(new Set());
window.notify?.success?.(`Удалено ${count} записей`);
};
const handleBulkExport = () => {
if (selectedItems.size === 0) return;
const selected = items.filter(i => selectedItems.has(i.ipRange));
const header = ['ipRange', 'community'];
const csv = [header, ...selected.map(i => [i.ipRange, i.community])]
.map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(','))
.join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `ip_ranges_selected_${new Date().toISOString().split('T')[0]}.csv`;
a.click();
URL.revokeObjectURL(url);
window.notify?.success?.(`Экспортировано ${selectedItems.size} записей`);
};
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text).then(() => {
window.notify?.success?.('Скопировано в буфер обмена');
}).catch(() => {
window.notify?.error?.('Не удалось скопировать');
});
};
const duplicateItem = (item) => {
setItems([...items, { ...item, ipRange: `${item.ipRange.split('/')[0]}/24` }]);
window.notify?.success?.('Запись продублирована');
};
const confirmDelete = (item) => {
@@ -745,66 +814,6 @@ function IPRangesManager() {
/>
)}
/>
{/* Статистические карточки */}
<div className="row g-3 mb-4">
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in">
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-blue text-white avatar">
<IconNetwork size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Всего диапазонов</div>
<div className="text-muted">
<span className="h2 m-0">{items.length}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in" style={{animationDelay: '0.1s'}}>
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-green text-white avatar">
<IconFilter size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Отфильтровано</div>
<div className="text-muted">
<span className="h2 m-0">{filtered.length}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-sm-6 col-lg-3">
<div className="card card-sm animate-in" style={{animationDelay: '0.2s'}}>
<div className="card-body">
<div className="row align-items-center">
<div className="col-auto">
<span className="bg-purple text-white avatar">
<IconHash size={24} />
</span>
</div>
<div className="col">
<div className="font-weight-medium">Уникальных Community</div>
<div className="text-muted">
<span className="h2 m-0">{allCommunities.length}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-3">
{/* Classic Add New Item Card (improved) */}
@@ -919,54 +928,81 @@ function IPRangesManager() {
</div>
<div className="col-lg-9">
{/* BulkActionsBar */}
<BulkActionsBar
selectedCount={selectedItems.size}
totalCount={paginatedItems.length}
onSelectAll={selectAll}
onDeselectAll={deselectAll}
onDelete={selectedItems.size > 0 ? () => {
if (confirm(`Удалить ${selectedItems.size} записей?`)) {
handleBulkDelete();
}
} : null}
onExport={selectedItems.size > 0 ? handleBulkExport : null}
/>
<div className="card">
<div className="card-header d-flex justify-content-between align-items-center">
<div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
<h3 className="card-title mb-0">Список IP-диапазонов <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
<div className="d-flex gap-2 w-50">
{/* Фильтр по community */}
<select
className="form-select w-auto"
value={filterCommunity}
onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
title={(() => {
const meta = communities.find(c => c.value === filterCommunity);
if (!meta) return 'Все community';
const name = meta.name ? meta.name + ' — ' : '';
const desc = meta.description || '';
const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
return name + desc + tags;
})()}
>
<option value="">Все community</option>
{allCommunities.map(community => {
const meta = communities.find(c => c.value === community);
const label = meta && meta.name ? `${community} — ${meta.name}` : community;
const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
return (
<option key={community} value={community} title={title}>{label}</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="Поиск IP-диапазона..."
value={searchTerm}
onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
aria-label="Поиск IP-диапазона"
/>
<div className="d-flex gap-2 flex-wrap">
<SavedFilters
pageKey="ip-ranges"
currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
onApplyFilter={(filters) => {
setSearchTerm(filters.searchTerm || '');
setFilterCommunity(filters.filterCommunity || '');
setSortField(filters.sortField || 'ipRange');
setSortOrder(filters.sortOrder || 'asc');
setCurrentPage(1);
}}
/>
<div className="d-flex gap-2 w-auto flex-grow-1" style={{minWidth: '300px'}}>
{/* Фильтр по community */}
<select
className="form-select w-auto"
value={filterCommunity}
onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
title={(() => {
const meta = communities.find(c => c.value === filterCommunity);
if (!meta) return 'Все community';
const name = meta.name ? meta.name + ' — ' : '';
const desc = meta.description || '';
const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
return name + desc + tags;
})()}
>
<option value="">Все community</option>
{allCommunities.map(community => {
const meta = communities.find(c => c.value === community);
const label = meta && meta.name ? `${community} — ${meta.name}` : community;
const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
return (
<option key={community} value={community} title={title}>{label}</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="Поиск IP-диапазона..."
value={searchTerm}
onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
aria-label="Поиск IP-диапазона"
/>
</div>
</div>
</div>
<div>
<button className="btn btn-outline-primary" onClick={() => setAnalyzeOpen(true)}>
<IconDatabase className="icon me-2" />
Анализ
</button>
<Tooltip content="Анализ и суммаризация IP-диапазонов">
<button className="btn btn-outline-primary" onClick={() => setAnalyzeOpen(true)}>
<IconDatabase className="icon me-2" />
Анализ
</button>
</Tooltip>
</div>
</div>
{/* Мета-информация будет показана внизу карточки */}
@@ -986,6 +1022,21 @@ function IPRangesManager() {
<table className="table card-table table-vcenter table-nowrap mb-0">
<thead>
<tr>
<th style={{width: '40px'}}>
<input
type="checkbox"
className="form-check-input"
checked={paginatedItems.length > 0 && paginatedItems.every(i => selectedItems.has(i.ipRange))}
onChange={(e) => {
if (e.target.checked) {
selectAll();
} else {
deselectAll();
}
}}
title="Выбрать все на странице"
/>
</th>
<th className="cursor-pointer user-select-none" onClick={() => handleSort('ipRange')}>
<div className="d-flex align-items-center">
<IconNetwork size={16} className="me-1 text-muted" />
@@ -1008,16 +1059,34 @@ function IPRangesManager() {
)}
</div>
</th>
<th className="text-end"> </th>
<th className="text-end">Действия</th>
</tr>
</thead>
<tbody>
{paginatedItems.map((item, idx) => (
<tr key={item.ipRange} className={editingIp === item.ipRange ? 'table-active' : ''} style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}>
<tr key={item.ipRange} className={editingIp === item.ipRange ? 'table-active' : (selectedItems.has(item.ipRange) ? 'table-selected' : '')} style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}>
<td>
<input
type="checkbox"
className="form-check-input"
checked={selectedItems.has(item.ipRange)}
onChange={() => toggleSelectItem(item.ipRange)}
onClick={(e) => e.stopPropagation()}
/>
</td>
<td className="font-monospace" title="CIDR">
<div className="d-flex align-items-center">
<IconNetwork size={16} className="me-2 text-muted" />
<span>{item.ipRange}</span>
<Tooltip content="Копировать IP-диапазон">
<button
className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
onClick={() => copyToClipboard(item.ipRange)}
aria-label="Копировать"
>
<IconCopy size={14} />
</button>
</Tooltip>
</div>
</td>
<td>{renderCommunityBadge(item.community)}</td>
@@ -1032,13 +1101,24 @@ function IPRangesManager() {
style={{ width: '150px' }}
onKeyDown={(e) => handleEditKeyDown(e, item.ipRange)}
/>
<button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.ipRange)} disabled={!isValidCommunity(editingValue)} title="Сохранить (Enter)"><IconCheck size={16} /></button>
<button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit} title="Отмена (Esc)"><IconX size={16} /></button>
<Tooltip content="Сохранить (Enter)">
<button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.ipRange)} disabled={!isValidCommunity(editingValue)}><IconCheck size={16} /></button>
</Tooltip>
<Tooltip content="Отмена (Esc)">
<button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit}><IconX size={16} /></button>
</Tooltip>
</>
) : (
<>
<button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)}><IconEdit size={16} /></button>
<button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)}><IconTrash size={16} /></button>
<Tooltip content="Редактировать">
<button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)}><IconEdit size={16} /></button>
</Tooltip>
<Tooltip content="Копировать">
<button className="btn btn-outline-secondary btn-icon btn-sm me-1" aria-label="Копировать" onClick={() => copyToClipboard(`${item.ipRange} ${item.community}`)}><IconCopy size={16} /></button>
</Tooltip>
<Tooltip content="Удалить">
<button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)}><IconTrash size={16} /></button>
</Tooltip>
</>
)}
</td>
frontend/src/index.css
+8
View File
@@ -4,6 +4,14 @@
.page { min-height: 100vh; display: flex; flex-direction: column; }
.footer { margin-top: auto; }
/* Table selected row styling */
.table-selected {
background-color: rgba(32, 107, 196, 0.08) !important;
}
.table-selected:hover {
background-color: rgba(32, 107, 196, 0.12) !important;
}
/* ===== Tabler visual consistency (global overrides) ===== */
:root {
--app-gap-xs: .25rem;