feat: Integrate @tabler/core for UI enhancements and refactor App component with new sidebar and dashboard features
Publish Tabler Docker image / build-and-push-tabler (push) Has been cancelled
Publish Tabler Docker image / build-and-push-tabler (push) Has been cancelled
This commit is contained in:
+109
-169
@@ -1,6 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Table, Button, Form, Row, Col, Card, Alert } from 'react-bootstrap';
|
||||
import {
|
||||
IconPlus,
|
||||
IconSearch,
|
||||
@@ -199,7 +198,7 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
</div>
|
||||
|
||||
{/* Bulk Update Card */}
|
||||
<div className="card card-md mt-3">
|
||||
<div className="card card-md">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
<IconArrowsExchange className="icon me-2" />
|
||||
@@ -207,110 +206,100 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
</h3>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="mb-2">
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Заменить с</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={bulkFrom}
|
||||
onChange={e => setBulkFrom(e.target.value)}
|
||||
<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)}
|
||||
<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"
|
||||
className="btn btn-warning w-100"
|
||||
onClick={handleBulkUpdate}
|
||||
>
|
||||
<IconArrowsExchange className="icon me-2" />
|
||||
Выполнить замену
|
||||
Обновить все
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Card */}
|
||||
<div className="card card-md mt-3">
|
||||
{/* 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="row text-center">
|
||||
<div className="col">
|
||||
<div className="text-muted mb-1">Всего</div>
|
||||
<div className="h3 mb-0">{items.length}</div>
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="text-muted mb-1">Найдено</div>
|
||||
<div className="h3 mb-0">{filteredItems.length}</div>
|
||||
</div>
|
||||
<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">
|
||||
{/* Main Data Card */}
|
||||
{/* Search and Table Card */}
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<h3 className="card-title">
|
||||
<IconDatabase className="icon me-2" />
|
||||
Список: {entityName}
|
||||
</h3>
|
||||
<div className="card-actions">
|
||||
<button
|
||||
className="btn btn-outline-secondary me-2"
|
||||
onClick={fetchItems}
|
||||
disabled={loading}
|
||||
>
|
||||
<IconRefresh className="icon me-2" />
|
||||
Обновить
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={handleSaveChanges}
|
||||
disabled={items.length === 0 || loading}
|
||||
>
|
||||
<IconUpload className="icon me-2" />
|
||||
Сохранить в S3
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
{/* Search */}
|
||||
<div className="mb-3">
|
||||
<h3 className="card-title">Список {entityName}</h3>
|
||||
<div className="card-actions">
|
||||
<div className="input-icon">
|
||||
<IconSearch className="icon" />
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={`Поиск по ${entityName}...`}
|
||||
placeholder={`Поиск ${entityName}...`}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="table-responsive">
|
||||
<table className="table table-vcenter card-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{entityName}</th>
|
||||
<th>Шлюз</th>
|
||||
<th className="w-1"></th>
|
||||
@@ -318,10 +307,18 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredItems.map((item, index) => (
|
||||
<tr key={item.domain}>
|
||||
<td className="text-muted">{index + 1}</td>
|
||||
<tr key={index}>
|
||||
<td>
|
||||
<div className="font-weight-medium">{item.domain}</div>
|
||||
{editingDomain === item.domain ? (
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
value={editingDomain}
|
||||
onChange={(e) => setEditingDomain(e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
item.domain
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{editingDomain === item.domain ? (
|
||||
@@ -330,7 +327,6 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
className="form-control form-control-sm"
|
||||
value={editingValue}
|
||||
onChange={(e) => setEditingValue(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span className="badge bg-blue-lt">{item.type}</span>
|
||||
@@ -339,14 +335,14 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
<td>
|
||||
{editingDomain === item.domain ? (
|
||||
<div className="btn-list">
|
||||
<button
|
||||
className="btn btn-sm btn-success"
|
||||
<button
|
||||
className="btn btn-sm btn-success"
|
||||
onClick={() => handleSaveEdit(item.domain)}
|
||||
>
|
||||
<IconCheck className="icon" />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={handleCancelEdit}
|
||||
>
|
||||
<IconX className="icon" />
|
||||
@@ -354,14 +350,14 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
</div>
|
||||
) : (
|
||||
<div className="btn-list">
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary"
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary"
|
||||
onClick={() => handleEdit(item)}
|
||||
>
|
||||
<IconEdit className="icon" />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-outline-danger"
|
||||
<button
|
||||
className="btn btn-sm btn-outline-danger"
|
||||
onClick={() => confirmDelete(item)}
|
||||
>
|
||||
<IconTrash className="icon" />
|
||||
@@ -374,39 +370,17 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Empty States */}
|
||||
{items.length > 0 && filteredItems.length === 0 && (
|
||||
{filteredItems.length === 0 && (
|
||||
<div className="empty">
|
||||
<div className="empty-icon">
|
||||
<IconSearch className="icon" />
|
||||
<div className="empty-img">
|
||||
<IconAlertTriangle className="icon" />
|
||||
</div>
|
||||
<p className="empty-title">Ничего не найдено</p>
|
||||
<p className="empty-title">Нет {entityName} для отображения</p>
|
||||
<p className="empty-subtitle text-muted">
|
||||
По вашему запросу ничего не найдено.
|
||||
Добавьте первый {entityName} используя форму слева.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{items.length === 0 && !loading && (
|
||||
<div className="empty">
|
||||
<div className="empty-icon">
|
||||
<IconDatabase className="icon" />
|
||||
</div>
|
||||
<p className="empty-title">Список пуст</p>
|
||||
<p className="empty-subtitle text-muted">
|
||||
Добавьте новый элемент, чтобы начать работу.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="text-center py-4">
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<span className="visually-hidden">Загрузка...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -414,77 +388,43 @@ function DataManager({ entityName, entityKey, placeholder }) {
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{showDeleteModal && (
|
||||
<div className="modal-backdrop" style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
zIndex: 1050,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<div className="modal-dialog" style={{
|
||||
maxWidth: '500px',
|
||||
width: '90%',
|
||||
margin: '1.75rem auto'
|
||||
}}>
|
||||
<div className="modal-content" style={{
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: '0.5rem',
|
||||
boxShadow: '0 0.5rem 1rem rgba(0, 0, 0, 0.15)'
|
||||
}}>
|
||||
<div className="modal-header" style={{
|
||||
padding: '1rem 1.5rem',
|
||||
borderBottom: '1px solid var(--tblr-border-color)',
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<IconAlertTriangle className="icon me-2" style={{ color: 'var(--tblr-danger)' }} />
|
||||
<h5 className="modal-title" style={{ margin: 0 }}>Подтверждение удаления</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '1.5rem',
|
||||
cursor: 'pointer',
|
||||
marginLeft: 'auto'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<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-body" style={{ padding: '1.5rem' }}>
|
||||
<p>Вы уверены, что хотите удалить <strong>{itemToDelete?.domain}</strong>?</p>
|
||||
<p className="text-muted mb-0">Это действие нельзя отменить.</p>
|
||||
</div>
|
||||
<div className="modal-footer" style={{
|
||||
padding: '1rem 1.5rem',
|
||||
borderTop: '1px solid var(--tblr-border-color)',
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
justifyContent: 'flex-end'
|
||||
}}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={executeDelete}
|
||||
>
|
||||
<IconTrash className="icon me-2" />
|
||||
Удалить
|
||||
</button>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user