Полный UI для экспорта/импорта данных профиля
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
✨ Новые возможности: - Добавлена вкладка 'Данные' в панель настроек - Интерактивный модал экспорта с деревом выбора элементов - Модал импорта с превью архива и селективным восстановлением - Автоматическая обработка ZIP архивов и медиафайлов 🎯 Функционал экспорта: - Древовидный выбор: профиль, группы, конкретные ссылки - Чекбоксы для типов данных: стили, медиа - Прогресс-индикаторы и автозагрузка файлов - Подсчет выбранных элементов в реальном времени 📥 Функционал импорта: - Drag&Drop загрузка ZIP архивов - Детальное превью содержимого файла - Селективный выбор данных для восстановления - Защита от перезаписи с опциональным режимом 🔗 Интеграция: - Полная интеграция с существующими API endpoints - Автообновление данных после импорта - Обработка ошибок и пользовательские уведомления - Responsive дизайн для всех устройств
This commit is contained in:
@@ -0,0 +1,403 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface ImportDataModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onImportComplete?: () => void
|
||||
}
|
||||
|
||||
interface ImportPreview {
|
||||
export_info?: {
|
||||
username: string
|
||||
export_date: string
|
||||
}
|
||||
user_data?: {
|
||||
username: string
|
||||
email: string
|
||||
full_name: string
|
||||
bio?: string
|
||||
}
|
||||
groups_count: number
|
||||
links_count: number
|
||||
has_design_settings: boolean
|
||||
media_files: {
|
||||
avatars: number
|
||||
customization: number
|
||||
link_groups: number
|
||||
links: number
|
||||
}
|
||||
groups_preview: Array<{
|
||||
id: number
|
||||
title: string
|
||||
description?: string
|
||||
}>
|
||||
links_preview: Array<{
|
||||
id: number
|
||||
title: string
|
||||
url: string
|
||||
group_id: number
|
||||
}>
|
||||
}
|
||||
|
||||
interface ImportSelection {
|
||||
groups: boolean
|
||||
links: boolean
|
||||
styles: boolean
|
||||
media: boolean
|
||||
overwrite_existing: boolean
|
||||
}
|
||||
|
||||
export function ImportDataModal({ isOpen, onClose, onImportComplete }: ImportDataModalProps) {
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||
const [preview, setPreview] = useState<ImportPreview | null>(null)
|
||||
const [selection, setSelection] = useState<ImportSelection>({
|
||||
groups: true,
|
||||
links: true,
|
||||
styles: true,
|
||||
media: true,
|
||||
overwrite_existing: false
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [previewLoading, setPreviewLoading] = useState(false)
|
||||
|
||||
const handleFileSelect = async (file: File) => {
|
||||
setSelectedFile(file)
|
||||
setPreview(null)
|
||||
|
||||
if (!file.name.endsWith('.zip')) {
|
||||
alert('Пожалуйста, выберите ZIP архив')
|
||||
return
|
||||
}
|
||||
|
||||
setPreviewLoading(true)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('import_file', file)
|
||||
|
||||
const token = localStorage.getItem('access_token') || localStorage.getItem('token')
|
||||
const API = process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'
|
||||
|
||||
const response = await fetch(`${API}/api/import/preview/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const previewData = await response.json()
|
||||
setPreview(previewData)
|
||||
} else {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.error || 'Ошибка при анализе архива')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка при анализе файла:', error)
|
||||
alert('Ошибка при анализе архива: ' + (error instanceof Error ? error.message : 'Неизвестная ошибка'))
|
||||
setSelectedFile(null)
|
||||
} finally {
|
||||
setPreviewLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!selectedFile) {
|
||||
alert('Пожалуйста, выберите файл для импорта')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('import_file', selectedFile)
|
||||
formData.append('import_groups', selection.groups.toString())
|
||||
formData.append('import_links', selection.links.toString())
|
||||
formData.append('import_styles', selection.styles.toString())
|
||||
formData.append('import_media', selection.media.toString())
|
||||
formData.append('overwrite_existing', selection.overwrite_existing.toString())
|
||||
|
||||
const token = localStorage.getItem('access_token') || localStorage.getItem('token')
|
||||
const API = process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'
|
||||
|
||||
const response = await fetch(`${API}/api/import/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json()
|
||||
alert(`Импорт завершен успешно!\nИмпортировано групп: ${result.imported_groups_count}\nИмпортировано ссылок: ${result.imported_links_count}\nИмпортировано медиафайлов: ${result.imported_media_count}`)
|
||||
|
||||
// Очищаем состояние
|
||||
setSelectedFile(null)
|
||||
setPreview(null)
|
||||
|
||||
// Вызываем коллбэк для обновления данных
|
||||
if (onImportComplete) {
|
||||
onImportComplete()
|
||||
}
|
||||
|
||||
onClose()
|
||||
} else {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.error || 'Ошибка при импорте')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка импорта:', error)
|
||||
alert('Ошибка при импорте: ' + (error instanceof Error ? error.message : 'Неизвестная ошибка'))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="modal fade show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||
<div className="modal-dialog modal-lg">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">
|
||||
<i className="bi bi-upload me-2"></i>
|
||||
Импорт данных профиля
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{/* Выбор файла */}
|
||||
<div className="mb-4">
|
||||
<label className="form-label">Выберите архив для импорта</label>
|
||||
<input
|
||||
type="file"
|
||||
className="form-control"
|
||||
accept=".zip"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) {
|
||||
handleFileSelect(file)
|
||||
}
|
||||
}}
|
||||
disabled={previewLoading || loading}
|
||||
/>
|
||||
|
||||
{selectedFile && (
|
||||
<div className="mt-2 small text-muted">
|
||||
<i className="bi bi-file-zip me-1"></i>
|
||||
{selectedFile.name} ({formatFileSize(selectedFile.size)})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Индикатор загрузки превью */}
|
||||
{previewLoading && (
|
||||
<div className="text-center py-4">
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<span className="visually-hidden">Анализ архива...</span>
|
||||
</div>
|
||||
<p className="text-muted mt-2">Анализ архива...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Превью содержимого */}
|
||||
{preview && (
|
||||
<div className="mb-4">
|
||||
<h6 className="mb-3">Содержимое архива</h6>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<h6 className="card-subtitle mb-2 text-muted">Информация об экспорте</h6>
|
||||
{preview.export_info && (
|
||||
<ul className="list-unstyled small">
|
||||
<li><strong>Источник:</strong> {preview.export_info.username}</li>
|
||||
<li><strong>Дата экспорта:</strong> {new Date(preview.export_info.export_date).toLocaleString()}</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<h6 className="card-subtitle mb-2 text-muted">Статистика данных</h6>
|
||||
<ul className="list-unstyled small">
|
||||
<li><i className="bi bi-collection me-1"></i> Групп: {preview.groups_count}</li>
|
||||
<li><i className="bi bi-link-45deg me-1"></i> Ссылок: {preview.links_count}</li>
|
||||
<li><i className="bi bi-palette me-1"></i> Настройки дизайна: {preview.has_design_settings ? 'Есть' : 'Нет'}</li>
|
||||
<li>
|
||||
<i className="bi bi-image me-1"></i>
|
||||
Медиафайлов: {Object.values(preview.media_files).reduce((a, b) => a + b, 0)}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Превью групп */}
|
||||
{preview.groups_preview.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<h6 className="card-subtitle mb-2 text-muted">Группы (первые 5)</h6>
|
||||
<div className="list-group list-group-flush small">
|
||||
{preview.groups_preview.map((group, index) => (
|
||||
<div key={index} className="list-group-item p-2">
|
||||
<strong>{group.title}</strong>
|
||||
{group.description && (
|
||||
<div className="text-muted">{group.description}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Превью ссылок */}
|
||||
{preview.links_preview.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<h6 className="card-subtitle mb-2 text-muted">Ссылки (первые 10)</h6>
|
||||
<div className="list-group list-group-flush small">
|
||||
{preview.links_preview.map((link, index) => (
|
||||
<div key={index} className="list-group-item p-2">
|
||||
<strong>{link.title}</strong>
|
||||
<div className="text-muted">{link.url}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Настройки импорта */}
|
||||
{preview && (
|
||||
<div className="mb-4">
|
||||
<h6 className="mb-3">Настройки импорта</h6>
|
||||
|
||||
<div className="form-check mb-2">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="import-groups"
|
||||
checked={selection.groups}
|
||||
onChange={(e) => setSelection(prev => ({ ...prev, groups: e.target.checked }))}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="import-groups">
|
||||
<i className="bi bi-collection me-2"></i>
|
||||
Импортировать группы ({preview.groups_count})
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-check mb-2">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="import-links"
|
||||
checked={selection.links}
|
||||
onChange={(e) => setSelection(prev => ({ ...prev, links: e.target.checked }))}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="import-links">
|
||||
<i className="bi bi-link-45deg me-2"></i>
|
||||
Импортировать ссылки ({preview.links_count})
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-check mb-2">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="import-styles"
|
||||
checked={selection.styles}
|
||||
onChange={(e) => setSelection(prev => ({ ...prev, styles: e.target.checked }))}
|
||||
disabled={!preview.has_design_settings}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="import-styles">
|
||||
<i className="bi bi-palette me-2"></i>
|
||||
Импортировать настройки дизайна
|
||||
{!preview.has_design_settings && <span className="text-muted"> (недоступно)</span>}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-check mb-3">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="import-media"
|
||||
checked={selection.media}
|
||||
onChange={(e) => setSelection(prev => ({ ...prev, media: e.target.checked }))}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="import-media">
|
||||
<i className="bi bi-image me-2"></i>
|
||||
Импортировать медиафайлы ({Object.values(preview.media_files).reduce((a, b) => a + b, 0)})
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="overwrite-existing"
|
||||
checked={selection.overwrite_existing}
|
||||
onChange={(e) => setSelection(prev => ({ ...prev, overwrite_existing: e.target.checked }))}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="overwrite-existing">
|
||||
<i className="bi bi-exclamation-triangle me-2 text-warning"></i>
|
||||
Перезаписать существующие данные
|
||||
</label>
|
||||
<div className="form-text">
|
||||
Если отключено, существующие группы и ссылки с такими же названиями будут пропущены
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading || previewLoading}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-success"
|
||||
onClick={handleImport}
|
||||
disabled={loading || previewLoading || !preview}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<span className="spinner-border spinner-border-sm me-2"></span>
|
||||
Импорт...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="bi bi-upload me-2"></i>
|
||||
Импортировать
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user