@grampro/kit 0.0.0-stage → 2.4.0

package/source/legacy-components/datagrid/hooks/useRowSelection.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback } from "react";
+
+export const useRowSelection = (
+  workingDataSource: any[],
+  onSelectRow?: (rows: any[]) => void
+) => {
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+
+  const handleSelectAll = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const selected = event.target.checked ? workingDataSource : [];
+      setSelectedRows(selected);
+      onSelectRow?.(selected);
+    },
+    [workingDataSource, onSelectRow]
+  );
+
+  const handleSelect = useCallback(
+    (rowData: any) => {
+      setSelectedRows((prevData) => {
+        const isSelected = prevData.includes(rowData);
+        let updatedData;
+        if (isSelected) {
+          updatedData = prevData.filter((item) => item !== rowData);
+        } else {
+          updatedData = [...prevData, rowData];
+        }
+        if (onSelectRow) onSelectRow(updatedData);
+        return updatedData;
+      });
+    },
+    [onSelectRow]
+  );
+
+  const isRowSelected = useCallback(
+    (rowData: any) => {
+      return selectedRows.includes(rowData);
+    },
+    [selectedRows]
+  );
+
+  return {
+    selectedRows,
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
+  };
+};

package/source/legacy-components/datagrid/hooks/useSearch.ts

