gbs-add-block 1.0.13 → 1.0.15-beta

package/source/components/datagridbeta/hooks/useFiltering.ts

@@ -0,0 +1,135 @@
+import { useState, useCallback } from "react";
+import {
+  clearFilterHelper,
+  handleApplyFilterHelper,
+} from "@grampro/headless-helpers";
+
+interface UseFilteringProps {
+  columns: any[];
+  workingColumns: any[];
+  setWorkingColumns: (columns: any[]) => void;
+  workingDataSource: any[];
+  setWorkingDataSource: (data: any[]) => void;
+  dataSource: any;
+  fallbackSourceData: any[];
+  resetPage: (data: any[], settings: any) => number;
+  setTotalPages: (pages: number) => void;
+  pageSettings: any;
+  activeFilterArrayValue?: (filters: any[]) => void;
+}
+
+export const useFiltering = ({
+  columns,
+  workingColumns,
+  setWorkingColumns,
+  workingDataSource,
+  setWorkingDataSource,
+  dataSource,
+  fallbackSourceData,
+  resetPage,
+  setTotalPages,
+  pageSettings,
+  activeFilterArrayValue,
+}: UseFilteringProps) => {
+  const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
+
+  const toggleFilterPopup = useCallback(
+    (index: number) => {
+      setWorkingColumns(
+        workingColumns.map((column: any, i: any) =>
+          i === index
+            ? { ...column, showFilterPopup: !column.showFilterPopup }
+            : column
+        )
+      );
+    },
+    [workingColumns, setWorkingColumns]
+  );
+
+  const handleApplyFilter = useCallback(
+    (event: any) => {
+      const {
+        columns: updatedColumns,
+        workingDataSource: updatedFullDataSource,
+        activeFilterArray: updatedActiveFilterArray,
+      } = handleApplyFilterHelper(event, columns, workingDataSource);
+
+      setWorkingColumns(updatedColumns);
+      setWorkingDataSource(updatedFullDataSource);
+      setActiveFilterArray(updatedActiveFilterArray);
+      if (activeFilterArrayValue)
+        activeFilterArrayValue(updatedActiveFilterArray);
+      const totalPages = resetPage(updatedFullDataSource, pageSettings);
+      setTotalPages(totalPages);
+    },
+    [
+      columns,
+      workingDataSource,
+      setWorkingColumns,
+      setWorkingDataSource,
+      activeFilterArrayValue,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const clearFilter = useCallback(
+    (event: any) => {
+      const clearDataSource = Array.isArray(dataSource)
+        ? dataSource
+        : fallbackSourceData;
+      const {
+        columns: updatedColumns,
+        workingDataSource: updatedDataSource,
+        activeFilterArray: updatedActiveFilterArray,
+      } = clearFilterHelper(event, workingColumns, clearDataSource);
+
+      setWorkingColumns(updatedColumns);
+      setWorkingDataSource(updatedDataSource);
+      setActiveFilterArray(updatedActiveFilterArray);
+      if (activeFilterArrayValue)
+        activeFilterArrayValue(updatedActiveFilterArray);
+      const totalPages = resetPage(updatedDataSource, pageSettings);
+      setTotalPages(totalPages);
+    },
+    [
+      dataSource,
+      fallbackSourceData,
+      workingColumns,
+      setWorkingColumns,
+      setWorkingDataSource,
+      activeFilterArrayValue,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const handleFilterAction = useCallback(
+    (action: any, colIndex: number) => {
+      switch (action.type) {
+        case "cancel":
+          toggleFilterPopup(colIndex);
+          break;
+        case "applyFilter":
+          handleApplyFilter(action);
+          break;
+        case "clearFilter":
+          clearFilter(action);
+          break;
+        default:
+          break;
+      }
+    },
+    [toggleFilterPopup, handleApplyFilter, clearFilter]
+  );
+
+  return {
+    activeFilterArray,
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+  };
+};

package/source/components/datagridbeta/hooks/usePageStatus.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+
+export const usePageStatus = (
+  currentPage: number,
+  totalPages: number,
+  pageStatus?: (status: any) => void
+) => {
+  useEffect(() => {
+    if (pageStatus) {
+      pageStatus({ currentPage, totalPages });
+    }
+  }, [pageStatus, currentPage, totalPages]);
+};

package/source/components/datagridbeta/hooks/usePagination.ts

@@ -0,0 +1,125 @@
+import { useState, useCallback, useEffect } from "react";
+
+export const usePagination = (
+  totalPages: number,
+  lazy: boolean,
+  dataSource?: any[],
+  pageSettings?: { pageNumber: number }
+) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageStart, setPageStart] = useState(0);
+  const [pageEnd, setPageEnd] = useState(10);
+  const [prevDataLength, setPrevDataLength] = useState(0);
+
+  const updatePageRange = useCallback(
+    (page: number) => {
+      const start = Math.floor(page / 10) * 10;
+      setPageStart(start);
+      setPageEnd(Math.min(start + 10, totalPages));
+    },
+    [totalPages]
+  );
+
+  useEffect(() => {
+    if (!lazy) {
+      setPageEnd(Math.min(10, totalPages));
+    } else {
+      setPageEnd(Math.min(pageStart + 10, totalPages));
+    }
+  }, [totalPages, lazy, pageStart]);
+
+  // This will handle the case when dataSource changes
+  // and adjust the current page accordingly
+  useEffect(() => {
+    if (dataSource && prevDataLength > 0) {
+      const currentDataLength = dataSource.length;
+
+      if (currentDataLength > prevDataLength) {
+        const lastPage = totalPages - 1;
+        setCurrentPage(lastPage);
+        updatePageRange(lastPage);
+      } else if (currentDataLength < prevDataLength) {
+        const rowsPerPage = lazy ? 1 : pageSettings?.pageNumber || 10;
+        const startIndex = currentPage * rowsPerPage;
+
+        if (startIndex >= currentDataLength && currentPage > 0) {
+          const newPage = currentPage - 1;
+          setCurrentPage(newPage);
+          updatePageRange(newPage);
+        }
+      }
+    }
+    setPrevDataLength(dataSource?.length || 0);
+  }, [
+    dataSource?.length,
+    totalPages,
+    updatePageRange,
+    prevDataLength,
+    currentPage,
+    lazy,
+  ]);
+
+  const nextPage = useCallback(() => {
+    setCurrentPage((prevPage) => {
+      if (prevPage < totalPages - 1) {
+        const newPage = prevPage + 1;
+        updatePageRange(newPage);
+        return newPage;
+      }
+      return prevPage;
+    });
+  }, [totalPages, updatePageRange]);
+
+  const prevPage = useCallback(() => {
+    setCurrentPage((prevPage) => {
+      if (prevPage > 0) {
+        const newPage = prevPage - 1;
+        updatePageRange(newPage);
+        return newPage;
+      }
+      return prevPage;
+    });
+  }, [updatePageRange]);
+
+  const goToEndPage = useCallback(() => {
+    const lastPage = totalPages - 1;
+    setCurrentPage(lastPage);
+    updatePageRange(lastPage);
+  }, [totalPages, updatePageRange]);
+
+  const goToFirstPage = useCallback(() => {
+    setCurrentPage(0);
+    updatePageRange(0);
+  }, [updatePageRange]);
+
+  const goToPage = useCallback(
+    (page: number) => {
+      setCurrentPage(page);
+      updatePageRange(page);
+    },
+    [updatePageRange]
+  );
+
+  const resetPage = useCallback((dataSource: any, pageSettings: any) => {
+    const newTotalPages = Math.ceil(
+      dataSource.length / pageSettings.pageNumber
+    );
+    setCurrentPage(0);
+    setPageStart(0);
+    setPageEnd(Math.min(10, newTotalPages));
+    return newTotalPages;
+  }, []);
+
+  return {
+    currentPage,
+    pageStart,
+    pageEnd,
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+    resetPage,
+    updatePageRange,
+  };
+};

package/source/components/datagridbeta/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/components/datagridbeta/hooks/useSearch.ts

@@ -0,0 +1,86 @@
+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;
+}
+
+export const useSearch = ({
+  workingDataSource,
+  setWorkingDataSource,
+  fallbackSourceData,
+  dataSource,
+  lazy,
+  pageSettings,
+  resetPage,
+  setTotalPages,
+  searchParamValue,
+}: UseSearchProps) => {
+  const [searchParam, setSearchParam] = useState("");
+
+  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);
+      }
+    },
+    [
+      lazy,
+      workingDataSource,
+      setWorkingDataSource,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  return {
+    searchParam,
+    handleSearchInput,
+    handleSearch,
+  };
+};

