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

feat(MikrotikBackupsManager): add large modal for displaying backup content with improved UI
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 56s
Details

Browse Source
This commit is contained in:
denozord
2026-02-11 16:00:48 +07:00
parent bdc7dd2bb3
commit 6b8e060d54
1 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/MikrotikBackupsManager.jsx
+44 -38
View File
@@ -7,7 +7,7 @@ import TableSkeleton from './components/TableSkeleton.jsx';
import EmptyState from './components/EmptyState.jsx'; import EmptyState from './components/EmptyState.jsx';
import Tooltip from './components/Tooltip.jsx'; import Tooltip from './components/Tooltip.jsx';
import DataTable from './components/DataTable.jsx'; import DataTable from './components/DataTable.jsx';
import { FullscreenModal } from './components/Modal.jsx'; import { LargeModal, FullscreenModal } from './components/Modal.jsx';
import { countryToFlag } from './utils/serverUtils.js'; import { countryToFlag } from './utils/serverUtils.js';
import { import {
IconRefresh, IconRefresh,
@@ -138,6 +138,7 @@ function MikrotikBackupsManager() {
const [viewConfigKey, setViewConfigKey] = useState(null); const [viewConfigKey, setViewConfigKey] = useState(null);
const [viewConfigText, setViewConfigText] = useState(''); const [viewConfigText, setViewConfigText] = useState('');
const [viewLoading, setViewLoading] = useState(false); const [viewLoading, setViewLoading] = useState(false);
const [viewModalOpen, setViewModalOpen] = useState(false);
const [diffResult, setDiffResult] = useState(null); const [diffResult, setDiffResult] = useState(null);
const [diffLoading, setDiffLoading] = useState(false); const [diffLoading, setDiffLoading] = useState(false);
const [diffModalOpen, setDiffModalOpen] = useState(false); const [diffModalOpen, setDiffModalOpen] = useState(false);
@@ -382,6 +383,7 @@ function MikrotikBackupsManager() {
setViewLoading(true); setViewLoading(true);
setViewConfigKey(key); setViewConfigKey(key);
setViewConfigText(''); setViewConfigText('');
setViewModalOpen(true);
const res = await api.get('/mikrotik/backups/item', { params: { key } }); const res = await api.get('/mikrotik/backups/item', { params: { key } });
setViewConfigText(res.data?.config || ''); setViewConfigText(res.data?.config || '');
} catch (err) { } catch (err) {
@@ -852,45 +854,49 @@ function MikrotikBackupsManager() {
</div> </div>
</div> </div>
{viewConfigKey && ( <LargeModal
<div className="row mt-4"> show={viewModalOpen}
<div className="col-12"> onClose={() => {
<div className="card"> setViewModalOpen(false);
<div className="card-header d-flex align-items-center justify-content-between"> }}
<div> title="Содержимое бэкапа MikroTik"
<div className="card-title mb-0">Содержимое бэкапа</div> footer={(
<div className="text-muted small text-truncate" title={viewConfigKey}> <div className="d-flex justify-content-between w-100">
{viewConfigKey} <div className="text-muted small text-truncate" title={viewConfigKey || ''}>
</div> {viewConfigKey || 'Бэкап не выбран'}
</div> </div>
<div className="btn-list"> <div className="btn-list mb-0">
<button <button
type="button" type="button"
className="btn btn-outline-secondary btn-sm" className="btn btn-outline-secondary btn-sm"
onClick={() => handleCopyToClipboard(viewConfigText)} onClick={() => handleCopyToClipboard(viewConfigText)}
disabled={!viewConfigText} disabled={!viewConfigText}
> >
<IconCopy size={16} className="me-1" /> <IconCopy size={16} className="me-1" />
Копировать Копировать
</button> </button>
</div> <button
</div> type="button"
<div className="card-body"> className="btn btn-secondary btn-sm"
{viewLoading ? ( onClick={() => setViewModalOpen(false)}
<TableSkeleton rows={6} columns={1} /> >
) : ( Закрыть
<pre </button>
className="mb-0"
style={{ maxHeight: 420, overflow: 'auto', fontSize: 12 }}
>
{viewConfigText || '# Нет данных для отображения'}
</pre>
)}
</div>
</div> </div>
</div> </div>
</div> )}
)} >
{viewLoading ? (
<TableSkeleton rows={6} columns={1} />
) : (
<pre
className="bg-dark text-white p-3 rounded"
style={{ maxHeight: 500, overflow: 'auto', fontSize: 12 }}
>
<code>{viewConfigText || '# Нет данных для отображения'}</code>
</pre>
)}
</LargeModal>
<FullscreenModal <FullscreenModal
show={diffModalOpen} show={diffModalOpen}