feat(ui) - pagination wip
This commit is contained in:
Shekar Siri
parent
dd62a7116f
commit
3537b6c00f
5 changed files with 40 additions and 19 deletions
|
|
@ -42,9 +42,8 @@ function LiveSessionList(props: Props) {
|
|||
text: capitalize(i), value: i
|
||||
})).toJS();
|
||||
|
||||
const displayedCount = Math.min(currentPage * PER_PAGE, sessions.size);
|
||||
|
||||
const addPage = () => props.updateCurrentPage(props.currentPage + 1)
|
||||
// const displayedCount = Math.min(currentPage * PER_PAGE, sessions.size);
|
||||
// const addPage = () => props.updateCurrentPage(props.currentPage + 1)
|
||||
|
||||
useEffect(() => {
|
||||
if (filters.size === 0) {
|
||||
|
|
@ -108,6 +107,12 @@ function LiveSessionList(props: Props) {
|
|||
}, AUTOREFRESH_INTERVAL);
|
||||
}
|
||||
|
||||
const sliceListPerPage = (list, page) => {
|
||||
const start = page * PER_PAGE;
|
||||
const end = start + PER_PAGE;
|
||||
return list.slice(start, end);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex mb-6 justify-between items-end">
|
||||
|
|
@ -138,8 +143,8 @@ function LiveSessionList(props: Props) {
|
|||
<div className="w-full flex items-center justify-center py-6">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={30}
|
||||
onChange={(page) => null}
|
||||
totalPages={Math.ceil(sessions.size / PER_PAGE)}
|
||||
onPageChange={(page) => props.updateCurrentPage(page)}
|
||||
/>
|
||||
</div>
|
||||
<NoContent
|
||||
|
|
@ -154,9 +159,9 @@ function LiveSessionList(props: Props) {
|
|||
show={ !loading && sessions && sessions.size === 0}
|
||||
>
|
||||
<Loader loading={ loading }>
|
||||
{sessions && sessions.sortBy(i => i.metadata[sort.field]).update(list => {
|
||||
{sessions && sliceListPerPage(sessions.sortBy(i => i.metadata[sort.field]).update(list => {
|
||||
return sort.order === 'desc' ? list.reverse() : list;
|
||||
}).take(displayedCount).map(session => (
|
||||
}), currentPage - 1).map(session => (
|
||||
<SessionItem
|
||||
key={ session.sessionId }
|
||||
session={ session }
|
||||
|
|
@ -173,11 +178,11 @@ function LiveSessionList(props: Props) {
|
|||
totalCount={sessions.size}
|
||||
onClick={addPage}
|
||||
/> */}
|
||||
<Pagination
|
||||
{/* <Pagination
|
||||
currentPage={1}
|
||||
totalCount={30}
|
||||
onChange={(page) => null}
|
||||
/>
|
||||
/> */}
|
||||
</Loader>
|
||||
</NoContent>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,25 +10,41 @@ interface Props {
|
|||
}
|
||||
export default function Pagination(props: Props) {
|
||||
const { page, totalPages, onPageChange, limit = 5 } = props;
|
||||
const [currentPage, setCurrentPage] = React.useState(page);
|
||||
// const []
|
||||
|
||||
const changePage = (page: number) => {
|
||||
if (page > 0 && page <= totalPages) {
|
||||
onPageChange(page);
|
||||
setCurrentPage(page);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className={cn("pagination-previous py-2 px-3", { "opacity-50": page === 1 })}
|
||||
className={cn("py-2 px-3", { "opacity-50 cursor-default": page === 1 })}
|
||||
disabled={page === 1}
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
onClick={() => changePage(page - 1)}
|
||||
>
|
||||
<Icon name="chevron-left" size="18" />
|
||||
<Icon name="chevron-left" size="18" color={page === 1 ? 'gray-medium' : 'teal'} />
|
||||
</button>
|
||||
<span className="mr-2 color-gray-medium">Page</span>
|
||||
<input type="number" className="p-1 bg-white border rounded w-16" value={page} />
|
||||
<input
|
||||
type="number"
|
||||
className={cn("py-1 px-2 bg-white border rounded w-16", { "opacity-50 cursor-default": totalPages === 1 })}
|
||||
value={currentPage}
|
||||
min={1}
|
||||
max={totalPages}
|
||||
onChange={(e) => changePage(parseInt(e.target.value))}
|
||||
/>
|
||||
<span className="mx-3 color-gray-medium">of</span>
|
||||
<span >{totalPages}</span>
|
||||
<button
|
||||
className="pagination-next py-2 px-3"
|
||||
className={cn("py-2 px-3", { "opacity-50 cursor-default": page === totalPages })}
|
||||
disabled={page === totalPages}
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
onClick={() => changePage(page + 1)}
|
||||
>
|
||||
<Icon name="chevron-right" size="18" />
|
||||
<Icon name="chevron-right" size="18" color={page === totalPages ? 'gray-medium' : 'teal'} />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
|
||||
<path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 447 B After Width: | Height: | Size: 424 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-chevron-left" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 289 B After Width: | Height: | Size: 246 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-chevron-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 291 B After Width: | Height: | Size: 248 B |
Loading…
Add table
Reference in a new issue