gbs-add-block 0.0.1

package/source/components/grid/GridHelperFunctions.ts

@@ -0,0 +1,218 @@
+import * as XLSX from "xlsx";
+import jsPDF from "jspdf";
+import "jspdf-autotable";
+
+let activeFilterArray: any[] = [];
+
+interface PDFExportOptions {
+  layout: "portrait" | "landscape";
+  paperSize:
+    | "a3"
+    | "a4"
+    | "letter"
+    | "legal"
+    | "tabloid"
+    | "statement"
+    | "executive";
+}
+
+export function handleApplyFilterHelper(
+  event: any,
+  columns: any,
+  dataSource: any
+) {
+  let workingDataSource: any[] = [...dataSource];
+  let filterValue = event.filterValue.toLowerCase();
+  let filterCondition = event.filterType;
+  let filterColumn = event.columnHeader;
+
+  // Add the new filter to activeFilterArray
+  activeFilterArray.push({
+    filterValue: filterValue,
+    filterCondition: filterCondition,
+    filterColumn: filterColumn,
+  });
+
+  columns = columns.map((column: any) => {
+    if (column.field === filterColumn) {
+      return { ...column, isFilterActive: true, showFilterPopup: false };
+    }
+    return column;
+  });
+
+  // Apply all active filters
+  activeFilterArray.forEach((filter: any) => {
+    workingDataSource = dataSource.filter((item: any) => {
+      let columnValue = item[filter.filterColumn].toString().toLowerCase();
+      switch (filter.filterCondition) {
+        case "contains":
+          return columnValue.includes(filter.filterValue);
+        case "equals":
+          return columnValue === filter.filterValue;
+        case "starts_with":
+          return columnValue.startsWith(filter.filterValue);
+        case "ends_with":
+          return columnValue.endsWith(filter.filterValue);
+        default:
+          return true;
+      }
+    });
+  });
+
+  return { columns, workingDataSource, activeFilterArray };
+}
+
+// Function For Clearing the Filter
+export function clearFilterHelper(
+  event: any,
+  columns: any[],
+  dataSource: any[]
+) {
+  let workingDataSource = [...dataSource];
+  let filterColumn = event.columnHeader;
+
+  // Remove the cleared filter from activeFilterArray
+  activeFilterArray = activeFilterArray.filter(
+    (filter: any) => filter.filterColumn !== filterColumn
+  );
+
+  let hasActiveFilters = activeFilterArray.length > 0;
+
+  // Reset the isFilterActive and showFilterPopup flags for the cleared filter
+  columns = columns.map((column: any) => {
+    if (column.field === filterColumn) {
+      return { ...column, isFilterActive: false, showFilterPopup: false };
+    }
+    return column;
+  });
+
+  // Reapply all remaining active filters
+  if (hasActiveFilters) {
+    activeFilterArray.forEach((filter: any) => {
+      workingDataSource = workingDataSource.filter((item: any) => {
+        let columnValue = item[filter.filterColumn].toString().toLowerCase();
+        switch (filter.filterCondition) {
+          case "contains":
+            return columnValue.includes(filter.filterValue);
+          case "equals":
+            return columnValue === filter.filterValue;
+          case "starts_with":
+            return columnValue.startsWith(filter.filterValue);
+          case "ends_with":
+            return columnValue.endsWith(filter.filterValue);
+          default:
+            return true;
+        }
+      });
+    });
+  }
+
+  return { columns, workingDataSource, hasActiveFilters, activeFilterArray };
+}
+
+export function exportToExcelHelper(
+  dataSource: any[],
+  columns: any[],
+  excelName: string
+) {
+  // This will remove the column template.
+  const templateRemovedColumn = columns.filter((column) => !column.template);
+  const dataToExport = dataSource.map((row) => {
+    const rowData: any = {};
+    templateRemovedColumn.forEach((column: any) => {
+      rowData[column.field] = row[column.field];
+    });
+    return rowData;
+  });
+  const ws = XLSX.utils.json_to_sheet(dataToExport);
+  const wb = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
+  XLSX.writeFile(wb, `${excelName}.xlsx`);
+}
+
+export function exportToPDFHelper(
+  dataSource: any[],
+  columns: any[],
+  pdfName: string,
+  pdfoptions?: PDFExportOptions
+) {
+  const { layout = "portrait", paperSize = "a4" }: any = pdfoptions;
+
+  const doc: any = new jsPDF({
+    orientation: layout,
+    unit: "mm",
+    format: paperSize,
+  });
+  // This will remove the columns with template.
+  const printableColumns = columns.filter(
+    (column) => !column.template || column.showInPdf
+  );
+
+  const dataToExport = dataSource.map((row) => {
+    const rowData: any = {};
+    printableColumns.forEach((column: any) => {
+      rowData[column.field] = row[column.field];
+    });
+    return Object.values(rowData);
+  });
+
+  const columnNames = printableColumns.map((column: any) => column.field);
+  doc.autoTable({
+    head: [columnNames],
+    body: dataToExport,
+  });
+
+  doc.save(`${pdfName}.pdf`);
+}
+
+export function handleEditActionHelper(
+  e: any,
+  isEditModeActive: boolean,
+  actionMode: string,
+  newEntry: any,
+  workingDataSource: any[],
+  goToFirstPage: () => void
+) {
+  const { mode } = e.detail;
+  let dataSourceUpdate = [...workingDataSource];
+  let isEditModeActiveUpdate: boolean = isEditModeActive;
+  let actionModeUpdate: string = actionMode;
+  let newEntryUpdate: any = { ...newEntry };
+
+  function resetEditMode() {
+    isEditModeActiveUpdate = false;
+    actionModeUpdate = "";
+    newEntryUpdate = {};
+  }
+
+  function addNewEntry() {
+    if (Object.keys(newEntryUpdate).length > 0) {
+      dataSourceUpdate = [newEntryUpdate, ...workingDataSource];
+      newEntryUpdate = {};
+    }
+  }
+
+  switch (mode) {
+    case "add":
+      isEditModeActiveUpdate = true;
+      actionModeUpdate = mode;
+      goToFirstPage();
+      break;
+    case "cancel":
+      resetEditMode();
+      break;
+    case "update":
+      addNewEntry();
+      resetEditMode();
+      break;
+    default:
+      break;
+  }
+
+  return {
+    dataSourceUpdate,
+    isEditModeActiveUpdate,
+    actionModeUpdate,
+    newEntryUpdate,
+  };
+}

