gbs-add-block 0.0.98 → 0.0.100

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.98)
+# GBS Building Blocks 2.0 (v0.0.100)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.98)
+## What's New 🎉 (Ver 0.0.100)
 
 - Updated for bug fixes.
 

package/index.cjs

@@ -11,7 +11,6 @@ const CONFIG = {
     "Card",
     "Select",
     "SideBar",
-    "Grid",
     "MultiSelect",
     "Button",
     "DatePicker",
@@ -30,7 +29,8 @@ const CONFIG = {
     "Navbar",
     "DataGrid",
     "BreadCrumb",
-    "Bargraph"
+    "Bargraph",
+    "UsePaginatedData",
   ],
   // Define component dependencies
   dependencies: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/datagrid/layout/GridBody.tsx

@@ -91,12 +91,12 @@ const GridBody = () => {
                         <Icon
                           dimensions={{ width: "12", height: "12" }}
                           elements={listFilter}
-                          svgClass={`ml-2 fill-none dark:stroke-white ${
+                          svgClass={`ml-2 fill-none ${
                             activeFilterArray.some(
                               (filter) => filter.filterColumn === column.field
                             )
-                              ? "stroke-red-400"
-                              : "stroke-black"
+                              ? "stroke-red-400 dark:stroke-red-400"
+                              : "stroke-black dark:stroke-white"
                           }`}
                         />
                       </button>

package/source/components/usepaginateddata/usePaginatedData.ts

@@ -0,0 +1,170 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  exportToExcelHelper,
+  exportToPDFHelper,
+} from "@grampro/headless-helpers";
+
+export const usePaginatedData = (
+  apiEndpoint: string,
+  initialPageSize = 10,
+  method: "GET" | "POST" = "GET",
+  columns: any[] = []
+) => {
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [filters, setFilters] = useState<any[]>([]);
+  const [pagination, setPagination] = useState({
+    currentPage: 0,
+    totalPages: 0,
+    totalCount: 0,
+    pageSize: initialPageSize,
+  });
+
+  const fetchData = useCallback(
+    async (
+      method: "GET" | "POST",
+      page: number,
+      pageSize: number,
+      currentFilters: any[] = [],
+      search = "",
+      additionalParams: any = {},
+      isExportCall: boolean | null = null,
+      exportType: string | null = null
+    ) => {
+      try {
+        setLoading(true);
+
+        let response;
+
+        if (method === "POST") {
+          response = await fetch(apiEndpoint, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              page: page + 1,
+              pageSize,
+              filters: currentFilters,
+              search,
+              additionalParams,
+              isExportCall,
+            }),
+          });
+        } else {
+          let url = `${apiEndpoint}?page=${page + 1}&pageSize=${pageSize}`;
+          if (currentFilters.length > 0) {
+            url += `&filters=${encodeURIComponent(
+              JSON.stringify(currentFilters)
+            )}`;
+          }
+          if (search) {
+            url += `&search=${encodeURIComponent(search)}`;
+          }
+          if (isExportCall) {
+            url += `&isExportCall=${encodeURIComponent(true)}`;
+          }
+
+          response = await fetch(url);
+        }
+
+        if (!response.ok) throw new Error(`Error: ${response.status}`);
+
+        const result = await response.json();
+
+        if (!isExportCall) {
+          setData(result.data);
+          setPagination((prev) => ({
+            ...prev,
+            currentPage: page,
+            totalPages: result.pagination.totalPages,
+            totalCount: result.pagination.totalItems,
+          }));
+        } else {
+          if (exportType == "excelExport") {
+            exportToExcelHelper(
+              result.data,
+              columns.length > 0 ? columns : [],
+              "excel-export-data"
+            );
+          } else if (exportType == "pdfExport") {
+            exportToPDFHelper(
+              result.data,
+              columns.length > 0 ? columns : [],
+              "pdf-export-data",
+              { layout: "portrait", paperSize: "a4" }
+            );
+          }
+        }
+      } catch (error) {
+        console.error(`Failed to fetch data (${method}):`, error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiEndpoint]
+  );
+
+  // Handle page changes
+  const handlePageChange = useCallback(
+    (status: { currentPage: number; totalPages: number }) => {
+      if (status.currentPage !== pagination.currentPage) {
+        fetchData(method, status.currentPage, pagination.pageSize, filters);
+      }
+    },
+    [fetchData, pagination.currentPage, pagination.pageSize, filters]
+  );
+
+  // Handle filter changes
+  const handleFilterChange = useCallback(
+    (newFilters: any[]) => {
+      const filterType = newFilters.map((f: any) => ({ ...f, type: "filter" }));
+      setFilters(filterType);
+      fetchData(method, 0, pagination.pageSize, filterType);
+    },
+    [fetchData, pagination.pageSize]
+  );
+
+  // Handle search input
+  const handleSearch = useCallback(
+    (searchTerm: string) => {
+      const updatedFilters = filters.filter((f) => {
+        return !(f as any).searchTerm;
+      });
+
+      const finalFilters = [
+        ...updatedFilters,
+        { type: "search", value: searchTerm },
+      ];
+
+      setFilters(finalFilters);
+      fetchData(method, 0, pagination.pageSize, finalFilters);
+    },
+    [fetchData, pagination.pageSize, filters]
+  );
+
+  // Handle exports
+  const handleExports = useCallback(
+    (exportType: string) => {
+      fetchData(method, 0, pagination.pageSize, [], "", {}, true, exportType);
+    },
+    [fetchData, method, pagination.pageSize]
+  );
+
+  useEffect(() => {
+    fetchData(method, 0, pagination.pageSize, filters);
+  }, [fetchData, pagination.pageSize]);
+
+  return {
+    data,
+    loading,
+    pagination,
+    filters,
+    handlePageChange,
+    handleFilterChange,
+    refetch: () =>
+      fetchData(method, pagination.currentPage, pagination.pageSize, filters),
+    handleSearch,
+    handleExports,
+  };
+};