feat: add canvas import from .canvas file
This commit is contained in:
+39
-3
@@ -3,9 +3,15 @@
|
|||||||
<div class="max-w-7xl mx-auto p-6">
|
<div class="max-w-7xl mx-auto p-6">
|
||||||
<div class="flex items-center justify-between mb-6">
|
<div class="flex items-center justify-between mb-6">
|
||||||
<h1 class="text-2xl font-bold text-slate-100">Мои Карты</h1>
|
<h1 class="text-2xl font-bold text-slate-100">Мои Карты</h1>
|
||||||
<button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
|
<div class="flex gap-2">
|
||||||
+ Новая Карта
|
<button @click="triggerImport" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition">
|
||||||
</button>
|
Импорт .canvas
|
||||||
|
</button>
|
||||||
|
<input ref="importInput" type="file" accept=".canvas,.json" class="hidden" @change="handleImport" />
|
||||||
|
<button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
|
||||||
|
+ Новая Карта
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
@@ -121,6 +127,7 @@ const authFetch = (url, opts = {}) => $fetch(url, {
|
|||||||
const canvases = ref([])
|
const canvases = ref([])
|
||||||
const userGroups = ref([])
|
const userGroups = ref([])
|
||||||
const showCreateModal = ref(false)
|
const showCreateModal = ref(false)
|
||||||
|
const importInput = ref(null)
|
||||||
const activeTab = ref('personal')
|
const activeTab = ref('personal')
|
||||||
|
|
||||||
const newCanvas = reactive({
|
const newCanvas = reactive({
|
||||||
@@ -203,6 +210,35 @@ const duplicateCanvas = async (id) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const triggerImport = () => {
|
||||||
|
importInput.value?.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleImport = async (event) => {
|
||||||
|
const file = event.target.files?.[0]
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
const text = await file.text()
|
||||||
|
const data = JSON.parse(text)
|
||||||
|
const name = file.name.replace(/\.canvas$|\.json$/, '')
|
||||||
|
const payload = {
|
||||||
|
name,
|
||||||
|
nodes: data.nodes || [],
|
||||||
|
edges: data.edges || [],
|
||||||
|
isPublic: false
|
||||||
|
}
|
||||||
|
const result = await authFetch('/api/canvas', { method: 'POST', body: payload })
|
||||||
|
await loadData()
|
||||||
|
navigateTo(`/canvas/${result.canvas.id}`)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to import canvas:', error)
|
||||||
|
alert('Ошибка импорта: проверьте формат файла')
|
||||||
|
} finally {
|
||||||
|
event.target.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const exportCanvas = async (id) => {
|
const exportCanvas = async (id) => {
|
||||||
try {
|
try {
|
||||||
const canvas = await authFetch(`/api/canvas/${id}`)
|
const canvas = await authFetch(`/api/canvas/${id}`)
|
||||||
|
|||||||
Reference in New Issue
Block a user