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

package/lib/components/Spinner.tsx

@@ -0,0 +1,25 @@
+export default function Spinner() {
+  return (
+    <div className="flex flex-col items-center justify-center align-middle h-full ">
+      <div role="status">
+        <svg
+          aria-hidden="true"
+          className="inline w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <span className="sr-only">Loading...</span>
+      </div>
+    </div>
+  );
+}

package/lib/components/SpinnerIcon.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { FaSpinner } from "react-icons/fa";
+
+type SpinnerIconProps = {
+  icon?: React.ReactNode;
+};
+
+const SpinnerIcon: React.FC<SpinnerIconProps> = ({ icon = <FaSpinner /> }) => {
+  return <div className="animate-spin">{icon}</div>;
+};
+
+export default SpinnerIcon;

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;