From 9a9ec39ff6d63df12a59a193753c258103ade775 Mon Sep 17 00:00:00 2001 From: smanylov Date: Tue, 10 Feb 2026 17:29:36 +0700 Subject: [PATCH] update search pagination --- src/app/actions/searchActions.ts | 65 ++++++++++++------------ src/app/components/Pagination.tsx | 66 +++++++++++++------------ src/app/components/TanstakTable.tsx | 5 +- src/app/styles/pages-styles.scss | 24 +++++++++ src/app/ui/search/file-search-panel.tsx | 24 ++++++--- 5 files changed, 110 insertions(+), 74 deletions(-) diff --git a/src/app/actions/searchActions.ts b/src/app/actions/searchActions.ts index 9b34ed5..1a4a8fb 100644 --- a/src/app/actions/searchActions.ts +++ b/src/app/actions/searchActions.ts @@ -33,38 +33,39 @@ export async function searchGlobalFiles(fileId: string, currentPage: number) { console.log('searchGlobalFiles'); console.log(currentPage); -/* return { - images: [ - { - url: 'string1', - pageTitle: `string1 from page ${currentPage}`, - height: 100, - width: 100, - host: 'string1', - pageUrl: 'string1' - }, - { - url: 'string1', - pageTitle: `string2 from page ${currentPage}`, - height: 100, - width: 100, - host: 'string1', - pageUrl: 'string1' - }, - { - url: 'string1', - pageTitle: `string3 from page ${currentPage}`, - height: 100, - width: 100, - host: 'string1', - pageUrl: 'string1' - } - ], - page: 0, - pageSize: 0, - totalPages: 10, - totalResults: 100, - } */ + //удалить когда поиск будет нормально работать + /* return { + images: [ + { + url: 'string1', + pageTitle: `string1 from page ${currentPage}`, + height: 100, + width: 100, + host: 'string1', + pageUrl: 'string1' + }, + { + url: 'string1', + pageTitle: `string2 from page ${currentPage}`, + height: 100, + width: 100, + host: 'string1', + pageUrl: 'string1' + }, + { + url: 'string1', + pageTitle: `string3 from page ${currentPage}`, + height: 100, + width: 100, + host: 'string1', + pageUrl: 'string1' + } + ], + page: 0, + pageSize: 0, + totalPages: 11, + totalResults: 100, + } */ try { const response = await fetch(`${API_BASE_URL}/api/v1/data`, { diff --git a/src/app/components/Pagination.tsx b/src/app/components/Pagination.tsx index 85e85bd..fc2f25c 100644 --- a/src/app/components/Pagination.tsx +++ b/src/app/components/Pagination.tsx @@ -2,6 +2,10 @@ export function Pagination({ totalPages, currentPage, fileId, callBack }: any) { + if (totalPages === 0) { + return null; + } + const getVisiblePages = () => { const pages = []; const maxVisible = 7; @@ -26,42 +30,40 @@ export function Pagination({ totalPages, currentPage, fileId, callBack }: any) { const visiblePages = getVisiblePages(); return ( -
-
- {/* Кнопка первой страницы */} - {visiblePages[0] > 1 && ( - <> - - {visiblePages[0] > 2 && ...} - - )} - - {/* Видимые страницы */} - {visiblePages.map(page => ( +
+ {visiblePages[0] > 1 && ( + <> - ))} + {visiblePages[0] > 2 && ...} + + )} - {/* Кнопка последней страницы */} - {visiblePages[visiblePages.length - 1] < totalPages && ( - <> - {visiblePages[visiblePages.length - 1] < totalPages - 1 && ...} - - - )} -
+ {visiblePages.map(page => ( + + ))} + + {visiblePages[visiblePages.length - 1] < totalPages && ( + <> + {visiblePages[visiblePages.length - 1] < totalPages - 1 && ...} + + + )}
); } \ No newline at end of file diff --git a/src/app/components/TanstakTable.tsx b/src/app/components/TanstakTable.tsx index b89f9b2..d56103b 100644 --- a/src/app/components/TanstakTable.tsx +++ b/src/app/components/TanstakTable.tsx @@ -116,10 +116,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { if (!data?.files) return []; return data.files.map((item: ApiFile) => { - const [datePart, timePart] = item.updatedAt.split(' '); - const [day, month, year] = datePart.split('-').map(Number); - const [hours, minutes, seconds] = timePart.split(':').map(Number); - const newDate = new Date(year, month - 1, day, hours, minutes, seconds).getTime(); + const newDate = new Date(item.updatedAt).getTime(); return { id: item.id, diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index f671366..ede92dc 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -3839,11 +3839,35 @@ } } +.pagination-wrapper { + display: flex; + gap: 5px; + margin-top: 10px; + + .pagination-button { + border: 2px solid #e2e8f0; + padding: 0.25rem 0.75rem; + border-radius: 10px; + color: v.$p-color; + cursor: pointer; + + &.current-page { + background-color: v.$p-color; + color: v.$white; + } + + &:hover { + background-color: v.$bg-light; + } + } +} + .loading-animation { display: block; text-align: center; .global-spinner { + display: block; width: 24px; height: 24px; margin: 0 auto; diff --git a/src/app/ui/search/file-search-panel.tsx b/src/app/ui/search/file-search-panel.tsx index 9c397ef..e762d0e 100644 --- a/src/app/ui/search/file-search-panel.tsx +++ b/src/app/ui/search/file-search-panel.tsx @@ -20,6 +20,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a const [searchedGlobalFiles, setSearchedGlobalFiles] = useState([]); const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState(false); const [loading, setLoading] = useState(false); + const [paginationLoading, setPaginationLoading] = useState(false); const [showGlobalSearch, setShowGlobalSearch] = useState(false); const queryClient = useQueryClient(); @@ -33,6 +34,8 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a setSearchedUserFilesShowNull(false); setSearchedGlobalFilesShowNull(false); setShowGlobalSearch(false); + setSearchCurrentPages(1); + setSearchTotalPages(0); } })); @@ -55,11 +58,14 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a }, [fileId]) - const handlerSearchGlobalFile = useCallback(async (fileId: string, page: number): Promise => { - setLoading(true); - setSearchedGlobalFilesShowNull(false); - setSearchedGlobalFiles([]); - + const handlerSearchGlobalFile = useCallback(async (fileId: string, page: number, actionFromPagination?: boolean): Promise => { + if (!actionFromPagination) { + setLoading(true); + setSearchedGlobalFilesShowNull(false); + setSearchedGlobalFiles([]); + } else { + setPaginationLoading(true); + } try { let result = await searchGlobalFiles(fileId, page); @@ -79,6 +85,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a await queryClient.invalidateQueries({ queryKey: ['userData'] }); await queryClient.invalidateQueries({ queryKey: ['userSearchData'] }); setLoading(false); + setPaginationLoading(false); } }, [fileId]) @@ -185,6 +192,11 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
Найдено в интернете + {paginationLoading && ( +
+ +
+ )}
@@ -205,7 +217,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
- +
)}