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

refactor(Managers): integrate AddItemModal into ASNs, Domains, and IPRanges managers for improved item addition functionality and UI consistency
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m57s
Details

Browse Source
This commit is contained in:
denozord
2026-02-16 16:09:05 +07:00
parent 3a7578ce26
commit 94efee905a
4 changed files with 375 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ASNsNewManager.jsx
+39 -124
View File
@@ -41,6 +41,7 @@ import SavedFilters from './components/SavedFilters.jsx';
import BulkActionsBar from './components/BulkActionsBar.jsx';
import Tooltip from './components/Tooltip.jsx';
import Pagination from './components/Pagination.jsx';
import AddItemModal from './components/AddItemModal.jsx';
import { getAsnName, getAsnNameSync } from './lib/asn.js';
const API_URL = '/api';
@@ -63,6 +64,7 @@ function ASNsNewManager() {
const [loading, setLoading] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [itemToDelete, setItemToDelete] = useState(null);
const [addModalOpen, setAddModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [totalItems, setTotalItems] = useState(0);
const [sortField, setSortField] = useState('asn');
@@ -129,18 +131,25 @@ function ASNsNewManager() {
useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);
const handleAddItem = () => {
const asnOk = isValidAsn(newItem.asn);
const communityOk = isValidCommunity(newItem.community);
setNewInvalid({ asn: !asnOk, community: !communityOk });
const handleAddItem = (item) => {
const asn = item?.asn || newItem.asn;
const community = item?.community || newItem.community;
const asnOk = isValidAsn(asn);
const communityOk = isValidCommunity(community);
if (!asnOk || !communityOk) {
setError('Введите корректный номер ASN и числовой community.');
return;
}
setError('');
setItems([...items, { asn: String(newItem.asn).trim(), community: String(newItem.community).trim() }]);
setNewItem({ asn: '', community: '' });
setNewInvalid({ asn: false, community: false });
const newAsn = { asn: String(asn).trim(), community: String(community).trim() };
setItems([...items, newAsn]);
if (!item) {
setNewItem({ asn: '', community: '' });
setNewInvalid({ asn: false, community: false });
}
};
const handleEdit = (item) => {
@@ -523,7 +532,16 @@ function ASNsNewManager() {
]} />
)}
actions={(
<PageHeaderActions
<div className="d-flex align-items-center gap-2">
<button
className="btn btn-primary"
onClick={() => setAddModalOpen(true)}
title="Добавить новый ASN"
>
<IconPlus className="me-1" size={18} />
Добавить
</button>
<PageHeaderActions
loading={loading}
onPreview={handlePreviewDiff}
disablePreview={loading || items.length === 0}
@@ -552,125 +570,22 @@ function ASNsNewManager() {
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
}
}}
/>
/>
</div>
)}
/>
<AddItemModal
open={addModalOpen}
onClose={() => setAddModalOpen(false)}
onSubmit={handleAddItem}
type="asn"
communities={communities}
loading={loading}
/>
<div className="row">
<div className="col-lg-3">
{/* Classic Add New ASN Card (improved) */}
<div className="card card-md animate-in">
<div className="card-header bg-primary-lt">
<h3 className="card-title text-primary">
<IconPlus className="icon me-2" />
Добавить новый ASN
</h3>
</div>
<div className="card-body">
<form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
<div className="mb-3">
<label className="form-label required">Номер AS</label>
<div className="input-icon">
<span className="input-icon-addon">
<IconHash size={18} />
</span>
<input
type="text"
className={`form-control${newInvalid.asn ? ' is-invalid' : isValidAsn(newItem.asn) ? ' is-valid' : ''}`}
placeholder="12345"
value={newItem.asn}
onChange={(e) => setNewItem({ ...newItem, asn: e.target.value })}
/>
</div>
{newInvalid.asn && <div className="invalid-feedback">Только цифры</div>}
{isValidAsn(newItem.asn) && !newInvalid.asn && (<div className="valid-feedback">Корректный номер AS</div>)}
<div className="form-text text-muted small">Формат: только цифры, например 12345</div>
</div>
<div className="mb-3">
<label className="form-label required">Community</label>
<div className="input-icon">
<span className="input-icon-addon">
<IconHash size={18} />
</span>
<CommunityAutocompleteInput
value={newItem.community}
onChange={(v) => setNewItem({ ...newItem, community: v })}
communities={communities}
placeholder="Начните вводить номер или имя"
className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
useShortValue={true}
/>
</div>
{newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
{isValidCommunity(newItem.community) && !newInvalid.community && (<div className="valid-feedback">Корректный формат community</div>)}
<div className="form-text">Формат: N или N:N (например 65000:100)</div>
{(() => {
const match = communities.find(c => c.value === String(newItem.community).trim());
if (!match) return null;
return (
<div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
<div className="d-flex">
<div>
<strong>{match.name || match.value}</strong>
{match.description && <div className="text-muted small">{match.description}</div>}
{match.tags && match.tags.length > 0 && (
<div className="mt-1">
{match.tags.map((tag, idx) => (<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>))}
</div>
)}
</div>
</div>
</div>
);
})()}
</div>
<div className="form-footer">
<button type="submit" className="btn btn-primary w-100" disabled={!isValidAsn(newItem.asn) || !isValidCommunity(newItem.community)}>
<IconPlus className="icon me-2" />
Добавить ASN
</button>
</div>
</form>
</div>
</div>
{/* Дополнительные варианты */}
<AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
<QuickAddBar
placeholder={'12345 65000:100'}
help={'Вставьте строки: ASN ПРОБЕЛ COMMUNITY'}
parseLine={(line) => { const [a, c] = String(line).split(/\s+/); return { asn: (a||'').trim(), community: (c||'').trim() }; }}
validateItem={(obj) => isValidAsn(obj.asn) && isValidCommunity(obj.community)}
onApply={(list) => {
setItems(prev => {
const merged = [...prev, ...list];
const map = new Map();
for (const it of merged) {
const key = String(it.asn).trim();
if (!map.has(key)) map.set(key, { asn: key, community: String(it.community).trim() });
}
return Array.from(map.values());
});
}}
/>
<div className="card card-md border-dashed mt-3 animate-in"
style={{animationDelay: '0.15s'}}
onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
>
<div className="card-body text-center text-muted py-4">
<IconUpload size={32} className="mb-2 text-muted" />
<div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
<div className="small">Формат: ASN community</div>
</div>
</div>
</AccordionCard>
{/* Карточка действий больше не нужна — действия перенесены в page-header */}
</div>
<div className="col-lg-9">
<div className="col-12">
{/* BulkActionsBar */}
<BulkActionsBar
selectedCount={selectedItems.size}
frontend/src/DomainsNewManager.jsx
+35 -134
View File
@@ -47,6 +47,7 @@ import BulkActionsBar from './components/BulkActionsBar.jsx';
import FormField from './components/FormField.jsx';
import Tooltip from './components/Tooltip.jsx';
import Pagination from './components/Pagination.jsx';
import AddItemModal from './components/AddItemModal.jsx';
import { useToast } from './components/ToastContainer.jsx';
const API_URL = '/api';
@@ -70,6 +71,7 @@ function DomainsNewManager() {
const [loading, setLoading] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [itemToDelete, setItemToDelete] = useState(null);
const [addModalOpen, setAddModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [totalItems, setTotalItems] = useState(0);
const [sortField, setSortField] = useState('domain');
@@ -137,17 +139,23 @@ function DomainsNewManager() {
// Подгрузка при изменении страницы/поиска/фильтра
useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);
const handleAddItem = () => {
const domainOk = isValidDomain(newItem.domain);
const communityOk = isValidCommunity(newItem.community);
setNewInvalid({ domain: !domainOk, community: !communityOk });
const handleAddItem = (item) => {
// Если item передан (из модалки), используем его, иначе из state (старый способ)
const domain = item?.domain || newItem.domain;
const community = item?.community || newItem.community;
const domainOk = isValidDomain(domain);
const communityOk = isValidCommunity(community);
if (!domainOk || !communityOk) {
setError('Заполните корректный домен (example.com) и числовой community.');
return;
}
setError('');
setItems([...items, { domain: newItem.domain.trim().toLowerCase(), community: String(newItem.community).trim() }]);
setNewItem({ domain: '', community: '' });
const newDomain = { domain: domain.trim().toLowerCase(), community: String(community).trim() };
setItems([...items, newDomain]);
if (!item) setNewItem({ domain: '', community: '' }); // Сброс только если не из модалки
setNewInvalid({ domain: false, community: false });
};
@@ -520,7 +528,16 @@ function DomainsNewManager() {
/>
)}
actions={(
<PageHeaderActions
<div className="d-flex align-items-center gap-2">
<button
className="btn btn-primary"
onClick={() => setAddModalOpen(true)}
title="Добавить новый домен"
>
<IconPlus className="me-1" size={18} />
Добавить
</button>
<PageHeaderActions
loading={loading}
onPreview={handlePreviewDiff}
disablePreview={loading || items.length === 0}
@@ -550,137 +567,21 @@ function DomainsNewManager() {
}
}}
/>
</div>
)}
/>
<AddItemModal
open={addModalOpen}
onClose={() => setAddModalOpen(false)}
onSubmit={handleAddItem}
type="domain"
communities={communities}
loading={loading}
/>
<div className="row">
<div className="col-lg-3">
{/* Classic Add New Domain Card (improved) */}
<div className="card card-md animate-in">
<div className="card-header bg-primary-lt">
<h3 className="card-title text-primary">
<IconPlus className="icon me-2" />
Добавить новый домен
</h3>
</div>
<div className="card-body">
<form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
<div className="mb-3">
<label className="form-label required">Домен</label>
<div className="input-icon">
<span className="input-icon-addon">
<IconWorld size={18} />
</span>
<input
type="text"
className={`form-control${newInvalid.domain ? ' is-invalid' : isValidDomain(newItem.domain) ? ' is-valid' : ''}`}
placeholder="example.com"
value={newItem.domain}
onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
/>
</div>
{newInvalid.domain && <div className="invalid-feedback">Неверный формат домена</div>}
{isValidDomain(newItem.domain) && !newInvalid.domain && (
<div className="valid-feedback">Корректный формат домена</div>
)}
<div className="form-text text-muted small">
Формат: sub.domain.tld (например foo.example.org)
</div>
</div>
<div className="mb-3">
<label className="form-label required">Community</label>
<div className="input-icon">
<span className="input-icon-addon">
<IconHash size={18} />
</span>
<CommunityAutocompleteInput
value={newItem.community}
onChange={(v) => setNewItem({ ...newItem, community: v })}
communities={communities}
placeholder="Начните вводить номер или имя"
className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
useShortValue={true}
/>
</div>
{newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
{isValidCommunity(newItem.community) && !newInvalid.community && (
<div className="valid-feedback">Корректный формат community</div>
)}
<div className="form-text text-muted small">
Формат: N или N:N (например 65000:100)
</div>
{(() => {
const match = communities.find(c => c.value === String(newItem.community).trim());
if (!match) return null;
return (
<div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
<div className="d-flex">
<div>
<strong>{match.name || match.value}</strong>
{match.description && <div className="text-muted small">{match.description}</div>}
{match.tags && match.tags.length > 0 && (
<div className="mt-1">
{match.tags.map((tag, idx) => (
<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>
))}
</div>
)}
</div>
</div>
</div>
);
})()}
</div>
<div className="form-footer">
<button
type="submit"
className="btn btn-primary w-100"
disabled={!isValidDomain(newItem.domain) || !isValidCommunity(newItem.community)}
>
<IconPlus className="icon me-2" />
Добавить домен
</button>
</div>
</form>
</div>
</div>
{/* Дополнительные варианты */}
<AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
<QuickAddBar
placeholder={'example.com 65000:100'}
help={'Вставьте строки: DOMAIN ПРОБЕЛ COMMUNITY'}
parseLine={(line) => { const [d, c] = String(line).split(/\s+/); return { domain: (d||'').toLowerCase(), community: (c||'').trim() }; }}
validateItem={(obj) => isValidDomain(obj.domain) && isValidCommunity(obj.community)}
onApply={(list) => {
setItems(prev => {
const merged = [...prev, ...list];
const map = new Map();
for (const it of merged) {
const key = String(it.domain).trim().toLowerCase();
if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
}
return Array.from(map.values());
});
}}
/>
<div
className="card card-md border-dashed mt-3 animate-in"
style={{animationDelay: '0.15s'}}
onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
>
<div className="card-body text-center text-muted py-4">
<IconUpload size={32} className="mb-2 text-muted" />
<div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
<div className="small">Формат: domain community</div>
</div>
</div>
</AccordionCard>
</div>
<div className="col-lg-9">
<div className="col-12">
{/* Bulk Actions Bar */}
<BulkActionsBar
selectedCount={selectedDomains.size}
frontend/src/IPRangesManager.jsx
+39 -123
View File
@@ -43,6 +43,7 @@ import SavedFilters from './components/SavedFilters.jsx';
import BulkActionsBar from './components/BulkActionsBar.jsx';
import Tooltip from './components/Tooltip.jsx';
import Pagination from './components/Pagination.jsx';
import AddItemModal from './components/AddItemModal.jsx';
const API_URL = '/api';
@@ -64,6 +65,7 @@ function IPRangesManager() {
const [loading, setLoading] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [itemToDelete, setItemToDelete] = useState(null);
const [addModalOpen, setAddModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [totalItems, setTotalItems] = useState(0);
const [sortField, setSortField] = useState('ipRange');
@@ -139,18 +141,25 @@ function IPRangesManager() {
useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);
const handleAddItem = () => {
const cidrOk = isValidCidr(newItem.ipRange);
const communityOk = isValidCommunity(newItem.community);
setNewInvalid({ ipRange: !cidrOk, community: !communityOk });
const handleAddItem = (item) => {
const ipRange = item?.ipRange || newItem.ipRange;
const community = item?.community || newItem.community;
const cidrOk = isValidCidr(ipRange);
const communityOk = isValidCommunity(community);
if (!cidrOk || !communityOk) {
setError('Введите корректный IP-диапазон в формате CIDR (например 192.168.1.0/24) и числовой community.');
return;
}
setError('');
setItems([...items, { ipRange: newItem.ipRange.trim(), community: String(newItem.community).trim() }]);
setNewItem({ ipRange: '', community: '' });
setNewInvalid({ ipRange: false, community: false });
const newRange = { ipRange: ipRange.trim(), community: String(community).trim() };
setItems([...items, newRange]);
if (!item) {
setNewItem({ ipRange: '', community: '' });
setNewInvalid({ ipRange: false, community: false });
}
};
const handleEdit = (item) => {
@@ -783,7 +792,16 @@ function IPRangesManager() {
]} />
)}
actions={(
<PageHeaderActions
<div className="d-flex align-items-center gap-2">
<button
className="btn btn-primary"
onClick={() => setAddModalOpen(true)}
title="Добавить новый IP-диапазон"
>
<IconPlus className="me-1" size={18} />
Добавить
</button>
<PageHeaderActions
loading={loading}
onPreview={handlePreviewDiff}
disablePreview={loading || items.length === 0}
@@ -812,124 +830,22 @@ function IPRangesManager() {
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
}
}}
/>
/>
</div>
)}
/>
<AddItemModal
open={addModalOpen}
onClose={() => setAddModalOpen(false)}
onSubmit={handleAddItem}
type="ipRange"
communities={communities}
loading={loading}
/>
<div className="row">
<div className="col-lg-3">
{/* Classic Add New Item Card (improved) */}
<div className="card card-md animate-in">
<div className="card-header bg-primary-lt">
<h3 className="card-title text-primary">
<IconPlus className="icon me-2" />
Добавить новый IP-диапазон
</h3>
</div>
<div className="card-body">
<form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
<div className="mb-3">
<label className="form-label required">IP-диапазон</label>
<div className="input-icon">
<span className="input-icon-addon">
<IconNetwork size={18} />
</span>
<input
type="text"
className={`form-control${newInvalid.ipRange ? ' is-invalid' : isValidCidr(newItem.ipRange) ? ' is-valid' : ''}`}
placeholder="192.168.1.0/24"
value={newItem.ipRange}
onChange={(e) => setNewItem({ ...newItem, ipRange: e.target.value })}
/>
</div>
{newInvalid.ipRange && <div className="invalid-feedback">Некорректный CIDR</div>}
{isValidCidr(newItem.ipRange) && !newInvalid.ipRange && (<div className="valid-feedback">Корректный CIDR</div>)}
<div className="form-text text-muted small">Формат: A.B.C.D/Маска, например 10.0.0.0/24</div>
</div>
<div className="mb-3">
<label className="form-label required">Community</label>
<div className="input-icon">
<span className="input-icon-addon">
<IconHash size={18} />
</span>
<CommunityAutocompleteInput
value={newItem.community}
onChange={(v) => setNewItem({ ...newItem, community: v })}
communities={communities}
placeholder="Начните вводить номер или имя"
className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
useShortValue={true}
/>
</div>
{newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
{isValidCommunity(newItem.community) && !newInvalid.community && (<div className="valid-feedback">Корректный формат community</div>)}
{(() => {
const match = communities.find(c => c.value === String(newItem.community).trim());
if (!match) return null;
return (
<div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
<div className="d-flex">
<div>
<strong>{match.name || match.value}</strong>
{match.description && <div className="text-muted small">{match.description}</div>}
{match.tags && match.tags.length > 0 && (
<div className="mt-1">
{match.tags.map((tag, idx) => (<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>))}
</div>
)}
</div>
</div>
</div>
);
})()}
</div>
<div className="form-footer">
<button type="submit" className="btn btn-primary w-100" disabled={!isValidCidr(newItem.ipRange) || !isValidCommunity(newItem.community)}>
<IconPlus className="icon me-2" />
Добавить диапазон
</button>
</div>
</form>
</div>
</div>
{/* Дополнительные варианты */}
<AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
<QuickAddBar
placeholder={'192.168.1.0/24 65000:100'}
help={'Вставьте строки: CIDR ПРОБЕЛ COMMUNITY'}
parseLine={(line) => { const [cidr, c] = String(line).split(/\s+/); return { ipRange: (cidr||'').trim(), community: (c||'').trim() }; }}
validateItem={(obj) => isValidCidr(obj.ipRange) && isValidCommunity(obj.community)}
onApply={(list) => {
setItems(prev => {
const merged = [...prev, ...list];
const map = new Map();
for (const it of merged) {
const key = String(it.ipRange).trim();
if (!map.has(key)) map.set(key, { ipRange: key, community: String(it.community).trim() });
}
return Array.from(map.values());
});
}}
/>
<div className="card card-md border-dashed mt-3 animate-in"
style={{animationDelay: '0.15s'}}
onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
>
<div className="card-body text-center text-muted py-4">
<IconUpload size={32} className="mb-2 text-muted" />
<div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
<div className="small">Формат: CIDR community</div>
</div>
</div>
</AccordionCard>
{/* Карточка действий больше не нужна — действия перенесены в page-header */}
</div>
<div className="col-lg-9">
<div className="col-12">
{/* BulkActionsBar */}
<BulkActionsBar
selectedCount={selectedItems.size}
frontend/src/components/AddItemModal.jsx
+262
View File
@@ -0,0 +1,262 @@
import { useState, useEffect } from 'react';
import FormModal from './FormModal.jsx';
import FormField from './FormField.jsx';
import CommunityAutocompleteInput from './CommunityAutocompleteInput.jsx';
import { IconPlus, IconWorld, IconNetwork, IconHash } from '@tabler/icons-react';
/**
* Универсальное модальное окно для добавления записи (домен/IP-диапазон/ASN)
*
* @param {Object} props
* @param {boolean} props.open - Открыто ли модальное окно
* @param {function} props.onClose - Закрытие модального окна
* @param {function} props.onSubmit - Обработчик добавления (item) => void
* @param {string} props.type - Тип записи: 'domain' | 'ipRange' | 'asn'
* @param {Array} props.communities - Список community для автодополнения
* @param {boolean} props.loading - Состояние загрузки
*/
export default function AddItemModal({
open,
onClose,
onSubmit,
type = 'domain',
communities = [],
loading = false
}) {
const [formData, setFormData] = useState({ value: '', community: '' });
const [errors, setErrors] = useState({ value: '', community: '' });
// Сброс формы при закрытии
useEffect(() => {
if (!open) {
setFormData({ value: '', community: '' });
setErrors({ value: '', community: '' });
}
}, [open]);
const validators = {
domain: (v) => {
const val = String(v).trim().toLowerCase();
return /^([a-z0-9-]+\.)+[a-z]{2,}$/i.test(val);
},
ipRange: (v) => {
const val = String(v).trim();
const parts = val.split('/');
if (parts.length !== 2) return false;
const [ip, mask] = parts;
if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(ip)) return false;
const octets = ip.split('.');
if (!octets.every(o => /^\d{1,3}$/.test(o) && Number(o) >= 0 && Number(o) <= 255)) return false;
if (!/^\d{1,2}$/.test(mask)) return false;
const m = Number(mask);
return m >= 0 && m <= 32;
},
asn: (v) => {
const val = String(v).trim();
return /^[0-9]+$/.test(val);
}
};
const isValidCommunity = (v) => /^(\d+|\d+:\d+)$/.test(String(v).trim());
const validate = () => {
const valueValid = validators[type]?.(formData.value);
const communityValid = isValidCommunity(formData.community);
setErrors({
value: valueValid ? '' : getValueError(),
community: communityValid ? '' : 'Неверный формат community (N или N:N)'
});
return valueValid && communityValid;
};
const getValueError = () => {
switch (type) {
case 'domain':
return 'Неверный формат домена (sub.domain.tld)';
case 'ipRange':
return 'Неверный формат IP-диапазона (A.B.C.D/Mask)';
case 'asn':
return 'Неверный формат ASN (только цифры, например 12345)';
default:
return 'Неверный формат';
}
};
const getValueLabel = () => {
switch (type) {
case 'domain':
return 'Домен';
case 'ipRange':
return 'IP-диапазон';
case 'asn':
return 'ASN';
default:
return 'Значение';
}
};
const getValuePlaceholder = () => {
switch (type) {
case 'domain':
return 'example.com';
case 'ipRange':
return '192.168.1.0/24';
case 'asn':
return '12345';
default:
return '';
}
};
const getValueHelp = () => {
switch (type) {
case 'domain':
return 'Формат: sub.domain.tld (например foo.example.org)';
case 'ipRange':
return 'Формат: A.B.C.D/Mask, например 10.0.0.0/24';
case 'asn':
return 'Формат: только цифры, например 12345';
default:
return '';
}
};
const getValueIcon = () => {
switch (type) {
case 'domain':
return IconWorld;
case 'ipRange':
return IconNetwork;
case 'asn':
return IconHash;
default:
return IconHash;
}
};
const getTitle = () => {
switch (type) {
case 'domain':
return 'Добавить домен';
case 'ipRange':
return 'Добавить IP-диапазон';
case 'asn':
return 'Добавить ASN';
default:
return 'Добавить запись';
}
};
const handleSubmit = (e) => {
e.preventDefault();
if (!validate()) return;
const normalizedValue = type === 'domain'
? formData.value.trim().toLowerCase()
: formData.value.trim();
const item = {
[type === 'domain' ? 'domain' : type === 'ipRange' ? 'ipRange' : 'asn']: normalizedValue,
community: String(formData.community).trim()
};
onSubmit?.(item);
onClose?.();
};
const ValueIcon = getValueIcon();
return (
<FormModal
show={open}
onClose={onClose}
onSubmit={handleSubmit}
title={getTitle()}
submitLabel="Добавить"
submitIcon={IconPlus}
loading={loading}
size="md"
centered
>
<FormField
label={getValueLabel()}
name="value"
type="text"
value={formData.value}
onChange={(v) => {
setFormData({ ...formData, value: v });
if (errors.value) setErrors({ ...errors, value: '' });
}}
onValidate={(v) => ({
valid: validators[type]?.(v) ?? false,
message: validators[type]?.(v) ? 'Корректный формат' : getValueError()
})}
placeholder={getValuePlaceholder()}
helpText={getValueHelp()}
disabled={loading}
autoFocus
icon={ValueIcon}
/>
<div className="mb-3">
<label className="form-label">
Community
<span className="text-danger ms-1" aria-label="обязательное поле">*</span>
</label>
<div className="input-icon">
<span className="input-icon-addon">
<IconHash size={18} />
</span>
<CommunityAutocompleteInput
value={formData.community}
onChange={(v) => {
setFormData({ ...formData, community: v });
if (errors.community) setErrors({ ...errors, community: '' });
}}
communities={communities}
placeholder="# Начните вводить номер или имя"
className={`form-control${errors.community ? ' is-invalid' : isValidCommunity(formData.community) ? ' is-valid' : ''}`}
useShortValue={true}
disabled={loading}
/>
</div>
{errors.community && (
<div className="invalid-feedback d-block">{errors.community}</div>
)}
{isValidCommunity(formData.community) && !errors.community && (
<div className="valid-feedback d-block">Корректный формат</div>
)}
{!errors.community && !isValidCommunity(formData.community) && (
<div className="form-text text-muted small">
Формат: N или N:N (например 65000:100)
</div>
)}
</div>
{(() => {
if (!formData.community) return null;
const match = communities.find(c => c.value === String(formData.community).trim());
if (!match) return null;
return (
<div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
<div className="d-flex">
<div className="flex-grow-1">
<strong>{match.name || match.value}</strong>
{match.description && <div className="text-muted small mt-1">{match.description}</div>}
{match.tags && match.tags.length > 0 && (
<div className="mt-2">
{match.tags.map((tag, idx) => (
<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>
))}
</div>
)}
</div>
</div>
</div>
);
})()}
</FormModal>
);
}