From 373e551bea0322f1ea0ab692e2582f4013fd0354 Mon Sep 17 00:00:00 2001
From: Sergey Karmanov <ppoocpel8888@gmail.com>
Date: Sat, 16 May 2026 11:06:15 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=83=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D1=80=D0=BE=D0=BB=D1=8F=D0=BC=D0=B8=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=B9=20=D0=B2=20=D0=B0=D0=B4=D0=BC=D0=B8=D0=BD=D0=BA=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/admin/AdminUsersView.vue | 69 +++++++++++++++------
 1 file changed, 49 insertions(+), 20 deletions(-)

diff --git a/frontend/src/views/admin/AdminUsersView.vue b/frontend/src/views/admin/AdminUsersView.vue
index 6c7fd06..75d7d30 100644
--- a/frontend/src/views/admin/AdminUsersView.vue
+++ b/frontend/src/views/admin/AdminUsersView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { usersApi } from '@/api'
-import type { UserDto } from '@/api/types'
+import type { ApiUserRole, UserDto } from '@/api/types'
 import GlassCard from '@/components/ui/GlassCard.vue'
 import DataTable from '@/components/ui/DataTable.vue'
 import EmptyState from '@/components/ui/EmptyState.vue'
@@ -23,14 +23,14 @@ const columns = [
   { key: 'actions', label: 'Действия', align: 'right' },
 ]
 
+const allRoles: ApiUserRole[] = ['Student', 'Teacher', 'Admin']
 const roleLabels = { Student: 'Студент', Teacher: 'Преподаватель', Admin: 'Администратор' } as const
 const roleApi = { Студент: 'Student', Преподаватель: 'Teacher', Администратор: 'Admin' } as const
-type ApiUserRole = 'Student' | 'Teacher' | 'Admin'
-const roleSetSequence: ApiUserRole[][] = [
-  ['Student'],
-  ['Student', 'Teacher'],
-  ['Student', 'Teacher', 'Admin'],
-]
+const roleBadgeClasses: Record<ApiUserRole, string> = {
+  Student: 'badge-green',
+  Teacher: 'badge-blue',
+  Admin: 'badge-purple',
+}
 
 const rows = computed(() =>
   users.value.map(user => ({
@@ -69,17 +69,31 @@ async function toggleActive(row: Record<string, unknown>) {
   await fetchUsers()
 }
 
-async function promoteRole(row: Record<string, unknown>) {
+function getRowRoles(row: Record<string, unknown>) {
+  const apiRoles = Array.isArray(row.apiRoles) ? row.apiRoles : []
+  return Array.from(
+    new Set(apiRoles.filter((role): role is ApiUserRole => allRoles.includes(role as ApiUserRole))),
+  )
+}
+
+function hasRole(row: Record<string, unknown>, role: ApiUserRole) {
+  return getRowRoles(row).includes(role)
+}
+
+function getRoleChipClass(row: Record<string, unknown>, role: ApiUserRole) {
+  return hasRole(row, role) ? ['badge', roleBadgeClasses[role]] : ['btn-ghost', 'role-chip-inactive']
+}
+
+async function toggleRole(row: Record<string, unknown>, role: ApiUserRole) {
   const id = Number(row.id)
-  const apiRoles = (Array.isArray(row.apiRoles) ? row.apiRoles : []) as ApiUserRole[]
-  const currentKey = [...new Set(apiRoles)].sort().join(',')
-  const currentIndex = roleSetSequence.findIndex(set => set.slice().sort().join(',') === currentKey)
-  const next: ApiUserRole[] = (
-    currentIndex >= 0
-      ? roleSetSequence[(currentIndex + 1) % roleSetSequence.length]
-      : roleSetSequence[0]
-  ) ?? ['Student']
-  await usersApi.setRole(id, next)
+  const currentRoles = getRowRoles(row)
+  const nextRoles = currentRoles.includes(role)
+    ? currentRoles.filter(currentRole => currentRole !== role)
+    : [...currentRoles, role]
+
+  if (!nextRoles.length) return
+
+  await usersApi.setRole(id, nextRoles)
   await fetchUsers()
 }
 
@@ -113,15 +127,25 @@ onMounted(fetchUsers)
       <EmptyState v-if="error" title="Не удалось загрузить пользователей" :subtitle="error" />
       <EmptyState v-else-if="!rows.length && !loading" title="Пользователей не найдено" subtitle="Попробуйте изменить фильтры." />
       <DataTable :columns="columns" :rows="rows">
-        <template #role="{ value }">
-          <span :class="value === 'Студент' ? 'badge badge-green' : value === 'Преподаватель' ? 'badge badge-blue' : 'badge badge-purple'">{{ value }}</span>
+        <template #role="{ row }">
+          <div class="role-chips">
+            <button
+              v-for="role in allRoles"
+              :key="role"
+              class="role-chip"
+              :class="getRoleChipClass(row, role)"
+              type="button"
+              @click="toggleRole(row, role)"
+            >
+              {{ roleLabels[role] }}
+            </button>
+          </div>
         </template>
         <template #activity="{ value }">
           <span class="badge" :class="value === 'Активен' ? 'badge-green' : 'badge-orange'">{{ value }}</span>
         </template>
         <template #actions="{ row }">
           <div class="actions">
-            <button class="btn-ghost" @click="promoteRole(row)">Назначить роль</button>
             <button class="btn-ghost" @click="toggleActive(row)">{{ row.isActive ? 'Заблокировать' : 'Активировать' }}</button>
           </div>
         </template>
@@ -135,4 +159,9 @@ onMounted(fetchUsers)
 .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
 .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
 .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
+.role-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
+.role-chip { cursor: pointer; border: 0; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
+.role-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--color-primary-a15); }
+.role-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+.role-chip-inactive { opacity: 0.75; }
 </style>