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>