package/source/components/grid/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 { Grid as GridComponent } from "./Grid";
+import React, { memo } from "react";
+
+const Grid = 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 { Grid };

package/source/components/grid/type.ts

@@ -0,0 +1,28 @@
+interface PageSettingsProps {
+  pageNumber: number;
+}
+
+export type GridProps = {
+  dataSource: any[] | string;
+  columns?: any[];
+  pageSettings: PageSettingsProps;
+  enableSearch?: boolean;
+  lazy?: boolean;
+  enableExcelExport?: boolean;
+  excelName?: string;
+  enablePdfExport?: boolean;
+  pdfName?: string;
+  gridContainerClass?: string;
+  gridButtonClass?: string;
+  gridHeaderClass?: string;
+  gridGlobalSearchButtonClass?: string;
+  gridPaginationButtonClass?: string;
+  pdfOptions?: any;
+  isFetching?: boolean;
+  showPagination?: boolean;
+  selectAll?: boolean;
+  onSelectRow?: (value: any) => void;
+  tableHeaderStyle?: string;
+  gridColumnStyleSelectAll?: string;
+  gridColumnStyle?: string;
+};

package/source/components/input/index.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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.
+ */
+
+import React, { useState, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import Icon from "../icon/Icon";
+import { eye } from "../icon/iconPaths";
+import type { InputProps } from "./types";
+
+export const Input = ({
+  OTPField = false,
+  OTPValue = "",
+  OTPLength = 4,
+  OTPClass = "w-8 h-10 m-1 border border-gray-600 rounded-lg text-center",
+  onOTPValueChange,
+  ...props
+}: InputProps) => {
+  const [otpValues, setOtpValues] = useState(new Array(OTPLength).fill(""));
+  const [showPassword, setShowPassword] = useState(false);
+  const inputRefs = useRef<any>([]);
+
+  const defaultClass = "bg-gray-100 p-2 rounded-lg";
+
+  // This will update the OTP Field Value
+  const updateOtpValue = (index: number, e: any) => {
+    e.preventDefault();
+    const input = e.target;
+    if (input) {
+      const newOtpValues = [...otpValues];
+      newOtpValues[index] = input.value;
+      setOtpValues(newOtpValues);
+      if (index < OTPLength - 1 && input.value) {
+        inputRefs.current[index + 1].focus();
+      }
+      OTPValue = newOtpValues.join("");
+      if (onOTPValueChange) onOTPValueChange(OTPValue);
+    }
+  };
+
+  // Function for handling keyboard navigation in OTP Field
+  const handleKeydown = (index: number, e: any) => {
+    if (e.key === "Backspace" && otpValues[index] === "" && index > 0) {
+      inputRefs.current[index - 1].focus();
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      inputRefs.current[index - 1].focus();
+    } else if (e.key === "ArrowRight" && index < OTPLength - 1) {
+      inputRefs.current[index + 1].focus();
+    }
+  };
+
+  // Password Feild Toggler
+  const toggleTypeForPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div>
+      {!OTPField ? (
+        <div className="text-input-container w-60 relative">
+          <input
+            className={twMerge(defaultClass, "w-full focus:outline-blue-400")}
+            {...props}
+            type={
+              props.type === "password" && showPassword ? "text" : props.type
+            }
+          />
+          {/* If Type is password, this will show a password visible toggle button */}
+          {props.type && props.type === "password" && (
+            <button
+              className="absolute inset-y-0 right-0 flex items-center pr-2"
+              onClick={toggleTypeForPassword}
+            >
+              <Icon
+                elements={eye}
+                svgClass={"h-5 w-5 stroke-gray-500 fill-none dark:stroke-white"}
+              />
+            </button>
+          )}
+        </div>
+      ) : (
+        <div className="otp-container">
+          {Array(OTPLength)
+            .fill("")
+            .map((_, index) => (
+              <input
+                key={index}
+                type="text"
+                maxLength={1}
+                pattern="[0-9]*"
+                value={otpValues[index]}
+                onChange={(e) => updateOtpValue(index, e)}
+                onKeyDown={(e) => handleKeydown(index, e)}
+                ref={(ref) => (inputRefs.current[index] = ref)}
+                className={OTPClass}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/source/components/input/types.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from "react";
+
+export type InputProps = {
+  OTPField?: boolean;
+  OTPValue?: string;
+  OTPLength?: number;
+  OTPClass?: string;
+  onOTPValueChange?: (value: string) => void;
+} & InputHTMLAttributes<HTMLInputElement>;

package/source/components/modal/index.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+
+import React, { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import type { ModalProps } from "./types";
+
+export const Modal = ({
+  showModal = false,
+  modalTitle = "Modal Title",
+  autoclose = false,
+  modalClass = "fixed z-10 overflow-y-auto inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75 transition-opacity",
+  modalContentClass = "bg-white m-10 md:w-[80vh] rounded-xl",
+  classModalContent = "",
+  modalTitleClass = "p-4 text-lg leading-6 font-medium text-gray-900 flex justify-between",
+  classModalTitle = "",
+  children,
+}: ModalProps) => {
+  const [show, setShow] = useState(showModal);
+
+  const autoCloseHandler = () => {
+    if (autoclose) {
+      setShow(false);
+    }
+  };
+
+  return (
+    <>
+      {show && (
+        <div
+          className={modalClass}
+          aria-labelledby="modal-title"
+          role="dialog"
+          aria-modal="true"
+          onClick={autoCloseHandler}
+        >
+          <div
+            className={twMerge(modalContentClass, classModalContent)}
+            onClick={(e: any) => {
+              e.stopPropagation();
+            }}
+            role="dialog"
+          >
+            <div className={twMerge(modalTitleClass, classModalTitle)}>
+              {modalTitle}
+            </div>
+            <hr />
+            <div className="p-4">{children}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

package/source/components/modal/types.ts

@@ -0,0 +1,11 @@
+export type ModalProps = {
+  showModal?: boolean;
+  modalTitle?: string;
+  autoclose?: boolean;
+  modalClass?: string;
+  modalContentClass?: string;
+  classModalContent?: string;
+  modalTitleClass?: string;
+  classModalTitle?: string;
+  children?: React.ReactNode;
+};

package/source/components/multiselect/index.tsx

@@ -0,0 +1,213 @@
+/**
+ * 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.
+ */
+
+import React, {
+  forwardRef,
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import Icon from "../icon/Icon";
+import { check, search, upDown, x } from "../icon/iconPaths";
+import { getSourceData } from "../utils";
+import type { MultiSelectProps } from "./types";
+
+interface ItemsProps {
+  value: string;
+  label: string;
+}
+
+const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
+  const {
+    placeholder = "Select an Item...",
+    items,
+    lazy = false,
+    showSearch = true,
+    onSelect,
+    truncate = true,
+    selectedItems = [],
+  } = props;
+
+  const [showPopover, setShowPopover] = useState(false);
+  const [workingDataSource, setWorkingDataSource] = useState<ItemsProps[]>([]);
+  const [filteredItems, setFilteredItems] = useState<ItemsProps[]>([]);
+  const [selected, setSelected] = useState<string[]>(selectedItems);
+  const [searchTerm, setSearchTerm] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [showPopover]);
+
+  useEffect(() => {
+    handleDataSource();
+  }, [items]);
+
+  useEffect(() => {
+    if (onSelect) onSelect(selected);
+  }, [selected, onSelect]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        selectRef.current &&
+        !selectRef.current.contains(event.target as Node)
+      ) {
+        setShowPopover(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const getSelectItems = async (itemsApi: string) => {
+    const itemsData = await getSourceData(itemsApi);
+    setWorkingDataSource(itemsData.sourcedata);
+    setFilteredItems(itemsData.sourcedata);
+  };
+
+  const handleDataSource = async () => {
+    if (Array.isArray(items)) {
+      setWorkingDataSource(items);
+      setFilteredItems(items);
+    } else if (typeof items === "string") {
+      await getSelectItems(items);
+    }
+  };
+
+  const togglePopover = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowPopover(!showPopover);
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected((prev) =>
+      prev.includes(value)
+        ? prev.filter((item) => item !== value)
+        : [...prev, value]
+    );
+  };
+
+  const getSelectedDisplay = () => {
+    if (selected.length === 0) return placeholder;
+    const displayedItems = selected
+      .slice(0, 3)
+      .map(
+        (value) =>
+          workingDataSource.find((item) => item.value === value)?.label || ""
+      );
+    let display = displayedItems.join(", ");
+    if (selected.length > 3 && truncate) {
+      display += `, +${selected.length - 3} more`;
+    }
+    return display;
+  };
+
+  const inputSearchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.toLowerCase();
+    setSearchTerm(value);
+    if (!lazy) {
+      setFilteredItems(
+        workingDataSource.filter((item) =>
+          Object.values(item).some((val) =>
+            val.toString().toLowerCase().includes(value)
+          )
+        )
+      );
+    }
+  };
+
+  const clearSelected = () => {
+    setSelected([]);
+    setShowPopover(false);
+  };
+
+  useImperativeHandle(ref, () => ({
+    workingDataSource,
+    items,
+    clearSelected,
+    togglePopover,
+    getSelectItems,
+    selectedDisplay: getSelectedDisplay(),
+    selected,
+  }));
+
+  return (
+    <div className="relative w-[200px]" ref={selectRef}>
+      <div className="relative border w-[200px] flex items-center px-4 py-2 rounded-lg">
+        <button onClick={togglePopover} className="flex-grow text-sm text-left">
+          {getSelectedDisplay()}
+        </button>
+        <div className="flex items-center space-x-2">
+          {selected.length > 0 && (
+            <button className="flex items-center px-2" onClick={clearSelected}>
+              <Icon
+                elements={x}
+                svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
+              />
+            </button>
+          )}
+          <button onClick={togglePopover}>
+            <Icon
+              elements={upDown}
+              svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
+            />
+          </button>
+        </div>
+      </div>
+
+      {showPopover && (
+        <div className="w-[200px] absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white">
+          {showSearch && (
+            <div className="flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black">
+              <Icon
+                elements={search}
+                svgClass="stroke-gray-500 fill-none dark:stroke-white"
+              />
+              <input
+                autoComplete="off"
+                type="text"
+                name="search"
+                id="search"
+                placeholder="Search a value"
+                className="w-full outline-none dark:bg-black"
+                ref={inputRef}
+                value={searchTerm}
+                onChange={inputSearchHandler}
+              />
+            </div>
+          )}
+          {filteredItems.length > 0 ? (
+            filteredItems.map(({ value, label }) => (
+              <button
+                key={value}
+                className="flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600"
+                onClick={() => handleSelect(value)}
+              >
+                <Icon
+                  elements={check}
+                  svgClass={`h-4 w-4 fill-none ${
+                    selected.includes(value) ? "stroke-gray-500" : ""
+                  }`}
+                />
+                {label}
+              </button>
+            ))
+          ) : (
+            <div className="text-sm text-center">No Data Found</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+const MemoizedMultiSelect = memo(MultiSelect);
+export { MemoizedMultiSelect as MultiSelect };

package/source/components/multiselect/types.ts

@@ -0,0 +1,14 @@
+interface ItemsProps {
+  value: string;
+  label: string;
+}
+
+export type MultiSelectProps = {
+  placeholder?: string;
+  items?: ItemsProps[] | string;
+  lazy?: boolean;
+  showSearch?: boolean;
+  onSelect?: any;
+  truncate?: boolean;
+  selectedItems?: string[];
+};