denozord
cdf42aa589
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m54s
519 lines
20 KiB
React
519 lines
20 KiB
React
import { useState, useEffect, useRef } from 'react';
|
||
import api from './lib/api.js';
|
||
import {
|
||
IconPlus,
|
||
IconSearch,
|
||
IconEdit,
|
||
IconTrash,
|
||
IconCheck,
|
||
IconX,
|
||
IconDatabase,
|
||
IconRefresh,
|
||
IconArrowsExchange,
|
||
IconDownload,
|
||
IconUpload,
|
||
IconAlertTriangle
|
||
} from '@tabler/icons-react';
|
||
import ConfirmDialog from './components/ConfirmDialog.jsx'
|
||
|
||
const API_URL = '/api';
|
||
|
||
function DataManager({ entityName, entityKey, placeholder }) {
|
||
const [items, setItems] = useState([]);
|
||
const [newItem, setNewItem] = useState({ domain: '', type: 'SharkFIN' });
|
||
const [error, setError] = useState('');
|
||
const [success, setSuccess] = useState('');
|
||
const [searchTerm, setSearchTerm] = useState('');
|
||
const [editingDomain, setEditingDomain] = useState(null);
|
||
const [editingValue, setEditingValue] = useState('');
|
||
const [bulkFrom, setBulkFrom] = useState('SharkFIN');
|
||
const [bulkTo, setBulkTo] = useState('SharkAM');
|
||
const [loading, setLoading] = useState(false);
|
||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||
const [itemToDelete, setItemToDelete] = useState(null);
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [sortField, setSortField] = useState('domain');
|
||
const [sortOrder, setSortOrder] = useState('asc');
|
||
const [filterType, setFilterType] = useState('');
|
||
const editInputRef = useRef(null);
|
||
const pageSize = 10;
|
||
const [confirmState, setConfirmState] = useState({ open: false, text: '', onConfirm: null });
|
||
|
||
useEffect(() => {
|
||
fetchItems();
|
||
}, [entityKey]);
|
||
|
||
const fetchItems = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const response = await api.get(`/${entityKey}`);
|
||
setItems(response.data);
|
||
setError('');
|
||
} catch (error) {
|
||
console.error(`Error fetching ${entityKey}:`, error);
|
||
setError(`Не удалось загрузить ${entityName}. Проверьте, запущен ли бэкенд.`);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleAddItem = () => {
|
||
if (newItem.domain.trim() === '') {
|
||
setError(`Имя ${entityName} не может быть пустым.`);
|
||
return;
|
||
}
|
||
setError('');
|
||
setItems([...items, newItem]);
|
||
setNewItem({ domain: '', type: 'SharkFIN' });
|
||
};
|
||
|
||
const handleEdit = (item) => {
|
||
setEditingDomain(item.domain);
|
||
setEditingValue(item.type);
|
||
};
|
||
|
||
const handleSaveEdit = (domainName) => {
|
||
const updatedItems = items.map(i =>
|
||
i.domain === domainName ? { ...i, type: editingValue } : i
|
||
);
|
||
setItems(updatedItems);
|
||
setEditingDomain(null);
|
||
};
|
||
|
||
const handleCancelEdit = () => {
|
||
setEditingDomain(null);
|
||
};
|
||
|
||
const handleDeleteItem = (domainNameToDelete) => {
|
||
setItems(items.filter(i => i.domain !== domainNameToDelete));
|
||
};
|
||
|
||
const confirmDelete = (item) => {
|
||
setItemToDelete(item);
|
||
setShowDeleteModal(true);
|
||
};
|
||
|
||
const executeDelete = () => {
|
||
if (itemToDelete) {
|
||
handleDeleteItem(itemToDelete.domain);
|
||
setShowDeleteModal(false);
|
||
setItemToDelete(null);
|
||
}
|
||
};
|
||
|
||
const handleSaveChanges = async () => {
|
||
setLoading(true);
|
||
try {
|
||
await api.post(`/${entityKey}`, { domains: items });
|
||
setSuccess('Изменения успешно сохранены!');
|
||
setTimeout(() => setSuccess(''), 3000);
|
||
} catch (error) {
|
||
console.error('Error saving changes:', error);
|
||
setError('Не удалось сохранить изменения.');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleBulkUpdate = () => {
|
||
if (!bulkFrom || !bulkTo) {
|
||
setError('Оба поля для массового обновления должны быть заполнены.');
|
||
return;
|
||
}
|
||
setConfirmState({
|
||
open: true,
|
||
text: `Вы уверены, что хотите заменить все шлюзы "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`,
|
||
onConfirm: () => {
|
||
const updatedItems = items.map(i => i.type === bulkFrom ? { ...i, type: bulkTo } : i);
|
||
setItems(updatedItems);
|
||
setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
|
||
setConfirmState({ open: false, text: '', onConfirm: null });
|
||
},
|
||
});
|
||
};
|
||
|
||
// Сортировка
|
||
const sortedItems = [...items].sort((a, b) => {
|
||
let valA = a[sortField] || '';
|
||
let valB = b[sortField] || '';
|
||
if (typeof valA === 'string') valA = valA.toLowerCase();
|
||
if (typeof valB === 'string') valB = valB.toLowerCase();
|
||
if (valA < valB) return sortOrder === 'asc' ? -1 : 1;
|
||
if (valA > valB) return sortOrder === 'asc' ? 1 : -1;
|
||
return 0;
|
||
});
|
||
|
||
// Фильтрация по шлюзу
|
||
const filteredByType = filterType
|
||
? sortedItems.filter(i => i.type === filterType)
|
||
: sortedItems;
|
||
|
||
// Поиск
|
||
const filteredItems = filteredByType.filter(i =>
|
||
i.domain.toLowerCase().includes(searchTerm.toLowerCase())
|
||
);
|
||
|
||
// Пагинация
|
||
const totalPages = Math.ceil(filteredItems.length / pageSize);
|
||
const paginatedItems = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
||
|
||
// Для фильтра - список всех уникальных шлюзов
|
||
const allTypes = Array.from(new Set(items.map(i => i.type)));
|
||
|
||
// Сортировка по клику
|
||
const handleSort = (field) => {
|
||
if (sortField === field) {
|
||
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
|
||
} else {
|
||
setSortField(field);
|
||
setSortOrder('asc');
|
||
}
|
||
};
|
||
|
||
// Улучшенный инлайн-редакт
|
||
useEffect(() => {
|
||
if (editingDomain && editInputRef.current) {
|
||
editInputRef.current.focus();
|
||
}
|
||
}, [editingDomain]);
|
||
|
||
const handleEditKeyDown = (e, domainName) => {
|
||
if (e.key === 'Enter') handleSaveEdit(domainName);
|
||
if (e.key === 'Escape') handleCancelEdit();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{error && (
|
||
<div className="alert alert-danger alert-dismissible" role="alert">
|
||
<div className="d-flex">
|
||
<div>
|
||
<IconX className="icon alert-icon" />
|
||
</div>
|
||
<div>
|
||
{error}
|
||
</div>
|
||
</div>
|
||
<button type="button" className="btn-close" onClick={() => setError('')}></button>
|
||
</div>
|
||
)}
|
||
|
||
{success && (
|
||
<div className="alert alert-success alert-dismissible" role="alert">
|
||
<div className="d-flex">
|
||
<div>
|
||
<IconCheck className="icon alert-icon" />
|
||
</div>
|
||
<div>
|
||
{success}
|
||
</div>
|
||
</div>
|
||
<button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="row">
|
||
<div className="col-lg-4">
|
||
{/* Add New Item Card */}
|
||
<div className="card card-md">
|
||
<div className="card-header">
|
||
<h3 className="card-title">
|
||
<IconPlus className="icon me-2" />
|
||
Добавить новый {entityName}
|
||
</h3>
|
||
</div>
|
||
<div className="card-body">
|
||
<form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
|
||
<div className="mb-3">
|
||
<label className="form-label">Имя {entityName}</label>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
placeholder={placeholder}
|
||
value={newItem.domain}
|
||
onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div className="mb-3">
|
||
<label className="form-label">Шлюз</label>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={newItem.type}
|
||
onChange={(e) => setNewItem({ ...newItem, type: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div className="form-footer">
|
||
<button type="submit" className="btn btn-primary w-100">
|
||
<IconPlus className="icon me-2" />
|
||
Добавить
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bulk Update Card */}
|
||
<div className="card card-md">
|
||
<div className="card-header">
|
||
<h3 className="card-title">
|
||
<IconArrowsExchange className="icon me-2" />
|
||
Массовое обновление
|
||
</h3>
|
||
</div>
|
||
<div className="card-body">
|
||
<div className="mb-3">
|
||
<label className="form-label">Заменить с</label>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={bulkFrom}
|
||
onChange={(e) => setBulkFrom(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="mb-3">
|
||
<label className="form-label">Заменить на</label>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={bulkTo}
|
||
onChange={(e) => setBulkTo(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="form-footer">
|
||
<button
|
||
type="button"
|
||
className="btn btn-warning w-100"
|
||
onClick={handleBulkUpdate}
|
||
>
|
||
<IconArrowsExchange className="icon me-2" />
|
||
Обновить все
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions Card */}
|
||
<div className="card card-md">
|
||
<div className="card-header">
|
||
<h3 className="card-title">
|
||
<IconDatabase className="icon me-2" />
|
||
Действия
|
||
</h3>
|
||
</div>
|
||
<div className="card-body">
|
||
<div className="d-grid gap-2">
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={handleSaveChanges}
|
||
disabled={loading}
|
||
>
|
||
{loading ? (
|
||
<>
|
||
<span className="spinner-border spinner-border-sm me-2" role="status"></span>
|
||
Сохранение...
|
||
</>
|
||
) : (
|
||
<>
|
||
<IconDatabase className="icon me-2" />
|
||
Сохранить в S3
|
||
</>
|
||
)}
|
||
</button>
|
||
<button
|
||
className="btn btn-outline-secondary"
|
||
onClick={fetchItems}
|
||
disabled={loading}
|
||
>
|
||
<IconRefresh className="icon me-2" />
|
||
Обновить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-8">
|
||
<div className="card">
|
||
<div className="card-header d-flex justify-content-between align-items-center">
|
||
<h3 className="card-title mb-0">Список {entityName === 'домен' ? 'доменов' : entityName}</h3>
|
||
<div className="d-flex gap-2 w-50">
|
||
{/* Фильтр по шлюзу */}
|
||
<select className="form-select w-auto" value={filterType} onChange={e => { setFilterType(e.target.value); setCurrentPage(1); }}>
|
||
<option value="">Все шлюзы</option>
|
||
{allTypes.map(type => (
|
||
<option key={type} value={type}>{type}</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={`Поиск ${entityName}...`}
|
||
value={searchTerm}
|
||
onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table-responsive">
|
||
<table className="table card-table table-vcenter table-nowrap mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th className="cursor-pointer" onClick={() => handleSort('domain')}>
|
||
Домен
|
||
{sortField === 'domain' && (
|
||
<span className="ms-1">
|
||
{sortOrder === 'asc' ? '▲' : '▼'}
|
||
</span>
|
||
)}
|
||
</th>
|
||
<th className="cursor-pointer" onClick={() => handleSort('type')}>
|
||
Шлюз
|
||
{sortField === 'type' && (
|
||
<span className="ms-1">
|
||
{sortOrder === 'asc' ? '▲' : '▼'}
|
||
</span>
|
||
)}
|
||
</th>
|
||
<th className="text-end"> </th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{paginatedItems.map((item) => (
|
||
<tr key={item.domain} className={editingDomain === item.domain ? 'table-info' : ''}>
|
||
<td>{item.domain}</td>
|
||
<td><span className="badge bg-blue-lt text-blue">{item.type}</span></td>
|
||
<td className="text-end">
|
||
{editingDomain === item.domain ? (
|
||
<>
|
||
<input
|
||
type="text"
|
||
className="form-control d-inline-block w-auto me-2"
|
||
value={editingValue}
|
||
ref={editInputRef}
|
||
onChange={e => setEditingValue(e.target.value)}
|
||
onKeyDown={e => handleEditKeyDown(e, item.domain)}
|
||
style={{maxWidth: 120}}
|
||
/>
|
||
<button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.domain)}><IconCheck size={16} /></button>
|
||
<button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit}><IconX size={16} /></button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button className="btn btn-outline-primary btn-icon btn-sm me-1" onClick={() => handleEdit(item)}><IconEdit size={16} /></button>
|
||
<button className="btn btn-outline-danger btn-icon btn-sm" onClick={() => confirmDelete(item)}><IconTrash size={16} /></button>
|
||
</>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{/* Пагинация */}
|
||
{totalPages > 1 && (
|
||
<div className="card-footer d-flex align-items-center justify-content-between">
|
||
<div className="text-muted">
|
||
Показано {((currentPage - 1) * pageSize) + 1} - {Math.min(currentPage * pageSize, filteredItems.length)} из {filteredItems.length}
|
||
</div>
|
||
<ul className="pagination m-0">
|
||
<li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
|
||
<button className="page-link" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>Первая</button>
|
||
</li>
|
||
<li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
|
||
<button className="page-link" onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1}>Назад</button>
|
||
</li>
|
||
{(() => {
|
||
const pages = [];
|
||
let start = Math.max(1, currentPage - 2);
|
||
let end = Math.min(totalPages, currentPage + 2);
|
||
if (currentPage <= 3) end = Math.min(totalPages, 5);
|
||
if (currentPage >= totalPages - 2) start = Math.max(1, totalPages - 4);
|
||
if (start > 1) pages.push('start-ellipsis');
|
||
for (let p = start; p <= end; p++) pages.push(p);
|
||
if (end < totalPages) pages.push('end-ellipsis');
|
||
return pages.map((p) => (
|
||
p === 'start-ellipsis' || p === 'end-ellipsis' ? (
|
||
<li key={p} className="page-item disabled"><span className="page-link">…</span></li>
|
||
) : (
|
||
<li key={p} className={`page-item${currentPage === p ? ' active' : ''}`}>
|
||
<button className="page-link" onClick={() => setCurrentPage(p)}>{p}</button>
|
||
</li>
|
||
)
|
||
));
|
||
})()}
|
||
<li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
|
||
<button className="page-link" onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages}>Вперед</button>
|
||
</li>
|
||
<li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
|
||
<button className="page-link" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages}>Последняя</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Delete Confirmation Modal */}
|
||
{showDeleteModal && (
|
||
<div className="modal modal-blur fade show" style={{display: 'block'}} tabIndex="-1">
|
||
<div className="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||
<div className="modal-content">
|
||
<button
|
||
type="button"
|
||
className="btn-close"
|
||
onClick={() => setShowDeleteModal(false)}
|
||
></button>
|
||
<div className="modal-status bg-danger"></div>
|
||
<div className="modal-body text-center py-4">
|
||
<IconTrash className="icon mb-2 text-danger icon-lg" />
|
||
<h3>Удалить {entityName}?</h3>
|
||
<div className="text-muted">
|
||
Вы уверены, что хотите удалить "{itemToDelete?.domain}"? Это действие необратимо.
|
||
</div>
|
||
</div>
|
||
<div className="modal-footer">
|
||
<div className="w-100">
|
||
<div className="row">
|
||
<div className="col">
|
||
<button
|
||
className="btn w-100"
|
||
onClick={() => setShowDeleteModal(false)}
|
||
>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
<div className="col">
|
||
<button
|
||
className="btn btn-danger w-100"
|
||
onClick={executeDelete}
|
||
>
|
||
Удалить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<ConfirmDialog
|
||
open={confirmState.open}
|
||
title="Подтверждение"
|
||
message={confirmState.text}
|
||
onCancel={() => setConfirmState({ open: false, text: '', onConfirm: null })}
|
||
onConfirm={() => confirmState.onConfirm?.()}
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default DataManager; |