From 3673026a33d27ed672cd360e5d2e1091a9a7dae1 Mon Sep 17 00:00:00 2001
From: Alexandrina-Kuzeleva <alaz2005tv@gmail.com>
Date: Fri, 21 Nov 2025 14:50:00 +0300
Subject: [PATCH] TEST UPD

- add load more
---
 frontend/src/pages/MyPoints.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/MyPoints.vue b/frontend/src/pages/MyPoints.vue
index d0447687..1a53e740 100644
--- a/frontend/src/pages/MyPoints.vue
+++ b/frontend/src/pages/MyPoints.vue
@@ -30,7 +30,7 @@
 					<!-- ЛЕВАЯ КОЛОНКА — список баллов -->
 					<div class="bg-white rounded-xl shadow-xl mt-4">
 						<ul class="divide-y divide-gray-200">
-							<li v-for="item in energyPoints.data.slice(0, 20)" :key="item.name" class="p-6 hover:bg-gray-50">
+							<li v-for="item in visibleItems" :key="item.name" class="p-6 hover:bg-gray-50">
 								<div class="flex items-center justify-between">
 									<div class="flex items-center gap-5">
 										<div class="text-2xl font-bold"
@@ -50,6 +50,13 @@
 								</div>
 							</li>
 						</ul>
+						<div v-if="!showAll && energyPoints.data.length > 5" class="p-6 text-center">
+							<button
+								@click="showAll = true"
+								class="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition">
+								Показать ещё
+							</button>
+						</div>
 					</div>
 
 					<!-- ПРАВАЯ КОЛОНКА — итоги -->
@@ -73,7 +80,7 @@
 </template>
 
 <script setup>
-import { inject, computed, onMounted } from 'vue'
+import { inject, computed, onMounted, ref } from 'vue'
 import { createResource, Breadcrumbs } from 'frappe-ui'
 import NoPermission from '@/components/NoPermission.vue'
 
@@ -113,6 +120,15 @@ const breadcrumbs = computed(() => [
   { label: 'Мои баллы' }
 ])
 
+const showAll = ref(false)
+
+const visibleItems = computed(() => {
+  if (!Array.isArray(energyPoints.data)) return []
+  return showAll.value
+    ? energyPoints.data       // показать все
+    : energyPoints.data.slice(0, 5) // первые 5
+})
+
 onMounted(() => {
   if ($user.data) {
     energyPoints.fetch()