From 29c580d26d6f6c3537aa1b47fc6ad2abbacaf940 Mon Sep 17 00:00:00 2001
From: Vladiysss <139554971+Vladiysss@users.noreply.github.com>
Date: Sat, 7 Feb 2026 18:39:50 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B0=D0=B3=D0=B8=D0=BD=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B8=20=D0=B2=20=D1=81=D0=BF=D0=B8=D1=81=D0=BE=D0=BA=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D0=BD=D0=B1=D0=B0=D0=BD=20=D0=B4=D0=BE=D1=81=D0=BE?=
 =?UTF-8?q?=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/KBBoardsList.js   | 55 ++++++++++++++++++++++++++++++++-----------
 src/css/App.css       |  9 +++++++
 src/css/BoardList.css | 48 +++++++++++++++++++++++++++++++++++--
 3 files changed, 96 insertions(+), 16 deletions(-)

diff --git a/src/KBBoardsList.js b/src/KBBoardsList.js
index 49a8d86..92b6673 100644
--- a/src/KBBoardsList.js
+++ b/src/KBBoardsList.js
@@ -16,13 +16,17 @@ const KBBoardsList = () => {
     const [reverse, setReverse] = useState(false);
     const [search_text, setSearchText] = useState('');
     const [page, setPage] = useState(1);
-    const [limit, setLimit] = useState(20);
+    const [limit, setLimit] = useState(5);
 
     const [title, setTitle] = useState('');
     const [description, setDescription] = useState('');
     const [items, setItems] = useState([]);
+    const [totalItems, setTotalItems] = useState(null);
+
 
     
+
+
     function ListItem({ item }) {
         if (!item) return null;
         const openBoard = () => { navigate('/kanban-board/' + item.id); };
@@ -34,26 +38,48 @@ const KBBoardsList = () => {
                         <p><strong>Владелец:</strong> {item.owner_display_name}</p>
                     </div>
                     <div className="sort-row">
-                        <p><strong>Описание:</strong> {item.description}</p>
-                        <p><strong>Обновлено:</strong> {new Date(item.updated_at).toLocaleString()}</p>
+                        <p><strong>Описание:</strong> {item.description ? item.description : 'Отсутствует'}</p>
                     </div>
                 </button>
             </li>
         );
     };
+
+    const Pagination = () => {
+        const totalPages = Math.ceil(totalItems / limit);
+        if (totalPages <= 1) return null;
+        const pages = [];
+        for (let i = 1; i <= totalPages; i++) {
+            pages.push(i);
+        }
+        return (
+            <div className="pagination">
+            {pages.map((pageNum) => (
+                <button
+                    key={pageNum}
+                    onClick={() => setPage(pageNum)}
+                    className={page === pageNum ? 'active' : ''}
+                    disabled={loading}
+                > {pageNum} </button>
+            ))}
+            </div>
+        );
+    };
+
+
     
     const loadBoardList = useCallback(async () => {
         clearTimeout(debounceRef.current);
         debounceRef.current = setTimeout(async () => {
             try {
                 const newList = { sort_method, reverse, search_text, page, limit };
-                console.log("err");
                 const response = await axios.post('/api/boards/list', newList, {withCredentials: true });
-                console.log("err1");
-                if (Array.isArray(response.data)) {
-                    setItems(response.data);
+                if (Array.isArray(response.data.boards)) {
+                    setItems(response.data.boards);
+                    setTotalItems(response.data.count || response.data.boards.length);
                 } else {
                     setItems([]);
+                    setTotalItems(0)
                     if (response.data?.detail === 'Доски отсутствуют.') {
                         console.log('Доски отсутствуют');
                     }
@@ -72,11 +98,11 @@ const KBBoardsList = () => {
             }
             setTimer(400)
         }, timer); 
-    }, [sort_method, reverse, search_text, page, limit, timer, setItems, setError, navigate]);
+    }, [sort_method, reverse, search_text, page, limit, timer, setItems, setTotalItems, setError, navigate]);
 
     useEffect(() => { 
         loadBoardList();
-    }, [loadBoardList]);
+    }, [page, loadBoardList]);
 
     const setFilter = (method) => () => {
         const newMethod = method;
@@ -138,15 +164,16 @@ const KBBoardsList = () => {
 						<button onClick={openCreateModal}>Создать канбан-доску</button>
 					</div>
                     {items.length > 0 ? (
-                      	<ul>
-                        	{items.map((item) => (
-                          		<ListItem key={item.id} item={item} />
-                        	))}
-                      	</ul>
+                        <ul>
+                            {items.map((item) => (
+                                <ListItem key={item.id} item={item} />
+                            ))}
+                        </ul>
                     ) : (
                       	<p>Нет данных</p>
                     )}
    	 			</div>
+                <Pagination />
     		</div>
 			{showCreateModal && (
         		<div className="confirm-modal">
diff --git a/src/css/App.css b/src/css/App.css
index b4c36ea..2981abf 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -100,6 +100,15 @@ ul{
     max-width: 1200px;
 }  
 
+.page-container {
+    background-color: #1f2430;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 10px auto;
+    max-width: 1200px;
+}  
+
 h2 {
     text-align: center;
     color: #CAD1D8;
diff --git a/src/css/BoardList.css b/src/css/BoardList.css
index d9670ad..eea37cf 100644
--- a/src/css/BoardList.css
+++ b/src/css/BoardList.css
@@ -2,7 +2,7 @@
     background-color: #2b3245;
     padding: 10px;
     border-radius: 6px;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
 }
 
 .nav-sort{
@@ -38,10 +38,11 @@
 
 .kan-ban-list ul button{
     border-radius: 6px;
+    margin-bottom: 0px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    background-color: #3d4763;;
+    background-color: #3d4763;
 }
 
 .kan-ban-list ul button:hover{
@@ -55,9 +56,52 @@
 
 .sort-row p, .sort-row h3{
     margin: 4px 0px;
+    word-break: break-all;
 }
 
 .sort-row+.sort-row p {
     margin: 16px 0px 0px 0px;
 }
 
+.inf h3,
+.kan-ban-list-sort h3{
+    font-size: 1.7em;
+}
+
+
+
+
+
+
+/*пагинация*/
+.pagination {
+    background-color: #2b3245;
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+    flex-wrap: wrap;
+    padding: 10px;
+    border-radius: 6px;
+}
+
+.pagination button {
+    padding: 0px;
+    background-color: #3d4763;
+    cursor: pointer;
+    width: 34px;
+    height: 34px;
+    margin: 0px
+}
+
+.pagination button:hover:not(.active) {
+    background-color: #5c6b96;
+}
+
+.pagination button.active {
+    background-color: #007bff;
+}
+
+.pagination button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
\ No newline at end of file