Merge pull request #42 from expfig/develop

Develop
expfig · Jul 14, 2023 · a107b64 · a107b64
2 parents 025284a + f07b41f
commit a107b64
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 44 deletions.
diff --git a/src/components/table/interface.ts b/src/components/table/interface.ts
@@ -27,6 +27,8 @@ interface IApprovalRequest {
 interface IDataTableProps {
 	data: IApprovalRequest[];
 	pages: any[];
+	firstPage: number;
+	lastPage: number;
 	onClickPreview: (page: number) => void;
 	onClickNext: (page: number) => number;
 }

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -8,7 +8,7 @@ import { useTheme } from "styled-components";
 
 import { Link } from "react-router-dom";
 import { Text } from "../text";
-import { FiLoader, FiArrowRight, FiArrowLeft } from "react-icons/fi";
+import { FiLoader } from "react-icons/fi";
 
 // typings
 import { type IDataTableProps, type IDataPagesProps } from "./interface";
@@ -30,32 +30,35 @@ import {
 	FooterTable,
 	ImageNotFoundData,
 	WrapperImageNotFoundData,
-	ButtonPreview,
-	TextSpanLeft,
-	ButtonNext,
-	TextSpanRight,
-	WrapperTextFooter,
-	TextNumberPage,
+	// ButtonPreview,
+	// TextSpanLeft,
+	// ButtonNext,
+	// TextSpanRight,
+	// WrapperTextFooter,
+	// TextNumberPage,
 } from "./styles";
+import { PaginationFooter } from "../pagination-footer";
 
 const Table = ({
 	data,
 	pages,
 	onClickPreview,
 	onClickNext,
+	firstPage,
+	lastPage,
 }: IDataTableProps) => {
 	const theme = useTheme();
 
-	const [pagess, setPages] = useState<IDataPagesProps[]>([]);
+	const [pageData, setPageData] = useState<IDataPagesProps[]>([]);
 
 	useEffect(() => {
-		setPages(pages);
+		setPageData(pages);
 	}, [pages]);
 
 	return (
 		<Container>
 			<>
-				{pagess.length ? (
+				{pageData.length ? (
 					<>
 						<TableHtml>
 							<Thead>
@@ -102,43 +105,22 @@ const Table = ({
 								))}
 							</Tbody>
 						</TableHtml>
+
 						<>
 							{data.length ? (
 								<FooterTable>
-									<ButtonPreview
-										onClick={() => {
-											// @ts-expect-error
-											onClickPreview(undefined);
+									<PaginationFooter
+										pageData={pageData}
+										firstPage={firstPage}
+										lastpage={lastPage}
+										isLoadingPagination={false}
+										onClickNext={(paramsPage: number) => {
+											onClickNext(paramsPage);
 										}}
-									>
-										<FiArrowLeft size={18} color={theme.colors.natural} />
-										<TextSpanLeft>Anterior</TextSpanLeft>
-									</ButtonPreview>
-
-									{pagess?.map((page: IDataPagesProps) => (
-										<WrapperTextFooter
-											key={page?.label}
-											background={page?.active}
-											onClick={() => {
-												onClickNext(Number(page?.label));
-												return page.label;
-											}}
-										>
-											<TextNumberPage active={page?.active}>
-												{page?.label}
-											</TextNumberPage>
-										</WrapperTextFooter>
-									))}
-
-									<ButtonNext
-										onClick={() => {
-											// @ts-expect-error
-											onClickNext(undefined);
+										onClickPreview={(paramsPage: number) => {
+											onClickPreview(paramsPage);
 										}}
-									>
-										<TextSpanRight>Próximo</TextSpanRight>
-										<FiArrowRight size={18} color={theme.colors.natural} />
-									</ButtonNext>
+									/>
 								</FooterTable>
 							) : (
 								<WrapperImageNotFoundData>

diff --git a/src/pages/aprovation/aprovation.tsx b/src/pages/aprovation/aprovation.tsx
@@ -232,6 +232,8 @@ const Aprovation = () => {
 						{/** COMPONENTE DE TABELA */}
 						<Table
 							data={dataTable}
+							firstPage={1}
+							lastPage={999}
 							pages={pagesData}
 							onClickNext={(pageCount: number) => {
 								handleOnclickPageNextOrPreview("next", Number(pageCount));

diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
@@ -49,6 +49,7 @@ const Home = () => {
 	const [approvalData, setApprovalData] = useState([]);
 	const [pagesData, setPagesData] = useState([]);
 	const [countPage, setCountPage] = useState(1);
+	const [lastPage, setLastPage] = useState(1);
 	const [loading, setLoading] = useState(false);
 
 	// dados para o filtro
@@ -97,8 +98,8 @@ const Home = () => {
 					link.label !== "Próxima &raquo;"
 			);
 
+			setLastPage(response.payload.data.data.last_page);
 			setPagesData(responseFiltered);
-
 			setLoading(false);
 
 			handleCleanDataFilter();
@@ -238,12 +239,15 @@ const Home = () => {
 						<Table
 							data={approvalData}
 							pages={pagesData}
+							firstPage={countPage}
+							lastPage={lastPage}
 							onClickNext={(pageCount: number) => {
 								handleOnclickPageNextOrPreview("next", Number(pageCount));
-								return 1;
+								return pageCount;
 							}}
 							onClickPreview={(pageCount: number) => {
 								handleOnclickPageNextOrPreview("preview", Number(pageCount));
+								return pageCount;
 							}}
 						/>
 					</WrapperTable>