@@ -0,0 +1,90 @@
+import { useState, useCallback } from "react";
+
+interface UseSearchProps {
+  workingDataSource: any[];
+  setWorkingDataSource: (data: any[]) => void;
+  fallbackSourceData: any[];
+  dataSource: any;
+  lazy: boolean;
+  pageSettings: any;
+  resetPage: (data: any[], settings: any) => number;
+  setTotalPages: (pages: number) => void;
+  searchParamValue?: (value: string) => void;
+  initialSearchParam?: string;
+}
+
+export const useSearch = ({
+  workingDataSource,
+  setWorkingDataSource,
+  fallbackSourceData,
+  dataSource,
+  lazy,
+  pageSettings,
+  resetPage,
+  setTotalPages,
+  searchParamValue,
+  initialSearchParam = "",
+}: UseSearchProps) => {
+  const [searchParam, setSearchParam] = useState(initialSearchParam);
+
+  const handleSearchInput = useCallback(
+    (e: any) => {
+      const searchValue = e.target.value;
+      if (searchParamValue) searchParamValue(searchValue);
+      setSearchParam(searchValue);
+
+      if (searchValue === "") {
+        if (!lazy) {
+          const fallback =
+            fallbackSourceData.length > 0 ? fallbackSourceData : dataSource;
+          setWorkingDataSource(fallback);
+          const totalPages = resetPage(fallback, pageSettings);
+          setTotalPages(totalPages);
+        }
+      }
+    },
+    [
+      searchParamValue,
+      lazy,
+      fallbackSourceData,
+      dataSource,
+      setWorkingDataSource,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const handleSearch = useCallback(
+    (searchParam: string) => {
+      if (!lazy) {
+        const filteredData = workingDataSource.filter((item: any) =>
+          Object.values(item).some((val: any) => {
+            const trimmedVal = val?.toString()?.toLowerCase()?.trim();
+            const trimmedSearchParam = searchParam?.toLowerCase()?.trim();
+            return trimmedVal?.includes(trimmedSearchParam);
+          })
+        );
+        setWorkingDataSource(filteredData);
+        const totalPages = resetPage(filteredData, pageSettings);
+        setTotalPages(totalPages);
+      } else {
+        resetPage(workingDataSource, pageSettings);
+      }
+    },
+    [
+      lazy,
+      workingDataSource,
+      setWorkingDataSource,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  return {
+    searchParam,
+    handleSearchInput,
+    handleSearch,
+  };
+};

package/source/legacy-components/datagrid/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * Here We Will Re-Render Grid as a Memoized Component For Better Performance.
+ * Extended Documentation for Grid can be found at
+ * https://psychedelic-step-e70.notion.site/Data-GRID-by-GBS-R-D-20ff97c899d24bc590215a6196435fa3
+ */
+
+import React from "react";
+import { GridMemoised as GridComponent } from "./layout";
+import { memo } from "react";
+
+const DataGrid = memo(GridComponent, (prevProps, nextProps) => {
+  // Custom comparison function
+  return (
+    prevProps.dataSource === nextProps.dataSource &&
+    prevProps.columns === nextProps.columns &&
+    prevProps.pageSize === nextProps.pageSize &&
+    prevProps.pageSettings?.pageNumber === nextProps.pageSettings?.pageNumber &&
+    prevProps.enableSearch === nextProps.enableSearch &&
+    prevProps.enablePdfExport === nextProps.enablePdfExport &&
+    prevProps.enableExcelExport === nextProps.enableExcelExport
+  );
+});
+
+export { DataGrid };

package/source/legacy-components/datagrid/layout/FilterPopup.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { useState } from "react";
+
+export default function FilterPopup({
+  show,
+  columnHeader,
+  filterAction,
+  activeFilter,
+}: any) {
+  const [filterValue, setFilterValue] = useState(activeFilter?.filterValue || "");
+  const [filterType, setFilterType] = useState(
+    activeFilter?.filterCondition || activeFilter?.filterType || "contains"
+  );
+  const [isFilterActive, setIsFilterActive] = useState(!!activeFilter);
+
+  const handleFilterInput = (e: any) => {
+    const filterKeyword = e.target.value;
+    setFilterValue(filterKeyword);
+  };
+
+  const onCancel = () => {
+    filterAction({ type: "cancel" });
+  };
+
+  const applyFilter = () => {
+    filterAction({
+      type: "applyFilter",
+      filterValue,
+      filterType,
+      columnHeader,
+    });
+    show = false;
+    setIsFilterActive(true);
+  };
+
+  const clearFilter = () => {
+    setIsFilterActive(false);
+    filterAction({ type: "clearFilter", columnHeader });
+  };
+
+  return (
+    show && (
+      <div
+        className="absolute bg-gray-100 p-2 text-xs z-50 mt-48 flex flex-col shadow-lg gap-2 rounded-md dark:bg-zinc-700"
+        role="dialog"
+      >
+        <select
+          name={`${columnHeader}-filter`}
+          id={`${columnHeader}-filter-id`}
+          className="w-full p-2 rounded-lg bg-gray-200 outline-none dark:bg-gray-600"
+          value={filterType}
+          onChange={(e: any) => {
+            setFilterType(e.target.value);
+          }}
+        >
+          <option value="contains">Contains</option>
+          <option value="starts_with">Starts With</option>
+          <option value="ends_with">Ends With</option>
+        </select>
+        <input
+          type="text"
+          placeholder="Enter filter value"
+          className="rounded-lg p-2 text-xs bg-gray-200 outline-none dark:bg-gray-600"
+          value={filterValue}
+          onInput={handleFilterInput}
+        />
+        <div className="mt-2 flex space-x-1">
+          <button
+            className="text-xs bg-red-600 text-white px-2 py-0.5 rounded-lg hover:bg-red-600"
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          {isFilterActive && (
+            <button
+              className="text-xs bg-black text-white px-2 py-0.5 rounded-lg dark:bg-white dark:text-black"
+              onClick={clearFilter}
+            >
+              Clear Filter
+            </button>
+          )}
+          <button
+            className="text-xs bg-black text-white px-2 py-0.5 rounded-lg dark:bg-white dark:text-black"
+            onClick={applyFilter}
+          >
+            Apply Filter
+          </button>
+        </div>
+      </div>
+    )
+  );
+}

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

@@ -0,0 +1,184 @@
+import React from "react";
+import { useGridContext } from "../context/GridContext";
+import FilterPopup from "./FilterPopup";
+import Icon from "../../icon/Icon";
+import { listFilter } from "../../icon/iconPaths";
+import type { Column } from "../type";
+
+const GridBody = () => {
+  const {
+    workingDataSource,
+    workingColumns,
+    isFetching,
+    currentPage,
+    pageSettings,
+    tableHeaderStyle,
+    gridColumnStyle,
+    gridColumnStyleSelectAll,
+    rowChange,
+    lazy,
+    activeFilterArray,
+    toggleFilterPopup,
+    handleFilterAction,
+    selectAll,
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
+    gridRowEvenClass,
+    gridRowOddClass,
+    gridRowSelectedClass,
+  } = useGridContext();
+
+  const renderCell = (rowData: any, column: Column, rowIndex: number) => {
+    const cellValue = rowData[column.field];
+
+    if (column.template) {
+      const TemplateComponent = column.template;
+      return (
+        <TemplateComponent
+          rowData={rowData}
+          rowIndex={rowIndex + currentPage * pageSettings.pageNumber}
+          rowChange={(changes) => rowChange?.(changes)}
+        />
+      );
+    }
+
+    if (column.tooltip) {
+      return (
+        <span title={cellValue?.toString()}>
+          {cellValue && cellValue.length > 10
+            ? `${cellValue.slice(0, 10)}...`
+            : cellValue}
+        </span>
+      );
+    }
+
+    return cellValue;
+  };
+
+  const displayStart = currentPage * pageSettings.pageNumber;
+  const displayEnd = displayStart + pageSettings.pageNumber;
+  const displayData = lazy
+    ? workingDataSource
+    : workingDataSource.slice(displayStart, displayEnd);
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead>
+          <tr>
+            {selectAll && (
+              <th
+                className={tableHeaderStyle}
+                style={{ width: "2px", paddingLeft: "16px" }}
+              >
+                <input
+                  type="checkbox"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    handleSelectAll(event);
+                  }}
+                  className="form-checkbox h-5 w-5"
+                />
+              </th>
+            )}
+            {workingColumns.map((column, colIndex) => (
+              <th
+                key={colIndex}
+                className={tableHeaderStyle}
+                style={{ width: column.width ? `${column.width}px` : "auto" }}
+              >
+                <div className="flex items-center relative">
+                  {column.headerText || column.field}
+                  {column.filter && !column.template && (
+                    <>
+                      <button onClick={() => toggleFilterPopup(colIndex)}>
+                        <Icon
+                          dimensions={{ width: "12", height: "12" }}
+                          elements={listFilter}
+                          svgClass={`ml-2 fill-none ${
+                            activeFilterArray.some(
+                              (filter) => filter.filterColumn === column.field
+                            )
+                              ? "stroke-red-400 dark:stroke-red-400"
+                              : "stroke-black dark:stroke-white"
+                          }`}
+                        />
+                      </button>
+                      <FilterPopup
+                        show={column.showFilterPopup ?? false}
+                        columnHeader={column.field}
+                        activeFilter={activeFilterArray.find(
+                          (f) => f.filterColumn === column.field
+                        )}
+                        filterAction={(action: any) =>
+                          handleFilterAction(action, colIndex)
+                        }
+                      />
+                    </>
+                  )}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {isFetching ? (
+            <tr>
+              <td colSpan={workingColumns.length + (selectAll ? 1 : 0)}>
+                Loading...
+              </td>
+            </tr>
+          ) : displayData.length === 0 ? (
+            <tr>
+              <td
+                colSpan={workingColumns.length + (selectAll ? 1 : 0)}
+                className="text-center py-3"
+              >
+                No data found
+              </td>
+            </tr>
+          ) : (
+            displayData.map((rowData, rowIndex) => (
+              <tr
+                key={rowIndex}
+                className={
+                  isRowSelected(rowData)
+                    ? gridRowSelectedClass
+                    : rowIndex % 2 === 0
+                    ? gridRowEvenClass
+                    : gridRowOddClass
+                }
+                onClick={() => rowChange(rowData)}
+              >
+                {selectAll && (
+                  <td className={gridColumnStyleSelectAll}>
+                    <input
+                      type="checkbox"
+                      checked={isRowSelected(rowData)}
+                      onChange={() => handleSelect(rowData)}
+                      className="form-checkbox h-5 w-5"
+                    />
+                  </td>
+                )}
+                {workingColumns.map((column, colIndex) => (
+                  <td
+                    key={colIndex}
+                    className={gridColumnStyle}
+                    style={{
+                      width: column.width ? `${column.width}px` : "auto",
+                      maxWidth: column.width ? `${column.width}px` : "auto",
+                    }}
+                  >
+                    {renderCell(rowData, column, rowIndex)}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default GridBody;

package/source/legacy-components/datagrid/layout/GridPagination.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import Icon from "../../icon/Icon";
+import {
+  leftArrow,
+  leftArrows,
+  rightArrow,
+  rightArrows,
+} from "../../icon/iconPaths";
+import { useGridContext } from "../context/GridContext";
+
+const Pagination = () => {
+  const {
+    currentPage,
+    pageStart,
+    pageEnd,
+    totalPages,
+    goToFirstPage,
+    prevPage,
+    goToPage,
+    nextPage,
+    goToEndPage,
+    workingDataSource,
+    lazy,
+    pageSettings,
+    showTotalPages,
+    gridPaginationClass,
+  } = useGridContext();
+
+  return (
+    <div className={gridPaginationClass}>
+      <div className="flex text-xs">
+        Showing {currentPage + 1} of {totalPages} pages
+        {showTotalPages && (
+          <span className="pl-1">
+            ({lazy ? pageSettings?.totalCount : workingDataSource.length} items)
+          </span>
+        )}
+      </div>
+
+      <div className="flex space-x-1">
+        <button onClick={goToFirstPage} disabled={currentPage === 0}>
+          <Icon
+            elements={leftArrows}
+            svgClass={`${
+              currentPage === 0
+                ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-not-allowed"
+                : "stroke-black fill-none dark:stroke-white cursor-pointer"
+            }`}
+            dimensions={{ width: 18, height: 18 }}
+          />
+        </button>
+        <button onClick={prevPage} disabled={currentPage === 0}>
+          <Icon
+            elements={leftArrow}
+            svgClass={`${
+              currentPage === 0
+                ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-not-allowed"
+                : "stroke-black fill-none dark:stroke-white cursor-pointer"
+            }`}
+            dimensions={{ width: 18, height: 18 }}
+          />
+        </button>
+        {pageStart > 0 && (
+          <button
+            className="p-1 w-6 h-6 flex items-center justify-center rounded-full cursor-pointer"
+            onClick={() => goToPage(pageStart - 1)}
+          >
+            ...
+          </button>
+        )}
+        <div className="flex md:space-x-1">
+          {totalPages > 0 &&
+            Array.from({ length: pageEnd - pageStart }, (_, i) => (
+              <button
+                key={pageStart + i}
+                onClick={() => goToPage(pageStart + i)}
+                className={`hidden md:block px-2 py-1 text-sm rounded-md transition-colors duration-200 ease-in-out ${
+                  currentPage === pageStart + i
+                    ? "bg-black text-white dark:bg-white dark:text-black"
+                    : "bg-gray-200 dark:bg-zinc-700 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-zinc-600"
+                }`}
+              >
+                {pageStart + i + 1}
+              </button>
+            ))}
+        </div>
+        {pageEnd < totalPages && (
+          <button onClick={() => goToPage(pageEnd)} className="cursor-pointer">
+            ...
+          </button>
+        )}
+        <button onClick={nextPage} disabled={currentPage === totalPages - 1}>
+          <Icon
+            elements={rightArrow}
+            svgClass={`${
+              currentPage === totalPages - 1 || workingDataSource.length <= 0
+                ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-not-allowed"
+                : "stroke-black fill-none dark:stroke-white cursor-pointer"
+            }`}
+            dimensions={{ width: 18, height: 18 }}
+          />
+        </button>
+        <button onClick={goToEndPage} disabled={currentPage === totalPages - 1}>
+          <Icon
+            elements={rightArrows}
+            svgClass={`${
+              currentPage === totalPages - 1 || workingDataSource.length <= 0
+                ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-not-allowed"
+                : "stroke-black fill-none dark:stroke-white cursor-pointer"
+            }`}
+            dimensions={{ width: 18, height: 18 }}
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

package/source/legacy-components/datagrid/layout/GridToolbar.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import {
+  exportToExcelHelper,
+  exportToPDFHelper,
+} from "@grampro/headless-helpers";
+import Icon from "../../icon/Icon";
+import { search } from "../../icon/iconPaths";
+import { useGridContext } from "../context/GridContext";
+
+const GridToolbar = () => {
+  const {
+    searchParam,
+    handleSearchInput,
+    handleSearch,
+    enableSearch,
+    onSearch,
+    enableExcelExport,
+    enablePdfExport,
+    workingDataSource,
+    columns,
+    excelName,
+    pdfName,
+    pdfOptions,
+    gridButtonClass,
+    onToolbarButtonClick,
+    lazy,
+    gridToolbarClass,
+  } = useGridContext();
+
+  if (!enableSearch && !enableExcelExport && !enablePdfExport) {
+    return null;
+  }
+
+  return (
+    <div className={gridToolbarClass}>
+      {/* Search input */}
+      {enableSearch && (
+        <div className="flex">
+          <input
+            type="search"
+            defaultValue={searchParam}
+            onChange={handleSearchInput}
+            placeholder="Search..."
+            className="outline-none p-2 text-xs rounded-lg max-sm:hidden dark:bg-zinc-800 bg-zinc-200"
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              if (event.key === "Enter") {
+                handleSearch(searchParam);
+              }
+            }}
+          />
+          <button
+            className="rounded-lg w-10 flex items-center justify-center cursor-pointer"
+            onClick={() => {
+              handleSearch(searchParam);
+              if (onSearch) onSearch(searchParam); // Call the onSearch prop if provided
+            }}
+          >
+            <Icon
+              elements={search}
+              svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+            />
+          </button>
+        </div>
+      )}
+
+      {/* Export buttons */}
+      {(enableExcelExport || enablePdfExport) && (
+        <div className="flex space-x-2">
+          {enableExcelExport && (
+            <button
+              className={gridButtonClass}
+              onClick={() => {
+                console.log("clicked", lazy.toString());
+                if (!lazy) {
+                  exportToExcelHelper(workingDataSource, columns, excelName);
+                }
+
+                if (onToolbarButtonClick) onToolbarButtonClick("excelExport");
+              }}
+            >
+              Export to Excel
+            </button>
+          )}
+
+          {enablePdfExport && (
+            <button
+              className={gridButtonClass}
+              onClick={() => {
+                if (!lazy) {
+                  exportToPDFHelper(
+                    workingDataSource,
+                    columns,
+                    pdfName,
+                    pdfOptions
+                  );
+                }
+                if (onToolbarButtonClick) onToolbarButtonClick("pdfExport");
+              }}
+            >
+              Export to PDF
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GridToolbar;