Update Test.vue

frontend/src/pages/Test.vue

@@ -2,22 +2,41 @@
     <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>Все пользователи: {{ allUsers.data }}</p>
-      <p>Количество пользователей: {{ allUsers.data?.length }}</p>
+      <p>Все пользователи: {{ formattedUsers }}</p>
+      <p>Количество пользователей: {{ usersCount }}</p>
+
+      <!-- Детальная информация -->
+      <div v-for="user in formattedUsers" :key="user.name" class="mt-2 p-2 bg-red-700 rounded">
+        <p>Name: {{ user.name }}</p>
+        <p>Full Name: {{ user.full_name }}</p>
+        <p>Email: {{ user.email }}</p>
+        <p>Roles: {{ user.roles }}</p>
+      </div>
     </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import { usersStore } from '@/stores/user'
 
 const store = usersStore()
 const { userResource, allUsers } = store
 
-// Загружаем всех пользователей при монтировании компонента
+const formattedUsers = computed(() => {
+  if (!allUsers.data) return []
+
+  return allUsers.data.map(user => ({
+    name: user.name,
+    full_name: user.full_name,
+    email: user.email,
+    roles: user.roles || 'No roles' // Запасной вариант
+  }))
+})
+
+const usersCount = computed(() => formattedUsers.value.length)
+
 import { onMounted } from 'vue'
 onMounted(() => {
-  if (!allUsers.data) {
-    allUsers.reload()
-  }
+  allUsers.reload()
 })
 </script>