184 lines
7.1 KiB
Vue
184 lines
7.1 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-slate-950 p-6">
|
|
<div class="max-w-4xl mx-auto" v-if="group">
|
|
<div class="flex items-center gap-4 mb-8 text-sm">
|
|
<NuxtLink to="/admin/groups" class="text-slate-500 hover:text-white transition">Группы</NuxtLink>
|
|
<span class="text-slate-700">/</span>
|
|
<span class="text-slate-300">{{ group.name }}</span>
|
|
</div>
|
|
|
|
<div class="bg-slate-900 border border-slate-800 rounded-3xl p-8 mb-8">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-3xl font-bold text-white">{{ group.name }}</h1>
|
|
<button @click="deleteGroup" class="px-4 py-2 bg-red-900/20 text-red-400 hover:bg-red-900/40 rounded-lg text-sm transition">Удалить группу</button>
|
|
</div>
|
|
<p class="text-slate-400">{{ group.description || 'Нет описания' }}</p>
|
|
</div>
|
|
|
|
<!-- Members Section -->
|
|
<div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden">
|
|
<div class="p-6 border-b border-slate-800 flex items-center justify-between">
|
|
<h2 class="text-xl font-bold text-white">Участники ({{ members.length }})</h2>
|
|
<button @click="showAddMemberModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-bold transition">+ Добавить</button>
|
|
</div>
|
|
<div class="divide-y divide-slate-800">
|
|
<div v-for="m in members" :key="m.id" class="p-4 flex items-center justify-between hover:bg-slate-800/30 transition">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center font-bold text-slate-400">
|
|
{{ m.user.username.charAt(0).toUpperCase() }}
|
|
</div>
|
|
<div>
|
|
<div class="text-slate-200 font-medium">{{ m.user.username }}</div>
|
|
<div class="text-xs text-slate-500">{{ m.role }}</div>
|
|
</div>
|
|
</div>
|
|
<button v-if="m.role !== 'admin'" @click="removeMember(m.userId)" class="text-slate-600 hover:text-red-400 transition text-xl">×</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add Member Modal -->
|
|
<div v-if="showAddMemberModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click.self="showAddMemberModal = false">
|
|
<div class="bg-slate-900 border border-slate-700 rounded-3xl p-8 w-full max-w-md shadow-2xl">
|
|
<h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-2">
|
|
<span>👤</span> Добавить участника
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Поиск пользователя</label>
|
|
<div class="relative">
|
|
<input
|
|
v-model="searchQuery"
|
|
@input="searchUsers"
|
|
placeholder="Введите имя или email..."
|
|
class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white outline-none focus:border-blue-500 transition"
|
|
/>
|
|
<div v-if="searching" class="absolute right-4 top-3.5">
|
|
<div class="animate-spin h-5 w-5 border-2 border-blue-500 border-t-transparent rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results -->
|
|
<div v-if="searchResults.length > 0" class="max-h-60 overflow-y-auto bg-slate-800/50 rounded-xl border border-slate-700 divide-y divide-slate-700">
|
|
<div v-for="u in searchResults" :key="u.id" class="p-3 flex items-center justify-between hover:bg-slate-700/50 transition">
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-medium text-white">{{ u.username }}</span>
|
|
<span class="text-[10px] text-slate-500">{{ u.email }}</span>
|
|
</div>
|
|
<button
|
|
@click="addMember(u.id)"
|
|
class="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-lg transition"
|
|
>
|
|
Выбрать
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="searchQuery.length >= 2" class="text-center py-4 text-slate-500 text-sm">
|
|
Пользователи не найдены
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<button @click="showAddMemberModal = false" class="w-full py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold transition">
|
|
Закрыть
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
middleware: ['auth', 'admin']
|
|
})
|
|
|
|
const route = useRoute()
|
|
const auth = useAuth()
|
|
const group = ref(null)
|
|
const members = ref([])
|
|
const showAddMemberModal = ref(false)
|
|
const searchQuery = ref('')
|
|
const searchResults = ref([])
|
|
const searching = ref(false)
|
|
|
|
const searchUsers = async () => {
|
|
if (searchQuery.value.length < 2) {
|
|
searchResults.value = []
|
|
return
|
|
}
|
|
searching.value = true
|
|
try {
|
|
const data = await $fetch('/api/users/search', {
|
|
params: { q: searchQuery.value },
|
|
headers: { Authorization: `Bearer ${auth.token.value}` }
|
|
})
|
|
searchResults.value = data.users || []
|
|
} catch (e) {
|
|
console.error('Search failed', e)
|
|
} finally {
|
|
searching.value = false
|
|
}
|
|
}
|
|
|
|
const addMember = async (userId) => {
|
|
try {
|
|
await $fetch(`/api/groups/${route.params.id}/add-member`, {
|
|
method: 'POST',
|
|
body: { userId, role: 'member' },
|
|
headers: { Authorization: `Bearer ${auth.token.value}` }
|
|
})
|
|
showAddMemberModal.value = false
|
|
searchQuery.value = ''
|
|
searchResults.value = []
|
|
await fetchGroup()
|
|
} catch (e) {
|
|
alert(e.data?.message || 'Ошибка при добавлении')
|
|
}
|
|
}
|
|
|
|
const removeMember = async (userId) => {
|
|
if (!confirm('Удалить участника из группы?')) return
|
|
try {
|
|
await $fetch(`/api/groups/${route.params.id}/members`, {
|
|
method: 'DELETE',
|
|
body: { userId },
|
|
headers: { Authorization: `Bearer ${auth.token.value}` }
|
|
})
|
|
await fetchGroup()
|
|
} catch (e) {
|
|
alert('Ошибка при удалении')
|
|
}
|
|
}
|
|
|
|
const fetchGroup = async () => {
|
|
try {
|
|
const data = await $fetch(`/api/groups/${route.params.id}`, {
|
|
headers: { Authorization: `Bearer ${auth.token.value}` }
|
|
})
|
|
group.value = data.group
|
|
members.value = data.group.members || []
|
|
} catch (e) {
|
|
console.error('Failed to fetch group', e)
|
|
navigateTo('/admin/groups')
|
|
}
|
|
}
|
|
|
|
const deleteGroup = async () => {
|
|
if (!confirm('Вы уверены, что хотите удалить эту группу?')) return
|
|
try {
|
|
await $fetch(`/api/groups/${route.params.id}`, {
|
|
method: 'DELETE',
|
|
headers: { Authorization: `Bearer ${auth.token.value}` }
|
|
})
|
|
navigateTo('/admin/groups')
|
|
} catch (e) {
|
|
alert('Ошибка при удалении')
|
|
}
|
|
}
|
|
|
|
onMounted(fetchGroup)
|
|
</script>
|