diff --git a/src/core/components/Pagination-without-number.tsx b/src/core/components/Pagination-without-number.tsx
new file mode 100644
index 00000000..e8a265e7
--- /dev/null
+++ b/src/core/components/Pagination-without-number.tsx
@@ -0,0 +1,59 @@
+// Packages
+import React from 'react'
+import { useListContext } from 'react-admin'
+import { Button, Toolbar, Box, Typography } from '@material-ui/core'
+
+// Icons
+import { ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon } from '@material-ui/icons'
+
+interface Props {
+ next: () => void
+ back: () => void
+ backAll: () => void
+ page: number
+}
+
+const PaginationWithoutNumber = (props: Props) => {
+ const { page, perPage, setPage, ids, loading, total } = useListContext()
+ const isLastPage = page * perPage >= total
+ const listLength = ids.length
+
+ // console.log({ ids })
+
+ return (
+
+
+
+
+ {`Resultados por página: ${listLength} `}
+
+
+ {`Página: ${props.page} `}
+
+ {props.page > 1 && (
+ <>
+
+
+ >
+ )}
+ {total > perPage && !isLastPage && (
+
+
+
+ )}
+
+
+
+ )
+}
+
+export default PaginationWithoutNumber
diff --git a/src/core/components/local-list.tsx b/src/core/components/local-list.tsx
index 6a404162..0c8f129a 100644
--- a/src/core/components/local-list.tsx
+++ b/src/core/components/local-list.tsx
@@ -1,9 +1,18 @@
// Packages
-import React, { ReactElement, cloneElement, useEffect } from 'react'
-import { Box, Button } from '@material-ui/core'
+import React, { ReactElement, cloneElement, useEffect, useState, useCallback } from 'react'
+import { Box, Button, TablePagination } from '@material-ui/core'
import { Config } from 'final-form'
-import { ListContextProvider, Pagination, useList, useVersion, SortPayload, FilterPayload } from 'react-admin'
+import {
+ ListContextProvider,
+ Pagination,
+ useList,
+ useVersion,
+ SortPayload,
+ FilterPayload,
+ useTranslate
+} from 'react-admin'
import { Form } from 'react-final-form'
+import PaginationWithoutNumber from './Pagination-without-number'
interface RaRecord {
id: string | number
@@ -14,19 +23,56 @@ interface EssentialParams extends Pick {
onRefresh?: () => void
data?: Array
filters?: ReactElement | Array
- perPage?: 5 | 10 | 25
- sort?: SortPayload
+ perPage?: number
+ sort: SortPayload
filter?: FilterPayload
isLoading?: boolean
+ paginationStrategy?: 'local'
}
-interface Props extends EssentialParams {
+interface EssentialParams2 extends Omit {
+ paginationStrategy?: 'api-without-total'
+ onPageChange?: (value: number) => void
+ onSortChange?: (value: SortPayload) => void
+ onPerPageChange?: (value: number) => void
+}
+
+interface EssentialParams3 extends Omit {
+ paginationStrategy?: 'api-with-total'
+ onPageChange?: (value: number) => void
+ onSortChange?: (value: SortPayload) => void
+ onPerPageChange?: (value: number) => void
+ total: number
+}
+
+interface Props {
children: ReactElement
}
-const LocalList = (props: Props) => {
- const { children, onRefresh, data, isLoading, filters, onSubmit = () => undefined, perPage = 5, sort, filter } = props
+const LocalList = (props: (Props & EssentialParams) | (Props & EssentialParams2) | (Props & EssentialParams3)) => {
+ const {
+ children,
+ onRefresh,
+ data,
+ isLoading,
+ filters,
+ onSubmit = () => undefined,
+ perPage = 5,
+ sort,
+ filter,
+ paginationStrategy = 'local',
+ // @ts-ignore
+ total,
+ // @ts-ignore
+ onPageChange = () => undefined,
+ // @ts-ignore
+ onSortChange = () => undefined,
+ // @ts-ignore
+ onPerPageChange = () => undefined
+ } = props
+ const translate = useTranslate()
const filtersToRender = Array.isArray(filters) ? filters : filters === undefined ? [] : [filters]
+ const [page, setPage] = useState(1)
const version = useVersion()
const listContext = useList({
ids: [],
@@ -38,12 +84,56 @@ const LocalList = (props: Props) => {
filter
})
+ useEffect(() => {
+ onPageChange(page)
+ }, [page, onPageChange])
+
+ useEffect(() => {
+ onSortChange(listContext.currentSort)
+ }, [listContext.currentSort, onSortChange])
+
+ const handleNextPage = () => {
+ setPage(state => state + 1)
+ }
+
+ const handleBackAllPage = () => {
+ setPage(1)
+ }
+
+ const handleBackPage = () => {
+ setPage(state => state - 1)
+ }
+
useEffect(() => {
if (onRefresh) {
onRefresh()
}
}, [onRefresh, version])
+ const handlePageChange = useCallback(
+ (_, page) => {
+ setPage(page + 1)
+ },
+ [setPage]
+ )
+
+ const labelDisplayedRows = useCallback(
+ ({ from, to, count }) =>
+ translate('ra.navigation.page_range_info', {
+ offsetBegin: from,
+ offsetEnd: to,
+ total: count
+ }),
+ [translate]
+ )
+
+ const handlePerPageChange = useCallback(
+ event => {
+ onPerPageChange(event.target.value)
+ },
+ [onPerPageChange]
+ )
+
return (
{filtersToRender && (
@@ -67,7 +157,27 @@ const LocalList = (props: Props) => {
)}
{children}
-
+ {paginationStrategy === 'api-without-total' ? (
+
+ ) : paginationStrategy === 'api-with-total' ? (
+
+ ) : (
+
+ )}
)
diff --git a/src/resources/custom/custom-list.component.tsx b/src/resources/custom/custom-list.component.tsx
index c93e6e55..d5a2ca22 100644
--- a/src/resources/custom/custom-list.component.tsx
+++ b/src/resources/custom/custom-list.component.tsx
@@ -31,6 +31,7 @@ import { TabResource } from './tab-resource.component'
import { TabHealth } from './tab-health.component'
import { Whatshot as WhatshotIcon } from '@material-ui/icons'
import { TabLocalList } from './tab-local-list'
+import { TabLocalListWithApiPagination } from './tab-local-list-with-api-pagination'
const InfinitDatagrid = () => {
const infiniteList = useMemo(() => {
@@ -328,6 +329,7 @@ const CustomList: FC = () => {
+
@@ -347,6 +349,9 @@ const CustomList: FC = () => {
+
+
+
)
}
diff --git a/src/resources/custom/tab-local-list-with-api-pagination.tsx b/src/resources/custom/tab-local-list-with-api-pagination.tsx
new file mode 100644
index 00000000..34b23ca6
--- /dev/null
+++ b/src/resources/custom/tab-local-list-with-api-pagination.tsx
@@ -0,0 +1,44 @@
+// Packages
+import React, { FC, useState } from 'react'
+import { TextField, Datagrid, TextInput, required } from 'react-admin'
+import { useGetUsersQuery } from 'store/api/users-api'
+import LocalList from 'core/components/local-list'
+
+export const TabLocalListWithApiPagination: FC = () => {
+ const [page, setPage] = useState({})
+ const [perPage, setPerPage] = useState(6)
+ const [sort, setSort] = useState({ field: 'created_at', order: 'ASC' })
+ const { isFetching, data, refetch } = useGetUsersQuery({
+ filter: {},
+ pagination: { page, perPage },
+ sort: sort
+ })
+
+ return (
+ {
+ setPage(value)
+ }}
+ onSortChange={value => {
+ setSort(value)
+ }}
+ onPerPageChange={value => {
+ setPerPage(value)
+ }}
+ total={data?.total || 0}
+ sort={sort}
+ onSubmit={() => {}}
+ paginationStrategy="api-with-total"
+ filters={[]}
+ >
+
+
+
+
+
+ )
+}