@addsign/moje-agenda-shared-lib 1.0.60 → 2.0.0

package/lib/components/datatable/DataTable.tsx

@@ -0,0 +1,442 @@
+import React, { useEffect, useState } from "react";
+
+import { Button, FormField, Spinner } from "../../main";
+import {
+  MdArrowBack,
+  MdArrowDownward,
+  MdArrowForward,
+  MdArrowUpward,
+  MdClose,
+  MdOutlineFilterAlt,
+  MdOutlineFilterAltOff,
+  MdSearch,
+} from "react-icons/md";
+
+export interface DataTableColumn<T> {
+  key: keyof T | "actions";
+  header: string;
+  render?: (item: T) => React.ReactNode;
+  actions?: DataTableAction<T>[];
+  filterType?: string;
+  classes?: string;
+  type?: "string" | "number" | "date";
+  filterOperator?: ">=" | "<=" | "==";
+}
+export interface DataTableAction<T> {
+  label: string;
+  onClick: (item: T) => void;
+  visible?: (item: T) => boolean;
+  icon?: React.ReactNode;
+}
+interface DataTableProps<T> {
+  items: T[];
+  columns: DataTableColumn<T | "actions">[];
+  itemsPerPage?: number;
+  title?: string;
+  subtitle?: string;
+  allowSearch?: boolean;
+  isLoading?: boolean;
+}
+
+type DataTableInternalItems = {
+  _isHighlighted?: boolean;
+};
+
+function DataTable<T extends DataTableInternalItems>({
+  items,
+  columns,
+  itemsPerPage = 10,
+  title,
+  subtitle,
+  allowSearch = true,
+  isLoading,
+}: DataTableProps<T>) {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [fulltextSearch, setFulltextSearch] = useState("");
+  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});
+  const [columnFilters, setColumnFilters] = useState<Record<string, string>>(
+    {}
+  );
+
+  const [showColFilters, setShowColFilters] = useState(false);
+
+  const [sortConfig, setSortConfig] = useState<{
+    key: keyof T | "actions";
+    direction: "ascending" | "descending" | null;
+  } | null>(null);
+
+  useEffect(() => {
+    const newFilterOptions: Record<string, any[]> = {};
+
+    columns.forEach((column) => {
+      if (column.filterType && items.length > 0) {
+        const uniqueOptions = new Set(
+          items.map((item) => item[column.key as keyof T])
+        );
+        // Convert Set to an array of { value, label } objects
+        let sortedOptions = Array.from(uniqueOptions).map((option) => ({
+          value: option,
+          label:
+            column.type === "date"
+              ? new Date(option as string)?.toLocaleDateString()
+              : option,
+        }));
+
+        // Sort the options array by label in ascending alphabetical order
+        if (column.type === "date") {
+          // Convert labels to timestamps and sort accordingly
+          sortedOptions = sortedOptions.sort((a, b) => {
+            const timestampA = new Date(a.value as string).getTime();
+            const timestampB = new Date(b.value as string).getTime();
+            return timestampA - timestampB;
+          });
+        } else {
+          // Sort alphabetically by label for non-date columns
+          sortedOptions = sortedOptions.sort((a, b) =>
+            (a.label as string)?.localeCompare(b.label as string)
+          );
+        }
+
+        // Add a default option if needed
+        newFilterOptions[column.key as string] = [
+          { value: "", label: "" },
+          ...sortedOptions,
+        ];
+      }
+    });
+
+    setFilterOptions(newFilterOptions);
+  }, [items, columns]);
+
+  const requestSort = (key: keyof T | "actions") => {
+    if (sortConfig?.key === key && sortConfig.direction !== null) {
+      setSortConfig({
+        key,
+        direction: sortConfig.direction === "ascending" ? "descending" : null,
+      });
+    } else {
+      setSortConfig({ key, direction: "ascending" });
+    }
+  };
+
+  const getSortIcon = (key: keyof T | "actions") => {
+    if (sortConfig?.key === key) {
+      return sortConfig.direction === "ascending" ? (
+        <MdArrowUpward fontSize="small" />
+      ) : sortConfig.direction === "descending" ? (
+        <MdArrowDownward fontSize="small" />
+      ) : (
+        <MdArrowUpward
+          fontSize="small"
+          className="text-gray-300 invisible group-hover:visible "
+        />
+      );
+    }
+    return (
+      <MdArrowUpward
+        fontSize="small"
+        className="text-gray-300 invisible group-hover:visible "
+      />
+    );
+  };
+
+  const sortedItems = sortConfig?.direction
+    ? [...items].sort((a, b) => {
+        const aValue = a[sortConfig.key as keyof T];
+        const bValue = b[sortConfig.key as keyof T];
+
+        // Check if values are Date objects
+        if (aValue instanceof Date && bValue instanceof Date) {
+          return sortConfig.direction === "ascending"
+            ? aValue.getTime() - bValue.getTime()
+            : bValue.getTime() - aValue.getTime();
+        }
+        if (typeof aValue === "number" && typeof bValue === "number") {
+          return sortConfig.direction === "ascending"
+            ? aValue - bValue
+            : bValue - aValue;
+        }
+        return sortConfig.direction === "ascending"
+          ? String(aValue).localeCompare(String(bValue))
+          : String(bValue).localeCompare(String(aValue));
+      })
+    : items;
+
+  // const searchableKeys = new Set(
+  //   columns.filter((col) => !col.actions).map((col) => col.key)
+  // );
+
+  const filteredItems = sortedItems.filter((item: any) => {
+    const textSearchMatch = fulltextSearch
+      ? columns.some((column) => {
+          const value = item[column.key];
+          return (
+            (typeof value === "string" || typeof value === "number") &&
+            value
+              .toString()
+              .toLowerCase()
+              .includes(fulltextSearch.toLowerCase())
+          );
+        })
+      : true;
+
+    const columnFiltersMatch = columns.every((column) => {
+      //   debugger;
+      const filterValue = columnFilters[column.key as string];
+      if (!filterValue) return true; // Ignore filter if 'None' is selected
+
+      const itemValue = item[column.key];
+      if ((column.type || typeof itemValue) === "string") {
+        if (column.filterOperator == ">=") {
+          return itemValue.toLowerCase() >= filterValue.toLowerCase();
+        } else if (column.filterOperator == "<=") {
+          return itemValue.toLowerCase() <= filterValue.toLowerCase();
+        }
+        if (column.filterType == "text") {
+          return itemValue.toLowerCase().includes(filterValue.toLowerCase());
+        } else {
+          return itemValue.toLowerCase() == filterValue.toLowerCase();
+        }
+      } else {
+        if (column.filterOperator == ">=") {
+          return itemValue >= filterValue;
+        } else if (column.filterOperator == "<=") {
+          return itemValue <= filterValue;
+        } else {
+          return itemValue == filterValue;
+        }
+      }
+    });
+
+    return textSearchMatch && columnFiltersMatch;
+  });
+
+  // Pagination logic
+  const indexOfLastItem = (currentPage + 1) * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem);
+
+  const nextPage = () => {
+    setCurrentPage(currentPage + 1);
+  };
+
+  const prevPage = () => {
+    setCurrentPage(currentPage - 1);
+  };
+  const handleSearchChanged = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >
+  ) => {
+    setFulltextSearch(e.target?.value);
+    setCurrentPage(0);
+  };
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredItems.length / itemsPerPage)
+  );
+
+  // Pagination display logic
+  const paginationDisplay = `Strana ${currentPage + 1} z ${totalPages}`;
+
+  const filterHandler = (key: keyof T, value: string) => {
+    setColumnFilters((prev) => ({ ...prev, [key]: value }));
+    setCurrentPage(0);
+  };
+
+  if (isLoading) return <Spinner />;
+  return (
+    <>
+      <div className="container  shadow-lg border border-gray-200 rounded-xl overflow-hidden ">
+        {(title || subtitle || allowSearch) && (
+          <div className="p-5 leading-9 flex ">
+            <div className="flex-grow">
+              {title && (
+                <h1 className="font-semibold text-xl leading-[42px] ">
+                  {title}
+                </h1>
+              )}
+              {subtitle && (
+                <p className="font-normal text-gray-600">{subtitle}</p>
+              )}
+            </div>
+            <div
+              className="flex items-center text-xl h-full p-3 mr-5 cursor-pointer text-gray-500 "
+              onClick={() => setShowColFilters(!showColFilters)}
+            >
+              {!showColFilters && <MdOutlineFilterAlt />}
+              {showColFilters && <MdOutlineFilterAltOff />}
+            </div>
+            {allowSearch && (
+              <div className="">
+                <FormField
+                  placeholder="Vyhledávání"
+                  name="search"
+                  onInputChange={handleSearchChanged}
+                  type="text"
+                  value={fulltextSearch}
+                >
+                  {" "}
+                  <div className=" text-gray-500 leading-5 flex items-center h-full">
+                    {!fulltextSearch && <MdSearch></MdSearch>}
+                    {fulltextSearch && (
+                      <MdClose onClick={() => setFulltextSearch("")}></MdClose>
+                    )}
+                  </div>
+                </FormField>
+              </div>
+            )}
+          </div>
+        )}
+        <div className="overflow-x-auto">
+          <table className="w-full leading-normal">
+            <thead>
+              {showColFilters &&
+                columns.findIndex((it) => it.filterType) > -1 && (
+                  <tr>
+                    {columns.map(({ key, header, filterType }) => (
+                      <th
+                        key={String(key) + "_filter"}
+                        //  className="cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider"
+                        className={` font-medium cursor-pointer !leading-9 text-xs text-left pl-5 pb-5 text-gray-600  ${
+                          !title && !subtitle ? "border-t-0" : ""
+                        }`}
+                      >
+                        {filterType && (
+                          <FormField
+                            label={header}
+                            name={String(key) + "_filter"}
+                            onInputChange={(e) =>
+                              filterHandler(key as keyof T, e.target.value)
+                            }
+                            type={filterType}
+                            options={filterOptions[String(key)] || []}
+                            value={columnFilters[String(key)]}
+                            clearable
+                          ></FormField>
+                        )}
+                      </th>
+                    ))}
+                  </tr>
+                )}
+              <tr>
+                {columns.map(({ key, header, actions }) => (
+                  <th
+                    key={String(key)}
+                    //  className="cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider"
+                    className={`group font-medium cursor-pointer !leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${
+                      !title && !subtitle ? "border-t-0" : ""
+                    }`}
+                    onClick={() => requestSort(key)}
+                  >
+                    <span className="inline-flex items-center gap-2">
+                      {header} {!actions ? getSortIcon(key) : ""}
+                    </span>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+
+            <tbody>
+              {currentItems.map((item, rowIndex) => (
+                <tr
+                  key={rowIndex}
+                  className={`${
+                    item._isHighlighted ? " bg-gray-200  " : " "
+                  } hover:bg-gray-50  border-gray-200 border-b text-sm `}
+                >
+                  {columns.map(({ render, actions, classes }, colIndex) => (
+                    <td
+                      key={`${rowIndex}-${colIndex}`}
+                      className={`px-5 py-2
+                   ${
+                     colIndex == 0
+                       ? " font-medium text-gray-900"
+                       : " text-gray-700"
+                   } ${classes}`}
+                    >
+                      {render ? render(item) : ""}
+                      {actions &&
+                        actions
+                          .filter((it) => {
+                            if (it.visible) {
+                              return it.visible(item);
+                            } else true;
+                          })
+                          .map((action, actionIndex) => (
+                            <div
+                              key={`${rowIndex}-${colIndex}-${actionIndex}`}
+                              className="inline-flex align-middle"
+                            >
+                              {action.icon && (
+                                <Button
+                                  variant="icon"
+                                  onClick={() => action.onClick(item)}
+                                >
+                                  {" "}
+                                  {action.icon}
+                                </Button>
+                              )}
+                              {!action.icon && (
+                                <Button
+                                  variant="transparent"
+                                  onClick={() => action.onClick(item)}
+                                >
+                                  {" "}
+                                  {action.label}
+                                </Button>
+                              )}
+                            </div>
+                          ))}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+              {currentItems.length == 0 && (
+                <tr key="tr-nodata   ">
+                  <td
+                    key="td-nodata"
+                    className="px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle"
+                    colSpan={columns.length}
+                  >
+                    Žádná data
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+        <div className="w-full p-5 grid grid-cols-3">
+          <div className="text-left items-start justify-start">
+            {currentPage !== 0 && (
+              <Button
+                variant="secondary"
+                onClick={prevPage}
+                className="flex items-center float-left"
+              >
+                <MdArrowBack className="mr-1.5" /> Předchozí
+              </Button>
+            )}
+          </div>
+          <div className=" text-center text-xs text-gray-800">
+            {paginationDisplay} {/* Updated to use dynamic page numbers */}
+          </div>
+          <div className="text-right items-end justify-end">
+            {indexOfLastItem < filteredItems.length && (
+              <Button
+                variant="secondary"
+                onClick={nextPage}
+                className="flex items-center float-right"
+              >
+                Následující <MdArrowForward className="ml-2" size={20} />
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DataTable;