From 83637636f862fa2aab34a352ef9149386aaa80d0 Mon Sep 17 00:00:00 2001
From: Vladimir Zagainov <mrixs@mrixs.ru>
Date: Wed, 18 Jun 2025 17:30:10 +0300
Subject: [PATCH] feat(admin): added admin panel

---
 src/App.vue                       |  1 +
 src/router/index.ts               | 20 +++++++
 src/types.ts                      |  1 +
 src/views/admin/AdminLayout.vue   | 45 ++++++++++++++++
 src/views/admin/DashboardView.vue |  1 +
 src/views/admin/UsersView.vue     | 88 +++++++++++++++++++++++++++++++
 6 files changed, 156 insertions(+)
 create mode 100644 src/views/admin/AdminLayout.vue
 create mode 100644 src/views/admin/DashboardView.vue
 create mode 100644 src/views/admin/UsersView.vue

diff --git a/src/App.vue b/src/App.vue
index 2817fed..84f71a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,7 @@
             </template>
 
             <template v-else>
+                <router-link v-if="authStore.user?.role === 'admin'" to="/admin">Админ-панель</router-link> |
                 <router-link to="/account">Личный кабинет</router-link>
                 <span>Привет, {{ authStore.user?.username }}!</span> |
                 <a @click="authStore.handleLogout" href="#">Выход</a>
diff --git a/src/router/index.ts b/src/router/index.ts
index a430a36..db6f866 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -29,6 +29,24 @@ const routes = [
     name: "servers",
     component: () => import("../views/ServersView.vue"),
   },
+  {
+    path: "/admin",
+    name: "admin",
+    component: () => import("../views/admin/AdminLayout.vue"),
+    meta: { requiresAuth: true, requiresAdmin: true },
+    children: [
+      {
+        path: "",
+        name: "admin-dashboard",
+        component: () => import("../views/admin/DashboardView.vue"),
+      },
+      {
+        path: "users",
+        name: "admin-users",
+        component: () => import("../views/admin/UsersView.vue"),
+      },
+    ],
+  },
 ];
 
 const router = createRouter({
@@ -40,6 +58,8 @@ router.beforeEach((to, from, next) => {
   const authStore = useAuthStore();
   if (to.meta.requiresAuth && !authStore.isAuthenticated) {
     next({ name: "login" });
+  } else if (to.meta.requiresAdmin && authStore.user?.role !== "admin") {
+    next({ name: "home" });
   } else {
     next();
   }
diff --git a/src/types.ts b/src/types.ts
index 7f2a72e..97ef2f8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -19,6 +19,7 @@ export interface LoginResponse {
 
 // Тип для объекта пользователя
 export interface User {
+  id: number;
   uuid: string;
   username: string;
   email: string;
diff --git a/src/views/admin/AdminLayout.vue b/src/views/admin/AdminLayout.vue
new file mode 100644
index 0000000..8108f66
--- /dev/null
+++ b/src/views/admin/AdminLayout.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="admin-layout">
+        <aside class="admin-sidebar">
+            <h2>Админ-панель</h2>
+            <nav>
+                <router-link :to="{ name: 'admin-dashboard' }">Дашборд</router-link>
+                <router-link :to="{ name: 'admin-users' }">Пользователи</router-link>
+            </nav>
+        </aside>
+        <main class="admin-content">
+            <router-view />
+        </main>
+    </div>
+</template>
+
+<style scoped>
+.admin-layout {
+    display: flex;
+}
+.admin-sidebar {
+    width: 200px;
+    background: #f4f4f4;
+    padding: 1rem;
+    height: 100vh;
+}
+.admin-sidebar h2 {
+    margin-top: 0;
+}
+.admin-sidebar nav {
+    display: flex;
+    flex-direction: column;
+}
+.admin-sidebar nav a {
+    padding: 0.5rem 0;
+    text-decoration: none;
+    color: #333;
+}
+.admin-sidebar nav a.router-link-exact-active {
+    font-weight: bold;
+}
+.admin-content {
+    flex-grow: 1;
+    padding: 1rem;
+}
+</style>
diff --git a/src/views/admin/DashboardView.vue b/src/views/admin/DashboardView.vue
new file mode 100644
index 0000000..c0b67b6
--- /dev/null
+++ b/src/views/admin/DashboardView.vue
@@ -0,0 +1 @@
+<template><h1>Дашборд</h1></template>
diff --git a/src/views/admin/UsersView.vue b/src/views/admin/UsersView.vue
new file mode 100644
index 0000000..8e1b282
--- /dev/null
+++ b/src/views/admin/UsersView.vue
@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <h1>Управление пользователями</h1>
+        <div v-if="isLoading">Загрузка...</div>
+        <table v-else>
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Username</th>
+                    <th>Email</th>
+                    <th>Роль</th>
+                    <th>Действия</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="user in users" :key="user.uuid">
+                    <td>{{ user.id }}</td>
+                    <td>{{ user.username }}</td>
+                    <td>{{ user.email }}</td>
+                    <td>
+                        <select v-model="user.role" @change="updateRole(user)">
+                            <option value="user">user</option>
+                            <option value="admin">admin</option>
+                        </select>
+                    </td>
+                    <td><button @click="updateRole(user)">Сохранить</button></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import apiClient from "@/api/axios";
+
+interface User {
+    id: number;
+    uuid: string;
+    username: string;
+    email: string;
+    role: string;
+}
+
+const users = ref<User[]>([]);
+const isLoading = ref(true);
+
+const fetchUsers = async () => {
+    isLoading.value = true;
+    try {
+        const response = await apiClient.get<User[]>("/admin/users");
+        users.value = response.data;
+    } catch (error) {
+        console.error("Failed to fetch users:", error);
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const updateRole = async (user: User) => {
+    try {
+        await apiClient.patch(`/admin/users/${user.id}/role`, { role: user.role });
+        alert(`Роль для ${user.username} обновлена.`);
+    } catch (error) {
+        console.error("Failed to update role:", error);
+        alert("Ошибка при обновлении роли.");
+        fetchUsers();
+    }
+};
+
+onMounted(fetchUsers);
+</script>
+
+<style scoped>
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th,
+td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+th {
+    background-color: #f2f2f2;
+}
+</style>