feat: Добавлена поддержка AS и рефакторинг UI на вкладки
Publish Docker image / build-and-push (push) Successful in 1m38s
Publish Docker image / build-and-push (push) Successful in 1m38s
This commit is contained in:
@@ -0,0 +1,224 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Table, Button, Form, Row, Col, Card, Alert } from 'react-bootstrap';
|
||||
|
||||
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');
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems();
|
||||
}, []);
|
||||
|
||||
const fetchItems = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/${entityKey}`);
|
||||
setItems(response.data);
|
||||
} catch (error) {
|
||||
console.error(`Error fetching ${entityKey}:`, error);
|
||||
setError(`Не удалось загрузить ${entityName}. Проверьте, запущен ли бэкенд.`);
|
||||
}
|
||||
};
|
||||
|
||||
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 handleSaveChanges = async () => {
|
||||
try {
|
||||
// The backend expects a payload with a 'domains' key for both endpoints.
|
||||
await axios.post(`${API_URL}/${entityKey}`, { domains: items });
|
||||
setSuccess('Изменения успешно сохранены!');
|
||||
setTimeout(() => setSuccess(''), 3000);
|
||||
} catch (error) {
|
||||
console.error('Error saving changes:', error);
|
||||
setError('Не удалось сохранить изменения.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkUpdate = () => {
|
||||
if (!bulkFrom || !bulkTo) {
|
||||
setError('Оба поля для массового обновления должны быть заполнены.');
|
||||
return;
|
||||
}
|
||||
const confirm = window.confirm(`Вы уверены, что хотите заменить все шлюзы "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`);
|
||||
if (confirm) {
|
||||
const updatedItems = items.map(i =>
|
||||
i.type === bulkFrom ? { ...i, type: bulkTo } : i
|
||||
);
|
||||
setItems(updatedItems);
|
||||
setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredItems = items.filter(i =>
|
||||
i.domain.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{error && <Alert variant="danger" onClose={() => setError('')} dismissible>{error}</Alert>}
|
||||
{success && <Alert variant="success" onClose={() => setSuccess('')} dismissible>{success}</Alert>}
|
||||
|
||||
<Row>
|
||||
<Col lg={4}>
|
||||
<Card className="mb-4">
|
||||
<Card.Header as="h5">Добавить новый {entityName}</Card.Header>
|
||||
<Card.Body>
|
||||
<Form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Имя {entityName}</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
value={newItem.domain}
|
||||
onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Шлюз</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={newItem.type}
|
||||
onChange={(e) => setNewItem({ ...newItem, type: e.target.value })}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button variant="primary" type="submit" className="w-100">Добавить</Button>
|
||||
</Form>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
||||
<Card className="mb-4">
|
||||
<Card.Header as="h5">Массовое обновление</Card.Header>
|
||||
<Card.Body>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Label>Заменить с</Form.Label>
|
||||
<Form.Control type="text" value={bulkFrom} onChange={e => setBulkFrom(e.target.value)} />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Заменить на</Form.Label>
|
||||
<Form.Control type="text" value={bulkTo} onChange={e => setBulkTo(e.target.value)} />
|
||||
</Form.Group>
|
||||
<Button variant="warning" onClick={handleBulkUpdate} className="w-100">Выполнить замену</Button>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col lg={8}>
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<h5 className="mb-0">Список: {entityName}</h5>
|
||||
<Button variant="success" onClick={handleSaveChanges} disabled={items.length === 0}>
|
||||
Сохранить все изменения в S3
|
||||
</Button>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<Form.Control
|
||||
type="text"
|
||||
placeholder={`Поиск по ${entityName}...`}
|
||||
className="mb-3"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<Table striped bordered hover responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{entityName}</th>
|
||||
<th>Шлюз</th>
|
||||
<th className="text-center">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredItems.map((item, index) => (
|
||||
<tr key={item.domain}>
|
||||
<td>{index + 1}</td>
|
||||
<td>{item.domain}</td>
|
||||
<td>
|
||||
{editingDomain === item.domain ? (
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={editingValue}
|
||||
onChange={(e) => setEditingValue(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
item.type
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
{editingDomain === item.domain ? (
|
||||
<>
|
||||
<Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(item.domain)}>
|
||||
Сохранить
|
||||
</Button>
|
||||
<Button variant="secondary" size="sm" onClick={handleCancelEdit}>
|
||||
Отмена
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(item)}>
|
||||
Изменить
|
||||
</Button>
|
||||
<Button variant="danger" size="sm" onClick={() => handleDeleteItem(item.domain)}>
|
||||
Удалить
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
{items.length > 0 && filteredItems.length === 0 && (
|
||||
<p className="text-center text-muted">По вашему запросу ничего не найдено.</p>
|
||||
)}
|
||||
{items.length === 0 && <p className="text-center text-muted">Список пуст. Добавьте новый элемент.</p>}
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DataManager;
|
||||
Reference in New Issue
Block a user