Update Test.vue

frontend/src/pages/Test.vue

@@ -1,12 +1,126 @@
 <template>
-    <div class="bg-red-600 text-white p-4 rounded-lg shadow-2xl font-mono text-xs max-w-sm">
-      <p class="font-bold">ДЕБАГ ИНФО</p>
-      <p>userResource: {{ userResource }}</p>
-      <p>Все пользователи: {{ usersList }}</p>
-      <p>Количество пользователей: {{ usersCount }}</p>
-      <p>logsResource: {{ logsResource?.data }}</p>
-      <p>Leaderboard: {{ leaderboard }}</p>
+  <div class="min-h-screen bg-gray-50 p-6">
+    <!-- Заголовок -->
+    <div class="text-center mb-8">
+      <h1 class="text-3xl font-bold text-gray-800 mb-2">Таблица лидеров</h1>
+      <p class="text-gray-600">Рейтинг участников по набранным очкам</p>
     </div>
+
+    <!-- Переключение групп -->
+    <div class="flex justify-center mb-8">
+      <div class="bg-white rounded-lg shadow-sm p-1 flex space-x-1">
+        <button
+          v-for="group in roleGroups"
+          :key="group.role"
+          @click="activeGroup = group.role"
+          :class="[
+            'px-4 py-2 rounded-md text-sm font-medium transition-all duration-200',
+            activeGroup === group.role
+              ? 'bg-blue-500 text-white shadow-md'
+              : 'text-gray-600 hover:text-gray-800 hover:bg-gray-100'
+          ]"
+        >
+          {{ group.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Таблица лидеров -->
+    <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
+      <!-- Заголовок таблицы -->
+      <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
+        <h2 class="text-xl font-bold text-white">
+          {{ activeGroupLabel }} - Топ {{ currentLeaderboard.length }}
+        </h2>
+      </div>
+
+      <!-- Список участников -->
+      <div class="divide-y divide-gray-100">
+        <div
+          v-for="(user, index) in currentLeaderboard"
+          :key="user.user"
+          class="px-6 py-4 hover:bg-gray-50 transition-colors duration-150"
+        >
+          <div class="flex items-center justify-between">
+            <!-- Место и информация -->
+            <div class="flex items-center space-x-4">
+              <!-- Место -->
+              <div
+                :class="[
+                  'w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm',
+                  index === 0 ? 'bg-yellow-400' :
+                  index === 1 ? 'bg-gray-400' :
+                  index === 2 ? 'bg-orange-400' : 'bg-blue-400'
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+
+              <!-- Аватар и имя -->
+              <div class="flex items-center space-x-3">
+                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                  <span class="text-blue-600 font-bold text-sm">
+                    {{ user.username?.charAt(0).toUpperCase() }}
+                  </span>
+                </div>
+                <div>
+                  <h3 class="font-semibold text-gray-800">{{ user.full_name }}</h3>
+                  <p class="text-sm text-gray-500">{{ user.username }}</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Очки и бонусы -->
+            <div class="flex items-center space-x-6">
+              <!-- Бонусы -->
+              <div class="text-center">
+                <div class="text-xs text-gray-500 mb-1">Бонус</div>
+                <div class="flex items-center space-x-1">
+                  <span class="text-lg font-bold text-orange-500">{{ user.bonus }}</span>
+                  <span class="text-orange-400">⭐</span>
+                </div>
+              </div>
+
+              <!-- Очки -->
+              <div class="text-center">
+                <div class="text-xs text-gray-500 mb-1">Очки</div>
+                <div class="text-xl font-bold text-gray-800">{{ user.points }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Пустое состояние -->
+      <div
+        v-if="currentLeaderboard.length === 0"
+        class="text-center py-12 text-gray-500"
+      >
+        <div class="text-6xl mb-4">🏆</div>
+        <p class="text-lg">Пока нет участников в этой категории</p>
+      </div>
+    </div>
+
+    <!-- Статистика -->
+    <div class="max-w-4xl mx-auto mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div
+        v-for="group in roleGroups"
+        :key="group.role"
+        class="bg-white rounded-lg shadow-sm p-4 border-l-4"
+        :class="{
+          'border-blue-400': group.role === 'LMS Student',
+          'border-green-400': group.role === 'Course Creator',
+          'border-purple-400': group.role === 'LMS Schoolchild'
+        }"
+      >
+        <h3 class="font-semibold text-gray-700 mb-2">{{ group.label }}</h3>
+        <p class="text-2xl font-bold text-gray-800">
+          {{ getGroupStats(group.role).count }}
+        </p>
+        <p class="text-sm text-gray-500">участников</p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -17,6 +131,15 @@ import { createResource } from 'frappe-ui'
 const store = usersStore()
 const { userResource, allUsers } = store
 
+// Группы ролей которые нас интересуют
+const roleGroups = [
+  { role: 'LMS Student', label: 'Студенты' },
+  { role: 'Course Creator', label: 'Преподаватели' },
+  { role: 'LMS Schoolchild', label: 'Школьники' }
+]
+
+const activeGroup = ref('LMS Student')
+
 const usersList = computed(() => allUsers.data || [])
 const usersCount = computed(() => usersList.value.length)
 
@@ -33,6 +156,28 @@ const logsResource = createResource({
 
 const leaderboard = ref([])
 
+// Активная группа label
+const activeGroupLabel = computed(() => {
+  const group = roleGroups.find(g => g.role === activeGroup.value)
+  return group ? group.label : ''
+})
+
+// Текущий лидерборд для активной группы
+const currentLeaderboard = computed(() => {
+  return leaderboard.value
+    .filter(user => user.roles.includes(activeGroup.value))
+    .slice(0, 50) // Показываем топ 50
+})
+
+// Статистика по группам
+function getGroupStats(role) {
+  const groupUsers = leaderboard.value.filter(user => user.roles.includes(role))
+  return {
+    count: groupUsers.length,
+    totalPoints: groupUsers.reduce((sum, user) => sum + user.points, 0)
+  }
+}
+
 function calculateLeaderboard() {
   if (!logsResource.data) return
 
@@ -44,22 +189,32 @@ function calculateLeaderboard() {
     pointsMap[log.user] += log.points
   })
 
-  // Создаем leaderboard
-  leaderboard.value = Object.keys(pointsMap).map(user => {
-    const u = usersList.value.find(x => x.name === user) || {
-      full_name: user,
-      username: user.split('@')[0],
-      roles: []
-    }
-    return {
-      user,
-      points: pointsMap[user],
-      full_name: u.full_name,
-      username: u.username,
-      roles: u.roles,
-      bonus: Math.min(Math.floor(pointsMap[user]/100), 10)
-    }
-  }).sort((a,b) => b.points - a.points)
+  // Создаем leaderboard только для пользователей с нужными ролями
+  leaderboard.value = Object.keys(pointsMap)
+    .map(user => {
+      const u = usersList.value.find(x => x.name === user)
+
+      // Пропускаем пользователей без данных или без нужных ролей
+      if (!u) return null
+
+      // Проверяем есть ли у пользователя нужные роли
+      const hasValidRole = u.roles && u.roles.some(role =>
+        roleGroups.some(group => group.role === role)
+      )
+
+      if (!hasValidRole) return null
+
+      return {
+        user,
+        points: pointsMap[user],
+        full_name: u.full_name,
+        username: u.username || user.split('@')[0],
+        roles: u.roles || [],
+        bonus: Math.min(Math.floor(pointsMap[user] / 100), 10)
+      }
+    })
+    .filter(user => user !== null) // Убираем null
+    .sort((a, b) => b.points - a.points)
 }
 
 onMounted(async () => {
@@ -68,3 +223,10 @@ onMounted(async () => {
   calculateLeaderboard()
 })
 </script>
+
+<style scoped>
+/* Плавные переходы */
+button, .hover\:bg-gray-50 {
+  transition: all 0.2s ease-in-out;
+}
+</style>