Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[Bug Fix #1521] Home Page Pagination (#1558)

Browse source 
* Bug Fix #1521 - Pagination

* bugFix-1521 changed pagination design
This commit is contained in:
Midhun G S 2021-12-11 04:40:19 +05:30 committed by GitHub
parent 9172f9aa96
commit f036fe0684
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 88 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/HomePage/HomePage.jsx
View file

@ -36,10 +36,11 @@ class HomePage extends React.Component {
this.fetchFolders();
}
fetchApps = (page, folder) => {
fetchApps = (page = 1, folder) => {
this.setState({
apps: [],
isLoading: true,
currentPage: page,
});
appService.getAll(page, folder).then((data) =>
@ -65,7 +66,6 @@ class HomePage extends React.Component {
};
pageChanged = (page) => {
this.setState({ currentPage: page });
this.fetchApps(page, this.state.currentFolder.id);
};
@ -274,7 +274,14 @@ class HomePage extends React.Component {
hideProgressBar: true,
position: 'top-center',
});
this.fetchApps(this.state.currentPage || 1, this.state.currentFolder.id);
this.fetchApps(
this.state.currentPage
? this.state.apps?.length === 1
? this.state.currentPage - 1
: this.state.currentPage
: 1,
this.state.currentFolder.id
);
this.fetchFolders();
})
.catch(({ error }) => {
@ -396,7 +403,6 @@ class HomePage extends React.Component {
<Pagination
currentPage={meta.current_page}
count={this.pageCount()}
totalPages={meta.total_pages}
pageChanged={this.pageChanged}
/>
)}

95
frontend/src/_components/Pagination.jsx
View file

@ -1,18 +1,38 @@
import React from 'react';
import React, { useMemo } from 'react';
export const Pagination = function Pagination({ currentPage, count, totalPages, pageChanged }) {
function renderPageItem(i) {
return (
<li onClick={() => gotoPage(i + 1)} className={`page-item ${currentPage === i + 1 ? 'active' : ''}`}>
<a className="page-link">{i + 1}</a>
</li>
);
}
export const Pagination = function Pagination({ currentPage, count, pageChanged, itemsPerPage = 10 }) {
const totalPages = useMemo(() => {
return Math.floor((count - 1) / itemsPerPage) + 1;
}, [count, itemsPerPage]);
const getPageLinks = (index) => {
if (index < 1 || index > totalPages) {
return;
} else {
return (
<li
key={index}
onClick={() => gotoPage(index)}
className={`page-item ${currentPage === index ? 'active' : ''}`}
>
<a className="page-link">{index}</a>
</li>
);
}
};
function gotoPage(page) {
pageChanged(page);
}
function gotoFirstPage() {
pageChanged(1);
}
function gotoLastPage() {
pageChanged(totalPages);
}
function gotoNextPage() {
gotoPage(currentPage + 1);
}
@ -21,23 +41,42 @@ export const Pagination = function Pagination({ currentPage, count, totalPages,
gotoPage(currentPage - 1);
}
function startingAppCount(currentPage) {
return (currentPage - 1) * 10 + 1;
function startingAppCount() {
return (currentPage - 1) * itemsPerPage + 1;
}
function endingAppCount(currentPage, totalCount) {
const num = currentPage * 10;
function endingAppCount() {
const num = currentPage * itemsPerPage;
return num > totalCount ? totalCount : num;
return num > count ? count : num;
}
return (
<div className="card-footer d-flex align-items-center px-1">
<p className="m-0 text-muted">
Showing <span>{startingAppCount(currentPage)}</span> to <span>{endingAppCount(currentPage, count)}</span> of{' '}
<span>{count}</span>
Showing <span>{startingAppCount()}</span> to <span>{endingAppCount()}</span> of <span>{count}</span>
</p>
<ul className="pagination m-0 ms-auto">
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
<a style={{ cursor: 'pointer' }} className="page-link" onClick={gotoFirstPage}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon"
width="24"
height="24"
viewBox="0 0 24 24"
strokeWidth="2"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="11 7 6 12 11 17" />
<polyline points="17 7 12 12 17 17" />
</svg>
</a>
</li>
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
<a style={{ cursor: 'pointer' }} className="page-link" onClick={gotoPreviousPage}>
<svg
@ -57,7 +96,9 @@ export const Pagination = function Pagination({ currentPage, count, totalPages,
</svg>
</a>
</li>
{Array.from(Array(totalPages).keys()).map((i) => renderPageItem(i))}
{getPageLinks(currentPage - 1)}
{getPageLinks(currentPage)}
{getPageLinks(currentPage + 1)}
<li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
<a style={{ cursor: 'pointer' }} className="page-link" onClick={gotoNextPage}>
<svg
@ -77,6 +118,26 @@ export const Pagination = function Pagination({ currentPage, count, totalPages,
</svg>
</a>
</li>
<li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
<a style={{ cursor: 'pointer' }} className="page-link" onClick={gotoLastPage}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon"
width="24"
height="24"
viewBox="0 0 24 24"
strokeWidth="2"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="7 7 12 12 7 17" />
<polyline points="13 7 18 12 13 17" />
</svg>
</a>
</li>
</ul>
</div>
);