updated docs

web_services/web-controllers/components/mutual/tableView/FullCardTableComp/component.tsx

@@ -0,0 +1,88 @@
+'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;