88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
'use client';
|
|
import React, { useState, useEffect } from "react";
|
|
import { apiPostFetcher } from "@/lib/fetcher";
|
|
import { ApiPaginationRequestWithQuery } from "@/validations/mutual/api/requests/validations";
|
|
import { TableComponentProps } from "@/validations/mutual/table/type";
|
|
import ComponentTable from "../mutual/TableCardPlain";
|
|
import PaginationComponent from "../mutual/UpperPagination";
|
|
import LowerPagination from "../mutual/LowerPagination";
|
|
|
|
const TableCardComponent: React.FC<TableComponentProps> = ({
|
|
urls,
|
|
schemas,
|
|
translations,
|
|
columns,
|
|
initPagination,
|
|
}) => {
|
|
const defaultPagination = {
|
|
page: initPagination?.page || 1,
|
|
size: initPagination?.size || 10,
|
|
orderFields: initPagination?.orderFields || [],
|
|
orderTypes: initPagination?.orderTypes || [],
|
|
query: initPagination?.query || {},
|
|
}
|
|
const [data, setData] = useState<any>(null);
|
|
const [pagination, setPagination] = useState<ApiPaginationRequestWithQuery>(defaultPagination);
|
|
const [apiPagination, setApiPagination] = useState<any>({
|
|
onPage: 1,
|
|
onPageCount: 10,
|
|
totalPage: 1,
|
|
totalCount: 1,
|
|
next: false,
|
|
back: false,
|
|
});
|
|
const handleBack = async () => {
|
|
setPagination({ ...pagination, page: pagination.page > 1 ? pagination.page - 1 : pagination.page });
|
|
await fetchData();
|
|
}
|
|
const handleNext = async () => {
|
|
setPagination({ ...pagination, page: pagination.page < apiPagination.totalPage ? pagination.page + 1 : pagination.page });
|
|
await fetchData();
|
|
}
|
|
const fetchData = async () => {
|
|
const response = await apiPostFetcher({
|
|
url: urls.list,
|
|
isNoCache: true,
|
|
body: {
|
|
page: pagination.page,
|
|
size: pagination.size,
|
|
orderFields: pagination.orderFields,
|
|
orderTypes: pagination.orderTypes,
|
|
query: pagination.query,
|
|
},
|
|
});
|
|
if (response && response.data) {
|
|
setData(response.data.data);
|
|
if (response.data.pagination) {
|
|
setApiPagination(response.data.pagination);
|
|
}
|
|
}
|
|
};
|
|
useEffect(() => { fetchData() }, [pagination.page, pagination.size, pagination.orderFields, pagination.orderTypes]);
|
|
const upperPaginationProps = {
|
|
apiPagination,
|
|
pagination,
|
|
setPagination,
|
|
defaultPagination,
|
|
}
|
|
const lowerPaginationProps = {
|
|
pagination: apiPagination,
|
|
handleBack,
|
|
handleNext,
|
|
}
|
|
const tableProps = {
|
|
data,
|
|
columns,
|
|
translations,
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-col items-center justify-start my-6"><PaginationComponent {...upperPaginationProps} /></div>
|
|
<div className="flex flex-col items-center justify-start my-6"><LowerPagination {...lowerPaginationProps} /></div>
|
|
<div className="flex flex-col items-center justify-start my-6"><h1>Post Data Page</h1><ComponentTable {...tableProps} /></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TableCardComponent; |