package/source/components/datagridbeta/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 { 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.pageSettings.pageNumber === nextProps.pageSettings.pageNumber &&
+    prevProps.enableSearch === nextProps.enableSearch &&
+    prevProps.enablePdfExport === nextProps.enablePdfExport &&
+    prevProps.enableExcelExport === nextProps.enableExcelExport
+  );
+});
+
+export { DataGrid };

package/source/components/datagridbeta/layout/EditableRow.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+interface EditableRowProps {
+  columnType: string | undefined;
+  cellValue: any;
+  rowIndex: number;
+  field: string;
+  style?: React.CSSProperties;
+  rowData: any;
+}
+
+export default function EditableRow({
+  columnType,
+  cellValue,
+  rowIndex,
+  field,
+  style,
+  rowData,
+}: EditableRowProps) {
+  // Function to handle cell value change
+  const handleCellChange = (newValue: any, field: string) => {
+    if (rowData) {
+      rowData[field] = newValue;
+      rowData(rowData);
+      console.log(rowData);
+    }
+  };
+
+  switch (columnType) {
+    case "text":
+      return (
+        <input
+          key={`${field}-${rowIndex}`}
+          id={`${field}-${rowIndex}`}
+          type="text"
+          defaultValue={cellValue || ""}
+          onBlur={(e) => handleCellChange(e.target.value, field)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.currentTarget.blur();
+            }
+          }}
+          className="px-2 py-1 outline-none focus:ring-1 focus:ring-black rounded"
+          style={style}
+        />
+      );
+
+    case "number":
+      return (
+        <input
+          key={`${field}-${rowIndex}`}
+          id={`${field}-${rowIndex}`}
+          type="number"
+          defaultValue={cellValue || ""}
+          onBlur={(e) => handleCellChange(e.target.value, field)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.currentTarget.blur();
+            }
+          }}
+          className="px-2 py-1 outline-none focus:ring-1 focus:ring-black rounded"
+          style={style}
+        />
+      );
+
+    default:
+      return (
+        <input
+          type="text"
+          defaultValue={cellValue || ""}
+          onBlur={(e) => handleCellChange(e.target.value, field)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.currentTarget.blur();
+            }
+          }}
+          style={{
+            width: "100%",
+            border: "none",
+            background: "transparent",
+          }}
+        />
+      );
+  }
+}

package/source/components/datagridbeta/layout/FilterPopup.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { useState } from "react";
+
+export default function FilterPopup({ show, columnHeader, filterAction }: any) {
+  const [filterValue, setFilterValue] = useState("");
+  const [filterType, setFilterType] = useState("contains");
+  const [isFilterActive, setIsFilterActive] = useState(false);
+
+  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>
+    )
+  );
+}