309 lines
11 KiB
Vue
309 lines
11 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-slate-950">
|
||
<div class="max-w-7xl mx-auto p-6">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h1 class="text-2xl font-bold text-slate-100">Мои Карты</h1>
|
||
<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">
|
||
Импорт .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>
|
||
|
||
<!-- Tabs -->
|
||
<div class="flex gap-1 mb-6 bg-slate-900 rounded-lg p-1 w-fit">
|
||
<button @click="activeTab = 'personal'" :class="tabClass('personal')" class="px-4 py-2 rounded text-sm font-medium transition">
|
||
Личные
|
||
</button>
|
||
<button @click="activeTab = 'shared'" :class="tabClass('shared')" class="px-4 py-2 rounded text-sm font-medium transition">
|
||
Общие
|
||
</button>
|
||
<button @click="activeTab = 'public'" :class="tabClass('public')" class="px-4 py-2 rounded text-sm font-medium transition">
|
||
Публичные
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Canvas Grid -->
|
||
<div v-if="filteredCanvases.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
<div v-for="canvas in filteredCanvases" :key="canvas.id"
|
||
class="bg-slate-900 border border-slate-700 rounded-xl p-4 hover:border-slate-600 transition cursor-pointer group"
|
||
@click="openCanvas(canvas.id)">
|
||
<div class="flex items-start justify-between mb-3">
|
||
<div>
|
||
<h3 class="font-semibold text-slate-200 group-hover:text-blue-400 transition">{{ canvas.name }}</h3>
|
||
<p class="text-xs text-slate-500 mt-1">{{ canvas.nodeCount }} nodes • {{ formatDate(canvas.updatedAt) }}</p>
|
||
</div>
|
||
<div class="flex items-center gap-1">
|
||
<span v-if="canvas.isPublic" class="text-xs px-2 py-1 bg-emerald-900/50 text-emerald-300 rounded">Публичная</span>
|
||
<span v-else-if="canvas.groupId" class="text-xs px-2 py-1 bg-blue-900/50 text-blue-300 rounded">Общая</span>
|
||
<span v-else class="text-xs px-2 py-1 bg-slate-700 text-slate-400 rounded">Приватная</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-xs text-slate-400">
|
||
<span v-if="canvas.ownerId === currentUserId">Ваша карта</span>
|
||
<span v-else>Поделился {{ getOwnerName(canvas.ownerId) }}</span>
|
||
<span v-if="canvas.groupId" class="ml-2">• {{ getGroupName(canvas.groupId) }}</span>
|
||
</div>
|
||
|
||
<div class="mt-3 pt-3 border-t border-slate-800 flex justify-between items-center">
|
||
<div class="flex gap-2">
|
||
<button @click.stop="duplicateCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-blue-400 transition">
|
||
Дублировать
|
||
</button>
|
||
<button @click.stop="exportCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-emerald-400 transition">
|
||
Экспорт
|
||
</button>
|
||
</div>
|
||
<button v-if="canDeleteCanvas(canvas)" @click.stop="deleteCanvas(canvas.id)"
|
||
class="text-xs text-slate-400 hover:text-red-400 transition">
|
||
Удалить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="text-center py-12">
|
||
<div class="text-slate-500 mb-4">Карты не найдены</div>
|
||
<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>
|
||
|
||
<!-- Create Modal -->
|
||
<div v-if="showCreateModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="showCreateModal = false">
|
||
<div class="bg-slate-900 border border-slate-700 rounded-xl p-6 w-full max-w-md">
|
||
<h2 class="text-lg font-semibold text-slate-200 mb-4">Создать Новую Карту</h2>
|
||
<form @submit.prevent="createCanvas" class="space-y-4">
|
||
<div>
|
||
<label class="text-sm text-slate-400 block mb-1">Название Карты</label>
|
||
<input v-model="newCanvas.name" required class="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white" placeholder="Моя Awesome Карта" />
|
||
</div>
|
||
<div>
|
||
<label class="text-sm text-slate-400 block mb-1">Видимость</label>
|
||
<select v-model="newCanvas.visibility" class="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white">
|
||
<option value="private">Приватная (только вы)</option>
|
||
<option value="public">Публичная (любой может просматривать)</option>
|
||
</select>
|
||
</div>
|
||
<div v-if="userGroups.length > 0">
|
||
<label class="text-sm text-slate-400 block mb-1">Поделиться с Группой (опционально)</label>
|
||
<select v-model="newCanvas.groupId" class="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white">
|
||
<option value="">Без группы</option>
|
||
<option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="flex gap-3 pt-2">
|
||
<button type="submit" class="flex-1 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
|
||
Создать
|
||
</button>
|
||
<button type="button" @click="showCreateModal = false" class="flex-1 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition">
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
definePageMeta({
|
||
middleware: 'auth'
|
||
})
|
||
|
||
const auth = useAuth()
|
||
const user = computed(() => auth.user)
|
||
const authFetch = async (url, opts = {}) => {
|
||
try {
|
||
return await $fetch(url, {
|
||
...opts,
|
||
headers: { Authorization: `Bearer ${auth.token.value}`, ...opts.headers }
|
||
})
|
||
} catch (error) {
|
||
if (error.response?.status === 401) {
|
||
auth.logout()
|
||
}
|
||
throw error
|
||
}
|
||
}
|
||
|
||
const canvases = ref([])
|
||
const userGroups = ref([])
|
||
const showCreateModal = ref(false)
|
||
const importInput = ref(null)
|
||
const activeTab = ref('personal')
|
||
|
||
const newCanvas = reactive({
|
||
name: '',
|
||
visibility: 'private',
|
||
groupId: ''
|
||
})
|
||
|
||
const currentUserId = computed(() => auth.user.value?.id || '')
|
||
|
||
// Load data
|
||
const loadData = async () => {
|
||
try {
|
||
const [canvasesRes, groupsRes] = await Promise.all([
|
||
authFetch('/api/canvas'),
|
||
authFetch('/api/user/groups')
|
||
])
|
||
canvases.value = canvasesRes.canvases || []
|
||
userGroups.value = groupsRes.groups || []
|
||
} catch (error) {
|
||
console.error('Failed to load data:', error)
|
||
}
|
||
}
|
||
|
||
// Filter canvases based on active tab
|
||
const filteredCanvases = computed(() => {
|
||
const userId = currentUserId.value
|
||
switch (activeTab.value) {
|
||
case 'personal':
|
||
return canvases.value.filter(c => !c.groupId)
|
||
case 'shared':
|
||
return canvases.value.filter(c =>
|
||
c.groupId && userGroups.value.some(g => g.id === c.groupId) ||
|
||
c.ownerId !== userId && c.isPublic
|
||
)
|
||
case 'public':
|
||
return canvases.value.filter(c => c.isPublic)
|
||
default:
|
||
return canvases.value
|
||
}
|
||
})
|
||
|
||
// Tab styling
|
||
const tabClass = (tab) => {
|
||
return activeTab.value === tab
|
||
? 'bg-slate-800 text-slate-200'
|
||
: 'text-slate-400 hover:text-slate-300'
|
||
}
|
||
|
||
// Canvas actions
|
||
const openCanvas = (id) => {
|
||
navigateTo(`/canvas/${id}`)
|
||
}
|
||
|
||
const createCanvas = async () => {
|
||
try {
|
||
const payload = {
|
||
name: newCanvas.name,
|
||
isPublic: newCanvas.visibility === 'public',
|
||
groupId: newCanvas.groupId || undefined
|
||
}
|
||
const result = await authFetch('/api/canvas', { method: 'POST', body: payload })
|
||
showCreateModal.value = false
|
||
newCanvas.name = ''
|
||
newCanvas.visibility = 'private'
|
||
newCanvas.groupId = ''
|
||
await loadData()
|
||
navigateTo(`/canvas/${result.canvas.id}`)
|
||
} catch (error) {
|
||
console.error('Failed to create canvas:', error)
|
||
}
|
||
}
|
||
|
||
const duplicateCanvas = async (id) => {
|
||
try {
|
||
const result = await authFetch(`/api/canvas/${id}/duplicate`, { method: 'POST' })
|
||
await loadData()
|
||
} catch (error) {
|
||
console.error('Failed to duplicate canvas:', error)
|
||
}
|
||
}
|
||
|
||
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) => {
|
||
try {
|
||
const canvas = await authFetch(`/api/canvas/${id}`)
|
||
const blob = new Blob([JSON.stringify(canvas, null, 2)], { type: 'application/json' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = `${canvas.name || 'canvas'}.canvas`
|
||
a.click()
|
||
URL.revokeObjectURL(url)
|
||
} catch (error) {
|
||
console.error('Failed to export canvas:', error)
|
||
}
|
||
}
|
||
|
||
const canDeleteCanvas = (canvas) => {
|
||
return canvas.ownerId === currentUserId.value
|
||
}
|
||
|
||
const deleteCanvas = async (id) => {
|
||
if (!confirm('Вы уверены, что хотите удалить эту карту?')) return
|
||
try {
|
||
await authFetch(`/api/canvas/${id}`, { method: 'DELETE' })
|
||
await loadData()
|
||
} catch (error) {
|
||
console.error('Failed to delete canvas:', error)
|
||
}
|
||
}
|
||
|
||
// Helper functions
|
||
const formatDate = (date) => {
|
||
return new Date(date).toLocaleDateString('ru-RU', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
})
|
||
}
|
||
|
||
const getOwnerName = (ownerId) => {
|
||
return ownerId === currentUserId.value ? 'вы' : `Пользователь ${ownerId}`
|
||
}
|
||
|
||
const getGroupName = (groupId) => {
|
||
const group = userGroups.value.find(g => g.id === groupId)
|
||
return group?.name || 'Unknown Group'
|
||
}
|
||
|
||
onMounted(() => {
|
||
if (auth.isAuthenticated.value) {
|
||
loadData()
|
||
}
|
||
})
|
||
|
||
watch(() => auth.isAuthenticated.value, (isAuth) => {
|
||
if (isAuth) loadData()
|
||
})
|
||
</script>
|