feat: Рефакторинг компонента HistoryModal с заменой на простой подход с встроенным backdrop. Упрощение структуры и улучшение взаимодействия с пользователем через обновленный интерфейс модального окна.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m43s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m43s
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
import Modal from './Modal';
|
||||
import { useState } from 'react';
|
||||
import api from '../lib/api.js';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
@@ -9,7 +8,7 @@ import { formatDateTimeWithRelative } from '../lib/datetime.js';
|
||||
|
||||
/**
|
||||
* HistoryModal - модальное окно истории версий
|
||||
* Рефакторинг: теперь использует базовый Modal компонент
|
||||
* Простой подход со встроенным backdrop
|
||||
*/
|
||||
export default function HistoryModal({ resource, show, onClose, onRolledBack }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -50,105 +49,135 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
|
||||
});
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
if (show) {
|
||||
refetch().catch(() => notify.error('Не удалось загрузить историю версий'));
|
||||
}
|
||||
};
|
||||
if (!show) return null;
|
||||
|
||||
if (show && items.length === 0) {
|
||||
refetch().catch(() => notify.error('Не удалось загрузить историю версий'));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
show={show}
|
||||
onClose={onClose}
|
||||
title={
|
||||
<div className="d-flex align-items-center">
|
||||
<IconHistory className="me-2" size={24} />
|
||||
История версий
|
||||
</div>
|
||||
}
|
||||
size="lg"
|
||||
centered
|
||||
scrollable
|
||||
onOpen={handleOpen}
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
{/* Info bar */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-3 p-2 bg-blue-lt rounded">
|
||||
<div className="text-muted small d-flex align-items-center">
|
||||
<IconInfoCircle size={16} className="me-2" />
|
||||
Ресурс: <code className="ms-1">{resource}</code>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm"
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div
|
||||
className="modal-content"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconRefresh size={16} className={loading ? 'spin' : ''} />
|
||||
<span className="ms-1">Обновить</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title d-flex align-items-center">
|
||||
<IconHistory className="me-2" size={24} />
|
||||
История версий
|
||||
</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{/* Info bar */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-3 p-2 bg-blue-lt rounded">
|
||||
<div className="text-muted small d-flex align-items-center">
|
||||
<IconInfoCircle size={16} className="me-2" />
|
||||
Ресурс: <code className="ms-1">{resource}</code>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm"
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
>
|
||||
<IconRefresh size={16} className={loading ? 'spin' : ''} />
|
||||
<span className="ms-1">Обновить</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Версия</th>
|
||||
<th>Дата</th>
|
||||
<th>Размер</th>
|
||||
<th>ETag</th>
|
||||
<th className="text-end">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="5" className="text-muted text-center py-5">
|
||||
<div className="empty">
|
||||
<div className="empty-icon">
|
||||
<IconClock size={48} className="text-muted" />
|
||||
</div>
|
||||
<p className="empty-title">Нет данных</p>
|
||||
<p className="empty-subtitle text-muted">
|
||||
Версионирование бакета может быть отключено
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
items.map((v) => (
|
||||
<tr key={v.versionId} className={v.isLatest ? 'table-active' : ''}>
|
||||
<td>
|
||||
<code className="text-muted small">{v.versionId}</code>
|
||||
{v.isLatest && (
|
||||
<span className="badge bg-green-lt text-green ms-2">Текущая</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-nowrap">
|
||||
{v.lastModified ? formatDateTimeWithRelative(v.lastModified) : '—'}
|
||||
</td>
|
||||
<td>{typeof v.size === 'number' ? `${v.size} байт` : '—'}</td>
|
||||
<td><code className="text-muted small">{v.etag || '—'}</code></td>
|
||||
<td className="text-end">
|
||||
{!v.isLatest && (
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => rollback(v.versionId)}
|
||||
disabled={loading}
|
||||
title="Восстановить содержимое файла до этой версии"
|
||||
>
|
||||
<IconRotate2 size={16} className="me-1" />
|
||||
Восстановить
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Table */}
|
||||
<div className="table-responsive">
|
||||
<table className="table card-table table-vcenter table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Версия</th>
|
||||
<th>Дата</th>
|
||||
<th>Размер</th>
|
||||
<th>ETag</th>
|
||||
<th className="text-end">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="5" className="text-muted text-center py-5">
|
||||
<div className="empty">
|
||||
<div className="empty-icon">
|
||||
<IconClock size={48} className="text-muted" />
|
||||
</div>
|
||||
<p className="empty-title">Нет данных</p>
|
||||
<p className="empty-subtitle text-muted">
|
||||
Версионирование бакета может быть отключено
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
items.map((v) => (
|
||||
<tr key={v.versionId} className={v.isLatest ? 'table-active' : ''}>
|
||||
<td>
|
||||
<code className="text-muted small">{v.versionId}</code>
|
||||
{v.isLatest && (
|
||||
<span className="badge bg-green-lt text-green ms-2">Текущая</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-nowrap">
|
||||
{v.lastModified ? formatDateTimeWithRelative(v.lastModified) : '—'}
|
||||
</td>
|
||||
<td>{typeof v.size === 'number' ? `${v.size} байт` : '—'}</td>
|
||||
<td><code className="text-muted small">{v.etag || '—'}</code></td>
|
||||
<td className="text-end">
|
||||
{!v.isLatest && (
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => rollback(v.versionId)}
|
||||
disabled={loading}
|
||||
title="Восстановить содержимое файла до этой версии"
|
||||
>
|
||||
<IconRotate2 size={16} className="me-1" />
|
||||
Восстановить
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button className="btn" onClick={onClose}>Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={confirmState.open}
|
||||
|
||||
@@ -1,21 +1,8 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
/**
|
||||
* Универсальный Modal компонент с гарантированным backdrop
|
||||
* Единая система для всех модальных окон проекта
|
||||
*
|
||||
* @param {boolean} show - Показать/скрыть модалку
|
||||
* @param {function} onClose - Callback при закрытии
|
||||
* @param {function} onOpen - Callback при открытии
|
||||
* @param {string|ReactNode} title - Заголовок модалки
|
||||
* @param {ReactNode} children - Содержимое
|
||||
* @param {ReactNode} footer - Футер с кнопками
|
||||
* @param {string} size - Размер: sm, md, lg, xl
|
||||
* @param {boolean} backdrop - Показывать backdrop (по умолчанию true)
|
||||
* @param {boolean} keyboard - Закрывать по ESC (по умолчанию true)
|
||||
* @param {boolean} scrollable - Прокручиваемое тело
|
||||
* @param {boolean} centered - Центрировать по вертикали
|
||||
* @param {string} className - Дополнительные CSS классы
|
||||
* Универсальный Modal компонент
|
||||
* Простой и надёжный - работает как HistoryModal
|
||||
*/
|
||||
function Modal({
|
||||
show,
|
||||
@@ -32,13 +19,12 @@ function Modal({
|
||||
className = ''
|
||||
}) {
|
||||
const modalRef = useRef(null);
|
||||
const backdropRef = useRef(null);
|
||||
|
||||
// Управление классом modal-open на body
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
document.body.classList.add('modal-open');
|
||||
modalRef.current?.focus();
|
||||
setTimeout(() => modalRef.current?.focus(), 100);
|
||||
onOpen?.();
|
||||
} else {
|
||||
document.body.classList.remove('modal-open');
|
||||
@@ -64,90 +50,72 @@ function Modal({
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (backdrop && e.target === backdropRef.current) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop - гарантированное затемнение */}
|
||||
{backdrop && (
|
||||
<div
|
||||
ref={backdropRef}
|
||||
className="modal-backdrop fade show"
|
||||
onClick={handleBackdropClick}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
zIndex: 1050
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className={`modal show d-block ${className}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div
|
||||
className={`modal fade show d-block ${className}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'auto',
|
||||
zIndex: 1055
|
||||
}}
|
||||
ref={modalRef}
|
||||
className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}
|
||||
role="document"
|
||||
>
|
||||
<div className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}>
|
||||
<div className="modal-content">
|
||||
{title && (
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
aria-label="Закрыть"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="modal-body">
|
||||
{children}
|
||||
<div
|
||||
className="modal-content"
|
||||
ref={modalRef}
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{title && (
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
aria-label="Закрыть"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{footer && (
|
||||
<div className="modal-footer">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
<div className="modal-body">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{footer && (
|
||||
<div className="modal-footer">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Modal;
|
||||
|
||||
/**
|
||||
* ===================================
|
||||
* ГОТОВЫЕ ПРЕСЕТЫ ДЛЯ РАЗНЫХ ЦЕЛЕЙ
|
||||
* ===================================
|
||||
* Готовые пресеты для быстрого использования
|
||||
*/
|
||||
|
||||
/**
|
||||
* Компактная модалка для быстрых подтверждений
|
||||
*/
|
||||
export function SmallModal({ show, onClose, title, children, footer, ...props }) {
|
||||
return (
|
||||
<Modal
|
||||
@@ -164,9 +132,6 @@ export function SmallModal({ show, onClose, title, children, footer, ...props })
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Большая модалка для сложного контента
|
||||
*/
|
||||
export function LargeModal({ show, onClose, title, children, footer, scrollable = true, ...props }) {
|
||||
return (
|
||||
<Modal
|
||||
@@ -184,9 +149,6 @@ export function LargeModal({ show, onClose, title, children, footer, scrollable
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Модалка на весь экран
|
||||
*/
|
||||
export function FullscreenModal({ show, onClose, title, children, footer, ...props }) {
|
||||
return (
|
||||
<Modal
|
||||
|
||||
Reference in New Issue
Block a user